- 追加された行はこの色です。
- 削除された行はこの色です。
[[Programing]] > [[Phaser]] > Tutorial 01
#title(Making your first Phaser gameをやってみた)
高速でサクサク開発できる、HTML5/Javascript向け2Dゲームエンジン「Phaser」のチュートリアル「Making your first Phaser game：はじめてのPhaserゲームを作ろう」をやってみたメモ。
高速でサクサク開発できる、HTML5/Javascript向け2Dゲームエンジン「Phaser」
(というか、ほとんど日本語訳なんだけど、かなり超訳になっている)
そのチュートリアル「Making your first Phaser game：はじめてのPhaserゲームを作ろう」をやってみたメモ。
Phaserの開発元であるPhotom Stormのブログに載っているヤツで、Phaserにも収録されている。
というか、ほとんど日本語訳なんだけど、かなり超訳になっている。
こんな感じのゲームを作る。> [[完成版:http://www.catch.jp/program/phaser/making_your_first_Phaser_game.html]]
ちなみに、こんな感じのゲームを作る。> [[完成版:http://www.catch.jp/program/phaser/making_your_first_Phaser_game.html]] 矢印キーで操作
#ref(example_001.png)
チュートリアルのオリジナル版は、ここにある。
http://www.photonstorm.com/phaser/tutorial-making-your-first-phaser-game
Phaserの開発元であるPhotom Stormのブログに載っているヤツで、Phaserにも収録されている。
以下、書きかけ
#contents
* Phaserってナニ？ [#z7ff7bd2]
Phaserは、HTML5対応でクロスプラットフォームのWebゲーム開発フレームワーク。デスクトップとモバイルに対応、だそうな。
* 必要なもの [#j22cbfb9]
+ チュートリアルのソースと素材をダウンロードする
-- すでにPhaser本体をダウンロード済みなら、以下にある
-- phaser/resources/tutorials/02 Making your first game/
-- まだPhaser本体をダウンロードしてないなら、以下のリンクから
-- http://gametest.mobi/phaser/tutorials/02%20Making%20your%20first%20game/phaser_tutorial_02.zip
+ とってもとっても基本的なJavascriptの知識が必要
+ あと、Phaserで開発する環境を整えておくこと
--[[Phaserのはじめ方>Phaser]]を参照
* Part.1：骨組み [#j63337f1]
チュートリアルのサンプルファイルのうち、part1.htmlをエディタで開くと、こんなふうになっている。これがPhaserの基本的な骨組み。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Phaser - Making your first game, part 1</title>
<script type="text/javascript" src="js/phaser.min.js"></script>
<style type="text/css">
body {
margin: 0;
}
</style>
</head>
<body>
<script type="text/javascript">
var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update });
function preload() {
}
function create() {
}
function update() {
}
</script>
</body>
</html>
ただし、ただの骨組みなので、このpart1.htmlをブラウザで開いても残念ながら、なにも表示されない。
** var game = new Phaser.Game ・・・ [#nf4e4f9b]
では、Javascriptの1行目(以下のところ)を見ていこう。
var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update });
この行では、Phaserのインスタンスを生成して、game変数に割り当てることで、Phaserに生命をあたえる。べつに"game"という変数名でなくてもいいけど、こんなふうにするのが共通したやり方になっている。ほかのサンプルでも、こんなふうにしてある。
** 幅と高さ [#n1da4f09]
最初の2つの設定値は、幅(width = 800)と高さ(height = 600)で、Phaserが生成するCanvasタグのサイズを指定している。ここでは、800×600ピクセルになっている。これは、自分の好きなサイズを指定できるけど、実行するデバイスの解像度の中に収まっていなければならない。
** CANVASかWebGLの選択 [#df56fe6a]
3番目の設定値は、「Phaser.CANVAS」か「Phaser.WEBGL」か「Phaser.AUTO」のどれか。知っているとおり、CANVASもWebGLもJavascript/HTML5でグラフィックを描く方法で、自分の使いたいものを指定すればいい。オススメは、「Phaser.AUTO」。これは、まずWebGLで描いてみて、ブラウザがサポートしていなければCANVASで描いてくれる。
** DOMへの挿入 [#de623942]
4番目の設定値は、空っぽの文字列になっているけど、Phaserが生成したCANVASの挿入先になるDOMのidを指定する。今回は、空っぽのままなので、body要素にCANVASが挿入される。
** 関数の割り当て [#k590e6bb]
最後の設定値で、Phaserで必須となる関数をオブジェクトに割り当てている。使い方は、[[ここに説明してある:http://www.html5gamedevs.com/topic/1372-phaser-function-order-reserved-names-and-special-uses/]]。Note: このオブジェクトはかならずしも必要じゃないけど、ここでは、すばやくプロトタイプを作るために、この方法を採用している。
で、ここで割り当てた関数( preload()、create()、update())の中身を、このあと記述していく。
* Part.2：ゲーム素材のロード [#sc2aa036]
では、ゲームで使う素材を指定してロードする。
preload関数の中で、game.loadメソッドを呼ぶと、ゲーム内に素材が読み込まれる。
こんな感じで、今まで空っぽだったpreload関数の中に記述してやる。
function preload() {
game.load.image('sky', 'assets/sky.png');
game.load.image('ground', 'assets/platform.png');
game.load.image('star', 'assets/star.png');
game.load.spritesheet('dude', 'assets/dude.png', 32, 48);
}
Phaserでこんなふうに記述しておくと、実行時に自動的に素材を読み込んでくれる。
実際のコードは、チュートリアルのpart2.htmlを参照。でも、まだ何も表示されない。
** アセット [#f521235c]
ちなみに、このような素材をAssets(アセット)と呼んでいる。
ここでは、3つの画像と1つのスプライトシートを読み込んでいる。
素材は、チュートリアルのassetsフォルダにあるので、ファイルパスとファイル名で記述してやる。
** アセットキー [#mcf74bd6]
もうひとつ注目して欲しいのが、game.loadメソッドの最初の引数。'sky' 'ground' 'star' 'dude'という文字列が指定してあるけど、これがアセットキー。ゲームに素材を呼び出すには、このアセットキーをコードから指定する。アセットキーは、Javascriptの文字列なら何でも自由に使える。
* Part.3：スプライトの表示 [#c7bdeef1]
スプライトのことは知っているかな?
スプライトとは、2Dゲームでキャラクターや背景のグラフィックを表示するための機能。ゲーム内のキャラクターは、小さな画像(スプライト)として表示される。これをすばやく切り替えることで、アニメーションさせる。
では、そのスプライトを表示させてみよう。まずは、星を１個表示させる。
create関数に、次のコードを記述する。
で、そのhtmlファイルをいったん保存して、ブラウザで表示させると、次のように星が表示される。
function create() {
game.add.sprite(0, 0, 'star');
}
で、そのhtmlファイルをいったん保存して、ブラウザで表示させると、次のように、左上に星が表示される。
#ref(example_002.png)
実際のコードは、チュートリアルのpart3.htmlを参照。うーむ、やっと出た!
** 表示順について [#i3e0644b]
今のところ、背景は黒色になっている。
スプライトが表示される順番は、コードを記述した順番になる。
だから、星の背景を表示したい場合は、星の前に背景のスプライトのコードを記述する。
** game.add.sprite メソッド [#z603198e]
ゲームの裏側で、game.add.spriteメソッドは、新しい[[Phaser.Spriteオブジェクト:http://docs.phaser.io/Phaser.Sprite.html]]を生成して、スプライトを“game world”に追加する。この“game world”に、ゲームのオブジェクトが存在している。
** ゲームの座標 [#bda6626e]
この“game world”は、じつはサイズが固定されていないし、無限に広がっている。座標の原点は「0,0」になっていて、一見すると左上のコーナーに割り当てられている。だけど、組み込みのCameraコマンドで自由に調整できる。
* Part.4：“game world”を構築する [#uda5c758]
では、“game world”を構築してみよう。
先のCreate関数のコードの変わりに、次のように記述する。
var platforms;
function create() {
// 物理演算エンジンとして、Arcade Physicsシステムをオンにする
game.physics.startSystem(Phaser.Physics.ARCADE);
// シンプルな背景
game.add.sprite(0, 0, 'sky');
// プラットフォームグループの生成。このグループは、地面(ground)と2つの張り出し(ledge)からできている
platforms = game.add.group();
// プラットフォームグループのオブジェクトは、すべて物理演算をオンにする
platforms.enableBody = true;
// ここで、platformsグループに地面(ground)を追加する
var ground = platforms.create(0, game.world.height - 64, 'ground');
// 地面のサイズをゲームの幅にフィットさせる (スプライトのオリジナルサイズは、400x32)
ground.scale.setTo(2, 2);
// 地面を固定する
ground.body.immovable = true;
// 同様に、platformsグループに張り出し(ledge)を追加する
var ledge = platforms.create(400, 400, 'ground');
ledge.body.immovable = true;
ledge = platforms.create(-150, 250, 'ground');
ledge.body.immovable = true;
}
実際のコードは、チュートリアルのpart4.htmlを参照。動かないけど、物理演算エンジンが設定されている。
最初のパーツは、星のスプライトと同じだけど、アセットキーが"sky"になっていて、これで背景を指定する。
この背景には、800×600サイズのPNGファイルを読み込んでいる。
#ref(example_003.png)
** グループ機能について [#r127ae81]
Phaserのグループ機能は、ほんとうに強力だ。グループ機能は、その名前が示すとおり、よく似たオブジェクトをひとつにまとめて、単一の部品のようにコントロールする。さらに、グループ間で衝突判定もサポートしている。このサンプルゲームでは、先ほどのコードで作ったplatformグループと、もうひとつのグループとの間で衝突を判定する。
次のコードは、先ほどplatformグループを定義したときのコードだ。
platforms = game.add.group();
ここでは、platformというローカル変数に、グループオブジェクトを代入している。このグループオブジェクトに、ゲーム画面に配置する要素を追加していく。最初に、地面(ground)を追加した。この地面オブジェクトは、ゲーム画面の最下部にあって、"ground"イメージが表示される。地面オブジェクトの幅は、ゲーム画面に合うよう拡大縮小される。それから、"immovable"プロパティを"true"にする。こうしておくと、プレーヤーのキャラクタが地面に衝突しても、地面オブジェクトは移動しない(さらに詳しい説明は、Part.6で)。
* Part.5：Player1を用意する [#udc77a75]
新しいローカル変数"player"を用意して、以下のコードをcreate関数に追加する。
実際のコードは、part5.htmlを参照。
// player変数を用意して、 'dude'スプライトを設定する
player = game.add.sprite(32, game.world.height - 150, 'dude');
// 物理演算をオンにする
game.physics.arcade.enable(player);
// Playerの物理プロパティ. このちっちゃいヤツは、すこしばかりバウンドする
player.body.bounce.y = 0.2;
player.body.gravity.y = 300;
player.body.collideWorldBounds = true;
// 左右に歩くためのアニメーション
player.animations.add('left', [0, 1, 2, 3], 10, true);
player.animations.add('right', [5, 6, 7, 8], 10, true);
** スプライトシート [#r7232d0b]
ここでは、playerスプライトを用意して、横32ピクセル、高さはゲーム画面の最下部から150ピクセルに配置している。この"dude"([[デューデュ:http://ejje.weblio.jp/content/dude]])アセットは、最初のところでロードしたヤツだ。preload関数のところをチラッとのぞいてみると、これがイメージではなく、スプライトシート(sprite sheet)として読み込まれているのが分かるだろう。これは、単一のイメージではなく、動きを表現するアニメーションフレームとして構成されているためだ。実際のスプライトシートは、こんな感じになっている(アニメーションの複数のコマが、ひとつの画像ファイルにまとめられている)。
#ref(example_dude.png)
** アニメーションの定義 [#f6140c56]
それから、"left"と"right"という2つのアニメーションを定義している(player.animations.add・・・)。"left"アニメーションは、スプライトシートの左から0, 1, 2, 3番目までのコマを使い、1秒当たり10コマを表示する。"true"パラメータは、アニメーションをくり返すよう指示している。これが、基本となるラン・サイクルで、これを反対側でも同じように定義している。
あと、物理的なパラメータも、すこし設定してある。
Note: Phaserは、スプライトの反転機能をサポートして、アニメーションのコマを節約できるけれど、ここでは基本に忠実にやっている。
* Part.6： [#ma5a32e6]
* Licence [#i3506f04]
** Japanese Tutorial [#ub6ea4f0]
Copyright 2014 Yutaka Kachi released under MIT license.
** Original [#s448435d]
Copyright 2006 - 2014 Photon Storm Ltd. All rights reserved.
Copyright (c) 2014 Richard Davey, Photon Storm Ltd.
チュートリアルのオリジナル版は、ここにある。
http://www.photonstorm.com/phaser/tutorial-making-your-first-phaser-game
このチュートリアルを書いたのは、 Alvin Ourrad と Richard Davey。
Phaserの配布セットに含まれているので、たぶんMITライセンス。
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
