[[Programing]] > [[Phaser]] > オリジナル
#title(Phaserで、HTML5のオリジナルゲームを作ってみた)
* Getaway (ゲッタウェイ - 逃亡) [#z5d75da2]
#ref(Phaser/getaway.png)
#contents
** 遊び方 [#gec14451]
強制横スクロール型ゲーム。
クリックかタップでジャンプしながら、星を集めていきます。
- デモ(PC/スマホ版) ＞ http://www.catch.jp/program/phaser/getaway/index.html
- ソースコード > https://github.com/ycatch/games-phaser-getaway
** 利用条件 [#b43143bd]
Copyright 2014 Yutaka Kachi released under MIT license.
不具合など見つけたら、[[Twitter @y_catch:https://twitter.com/y_catch]]へ連絡いただけると助かります。
* ベース [#x6640d15]
[[Phaserのゲームを改良してみた>phaser/tutorial_02]]
- レスポンシブ
- 1クリックだけで遊べる
* 素材 [#l008a0d9]
** ドット絵 [#fc46e91e]
-[[高機能ドット絵エディタ EDGE｜TAKABO SOFT:http://takabosoft.com/edge]]
こんな感じで描いてみた。
#ref(dot_dog.png)
#ref(ghoston.png)
#ref(tileSet_x.png)
#ref(star.png)
** タイルマップ [#a22bd9af]
- [[Tiled Map Editor:http://www.mapeditor.org/]]
- ドット絵を組み合わせて、ステージのマップを作る
- ステージは、タイルレイヤー。星は、オブジェクトレイヤー。
- これを、jsonファイルでエクスポートする。
#ref(tilemap.png)
* コード [#j2c1ec24]
** ステージ [#ie36bb05]
- 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
** スクロール [#s57eef2a]
- スクロールは、camera機能で実現している
- camera機能は、ステージの一部だけを表示する
-- Example > camera > basic follow
-- http://examples.phaser.io/_site/view_full.html?d=camera&f=basic+follow.js&t=basic%20follow
- で、このcameraの位置を自動的に横移動して、スクロールを表現している
** 背景 [#cf1481f7]
- ゲーム画面と同じ大きさの画像を使っている。
- 左右をつないだときに、切れ目なくつながるようにしてある(シームレス)
- それをcameraに合わせて移動
- 同時に、背景画像を左右をつないだまま移動。
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
