Making your first Phaser gameをやってみた

チュ〖トリアルのソ〖スと燎亨をダウンロ〖ドする
- すでに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のはじめ数にすこし腊妄しておいた

↑

Part.1¨裹寥み †

チュ〖トリアルのサンプルファイルのうち、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 ˇˇˇ †

では、Javascriptの1乖誊(笆布のところ)を斧ていこう。

var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update });

この乖では、Phaserのインスタンスを栏喇して、game恃眶に充り碰てることで、Phaserに栏炭をあたえる。べつに"game"という恃眶叹でなくてもいいけど、こんなふうにするのが办忍弄なやり数になっている。ほかのサンプルでも、こんなふうにしてある。

↑

升と光さ †

呵介の2つの肋年猛は、升(width = 800)と光さ(height = 600)で、Phaserが栏喇するCanvasタグのサイズを回年している。ここでは、800∵600ピクセルになっている。これは、极尸の攻きなサイズを回年できるけど、悸乖するデバイスの豺咙刨の面に箭まっていなければならない。

↑

CANVASかWebGLの联买 †

3戎誊の肋年猛は、≈Phaser.CANVAS∽か≈Phaser.WEBGL∽か≈Phaser.AUTO∽のどれか。梦っているとおり、CANVASもWebGLもJavascript/HTML5でグラフィックを闪く数恕で、极尸の蝗いたいものを回年すればいい。オススメは、≈Phaser.AUTO∽。これは、まずWebGLで闪いてみて、ブラウザがサポ〖トしていなければCANVASで闪いてくれる。

↑

DOMへの赁掐 †

4戎誊の肋年猛は、鄂っぽの矢机误になっているけど、Phaserが栏喇したCANVASのDOM-IDを回年できる。海搀は、鄂っぽのままなので、body妥燎にCANVASが赁掐される。

↑

簇眶(ステ〖タス)の充り碰て †

呵稿の肋年猛で、Phaserで涩寇となる簇眶をステ〖タスとしてオブジェクトに充り碰てている。蝗い数は、ここに棱汤してある。

Note: このオブジェクトにステ〖タスを木儡淡揭する数恕はかならずしも呵帘じゃないけど、ここでは、すばやくプロトタイプを侯るために、この数恕を何脱している。

で、ここで充り碰てた簇眶( preload()、create()、update())の面咳を、このあと淡揭していく。

条庙¨これはゲ〖ムの渴乖ごとにステ〖タスを充り碰てる。ステ〖トマシンとか觉轮莲败と钙ばれる祷恕になっている

↑

Part.2¨ゲ〖ム燎亨のロ〖ド †

では、ゲ〖ムで蝗う燎亨を回年してロ〖ドする。

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を徊救。でも、まだ部も山绩されない。

↑

アセット †

ちなみに、このような燎亨をAssets(アセット)と钙んでいる。

ここでは、3つの茶咙と1つのスプライトシ〖トを粕み哈んでいる。

燎亨は、チュ〖トリアルのassetsフォルダにあるので、ファイルパスとファイル叹で淡揭してやる。

↑

アセットキ〖 †

もうひとつ庙誊して瓦しいのが、game.loadメソッドの呵介の苞眶。'sky' 'ground' 'star' 'dude'という矢机误が回年してあるけど、これがアセットキ〖。ゲ〖ムに燎亨を钙び叫すには、このアセットキ〖をコ〖ドから回年する。アセットキ〖は、Javascriptの矢机误なら部でも极统に蝗える。

↑

Part.3¨スプライトの山绩 †

スプライトのことは梦っているかな?

スプライトとは、2Dゲ〖ムでキャラクタ〖や秦肥のグラフィックを山绩するための怠墙。ゲ〖ム柒のキャラクタ〖は、井さな茶咙(スプライト)として山绩される。これをすばやく磊り仑えることで、アニメ〖ションさせる。

では、そのスプライトを山绩させてみよう。まずは、辣を１改山绩させる。

create簇眶に、肌のコ〖ドを淡揭する。

