[[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]

Copyright 2014 Yutaka Kachi released under MIT license.

ְ㤤ʤɤ뤫Τޤ

⤷⸫Ĥ顢[[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 פȤ

ϡPhaserresources/Project Templates ˤPhaserιȤߤǡʣΥեǹƤ롣

ܤȤϡȤȤƵܤƤ롣

ޤȤߤʤΤǡե򳫤Ƥʤˤɽʤ

* ե빽 [#nbee0dff]

ǤΥΥե빽ϡʴ

JavaScriptϡʣΥեʬƤơjsե֤Ƥ롣

ۤȤñ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>

ǡ༫Τɽ륳ƥʤѰդ롣

 <div id="gameContainer"></div>

scriptJavascriptǤϡwindow.closeǸƤӽФơΥơϿ롣줫Bootơư롣
scriptJavascriptǤϡwindow.onloadǸƤӽФơΥơϿ롣줫Bootơư롣

 <script type="text/javascript">
 
	window.onload = function() {
 
	// Create your Phaser game and inject it into the gameContainer div.
	// We did it in a window.onload event, but you can do it anywhere (requireJS load, anonymous function, jQuery dom ready, - whatever floats your boat)
	var game = new Phaser.Game(640, 480, Phaser.AUTO, 'gameContainer');
 
	// Add the States your game has.
	// You don't have to do this in the html, it could be done in your Boot state too, but for simplicity I'll keep it here.
	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-jumping-dude/blob/master/js/Boot.js]]

ȤߤȤƤϡBasicGame.BootơprototypeǵǽɲäƤ

Ǥϡinitpreloadcreate˴ؿƤƤ롣

ץबư顢ޤinitɬ׺Ǿ¤򤷤ơpreloadǥ꥽(ɤ߹򼨤С)ɤ߹ࡣ

ɤ߹顢createPreloadơ˰ư롣

* Preloader.js [#cdddf1e0]

[[:https://github.com/ycatch/games-phaser-jumping-dude/blob/master/js/Preload.j]]

preloadؿǡեåȥɥեɤ߹ǡcreateMainMenuơܤ롣

** ɤ߹ [#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]]

ȥå   ʬ Хåå   ñ측 ǽ   إ   ǽRSS