Programing > Phaser > 塼ȥꥢ2

jumping_dude.png

Υ塼ȥꥢϡPhaserˤŪʥκΤä

󡢤ȼ˲ɤơ⤦ݤƤߤ롣

Υ塼ȥꥢǤ­Ƥ󤬡Ĥ䴰ǤƤȻפ

ޤɤ򸫤Ƥ館ʬʬ⤢Ȼפɡñ˲⤷Ƥߤޤ

Ǥϡ֤˥ɤȤΩƤƤΤǤϤʤǤ򸫤ƤäơħŪʤȤԥݥȤǼ夲Ƥޤ

쥹ݥ󥷥֤ˤˡʤɡܺ٤򻲾ȡ

Ѿ

Copyright 2014 Yutaka Kachi released under MIT license.

ְ㤤ʤɤ뤫Τޤ

⤷⸫Ĥ顢Twitter @y_catchϢȽޤ

ܼ

  • 롼ɤɤƤ»
  • ޡȤ¥ˤ
  • PhaserƱBasic Project TemplateȤ
  • ХѿȤ鷺ΥơܤƤ
  • ᥤ˥塼ȥ४С̤ɲ
  • ̲

Project Template

Υ塼ȥꥢϡñindex.htmե100Ԥ餤JavascriptɤǤϡñɡǡ⤦ǽ¿ꤿȤ̤ХѿȤƤ롣

ǡPhaserƱƤ롢Project TemplateΡBasic פȤ

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

ܤȤϡȤȤƵܤƤ롣

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

ե빽

ǤΥΥե빽ϡʴ

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

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.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

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

Ǥϡinitpreloadcreate˴ؿƤƤ롣

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

ɤ߹顢createPreloadơ˰ư롣

Preloader.js

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

ɤ߹

ɤ߹(ץ쥹С)ϡʴɽ롣

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

ɥեɤ߹

ɤ߹ϡΥСɽ롣 䥹ץ饤ȤƱ褦ˡʤդˤɤߤࡣ

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

MainMenu.js

Ȳ̤ȥȥܥɽ

ȥܥ

ȥܥϡʴܥϡץ饤ȤˤʤäƤ롣֡

ܥ󤬥åȡ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

༫ΤϡΥ塼ȥꥢƱäƥפ򽸤롣

̲դƤߤפȤäȤ˸̲ʤ롣

ޤcreateΤȤǡΥơǻȤ̲Ͽ

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

줫顢ºݤΥ˹碌ơ̲

this.jumpSound.play();  //
this.getSound.play();   //å

ΥˤƤߤ

Τˡޤ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();
}

४С

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);
},

쥹ݥ󥷥

basicƥץ졼ȤǤϤʤäΥƥץ졼ȤȤȡȴñ˥쥹ݥ󥷥֤ˤǤ

PC䥿֥åȤʤɥǥХβ̥˹碌ơ̤ΥĴƤ롣

ޥۤǽĻΤȤϡˤ褦󥹤⼫ưŪ˽Ф롣

ϤޤåǤǤʤɤʡ

ޤ̤Υܥ塼ȥꥢ롣


  ȥå   ʬ Хåå   ñ측 ǽ   إ   ǽRSS
Last-modified: 2017-09-12 () 23:32:31 (621d)