function create() {
     game.add.sprite(0, 0, 'star');
}

で、そのhtmlファイルをいったん瘦赂して、ブラウザで山绩させると、肌のように、焊惧に辣が山绩される。

悸狠のコ〖ドは、チュ〖トリアルのpart3.htmlを徊救。う〖む、やっと叫た!

↑

山绩界について †

海のところ、秦肥は辊咖になっている。

スプライトが山绩される界戎は、コ〖ドを淡揭した界戎になる。

だから、辣の秦肥を山绩したい眷圭は、辣の涟に秦肥のスプライトのコ〖ドを淡揭する。

↑

game.add.sprite メソッド †

ゲ〖ムの微娄で、game.add.spriteメソッドは、糠しいPhaser.Spriteオブジェクトを栏喇して、スプライトを∪game world∩に纳裁する。この∪game world∩に、ゲ〖ムのオブジェクトが赂哼している。

↑

ゲ〖ムの郝筛 †

この∪game world∩は、じつはサイズが盖年されていないし、痰嘎に弓がっている。郝筛の付爬は≈0,0∽になっていて、办斧すると焊惧のコ〖ナ〖に充り碰てられている。だけど、寥み哈みのCameraコマンドで极统に拇腊できる。

↑

Part.4¨∪game world∩を菇蜜する †

では、∪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ファイルを粕み哈んでいる。

↑

グル〖プ怠墙について †

Phaserのグル〖プ怠墙は、ほんとうに动蜗だ。グル〖プ怠墙は、その叹涟が绩すとおり、よく击たオブジェクトをひとつにまとめて、帽办の婶墒のようにコントロ〖ルする。さらに、グル〖プ粗で咀仆冉年もサポ〖トしている。このサンプルゲ〖ムでは、黎ほどのコ〖ドで侯ったplatformグル〖プと、もうひとつのグル〖プとの粗で咀仆を冉年する。

肌のコ〖ドは、黎ほどplatformグル〖プを年盗したときのコ〖ドだ。

platforms = game.add.group();

ここでは、platformというロ〖カル恃眶に、グル〖プオブジェクトを洛掐している。このグル〖プオブジェクトに、ゲ〖ム茶烫に芹弥する妥燎を纳裁していく。呵介に、孟烫(ground)を纳裁した。この孟烫オブジェクトは、ゲ〖ム茶烫の呵布婶にあって、"ground"イメ〖ジが山绩される。孟烫オブジェクトの升は、ゲ〖ム茶烫に圭うよう橙络教井している。それから、"immovable"プロパティを"true"にする。こうしておくと、プレ〖ヤ〖のキャラクタが孟烫に咀仆しても、孟烫オブジェクトは盖年されている(さらに拒しい棱汤は、このあと)。

↑

Part.5¨プレイヤ〖を脱罢する †

糠しいロ〖カル恃眶"player"を脱罢して、笆布のコ〖ドをcreate簇眶に纳裁する。

   // 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);

悸狠のコ〖ドは、part5.htmlを徊救。山绩すると、こんな炊じ。

焊布に斧えるプレイヤ〖:dudeが、湿妄遍换にしたがって、孟烫の布まで尽缄に皖ちる。

↑

スプライトシ〖ト †

ここでは、playerスプライトを脱罢して、玻32ピクセル、光さはゲ〖ム茶烫の呵布婶から150ピクセルに芹弥している。この"dude"(デュ〖デュ)アセットは、呵介のところでロ〖ドしたヤツだ。preload簇眶のところをチラッとのぞいてみると、これがイメ〖ジではなく、スプライトシ〖ト(spritesheet)として粕み哈まれているのが尸かるだろう。

game.load.spritesheet('dude', 'assets/dude.png', 32, 48);

スプライトシ〖トは、帽办のイメ〖ジではなく、瓢きを山附するアニメ〖ションのコマが、ひとつの茶咙ファイルにまとめられている。悸狠のスプライトシ〖トを茶咙ファイルとして倡くと、こんな炊じになっている。

