Submarine of ESCAPE
サイトに気軽に埋め込んで遊べるゲーム作り
- 古賀旭
- Keywords:デジタルゲーム,Web,HTML5,JavaScript,Processing,p5js
概要
これは何?
Web上で動作するゲームを制作し、Flashの代替となる技術を模索すると共に、多くの人にプログラムに関心を持ってもらう。
背景と目的
Adobe社のFlashの技術が廃れた現在、Webでゲームを遊ぶ文化すら廃れてきている。今回はWebを中心にどのようなゲーム開発ができるか探る。
コンセプト
Webブラウザに埋め込むことで簡単に遊べるゲームを作り、新しいゲーム文化を模索する
成果物の仕様
- p5js, Open ProcessingによるURLの共有
- TITLE:Submarine to ESCAPE (Open Processingで制作)
- TITLE:Submarine to ESCAPE (Open Processingで制作)
メンバー
個人
制作ツール
Open Processing, p5js,
プロジェクトの期間
2021.09.15 - 2021.12.22
まとめ
- ゲームを開発するにあたって重要なのは主観的にゲームを遊べるユーザビリティ性が大切だと感じた。
- 今回はPCを使って遊ぶことをベースにして制作したが、広くこの技術を普及させるには、スマートフォンでの完全互換を目指して制作するべきだと感じた
調査
現状調査
- ブラウザゲームの需要は年々上昇傾向にあり、多種多様なプラットフォームを通じて遊ばれているが、個人で開発・公開していたFlashのようなゲームは減って来ている。
- 大手ゲーム企業では、ソーシャルゲームなどスマホ用ゲームが流行している中で、”軽いゲームにも自用が見込まれる”と考えている。
先行事例
技法・技術情報
プロジェクト管理
スケジュール
ToDo
進捗記録
2021.12.08
- 「Submarine of ESCAPE」のタイトル画面を変更
- タイトル画面の背景をイメージ画像表示からデモプレイ画面に変更
- 終了ボタンの廃止
- 終了後、何もできなくなるバグが発生する為、廃止。
- 終了後、何もできなくなるバグが発生する為、廃止。
2021.12.06
- 「Submarine of ESCAPE」にタイトル画面を追加調整版
- タイトル画面に開始ボタン、操作方法ボタン、終了ボタンを追加
- タイトル画面に開始ボタン、操作方法ボタン、終了ボタンを追加
2021.11.29
- 「Submarine of ESCAPE」をOpen Processing向けに最適化
- ライブラリp5.play.jsの記述をp5js方式からOpen Processing方式に変更
- ライブラリSocket.IOを使用した双方向通信技術を試験的に導入 ※公開版では反映されていません。
- 「COLORED CITY」の開発を停止
- 「COLORED CITY」はOpen Processingの機能研究として活用していく為、ゲームとしての開発を停止します。
- 「COLORED CITY」はOpen Processingの機能研究として活用していく為、ゲームとしての開発を停止します。
2021.11.10
- ゲームに搭載するリアルタイム通信方式の確立
- 「Socket.IO」を実行する為、「Node.js」をゲーム内ライブラリに搭載することでリアルタイム通信を実現させる。現段階では、「Node.js」を搭載して開発したゲームは「COLORED CITY」のみの為、「Submarine of ESCAPE」をリアルタイム通信に対応させる為、ゲーム内ライブラリの書式をp5js方式からOpen Processing方式に変更する。
- 「Socket.IO」を実行する為、「Node.js」をゲーム内ライブラリに搭載することでリアルタイム通信を実現させる。現段階では、「Node.js」を搭載して開発したゲームは「COLORED CITY」のみの為、「Submarine of ESCAPE」をリアルタイム通信に対応させる為、ゲーム内ライブラリの書式をp5js方式からOpen Processing方式に変更する。
2021.10.27
- 制作したゲーム「Submarine to ESCAPE」「COLORED CITY」のジャケットを制作・掲載
2021.10.19
- Open Processingで制作したゲーム「COLORED CITY」を改修
- 変更点
- ネット上に共有されるソケットを設定、画面をドラッグした際のドロー情報が常に他の閲覧者から見えるように改変。
- この技術を使い、Submarine to ESCAPEのマルチプレイ化を目指す。その為、Open Processingとp5jsの互換性を調査する。
- 変更点
参考
2021.10.05
- Open Processingで制作したゲーム「COLORED CITY」のベータ版完成
2021.10.01
ゲームの制作
- Open Processingを用いてゲーム制作を開始
2021.09.29
ゲームの公開
- 情報デザイン研究Ⅰで制作したサイトを元にゲームのリンクを貼り付ける。(wixの仕様を再確認する必要あり。)
2021.09.28
テーマ変更:ゲームを作る
- ゲーム作り全体を研究するため、プラットフォームに縛られない研究をする。
- p5jsで制作したゲームのベータ版を公開
2021.09.22
制作
- ゲーム制作において制作に必要な知識とツールの把握
参考
2021.09.15
テーマ設定:Web上で動作するゲームを開発する。
- p5js
- Processing
- 以上の二つを用いてゲーム制作を行なっていく。(当面目標)
- 以上の二つを用いてゲーム制作を行なっていく。(当面目標)