phaser/tutorial_01 のバックアップ汗尸(No.8)

纳裁された乖はこの咖です。
猴近された乖はこの咖です。
[[Programing]] > [[Phaser]] > Tutorial 01

#title(Making your first Phaser gameをやってみた)

光庐でサクサク倡券できる、HTML5/Javascript羹け2Dゲ〖ムエンジン≈[[Phaser:http://phaser.io/]]∽(フェイザ〖)。

2Dグラフィックライブラリ[[Pixi.js:http://www.pixijs.com/]]をコアにして、サウンドとか咀仆冉年とか湿妄遍换を纳裁した2Dゲ〖ム倡券フレ〖ムワ〖ク。

PCとモバイルのマルチプラットフォ〖ム滦炳で、オ〖プンソ〖ス(MITライセンス)。

これは、そのチュ〖トリアル≈Making your first Phaser game¨はじめてのPhaserゲ〖ムを侯ろう∽をやってみたメモ。

というか、ほとんど泣塑胳条なんだけど、かなり亩条になっている。

ちなみに、こんな炊じのゲ〖ムを侯る。

#ref(example_001a.png)

ゲ〖ムの窗喇惹はココ(甜磅キ〖で拎侯)

http://www.catch.jp/program/phaser/making_your_first_Phaser_game.html

チュ〖トリアルのオリジナル惹は、ここにある。

http://www.photonstorm.com/phaser/tutorial-making-your-first-phaser-game

このチュ〖トリアルは、Phaserの倡券傅であるPhotom Stormのブログに很っていて、Phaserにも箭峡されている。

----
* 网脱掘凤 [#e134672f]

** Japanese Tutorial [#ub6ea4f0]

Copyright 2014 Yutaka Kachi released under MIT license.

粗般いなどあるかも梦れません。

もしも斧つけたら、[[Twitter @y_catch:https://twitter.com/y_catch]]へ息晚いただけると锦かります。

** Original [#s448435d]

Copyright 2006 - 2014 Photon Storm Ltd. All rights reserved.

Copyright (c) 2014 Richard Davey, Photon Storm Ltd.

Released under MIT License. see http://opensource.org/licenses/mit-license.php

このチュ〖トリアルを今いたのは、 Alvin Ourrad と Richard Davey。

MITライセンスなPhaser芹邵セットに崔まれている。
----

 笆布、今きかけ

#contents

* Phaserってナニ々 [#z7ff7bd2]

Phaserは、HTML5滦炳でクロスプラットフォ〖ムのWebゲ〖ム倡券フレ〖ムワ〖ク。デスクトップとモバイルに滦炳、だそうな。

じつは、2Dグラフィックライブラリ[[Pixi.js:http://www.pixijs.com/]]をコアにして、サウンドとか咀仆冉年とか湿妄遍换を纳裁した2Dゲ〖ム倡券フレ〖ムワ〖ク。

PCとモバイルのマルチプラットフォ〖ム滦炳で、オ〖プンソ〖ス(MITライセンス)。

-[[Phaserのはじめ数>Phaser]]を徊救

* 涩妥なもの [#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]]を徊救
--[[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"という恃眶叹でなくてもいいけど、こんなふうにするのが鼎奶したやり数になっている。ほかのサンプルでも、こんなふうにしてある。
この乖では、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: このオブジェクトはかならずしも涩妥じゃないけど、ここでは、すばやくプロトタイプを侯るために、この数恕を何脱している。
呵稿の肋年猛で、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簇眶に、肌のコ〖ドを淡揭する。

 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.5¨Player1を脱罢する [#udc77a75]
* Part.5¨プレイヤ〖を脱罢する [#udc77a75]

糠しいロ〖カル恃眶"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が、湿妄遍换にしたがって、孟烫の布まで尽缄に皖ちる。
焊布に斧えるプレイヤ〖:dudeが、湿妄遍换にしたがって、孟烫の布まで尽缄に皖ちる。

#ref(example_004.png)

** スプライトシ〖ト [#r7232d0b]

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

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

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

#ref(example_dude.png)

** アニメ〖ションの年盗 [#f6140c56]

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

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

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

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

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

** 湿妄遍换 [#d6e2a466]

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

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

 player.body.gravity.y = 300;

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

*Part.6¨咀仆冉年とupdate簇眶 [#f92bf2e6]

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

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

** 咀仆冉年 [#kd91ab9c]

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

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

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

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

#ref(example_005.png)

** update簇眶 [#s89afead]

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

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

やっと孟烫に惟った。

* Part.7¨キ〖ボ〖ド拎侯 [#h6f41a54]

咀仆冉年は、これで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を徊救。山绩すると、こんな炊じ。

#ref(example_006.png)

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

** プレイヤ〖を瓢かすコ〖ド [#n5a2cfb4]

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

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

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

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

** ジャンプ [#k8d35401]

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

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

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

* 辣のかがやき [#j8d842df]
* Part.8¨辣のかがやき [#j8d842df]

では、ゲ〖ムに誊弄に烧け裁えよう。ゲ〖ム茶烫に辣をまきちらして、プレイヤ〖はそれを礁めて搀る。そこで、"stars"グル〖プを颅して、肋弥する。このゲ〖ムのcreate簇眶に、肌のコ〖ドを纳裁する。
では、ゲ〖ムに誊弄に烧け裁えよう。ゲ〖ム茶烫に辣をまきちらして、プレイヤ〖はそれを礁めて搀る。

そこで、"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を徊救。これで、辣を纳裁された。
悸狠のコ〖ドは、チュ〖トリアルのpart8.htmlを徊救。これで、辣が纳裁された。

#ref(example_007.png)

** 辣の掳拉 [#w2d45f76]

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

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

** 辣の咀仆冉年 [#y74c2d9f]

だけど、咀仆冉年がないと、辣は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: 呵稿の慌惧げ [#s32ae67d]

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

 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を徊救。これで、窗喇!

#ref(example_001a.png)

窗喇したコ〖ドは、チュ〖トリアルのpart9.htmlを徊救。

ここでも、活すことができる。

http://www.catch.jp/program/phaser/making_your_first_Phaser_game.html

* まとめ [#c3f24cad]

されこれで、Phaserを蝗った词帽なゲ〖ムの侯り数を妄豺した。湿妄遍换を洒えたスプライトの栏喇、プレイヤ〖の瓢かし数、ほかの湿挛と陵高侯脱する数恕などだ。

もちろん、もっといろいろな怠墙を烧け裁えることもできるだろう。たとえば、ゲ〖ムのクリア茶烫はまだないし、浓キャラもいない。浓キャラを侯るには、"spikes"グル〖プを侯って、プレイヤ〖と咀仆冉年すればいい。

苟封弄なゲ〖ムの洛わりに、办年箕粗柒にどれだけ辣を礁めるか顶うゲ〖ムにしてもいいね。assetsフォルダに、すこのグラフィック燎亨が崔めてあるので、アイデアをふくらませて斧て瓦しい。

あと[[250改笆惧あるコ〖ドサンプル:http://examples.phaser.io/]]も、舔に惟つはず。

悼啼爬があるなら、[[Phaserフォ〖ラムhttp://www.html5gamedevs.com/]]で使いてみてね。