1万円(+インターネット)ではじめるゲーム開発用リポジトリー。Phaser3用です。

まだ作業中です。

Lubuntuのインストールが済んで起動したら、以下を実行します。

• 左下のメニューをクリック > 実行
• lxte と入力して、 LXTerminal を起動
• 以下のコマンドを実行

cd ~
wget -N --no-check-certificate https://am1tanaka.github.io/10k-gamedev/install-gdev
chmod 700 install-gdev
./install-gdev

• 開始すると、すぐに Lubuntu の管理者パスワードの入力が要求されるので入力してください

Chromeの設定によっては、インストールした後に以下のような警告が大量に表示される場合があります。

W: ターゲット Packages (???/???/???) は /etc/apt/sources.list.d/google-chrome.list:3 と /etc/apt/sources.list.d/google.list:1 で複数回設定されています

以下で解消できます。

• LXTerminalを起動
• sudo atom /etc/apt/sources.list.d/google-chrome.listを実行して、設定ファイルをAtomで開く
• パスワードの要求があったら入力して[Enter]キー
• 以下の通り、設定の行頭に#を入力してコメントアウト

# deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main

• [Ctrl]+[S]キーで保存
• Atomを閉じる

サーバーの応答が遅く、時間切れになっている可能性があります。LXTerminalで以下を実行してください。

echo 'Acquire::Queue-Mode "access";' | sudo tee /etc/apt/apt.conf.d/75download

以上で、Chromeのインストールに関する不具合以外は解消されると思います。Chromeの更新は、Chrome自身が行うのでそれに任せれば良いかと思います。

Phaserのサンプルはインストール済みです。LXTerminalを起動して、以下を実行して、ローカルサーバーを起動します。

cd ~/phaser/phaser-examples/examples
http-server

サーバーが起動したら、LXTerminalは待機状態になります。Webブラウザーを開いて、 http://0.0.0.0:8080/sideview.html を開きます。画面の左にサンプルの一覧が表示されます。サンプルは800以上もあるので、下にスクロールさせてリストを見てみましょう。動かしてみたいサンプルをクリックすると、画面の右で実行されます。

一部、インターネットが繋がっていないと動かないサンプルがあるようですが、多くのサンプルはオフラインで見ることができます。色々と試してください。

サーバーを起動していた LXTerminal に切り替えて、[Ctrl]+[C]キーを押します。以下のようにプロンプトが表示されたらサーバーが停止しましたので、不要であれば LXTerminal を閉じて構いません。

非常にシンプルなPhaserのプロジェクトを作成して、自分でコーディングができることを確認します。

LXTerminal で以下のコマンドを実行することで、新しいプロジェクトフォルダーを作成します。ここでは最初のプロジェクトということで first という名前のプロジェクトを作成します。

cd ~/phaser
./phaser-new-smpl first

プロジェクトが作成できたら、以下のコマンドで、作成したfirstフォルダーに移動します。

cd first

作成したプロジェクトの動作をWebブラウザーで確認できるように、サーバーを起動します。

npm run serve

サーバーが起動します。LXTerminalはサーバーに専念するので入力は受け付けなくなります。

Webブラウザーを起動して、 http://0.0.0.0:8080 を開いてください。黒い画面の左上に星が表示されれば成功です。

新しいLXTerminalを開くために、先ほどのLXTerminal上で右クリックして、[新しいウィンドウ]をクリックしてください。

これで、新しいLXTerminalが、先ほどと同じフォルダーを開いた状態で起動できます。以下のコマンドを入力して、Atomエディターを起動します。

atom .

しばらく待つと Atom エディターが、 first フォルダーを開いた状態で開きます。

プログラムを書き換えて動きを確認してみましょう。Atomの左の一覧から、_site>src フォルダーを開いてください。以下の5つのプログラムが確認できます。

• boot.js  - Phaserを起動させるスクリプト。当面使わない
• create.js  - キャラクターなどをゲームに登録する場所
• preload.js  - ゲームに必要なファイルを登録する場所
• render.js  - デバッグ用の文字を表示したり、直接画面を描画する場所
• update.js  - 画面が更新されるたびに呼び出される場所。ゲームを動かす主要な処理を書く場所

処理は、以下の順番で呼び出されます。

1. boot.js
2. preload.js
3. create.js
4. update.js
5. render.js
6. 画面が更新されたら、4から繰り返し

ここまで。

Phaserで開発を始めるスタート地点として、Phaser Webpack Loaderというパッケージを利用します。これを複製したものを改造していきましょう。

複製するためのスクリプトは準備済みですので、

開発を始める時の手順です。

cd ~/phaser/プロジェクトフォルダー名
atom .
npm run dev:serve

以上でビルドが実行されて、待っていると自動的にブラウザーが起動して、ライブプレビューが始まります。

最初はWEBGLが有効なので、AUTOに変更します。

PhaserをWebpackでビルドするパッケージPhaser Webpack Loaderを組み込みます。 ひな型に丁度良いボイラープレートがあるので、これを利用します。

• https://github.com/goldfire/phaser-boilerplate

cd ~/phaser
git clone https://github.com/goldfire/phaser-boilerplate.git プロジェクトフォルダー名
cd プロジェクトフォルダー名
npm i
npm i tern-phaser

似たもので https://github.com/mattcolman/phaser-manifest-loader があったが、圧縮テクスチャへの対応、Retina対応、サンプルプログラムの出来から、phaser-webpack-loaderを採用しました。

• 画面サイズを固定
• タイトル画面、ゲーム、ゲームオーバーを設定
• 岩を出現させて動かす。跳ね返るごとにスピードアップ
• 左右キーで旋回、上下キーで加速、減速
• どれだけ長く生きられるか
• BGMと効果音の実装

https://goo.gl/SZ8WXk

これをwgetでダウンロードするには？