Phaserで、HTML5のオリジナルゲームを作ってみた

Programing > Phaser > オリジナル

Getaway (ゲッタウェイ - 逃亡) †

遊び方 †

強制横スクロール型ゲーム。

クリックかタップでジャンプしながら、星を集めていきます。

• デモ(PC/スマホ版) ＞ http://www.catch.jp/program/phaser/getaway/index.html
• ソースコード > https://github.com/ycatch/games-phaser-getaway

利用条件 †

Copyright 2014 Yutaka Kachi released under MIT license.

不具合など見つけたら、Twitter @y_catchへ連絡いただけると助かります。

ベース †

• Phaserのゲームを改良してみた

素材 †

ドット絵 †

• 高機能ドット絵エディタ EDGE｜TAKABO SOFT

こんな感じで描いてみた。

タイルマップ †

• Tiled Map Editor

ドット絵を組み合わせて、ステージのマップを作った

• ステージは、タイルレイヤー。星は、オブジェクトレイヤー。
• これを、jsonファイルでエクスポートする。 > Tiledで作成したタイルマップjsonファイルをphaser.jsに読み込む方法 / catch.jp memo

コード †

ステージ †

• Phaserでロードすると、番号がひとつずれる。そこで、ロードするタイルセットは、先頭に空白を追加している。

• jsonタイルマップのコードは、以下を参考にした

• Example > tilemaps > JSON map collide
• http://examples.phaser.io/_site/view_full.html?d=tilemaps&f=map+collide.js&t=map%20collide
• Example > tilemaps > JSON map bounce
• http://examples.phaser.io/_site/view_full.html?d=tilemaps&f=map+bounce.js&t=map%20bounce

• ジャンプで取る星のコードは、以下を参考にした
  • Example > tilemaps > create from object
  • http://examples.phaser.io/_site/view_full.html?d=tilemaps&f=create+from+objects.js&t=create%20from%20objects

ステージのスクロール †

• ステージのスクロールは、camera機能で実現している
• camera機能は、ステージの一部だけを表示する
  • Example > camera > basic follow
  • http://examples.phaser.io/_site/view_full.html?d=camera&f=basic+follow.js&t=basic%20follow
• で、このcameraの位置を自動的に横移動して、スクロールを表現している

背景 †

• ゲーム画面と同じ大きさの画像を使っている。これは、ステージ画像より、ずっと小さい。
• 左右をつないだときに、切れ目なくつながるようにしてある(シームレス)
• それをcameraに合わせて移動
• 同時に、TileSprite機能でスライドさせている。スライドした分は、反対側に表示される。
  • Example > tiling sprite > tilingsprite
  • http://examples.phaser.io/_site/view_full.html?d=tile%20sprites&f=tiling+sprite.js&t=tiling%20sprite