[[Programing]] > [[Phaser]] > チュ〖トリアル2
#title(Phaserのゲ〖ムを猖紊してみた)
#ref(Phaser/jumping_dude.png)
* 车妥 [#u86e3885]
[[涟搀のチュ〖トリアル>phaser/tutorial_01]]は、Phaserによ...
海搀、これを迫极に猖紊して、もう警しゲ〖ムぽくしてみる。
あのチュ〖トリアルでは稍颅していた攫鼠が、いくつか输窗で...
まあ、ソ〖スコ〖ドを斧てもらえば尸かる婶尸もあると蛔うけ...
ここでは、界戎にソ〖スコ〖ドを寥み惟てていくのではなく、...
- 窗喇惹デモ ′ http://www.catch.jp/program/phaser/002/in...
- ソ〖スコ〖ド > https://github.com/ycatch/games-phaser-j...
レスポンシブにする数恕など、拒嘿は琐萨を徊救。
- レスポンシブ惹デモ ′ http://www.catch.jp/program/phase...
- ソ〖スコ〖ド > https://github.com/ycatch/games-phaser-j...
** 网脱掘凤 [#b43143bd]
Copyright 2014 Yutaka Kachi released under MIT license.
粗般いなどあるかも梦れません。
もしも斧つけたら、[[Twitter @y_catch:https://twitter.com/...
* 誊肌 [#ccab2b01]
#contents
* 猖紊爬 [#o061741e]
- ル〖ル∈辣がどんどん笼えていく。扩嘎箕粗扩∷
- タイマ〖を蝗い、箕粗扩嘎ゲ〖ムにした
- Phaserに票涵のBasic Project Templateを蝗う
- グロ〖バル恃眶を蝗わず、ゲ〖ムのステ〖タスが莲败していく
- メインメニュ〖とゲ〖ムオ〖バ〖茶烫の纳裁
- 跟蔡不
* Project Template [#d7625bd6]
涟搀のチュ〖トリアルは、帽办のindex.htmファイルに100乖く...
そこで、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-jum...
この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>
で、ゲ〖ム极挛を山绩するコンテナを脱罢する。
<div id="gameContainer"></div>
°script′婶のJavascriptでは、window.onloadで钙び叫して、...
<script type="text/javascript">
window.onload = function() {
// Create your Phaser game and inject it into the gameCo...
// We did it in a window.onload event, but you can do it...
var game = new Phaser.Game(640, 480, Phaser.AUTO, 'gameC...
// Add the States your game has.
// You don't have to do this in the html, it could be do...
game.state.add('Boot', BasicGame.Boot);
game.state.add('Preloader', BasicGame.Preloader);
game.state.add('MainMenu', BasicGame.MainMenu);
game.state.add('Game', BasicGame.Game);
// Now start the Boot state.
game.state.start('Boot');
};
</script>
* Boot.js [#r0f64cb0]
[[ソ〖スコ〖ド:https://github.com/ycatch/games-phaser-jum...
先寥みとしては、BasicGame.Bootを年盗して、prototypeで怠墙...
ここでは、init、preload、createに簇眶を充り碰てている。
ゲ〖ムプログラムが弹瓢したら、まずinitで涩妥呵井嘎の肋年...
粕み哈んだら、createでPreloadステ〖タスに败瓢する。
* Preloader.js [#cdddf1e0]
[[ソ〖スコ〖ド:https://github.com/ycatch/games-phaser-jum...
preload簇眶で、グラフィックとサウンドファイルを粕み哈んで...
** 粕み哈み面 [#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-...
// This sets the preloadBar sprite as a loader sprite.
// What that does is automatically crop the sprite from ...
// 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....
* MainMenu.js [#kc302a28]
[[ソ〖スコ〖ド:https://github.com/ycatch/games-phaser-jum...
スタ〖ト茶烫とスタ〖トボタンを山绩するだけ。
** スタ〖トボタン [#wb8e51d7]
スタ〖トボタンは、こんな炊じ。ボタンは、スプライトになっ...
ボタンがクリックされると、startGame簇眶が钙び叫される。
this.add.button(BasicGame.GAME_WIDTH/2-43, BasicGame.GAM...
startGame簇眶は、肌のGameステ〖タスに莲败する。
* Game.js [#yb1877af]
[[ソ〖スコ〖ド:https://github.com/ycatch/games-phaser-jum...
ゲ〖ム极挛は、涟のチュ〖トリアルと票じく、瘤ってジャンプ...
** サウンド [#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', {...
で、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 ne...
// Stop music, delete sprites, purge caches, free re...
// Then let's go back to the main menu.
this.getSound.stop();
this._timesup_title = this.add.sprite((this.world.wi...
それから、ゲ〖ム链挛を办箕匿贿して、クリックしたらメイン...
this.game.paused = true;
var pausedText = this.add.text(160, 360, "Tap anywhe...
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/...
- Github
-- https://github.com/RocketshipGames/phaser-fullscreen
- レスポンシブ惹デモ
-- http://www.catch.jp/program/phaser/003/index.html
* 徊雇 [#w17363b5]
これもまた侍のゲ〖ム≤チュ〖トリアル。
- [[Getting Started With Phaser: Building "Monster Wants ...

[[Programing]] > [[Phaser]] > チュ〖トリアル2
#title(Phaserのゲ〖ムを猖紊してみた)
#ref(Phaser/jumping_dude.png)
* 车妥 [#u86e3885]
[[涟搀のチュ〖トリアル>phaser/tutorial_01]]は、Phaserによ...
海搀、これを迫极に猖紊して、もう警しゲ〖ムぽくしてみる。
あのチュ〖トリアルでは稍颅していた攫鼠が、いくつか输窗で...
まあ、ソ〖スコ〖ドを斧てもらえば尸かる婶尸もあると蛔うけ...
ここでは、界戎にソ〖スコ〖ドを寥み惟てていくのではなく、...
- 窗喇惹デモ ′ http://www.catch.jp/program/phaser/002/in...
- ソ〖スコ〖ド > https://github.com/ycatch/games-phaser-j...
レスポンシブにする数恕など、拒嘿は琐萨を徊救。
- レスポンシブ惹デモ ′ http://www.catch.jp/program/phase...
- ソ〖スコ〖ド > https://github.com/ycatch/games-phaser-j...
** 网脱掘凤 [#b43143bd]
Copyright 2014 Yutaka Kachi released under MIT license.
粗般いなどあるかも梦れません。
もしも斧つけたら、[[Twitter @y_catch:https://twitter.com/...
* 誊肌 [#ccab2b01]
#contents
* 猖紊爬 [#o061741e]
- ル〖ル∈辣がどんどん笼えていく。扩嘎箕粗扩∷
- タイマ〖を蝗い、箕粗扩嘎ゲ〖ムにした
- Phaserに票涵のBasic Project Templateを蝗う
- グロ〖バル恃眶を蝗わず、ゲ〖ムのステ〖タスが莲败していく
- メインメニュ〖とゲ〖ムオ〖バ〖茶烫の纳裁
- 跟蔡不
* Project Template [#d7625bd6]
涟搀のチュ〖トリアルは、帽办のindex.htmファイルに100乖く...
そこで、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-jum...
この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>
で、ゲ〖ム极挛を山绩するコンテナを脱罢する。
<div id="gameContainer"></div>
°script′婶のJavascriptでは、window.onloadで钙び叫して、...
<script type="text/javascript">
window.onload = function() {
// Create your Phaser game and inject it into the gameCo...
// We did it in a window.onload event, but you can do it...
var game = new Phaser.Game(640, 480, Phaser.AUTO, 'gameC...
// Add the States your game has.
// You don't have to do this in the html, it could be do...
game.state.add('Boot', BasicGame.Boot);
game.state.add('Preloader', BasicGame.Preloader);
game.state.add('MainMenu', BasicGame.MainMenu);
game.state.add('Game', BasicGame.Game);
// Now start the Boot state.
game.state.start('Boot');
};
</script>
* Boot.js [#r0f64cb0]
[[ソ〖スコ〖ド:https://github.com/ycatch/games-phaser-jum...
先寥みとしては、BasicGame.Bootを年盗して、prototypeで怠墙...
ここでは、init、preload、createに簇眶を充り碰てている。
ゲ〖ムプログラムが弹瓢したら、まずinitで涩妥呵井嘎の肋年...
粕み哈んだら、createでPreloadステ〖タスに败瓢する。
* Preloader.js [#cdddf1e0]
[[ソ〖スコ〖ド:https://github.com/ycatch/games-phaser-jum...
preload簇眶で、グラフィックとサウンドファイルを粕み哈んで...
** 粕み哈み面 [#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-...
// This sets the preloadBar sprite as a loader sprite.
// What that does is automatically crop the sprite from ...
// 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....
* MainMenu.js [#kc302a28]
[[ソ〖スコ〖ド:https://github.com/ycatch/games-phaser-jum...
スタ〖ト茶烫とスタ〖トボタンを山绩するだけ。
** スタ〖トボタン [#wb8e51d7]
スタ〖トボタンは、こんな炊じ。ボタンは、スプライトになっ...
ボタンがクリックされると、startGame簇眶が钙び叫される。
this.add.button(BasicGame.GAME_WIDTH/2-43, BasicGame.GAM...
startGame簇眶は、肌のGameステ〖タスに莲败する。
* Game.js [#yb1877af]
[[ソ〖スコ〖ド:https://github.com/ycatch/games-phaser-jum...
ゲ〖ム极挛は、涟のチュ〖トリアルと票じく、瘤ってジャンプ...
** サウンド [#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', {...
で、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 ne...
// Stop music, delete sprites, purge caches, free re...
// Then let's go back to the main menu.
this.getSound.stop();
this._timesup_title = this.add.sprite((this.world.wi...
それから、ゲ〖ム链挛を办箕匿贿して、クリックしたらメイン...
this.game.paused = true;
var pausedText = this.add.text(160, 360, "Tap anywhe...
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/...
- Github
-- https://github.com/RocketshipGames/phaser-fullscreen
- レスポンシブ惹デモ
-- http://www.catch.jp/program/phaser/003/index.html
* 徊雇 [#w17363b5]
これもまた侍のゲ〖ム≤チュ〖トリアル。
- [[Getting Started With Phaser: Building "Monster Wants ...

phaser/tutorial_02 をテンプレ〖トにして侯喇