LogoMark.png

古賀旭/情報デザイン研究II のバックアップの現在との差分(No.5)


#author("2021-09-29T15:27:37+09:00","default:inoue.ko","inoue.ko")
*ゲームを作成する
ゲームの可能性を考える 
#image(play01.png,center)
&color(red){※現状のゲームβ版};
#author("2021-12-08T15:26:40+09:00","default:member","member")
*Submarine of ESCAPE
サイトに気軽に埋め込んで遊べるゲーム作り 
#iframe(https://openprocessing.org/sketch/1373331/embed/)
//[[&image(SUBMARINE.jpg);>https://openprocessing.org/sketch/1373331/embed/]]
//[[&image(COLOREDCITY.jpg);>https://openprocessing.org/sketch/1296481/embed/]]
//&color(red){※現状のゲームβ版};
-古賀旭
-'''Keywords:デジタルゲーム,Web,HTML5,JavaScript,Processing,p5js'''
-[[制作ゲームβ版>https://preview.p5js.org/k19as012.socialdesign/present/ajgEa1fu6]]

#iframe(https://preview.p5js.org/k19as012.socialdesign/present/ajgEa1fu6/)

//-[[制作ゲームβ版>https://preview.p5js.org/k19as012.socialdesign/present/ajgEa1fu6]]
~
~


**概要
***これは何?
ゲームを制作し、多くの人にプログラムに関心を持ってもらう。
Web上で動作するゲームを制作し、Flashの代替となる技術を模索すると共に、多くの人にプログラムに関心を持ってもらう。
//&color(red){これは何か・・を簡潔に};
~

***背景と目的
Adobe社のFlashの技術が廃れた現在、Webでゲームを遊ぶ文化すら廃れてきている。今回はWebを中心にどのようなゲーム開発ができるか探る。
//&color(red){プロジェクトの背景と目的};
~

***コンセプト
Webブラウザに埋め込むことで簡単に遊べるゲームを作り、新しいゲーム文化を模索する
//&color(red){基本的な考え方、枠組み、視点など};
~

***成果物の仕様
-p5js, Open ProcessingによるURLの共有
--TITLE:Submarine to ESCAPE (Open Processingで制作)
#iframe(https://openprocessing.org/sketch/1373331/embed/)
//[[&image(SUBMARINE.jpg);>https://openprocessing.org/sketch/1373331/embed/]]
//--TITLE:Submarine to ESCAPE (p5jsで制作)開発停止
//[[&image(SUBMARINE.jpg);>https://preview.p5js.org/k19as012.socialdesign/present/ajgEa1fu6/]]
//#iframe(https://preview.p5js.org/k19as012.socialdesign/present/ajgEa1fu6/)
//&color(red){※Mac版Chromeでは動作確認できませんでした。};
~
//--TITLE:COLORED CITY (Open Processingで制作)&color(red){※開発停止};
//[[&image(COLOREDCITY.jpg);>https://openprocessing.org/sketch/1296481/embed/]]
//#iframe(https://openprocessing.org/sketch/1296481/embed/)
//&color(red){環境による変化は無し};

~


//&color(red){&small(成果物の形式・サイズ・時間尺等);};
~

***メンバー
個人
//&color(red){共同プロジェクトの場合のみ|メンバーと役割分担を明記};
~

***制作ツール
Processing, p5js, 
Open Processing, p5js, 
//&color(red){使用するツール|ハードウエア・ソフトウエア};
~

***プロジェクトの期間
2021.09.15 - 2021.12.01
2021.09.15 - 2021.12.22
//&color(red){プロジェクトの期間|20XX.XX.XX - 20XX.XX.XX };
~

***まとめ
//&color(red){プロジェクトが完結したら「まとめ」を記載して下さい。};
-ゲームを開発するにあたって重要なのは主観的にゲームを遊べるユーザビリティ性が大切だと感じた。
-今回はPCを使って遊ぶことをベースにして制作したが、広くこの技術を普及させるには、スマートフォンでの完全互換を目指して制作するべきだと感じた
~
~


**調査

***現状調査
-ブラウザゲームの需要は年々上昇傾向にあり、多種多様なプラットフォームを通じて遊ばれているが、個人で開発・公開していたFlashのようなゲームは減って来ている。
--[[ブラウザゲームの市場規模、2023年には92億8500万米ドルに到達予測 ロックダウン中の米国では、インターネットゲームのトラフィックが75%増加>https://www.value-press.com/pressrelease/264595#:~:text=%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E3%82%B2%E3%83%BC%E3%83%A0%E3%81%AE%E5%B8%82%E5%A0%B4%E8%A6%8F%E6%A8%A1%E3%81%AF%E3%80%812015%E5%B9%B4%E3%81%8B%E3%82%89CAGR10,%E3%81%99%E3%82%8B%E3%81%A8%E4%BA%88%E6%B8%AC%E3%81%95%E3%82%8C%E3%81%A6%E3%81%84%E3%81%BE%E3%81%99%E3%80%82]]
-大手ゲーム企業では、ソーシャルゲームなどスマホ用ゲームが流行している中で、”軽いゲームにも自用が見込まれる”と考えている。
--[[「BXD」が狙うHTML5活用ブラウザゲームの需要--ファミスタ、アイマス新作を投入>https://japan.cnet.com/article/35101750/]]
//&color(red){プロジェクトのテーマに関わる社会の現状と問題の洗い出し};
~

***先行事例
-[[Snake game>https://p5js.org/examples/interaction-snake-game.html]]
-[[Open Processing Games>https://openprocessing.org/curation/25/]]

//&color(red){プロジェクトのテーマに該当する先行事例の紹介、傾向分析など};
~

***技法・技術情報
//&color(red){プロジェクトの遂行に必要な技法・技術に関する調査};
--[[Open Processing>https://openprocessing.org/]]
--[[p5js>https://p5js.org/]]

~
~

**プロジェクト管理

***スケジュール
[[Notion>https://remarkable-pearl-2b9.notion.site/d38f76447aaa43d597f13c69959068aa]]
//&color(red){計画的な遂行のために、進行管理表を作成してリンクして下さい。};
~

***ToDo
//&color(red){やるべきこと(タスク)を箇条書きにします。};
//&color(red){完了後は「%%取り消し線%%」あるいは「// コメントアウト」」};


//***NotToDo
//&color(red){やらないこと:何をするかではなく「何をしないか」を考える};
//&color(red){例:10人以上の会議には出ない。苦手なことは誰かに頼む・・};

~
~

#hr
CENTER:''進捗記録''
//&color(red){最新の情報を一番上に記載して下さい(古い記事が下へ沈む)。};
#hr
~
~

**2021.12.08
-「Submarine of ESCAPE」のタイトル画面を変更
--タイトル画面の背景をイメージ画像表示からデモプレイ画面に変更
--終了ボタンの廃止
---終了後、何もできなくなるバグが発生する為、廃止。
~
~
**2021.12.06
-「Submarine of ESCAPE」にタイトル画面を追加&color(red){調整版};
--タイトル画面に開始ボタン、操作方法ボタン、終了ボタンを追加
~
~
**2021.11.29
-「Submarine of ESCAPE」をOpen Processing向けに最適化
--ライブラリp5.play.jsの記述をp5js方式からOpen Processing方式に変更
--ライブラリSocket.IOを使用した双方向通信技術を試験的に導入 &color(red){※公開版では反映されていません。};
-「COLORED CITY」の開発を停止
--「COLORED CITY」はOpen Processingの機能研究として活用していく為、ゲームとしての開発を停止します。
~
~
**2021.11.10
-ゲームに搭載するリアルタイム通信方式の確立
--「Socket.IO」を実行する為、「Node.js」をゲーム内ライブラリに搭載することでリアルタイム通信を実現させる。現段階では、「Node.js」を搭載して開発したゲームは「COLORED CITY」のみの為、「Submarine of ESCAPE」をリアルタイム通信に対応させる為、ゲーム内ライブラリの書式をp5js方式からOpen Processing方式に変更する。
~
~
**2021.10.27
-制作したゲーム「[[Submarine to ESCAPE>https://preview.p5js.org/k19as012.socialdesign/present/ajgEa1fu6]]」「[[COLORED CITY>https://openprocessing.org/sketch/1296481/embed/]]」のジャケットを制作・掲載
~
~
**2021.10.19
-Open Processingで制作したゲーム[[「COLORED CITY」>https://openprocessing.org/sketch/1296481/embed/]]を改修
--変更点
---ネット上に共有されるソケットを設定、画面をドラッグした際のドロー情報が常に他の閲覧者から見えるように改変。
---この技術を使い、[[Submarine to ESCAPE>https://preview.p5js.org/k19as012.socialdesign/present/ajgEa1fu6]]のマルチプレイ化を目指す。その為、Open Processingとp5jsの互換性を調査する。
***参考
--[[OpenProcessingとp5.jsでお手軽Socket.io体験>https://qiita.com/mayoneko/items/4cd19e2c839ebc285b30]]
--[[Easy Socket.io experience OpenProcessing and p5.js>https://titanwolf.org/Network/Articles/Article?AID=4770d8b1-501f-4398-abf9-f081d6e5c283]]
&color(red){広告注意};
~
~
**2021.10.05
-Open Processingで制作したゲーム[[「COLORED CITY」>https://openprocessing.org/sketch/1296481/embed/]]のベータ版完成
~
~
**2021.10.01
***ゲームの制作
-Open Processingを用いてゲーム制作を開始
~
~
**2021.09.29
***ゲームの公開
-情報デザイン研究Ⅰで制作したサイトを元にゲームのリンクを貼り付ける。(wixの仕様を再確認する必要あり。)
~
~
**2021.09.28
***テーマ変更:ゲームを作る
-ゲーム作り全体を研究するため、プラットフォームに縛られない研究をする。
-p5jsで制作したゲームのベータ版を公開
--[[Return to COUNTRY>https://preview.p5js.org/k19as012.socialdesign/present/ajgEa1fu6]]
--[[Submarine to ESCAPE>https://preview.p5js.org/k19as012.socialdesign/present/ajgEa1fu6]]
~
~
**2021.09.22
***制作
-ゲーム制作において制作に必要な知識とツールの把握
~
***参考
-[[p5.js でゲーム制作>https://fal-works.github.io/make-games-with-p5js/]]
-[[p5.jsでミニゲーム「メテオロイド」を作ってみた>https://infosmith.biz/blog/it/p5js-game-meteoroids]]
-[[Snake game>https://p5js.org/examples/interaction-snake-game.html]]
~~
-[[Time Port>https://openprocessing.org/sketch/1376656/embed/]]
~
~
**2021.09.15
***テーマ設定:Web上で動作するゲームを開発する。
-[[p5js>https://p5js.org/]]
-[[Processing>https://openprocessing.org/]]
--以上の二つを用いてゲーム制作を行なっていく。(当面目標)
~
~



~