imog

主にUnityとかの事を書いています

Phaserメモ

プログラミング

PhaserというWEB向けのゲームエンジンがあるので最近触っているので忘れないように殴り書き

phaser.io

ブラウザゲーもUnityでなんとかしようと思っていたのだけど、WebPlayerはもう使えないしWebGL出力はそれなりのサイズになってしまうのでまだまだ軽量とは言い難い。 ということで最近結構賑わっているという噂のPhaserで作ってみようかと考えた。

ついでにtypescriptも始めて見た。jsすらあんまり書けないけど。

メモ

日本語の資料はほとんどない。唯一下記サイトがわかりやすいかなという印象

Phaser入門:HTML5/Javascript 2Dゲームエンジン - catch.jp-wiki

ただ、異常なまでにサンプルコードが充実しているのでそれをひたすら読み解くべし。 phaser.io

シーン設計

Unityなどにおけるシーンの役割は、Phaserでは State というものが担う。 preload メソッド内でリソース系のロード、 create でそのstate内のデータの初期設定をしてくれという感じ。

サンプル見た感じ、Stateの設計は下記のパターンが多い

Boot Preloader Hoge Fuga

Hoge,Fugaは実際に遊ぶであろうStateの部分。MainとかGameOverとか。 まずはBootStateを読み込ませて、create 内でゲーム上で使用するstateを全部読み込む係になっている。PreloaderとかHogeとかFugaなど全部読み込む。完了後にPreloderに遷移する PreloaderStateの preloader で画像、音声などのアセットを読み込む。

複数のサンプルでBootとPreloaderがいたから、これはPhaserのお作法っぽい。

アニメーション

xmlだとかspritesheetとか幾つかあったけど、jsonにした。

流れは以下

  1. 複数のスプライトをまとめた画像を用意
  2. 各スプライトの情報を保持するjsonファイルを用意

  3. load.atlasJSONHash で画像とjsonをマッピング

  4. 複数のスプライトをまとめたatlasを用意

こんなやつ https://i.gyazo.com/d6ea4977a0e5868708b1227d60c23b99.png

上から順番に、上、右上、右、右下、下、左下、左、左上の８パターンの歩行グラフィックをそれぞれ４枚持ってる。

  • 各スプライトの情報を保持するjsonファイルを用意

texturepackerを使うと、画像をまとめるのとPhaser用Jsonファイル出力の両方ができる

www.codeandweb.com

使い方はこちら

https://www.codeandweb.com/blog/2014/12/17/creating-spritesheets-for-phaser-with-texturepacker

今回もそれで吐こうとしたが、TexturePackerですでに出来上がってるatlasに対してスプライトの情報を与えるやりかたがわからなかった。バラバラの画像をペタペタ貼っていくときはスプライトの情報が追加されていくけど、既存の１ファイルだと１つのスプライトとみなされてしまい、それの分割方法がわからなかった。

なのでjson生成スクリプト書いた https://gist.github.com/adarapata/c96048cd99f6ef7d9537 自分の持ってる画像はほぼほぼ上記のパターンなのでこれで生産できるようになった。

こんな感じ

this.game.load.atlasJSONHash("iku", "assets/images/chara_iku.png", "assets/atlases/iku.json");

アニメーションは、コード内で実装する必要がある。下記は上方向歩行モーションの設定

iku.animations.add("walk_up", ["up_0","up_1","up_2","up_3"], 10, true, false);
iku.animations.play("walk_up");

単純に配列でスプライト名を指定していけばその順番で再生してくれるみたい。 スプライト名のルールを決めておけば同じフォーマットで複数キャラ対応できそう。 UnityでのAnimatorみたいな動きはできるかもしれない。

ちなみにチュートリアルでローカルサーバ立てるためにXAMPP入れようみたいなこと書いてるけど、多分sinatraが一番楽だと思う。