phaser/tutorial_02 の试礁

[[Programing]] > [[Phaser]] > チュ〖トリアル2

#title(Phaserのゲ〖ムを猖紊してみた)

#ref(Phaser/jumping_dude.png)

* 车妥 [#u86e3885]

[[涟搀のチュ〖トリアル>phaser/tutorial_01]]は、Phaserによる答塑弄なゲ〖ムの侯り数を溯条したものだった。

海搀、これを迫极に猖紊して、もう警しゲ〖ムぽくしてみる。

あのチュ〖トリアルでは稍颅していた攫鼠が、いくつか输窗できていると蛔う。

まあ、ソ〖スコ〖ドを斧てもらえば尸かる婶尸もあると蛔うけど、いちおう词帽に豺棱してみます。

ここでは、界戎にソ〖スコ〖ドを寥み惟てていくのではなく、窗喇惹の链挛咙を斧てもらって、泼魔弄なところをピンポイントで艰り惧げています。

- 窗喇惹デモ ′ http://www.catch.jp/program/phaser/002/index.html
- ソ〖スコ〖ド > https://github.com/ycatch/games-phaser-jumping-dude

レスポンシブにする数恕など、拒嘿は琐萨を徊救。

- レスポンシブ惹デモ ′ http://www.catch.jp/program/phaser/003/index.html
- ソ〖スコ〖ド > https://github.com/ycatch/games-phaser-jumping-dude-Responsive

** 网脱掘凤 [#b43143bd]

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

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

* 誊肌 [#ccab2b01]

#contents

* 猖紊爬 [#o061741e]

- ル〖ル∈辣がどんどん笼えていく。扩嘎箕粗扩∷
- タイマ〖を蝗い、箕粗扩嘎ゲ〖ムにした
- Phaserに票涵のBasic Project Templateを蝗う
- グロ〖バル恃眶を蝗わず、ゲ〖ムのステ〖タスが莲败していく
- メインメニュ〖とゲ〖ムオ〖バ〖茶烫の纳裁
- 跟蔡不

* Project Template [#d7625bd6]

涟搀のチュ〖トリアルは、帽办のindex.htmファイルに100乖くらいのJavascriptコ〖ドを虽め哈んでいた。これは、帽姐だしサクサク侯れるんだけど、办数で、もう警し怠墙の驴いゲ〖ムを侯りたい眷圭とか斧奶しが碍いし、グロ〖バル恃眶を蝗いすぎている。

そこで、Phaserに票涵されている、Project Templateの≈Basic ∽を蝗う。

これは、Phaserのresources/Project Templates にあるPhaserゲ〖ムの裹寥みで、剩眶のファイルで菇喇されている。

拒しい蝗い数は、コメントとして淡很されている。

まだ裹寥みだけなので。ファイルを倡いてもなにも山绩されない。

* ファイル菇喇 [#nbee0dff]

窗喇惹のゲ〖ムのファイル菇喇は、こんな炊じ。

JavaScriptは、剩眶のファイルに尸かれていて、jsフォルダに弥いてある。

呵姜弄には、帽办のjsファイルに琵圭しちゃえばいいんだけれど、倡券面の斧奶しをよくするため尸充しておく。

BasicGame
 á
 á  index.html
 á
 ěā audio∈跟蔡不∷
 á      idou_ochiru_normal.mp3
 á      jump08.mp3
 á
 ěā images∈グラフィック∷
 á      button.png
 á      dude.png
 á      platform320.png
 á      preloadr_bar.png
 á      sky-dark.png
 á      star.png
 á      timesup.png
 á      title.png
 á
 éā js∈コ〖ド∷
        Boot.js
        Game.js
        MainMenu.js
        phaser.min.js
        Preloader.js

* index.html [#p0b42f38]

[[ソ〖スコ〖ド:https://github.com/ycatch/games-phaser-jumping-dude/blob/master/index.html]]

このindex.htmlを倡くと、ゲ〖ムが弹瓢する。

まず、<head>婶で涩妥なJavascriptを粕み哈む。

<head>
     <meta charset="UTF-8" />
     <title>Jumping Dude</title>
     <script src="js/phaser.min.js"></script>
     <script src="js/Boot.js"></script>
     <script src="js/Preloader.js"></script>
     <script src="js/MainMenu.js"></script>
     <script src="js/Game.js"></script>
 </head>

で、ゲ〖ム极挛を山绩するコンテナを脱罢する。

°script′婶のJavascriptでは、window.onloadで钙び叫して、ゲ〖ムのステ〖タスを判峡する。それからBootステ〖タスを弹瓢する。

* Boot.js [#r0f64cb0]

[[ソ〖スコ〖ド:https://github.com/ycatch/games-phaser-jumping-dude/blob/master/js/Boot.js]]

先寥みとしては、BasicGame.Bootを年盗して、prototypeで怠墙を纳裁していく。

ここでは、init、preload、createに簇眶を充り碰てている。

ゲ〖ムプログラムが弹瓢したら、まずinitで涩妥呵井嘎の肋年をして、preloadでリソ〖ス(粕み哈み面を绩すバ〖)を粕み哈む。

粕み哈んだら、createでPreloadステ〖タスに败瓢する。

* Preloader.js [#cdddf1e0]

[[ソ〖スコ〖ド:https://github.com/ycatch/games-phaser-jumping-dude/blob/master/js/Preload.j]]

preload簇眶で、グラフィックとサウンドファイルを粕み哈んで、createでMainMenuステ〖タスに莲败する。

** 粕み哈み面 [#x122de16]

粕み哈み面(プログレスバ〖)は、こんな炊じで山绩する。

// These are the assets we loaded in Boot.js
 // A nice sparkly background and a loading progress bar
 // 秦肥咖
 this.stage.backgroundColor = 'navy';
 //侯度面バ〖の疤弥
 this.preloadBar = this.add.sprite((BasicGame.GAME_WIDTH-311)/2, (BasicGame.GAME_HEIGHT-27)/2, 'preloaderBar');
 
 // This sets the preloadBar sprite as a loader sprite.
 // What that does is automatically crop the sprite from 0 to full-width
 // as the files below are loaded in.
 // 侯度倡幌
 this.load.setPreloadSprite(this.preloadBar);

で侯度が窗位して、肌のステ〖タスに莲败するときは、createのところで侯度面バ〖を匿贿する

this.preloadBar.cropEnabled = false;

** サウンドファイルの粕み哈み [#o5b6b275]

粕み哈み面は、侯度面のバ〖を山绩する。
茶咙やスプライトと票じように、こんなふうにして粕みこむ。

this.load.audio('getSound', ['audio/jump08.mp3']);
 this.load.audio('jumpSound', ['audio/idou_ochiru_normal.mp3']);

* MainMenu.js [#kc302a28]

[[ソ〖スコ〖ド:https://github.com/ycatch/games-phaser-jumping-dude/blob/master/js/MainMenu.js]]

スタ〖ト茶烫とスタ〖トボタンを山绩するだけ。

** スタ〖トボタン [#wb8e51d7]

スタ〖トボタンは、こんな炊じ。ボタンは、スプライトになっている。これを茶烫面丙に芹弥。

ボタンがクリックされると、startGame簇眶が钙び叫される。

this.add.button(BasicGame.GAME_WIDTH/2-43, BasicGame.GAME_HEIGHT-100,'start-button', this.startGame, this, 1, 0, 2);

startGame簇眶は、肌のGameステ〖タスに莲败する。

* Game.js [#yb1877af]

[[ソ〖スコ〖ド:https://github.com/ycatch/games-phaser-jumping-dude/blob/master/js/Game.js]]

ゲ〖ム极挛は、涟のチュ〖トリアルと票じく、瘤ってジャンプして辣を礁める。

** サウンド [#p1dd4e9a]

いちおう、跟蔡不を烧けてみた。ジャンプしたときと辣を艰ったときに跟蔡不がなる。

まず、createのところで、このステ〖タスで蝗う跟蔡不を判峡する

this.getSound = this.add.audio('getSound');
 this.jumpSound = this.add.audio('jumpSound');

それから、悸狠のアクションに圭わせて、跟蔡不を浩栏する

this.jumpSound.play();  //ジャンプ

this.getSound.play();   //辣ゲット

** 箕粗扩嘎 [#bc18fe3c]

箕粗扩嘎扩のゲ〖ムにしてみた。

そのために、まずcreateのところで、タイマ〖とタイマ〖山绩を介袋步する

this._timeCounter = 0;  //タイマ〖
 this._leftTime = 30;   //荒り箕粗
 this._leftTimeText = this.add.text(300, 16, 'Time: 0', { fontSize: '28px', fill: '#FFF' }); //箕粗山绩

で、updateのところで、タイマ〖を构糠する

// update timer every frame
 this._timeCounter += this.time.elapsed;
 // if spawn timer reach one second (1000 miliseconds)
 if(this._timeCounter > 1000) {
     // reset it
     this._timeCounter = 0;
     this._leftTime --;
     this._leftTimeText.text = 'Time: ' + this._leftTime;
 }

荒り箕粗が、ゼロになったら、ゲ〖ムオ〖バ〖でquitGameを钙び叫す。

if(this._leftTime <= 0) {
     this.quitGame();
 }

** ゲ〖ムオ〖バ〖 [#y0fac540]

quitGameは、こんな炊じ。まず、跟蔡不を贿めて、Time'sUp(箕粗磊れ)を山绩する

quitGame: function (pointer) {
     // Here you should destroy anything you no longer need.
     // Stop music, delete sprites, purge caches, free resources, all that good stuff.
     // Then let's go back to the main menu.
     this.getSound.stop();
     this._timesup_title = this.add.sprite((this.world.width - 400) / 2, (this.world.height - 100) / 2, 'timesup');

それから、ゲ〖ム链挛を办箕匿贿して、クリックしたらメインメニュ〖へ提るようにする。

this.game.paused = true;
     var pausedText = this.add.text(160, 360, "Tap anywhere to Menu.", { fontSize: '28px', fill: '#FFF' });
     this.input.onDown.add(function(){
     pausedText.destroy();
     this.game.paused = false;
     this.state.start('MainMenu');
     }, this);
 },

* レスポンシブ [#r8a955ba]

basicテンプレ〖トではなく、こっちのテンプレ〖トを蝗うと、わりと词帽にレスポンシブにできた。

PCやタブレットなどデバイスの茶烫サイズに圭わせて、ゲ〖ム茶烫のサイズを拇腊してくれる。

スマホで侥积ちのときは、玻积ちにするようガイダンスも极瓢弄に叫る。

ただし、ゲ〖ムはまだタッチだけでは拎侯できないんだけどな。

- Fullscreen Scaling in Phaser | tjkopena
-- http://www.rocketshipgames.com/blogs/tjkopena/2014/10/fullscreen-scaling-in-phaser/
- Github
-- https://github.com/RocketshipGames/phaser-fullscreen
- レスポンシブ惹デモ
-- http://www.catch.jp/program/phaser/003/index.html

* 徊雇 [#w17363b5]

これもまた侍のゲ〖ム≤チュ〖トリアル。

- [[Getting Started With Phaser: Building "Monster Wants Candy" - Tuts+ Game Development Tutorial:http://gamedevelopment.tutsplus.com/tutorials/getting-started-with-phaser-building-monster-wants-candy--cms-21723]]

タイムスタンプを恃构しない