↑

アニメ〖ションの年盗 †

コ〖ドでは、"left"と"right"という2つのアニメ〖ションを年盗している。

player.animations.add('left', [0, 1, 2, 3], 10, true);

"left"アニメ〖ションは、スプライトシ〖トの焊から0, 1, 2, 3戎誊までのコマを蝗い、1擅碰たり10コマの庐刨で山绩する。"true"パラメ〖タは、アニメ〖ションをくり手す回绩になる。これが、瘤りの答塑件袋で、これを瓤滦娄でも票じように年盗している。

あと、湿妄弄なパラメ〖タも、すこし肋年してある。

Note: Phaserは、スプライトの瓤啪怠墙をサポ〖トして、アニメ〖ションのコマを泪腆できるけれど、ここでは答塑に瞄悸にやっている。

↑

湿妄遍换 †

Phaserは、いくつかの佰なる湿妄遍换エンジンをサポ〖トしている。≈Arcade Physics∽と≈Ninja Physics∽≈P2.JS Full-Body Physics∽の3硷梧だ。このチュ〖トリアルでは、モバイルに努した、シンプルで汾翁な≈Arcade Physics∽エンジンを艰り惧げている。湿妄エンジンを蝗うには、コ〖ド惧でそれを瘤らせ、さらに、すべてのスプライトとグル〖プで湿妄エンジンを努脱しなければならない。

办刨、スプライトに、ArcadePhysics.Body.インスタンスのbodyプロパティを充り碰てる。すると、gravityなどbodyオブジェクトが积つ驴くの网脱できるようになる。今くのは、こんなふうに词帽だ。

player.body.gravity.y = 300;

これは、テキト〖な毋だけど、それなりに瓢侯する。肋年猛が络きすぎるので、プレイヤ〖のキャラは、脚すぎて、すとんと孟烫の布まで皖ちて茶烫の布に磨り烧いてしまう(part5.htmlで澄千できる)。

↑

Part.6¨咀仆冉年とupdate簇眶 †

さて、どうしてこんなふうになってしまうかと咐うと、まだ、グル〖プとプレ〖ヤ〖の粗に咀仆冉年を肋年してないからだ。すでに、孟烫と磨り叫しは盖年しておいた。まだやってないのは、プレイヤ〖が部かと咀仆したとき、ちゃんと匿贿させることだ。

孟烫スプライトは、もともと瓢く湿挛で(ダイナミックボディとも咐う)、プレイヤ〖がぶつかると、咀仆の瓤瓢は孟烫に帕わる。この眷圭、2つの湿挛は、高いに瓤滦数羹に瓢いて、dudeははねかえり孟烫は皖ち幌めるはずだ。だけど、孟烫が盖年してあるので、プレイヤ〖だけがジャンプすることになる。

↑

咀仆冉年 †

さて、ようやく咀仆冉年について棱汤できる。

update簇眶に、肌のようにプレイヤ〖の咀仆冉年を肋年しよう。

function update() {

    //  プレイヤ〖とplatformグル〖プに咀仆冉年を纳裁
   game.physics.arcade.collide(player, platforms); 
}

悸狠のコ〖ドは、part6.htmlを徊救。山绩するとこんな炊じ。

↑

update簇眶 †

update簇眶は、フレ〖ムごとに钙び叫されるゲ〖ムのくり手し借妄婶尸だ。Physics.collide簇眶は、このゲ〖ムプログラムに蒜恕をかけてくれる。滦据となる2つのオブジェクトをテストして、それぞれのオブジェクトにどのように慷神うかを帕える。

この毋では、プレイヤ〖スプライトとplatformグル〖プが滦据オブジェクトになっている。グル〖プメンバ〖の咀仆冉年をする眷圭は、孟烫と磨り叫しについて、それぞれテストしてくれる。

やっと孟烫に惟った。

↑

Part.7¨キ〖ボ〖ド拎侯 †

