ブラウザで動くゲームの開発環境を公開してみる
先日作ったブラウザで動くゲームをサイトに仕立ててみた。
http://shield-games.ccsp.mydns.jp/entrance
・・・仕立ててみたものの、ゲームを充実させて人が来てくれるようになるまで大分掛かりそうなこととブラウザ版の Unity の趨勢に鑑みると、このままでは幾ばくもなく諸々の下に埋もれてしまいそうなので、今のうちに開発環境を公開するというアクションを起こしてみることにした。
ニッチな需要しかないだろうなとは思いつつも、ブラウザで動くゲームを作りたい人に拾ってもらえたらいいなと思う。
どんな人向けか
- ブラウザで動くゲームを作りたい人で昨今流行りの3Dとか興味無い人
- フレームワークに縛られたくない人、ゲームのコードはすべて自分の制御下に置きたい人
- 特にそういうこだわりは無く単にゲームを作りたい・学びたいと考えている人は Unity や Unreal Engine をやるべき！
特徴・注意
ソースコードは基本的にプレーン JavaScript で記述されている。本開発環境固有の記述を含んでいるが、大したものではないのでプレーン JavaScript が扱えれば問題無い。
ソースコードとリソースは変換ツール (JSJoin.exe) を使って html ファイルに変換し、実行する。コンパイラ言語のような使い勝手である。(JSJoinは後述する開発環境に同梱している)
フレームワークは使用していない。勝手に自動生成されるおまじないコードのようなものは存在せず、出力 html の内容はすべて開発者の制御下にあると言って良い。⇐ ここが売り
10 年くらい前に C (C++) で記述したゲームがあって、それを C# へ移植したものを JavaScript に横展開したものなので、所謂歴史的経緯による不条理なプログラム構造を散見する。
また私自身が JavaScript の経験が少なく C を愛用していた期間が長いため、C っぽい記述になっている。
具体的には、プログラム全体はグローバルスコープ・ファイルスコープの関数と変数の集合によって構成され、連想配列は C の struct のように扱っている。
もしかすると JavaScript は知らないけど C ならよく使っているという人に取っ付きやすいかもしれない。
IDE は使っていない。エクスプローラと秀丸のみ。もちろんエディタは何を使っても良いけど tags を使うので秀丸だとより良い。
開発環境構築
とりあえず開発環境の構築手順のみ示す。
プログラムの説明はいずれ・・・
手順といっても以下のファイルをダウンロードして、ローカルディスク上の任意の場所に展開するだけである。
http://ornithopter.ccsp.mydns.jp/HPStore/Hatena/20220924_Develop
⇒ GameJS.zip をダウンロードする。
GameJS.zip の中身 (アーカイブ直下のフォルダ構成) は以下のとおり
| フォルダ | 説明 | 実際に動くものへのリンク |
|---|---|---|
| bin | 変換ツール置き場 | |
| Cirno | ゲームその1 横スクロール・2Dアクションゲーム | http://ornithopter.ccsp.mydns.jp/HPStore/Hatena/20220924_GameJS/Cirno |
| Doremy | ゲームその2 ロックマン風の2Dアクションゲーム | http://ornithopter.ccsp.mydns.jp/HPStore/Hatena/20220924_GameJS/Doremy |
| Marisa | ゲームその3 トップビューの2Dアクションゲーム | http://ornithopter.ccsp.mydns.jp/HPStore/Hatena/20220924_GameJS/Marisa |
| Shooting | ゲームその4 縦スクロール・2Dシューティングゲーム | http://ornithopter.ccsp.mydns.jp/HPStore/Hatena/20220924_GameJS/Shooting |
どのようなゲームかは実際に動くものへのリンクでご確認下さい。
開発環境のビルドを行えば、実際に動くものへのリンクにあるものと同じもの(※)を生成できます。
※ フリー素材の画像・音楽はアーカイブに同梱すると再配布となって利用規約に抵触するため、ダミーの画像・無音の音声ファイルに置き換えています。各ゲームのリソースフォルダ ( res フォルダ) の配下は取得先別にフォルダ分けされていて、その中の _source.txt というファイルに取得先が書いてあります。お手数ですが、情報を元にデータの再取得をお願いします。ちなみに再取得しなくても (ダミー画像＆無音にはなってしまいますが) ビルドはできます。
ビルド手順
デバッグ用
各ゲームフォルダの下にある Debug.bat を実行する。(実行時のカレントディレクトリは Debug.bat と同じ場所であること)
ビルドに成功すると out フォルダ直下に index.html が生成される。
index.html を開くことでゲームを遊ぶことができる。
(リソースフォルダ内のファイルに直リンクしていることに注意すること)
リリース用
各ゲームフォルダの下にある Release.bat を実行する。(実行時のカレントディレクトリは Release.bat と同じ場所であること)
ビルドに成功すると out フォルダ直下に index.html と _res フォルダが生成される。
index.html を開くことでゲームを遊ぶことができる。
(どこかへ移動したりサーバーにアップロードするときは _res フォルダも必要になるので注意すること)
捕捉
GitHubに置いたソースなど
各ゲームについては上記 GameJS.zip に収録しているものと同じなので、何なら GitHub からダウンロードしても可。却って面倒くさいかもだけど。
変換ツール (JSJoin) のみ落としたい場合：
http://ornithopter.ccsp.mydns.jp/HPStore/Hatena/20220924_JSJoin
⇒ JSJoin.zip をダウンロードする。