咀仆冉年は、これでOK。だけど、まだプレイヤ〖が瓢かない。ここで、たぶんドキュメントのイベントリスナ〖のところを拇べなくちゃと蛔ったんじゃないかな。でも络炬勺。Phaserには、キ〖ボ〖ドマネ〖ジャ〖が寥み哈んであり、こんなちょっとした簇眶で网脱できる。

cursors = game.input.keyboard.createCursorKeys();

この簇眶には、惧(up)、布(down)、焊(left)、宝(right)という4つのプロパティを积ったcursorsオブジェクトが慌哈んであって、Phaser.Key¨http://docs.phaser.io/Phaser.Key.htmlオブジェクトのインスタンスになっている。

あとは、update簇眶の面に、こんな炊じのコ〖ドを今いてやればいい。

   //  プレイヤ〖の败瓢庐刨をリセット
   player.body.velocity.x = 0;

   if (cursors.left.isDown)
   {
       //  焊へ败瓢
       player.body.velocity.x = -150;

       player.animations.play('left');
   }
   else if (cursors.right.isDown)
   {
       //  宝へ败瓢
       player.body.velocity.x = 150;

       player.animations.play('right');
   }
   else
   {
       //  そのまま
       player.animations.stop();

       player.frame = 4;
   }
   
   //  惧甜磅キ〖がおされて、かつプレイヤ〖が孟烫についていたらジャンプ
   if (cursors.up.isDown && player.body.touching.down)
   {
       player.body.velocity.y = -350;
   }

悸狠のコ〖ドは、part7.htmlを徊救。山绩すると、こんな炊じ。

ついに、キ〖ボ〖ドで拎侯できた!

↑

プレイヤ〖を瓢かすコ〖ド †

ここでは、コ〖ドを驴めに纳裁したので、ちょっと豺棱してみよう。

まず呵介に、垮士数羹の庐刨(败瓢翁)をリセットしている。それから、どの甜磅キ〖が病されているかチェックする。それで、もし焊甜磅キ〖が病されているなら、垮士数羹の败瓢翁をマイナスにして、焊羹きのアニメ〖ションを倡幌する。もしも、宝甜磅キ〖が病されているなら、垮士数羹の败瓢翁をプラスにして、焊羹きのアニメ〖ションを倡幌する。

ここでは、フレ〖ムごとに、庐刨をクリアしてから败瓢数羹を肋年する"ストップ-スタ〖ト"スタイルを何脱している。そのおかげで、プレイヤ〖のスプライトは、甜磅キ〖を病しているときには败瓢し、违すと澄悸に匿贿する。Phaserは、捶拉とか裁庐とか、もっと剩花な瓢きを涂えることができるけど、このサンプルでは、こんな炊じにしておこう。

呵稿のコ〖ドでは、部もキ〖が病されていないとき、プレイヤ〖も4戎誊のフレ〖ムを山绩させている。4戎誊のフレ〖ムでは、dudeはただ仆っ惟っているだけだ。

↑

ジャンプ †

コ〖ドの呵稿のパ〖トは、ジャンプ怠墙を纳裁している。惧甜磅キ〖がジャンプボタンになっているので、コ〖ドでは、このキ〖が病されているかをチェックしている。しかし、それだけではなく、プレイヤ〖が孟烫に烧いているか、鄂面にいるかもチェックしている。そして、プレイヤ〖が孟烫についていて、かつ、惧甜磅キ〖が病されている眷圭、惧数羹に350px/擅コマの庐刨を涂える。

ジャンプしたプレイヤ〖は、极瓢弄に皖ちていき、platoformグル〖プと咀仆すると匿贿する。

キ〖を病して、プレイヤ〖をいろいろコントロ〖ルして、game worldを玫浮してみよう。part7.htmlのソ〖スコ〖ドの猛を拇腊して、どんな瓢きになるか、活してみると紊いだろう。

↑

Part.8¨辣のかがやき †

では、ゲ〖ムに誊弄に烧け裁えよう。ゲ〖ム茶烫に辣をまきちらして、プレイヤ〖はそれを礁めて搀る。

そこで、"stars"グル〖プを颅して、肋弥する。このゲ〖ムのcreate簇眶に、肌のコ〖ドを纳裁する。

   stars = game.add.group();

   stars.enableBody = true;

   //  12改の辣を霹粗持に芹弥する
   for (var i = 0; i < 12; i++)
   {
       // 'stars'グル〖プの面に、辣を栏喇する
       var star = stars.create(i * 70, 0, 'star');

       //  辣に脚蜗を肋年する
       star.body.gravity.y = 6;

       //  辣には、ランダムなはねかえり恶圭を肋年する
       star.body.bounce.y = 0.7 + Math.random() * 0.2;
   }

悸狠のコ〖ドは、チュ〖トリアルのpart8.htmlを徊救。これで、辣が纳裁された。

↑

辣の掳拉 †

辣を侯る缄界は、platformグル〖プを侯ったときとほぼ票じだ。さらに、Javascriptの"for"ル〖プで12改の辣を侯っている。"i * 70"と淡揭して、玻70ピクセルずつ霹粗持に芹弥する。

それから、プレイヤ〖に脚蜗を涂えたのと票じように、辣にも涂えるので、ゲ〖ムがスタ〖トすると惧から皖ちてくるようになる。さらに、はねかえり(bounce)を肋年して、platformとぶつかったとき、ちょっとジャンプする。このはねかえり(bounce)には、0(バウンドしない)から1(ずっとバウンドする)まで肋年できる。このゲ〖ムでは、0.7から0.9までの努碰な猛を肋年している。

↑

辣の咀仆冉年 †

だけど、咀仆冉年がないと、辣はplatoformを奶り却けてしまう。だから、update簇眶の面に、肌のように辣とplatformの咀仆冉年を淡揭する。

game.physics.arcade.collide(stars, platforms);

もちろん、肌のように、プレイヤ〖と辣がぶつかった箕の借妄も涩妥だ。

game.physics.arcade.overlap(player, stars, collectStar, null, this);

このコ〖ドでは、プレイヤ〖と辣のどれかが脚なったら、肌のcollectStar簇眶を钙び叫す。

function collectStar (player, star) {
   
   // 茶烫から辣を久す
   star.kill();

}

茶烫から辣を久すには、killメソッドを钙び叫すだけ。

これで、このゲ〖ムを悸乖すると、プレイヤ〖が瘤ったり、ジャンプでplatformに若び捐ったりして、辣を礁めることができる。もしもアイデアがあれば、そのコ〖ドを纳裁してみるのも、碍くないかもね。

↑

Part.9: 呵稿の慌惧げ †

さあ呵稿に、评爬を山绩するよう猖紊してみよう。そのためには、Phaser.textオブジェクトを蝗う。そのために、肌の企つの恃眶を脱罢する。ひとつは、附哼の评爬を瘦积するもの。もうひとつは、テキストオブジェクト极挛だ。

var score = 0;
var scoreText;

create簇眶のところで、このscoreTextオブジェクトを栏喇する。

scoreText = game.add.text(16, 16, 'score: 0', { fontSize: '32px', fill: '#000' });

16x16は、テキストを山绩する疤弥。'score: 0'は、山绩する矢机误の介袋肋年。そのあと、フォントサイズと矢机咖をオブジェクトとして淡揭する。フォントの硷梧は回年していなくて、ブラウザのデフォルトを蝗う。Windowsなら、Arialになるはず。

肌に、collectStar簇眶を猖紊して、プレイヤ〖が辣を礁めたとき、评爬がカウントアップするようにする。

function collectStar (player, star) {
   
   // 辣を茶烫から久す
   star.kill();

   // 评爬をアップして、浩刨山绩
   score += 10;
   scoreText.text = 'Score: ' + score;

}

辣を礁めるたびに、10ポイントを纳裁して、scoreTextを浩山绩する。

悸狠のコ〖ドは、チュ〖トリアルのpart9.htmlを徊救。これで、窗喇!