Programing > Phaser > Tutorial 01

®ǥȯǤ롢HTML5/Javascript2D२󥸥Phaser(ե)

ϡΥ塼ȥꥢMaking your first Phaser gameϤƤPhaserפäƤߤ⡣

ȤۤȤܸʤɡʤĶäݤʤäƤ롣

ʤߤˡʴΥ롣

example_001a.png

δǤϥ()

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

塼ȥꥢΥꥸʥǤϡ(PhaserγȯǤPhotom StormΥ֥)˺ܤäƤơPhaserˤϿƤ롣

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


Ѿ

Japanese Tutorial

Copyright 2014 Yutaka Kachi released under MIT license.

ְ㤤ʤɤ뤫Τޤ

⤷⸫Ĥ顢Twitter @y_catchϢȽޤ

Original

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ۥåȤ˴ޤޤƤ롣


ܼ

Phaseräƥʥˡ

PhaserϡHTML5бǥץåȥեWeb೫ȯե졼ǥȥåפȥХбʡ

Ĥϡ2Dեå饤֥Pixi.js򥳥ˤơɤȤȽȤʪ黻ɲä2D೫ȯե졼

PCȥХΥޥץåȥեбǡץ󥽡(MIT饤)

ɬפʤ

  1. 塼ȥꥢΥǺɤ
  2. ȤäƤȤäƤŪJavascriptμɬ
  3. ȡPhaserdzȯĶƤ

Part.1Ȥ

塼ȥꥢΥץեΤpart1.html򥨥ǥdzȡʤդˤʤäƤ롣줬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֥饦dzƤǰʤ顢ʤˤɽʤ

var game = new Phaser.Game

ǤϡJavascript1(ʲΤȤ)򸫤Ƥ

var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update });

ιԤǤϡPhaserΥ󥹥󥹤ơgameѿ˳Ƥ뤳ȤǡPhaser̿򤢤롣٤Ĥ"game"Ȥѿ̾ǤʤƤ⤤ɡʤդˤΤŪʤˤʤäƤ롣ۤΥץǤ⡢ʤդˤƤ롣

ȹ⤵

ǽ2Ĥͤϡ(width = 800)ȹ⤵(height = 600)ǡPhaserCanvasΥꤷƤ롣Ǥϡ800600ԥˤʤäƤ롣ϡʬιʥǤ뤱ɡ¹ԤǥХβ٤˼ޤäƤʤФʤʤ

CANVASWebGL

3ܤͤϡPhaser.CANVASפPhaser.WEBGLפPhaser.AUTOפΤɤ줫ΤäƤȤꡢCANVASWebGLJavascript/HTML5ǥեåˡǡʬλȤΤꤹФϡPhaser.AUTOסϡޤWebGLƤߤơ֥饦ݡȤƤʤCANVASƤ롣

DOMؤ

4ܤͤϡäݤʸˤʤäƤ뤱ɡPhaserCANVASDOM-IDǤ롣ϡäݤΤޤޤʤΤǡbodyǤCANVAS롣

ؿ(ơ)γ

ǸͤǡPhaserɬܤȤʤؿ򥹥ơȤƥ֥Ȥ˳ƤƤ롣ȤϡƤ

Note: Υ֥Ȥ˥ơľܵҤˡϤʤ餺ʤɡǤϡФ䤯ץȥפ뤿ˡˡѤƤ롣

ǡdzƤؿ( preload()create()update())Ȥ򡢤ΤȵҤƤ

ϥοʹԤȤ˥ơƤ롣ơȥޥȤܤȸƤФ뵻ˡˤʤäƤ

Part.2ǺΥ

ǤϡǻȤǺꤷƥɤ롣

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򻲾ȡǤ⡢ޤɽʤ

å

ʤߤˡΤ褦ǺAssets(å)ȸƤǤ롣

Ǥϡ3Ĥβ1ĤΥץ饤ȥȤɤ߹Ǥ롣

Ǻϡ塼ȥꥢassetsեˤΤǡեѥȥե̾ǵҤƤ롣

åȥ

⤦ҤȤܤߤΤgame.load᥽åɤκǽΰ'sky' 'ground' 'star' 'dude'Ȥʸ󤬻ꤷƤ뤱ɡ줬åȥǺƤӽФˤϡΥåȥ򥳡ɤꤹ롣åȥϡJavascriptʸʤ鲿Ǥ⼫ͳ˻Ȥ롣

Part.3ץ饤Ȥɽ

ץ饤ȤΤȤΤäƤ뤫?

ץ饤ȤȤϡ2Dǥ饯طʤΥեåɽ뤿εǽΥ饯ϡʲ(ץ饤)Ȥɽ롣򤹤Ф䤯ڤؤ뤳Ȥǡ˥᡼󤵤롣

ǤϡΥץ饤ȤɽƤߤ褦ޤϡ򣱸ɽ롣

createؿˡΥɤ򵭽Ҥ롣

function create() {
     game.add.sprite(0, 0, 'star');
}

ǡhtmlե򤤤ä¸ơ֥饦ɽȡΤ褦ˡɽ롣

example_002.png

ºݤΥɤϡ塼ȥꥢpart3.html򻲾ȡࡢäȽФ!

ɽˤĤ

ΤȤطʤϹˤʤäƤ롣

ץ饤Ȥɽ֤ϡɤ򵭽Ҥ֤ˤʤ롣

顢طʤɽϡطʤΥץ饤ȤΥɤ򵭽Ҥ롣

game.add.sprite ᥽å

΢¦ǡgame.add.sprite᥽åɤϡPhaser.Sprite֥ơץ饤Ȥgame worldɤɲä롣Ρgame worldɤˡΥ֥Ȥ¸ߤƤ롣

κɸ

Ρgame worldɤϡĤϥꤵƤʤ̵¤˹äƤ롣ɸθϡ0,0פˤʤäƤơ츫ȺΥʡ˳ƤƤ롣ɡȤ߹ߤCameraޥɤǼͳĴǤ롣

Part.4game worldɤۤ

Ǥϡ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"ˤʤäƤơطʤꤹ롣

طʤˤϡ800600PNGեɤ߹Ǥ롣

example_003.png

롼׵ǽˤĤ

PhaserΥ롼׵ǽϡۤȤ˶Ϥ롼׵ǽϡ̾Ȥꡢ褯֥ȤҤȤĤˤޤȤơñʤΤ褦˥ȥ뤹롣ˡ롼״֤ǾȽ⥵ݡȤƤ롣Υץ륲ǤϡۤɤΥɤǺäplatform롼פȡ⤦ҤȤĤΥ롼פȤδ֤ǾͤȽꤹ롣

Υɤϡۤplatform롼פȤΥɤ

platforms = game.add.group();

ǤϡplatformȤѿˡ롼ץ֥ȤƤ롣Υ롼ץ֥Ȥˡ̤֤ǤɲäƤǽˡ(ground)ɲḁ֥̈Ȥϡ̤κDzˤäơ"ground"᡼ɽ롣̥֥Ȥϡ̤˹礦褦̾Ƥ롣줫顢"immovable"ץѥƥ"true"ˤ롣Ƥȡץ졼䡼Υ饯̤˾ͤƤ⡢̥֥ȤϸꤵƤ(˾ܤϡΤ)

Part.5ץ쥤䡼Ѱդ

ѿ"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ʪ黻ˤäơ̤βޤǾ롣

example_004.png

ץ饤ȥ

Ǥϡplayerץ饤ȤѰդơ32ԥ롢⤵ϥ̤κDz150ԥ֤Ƥ롣"dude"(ǥ塼ǥ)åȤϡǽΤȤǥɤĤpreloadؿΤȤäȤΤƤߤȡ줬᡼ǤϤʤץ饤ȥ(spritesheet)Ȥɤ߹ޤƤΤʬ

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

ץ饤ȥȤϡñΥ᡼ǤϤʤưɽ륢˥᡼ΥޤҤȤĤβեˤޤȤƤ롣ºݤΥץ饤ȥȤեȤƳȡʴˤʤäƤ롣

example_dude.png

˥᡼

ɤǤϡ"left""right"Ȥ2ĤΥ˥᡼Ƥ롣

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

"left"˥᡼ϡץ饤ȥȤκ0, 1, 2, 3ܤޤǤΥޤȤ110ޤ®٤ɽ롣"true"ѥ᡼ϡ˥᡼򤯤֤ؼˤʤ롣줬δܼǡȿ¦ǤƱ褦Ƥ롣

ȡʪŪʥѥ᡼⡢ꤷƤ롣

Note: Phaserϡץ饤Ȥȿžǽ򥵥ݡȤơ˥᡼ΥޤǤ뤱ɡǤϴܤ¤ˤäƤ롣

ʪ黻

PhaserϡĤΰۤʤʪ黻󥸥򥵥ݡȤƤ롣Arcade PhysicsפȡNinja PhysicsסP2.JS Full-Body Physicsפ3Υ塼ȥꥢǤϡХŬץǷ̤ʡArcade Physicsץ󥸥夲Ƥ롣ʪ󥸥ȤˤϡɾǤ餻ˡ٤ƤΥץ饤Ȥȥ롼פʪ󥸥ŬѤʤФʤʤ

١ץ饤ȤˡArcadePhysics.Body.󥹥󥹤bodyץѥƥƤ롣ȡgravityʤbody֥Ȥ¿ѤǤ褦ˤʤ롣񤯤Τϡʤդ˴ñ

player.body.gravity.y = 300;

ϡƥȡɡʤư롣ͤ礭Τǡץ쥤䡼ΥϡŤơȤ̤βޤƲ̤βĥդƤޤ(part5.htmldzǧǤ)

Part.6Ƚupdateؿ

ơɤƤʤդˤʤäƤޤȸȡޤ롼פȥץ졼䡼δ֤˾ȽꤷƤʤǤˡ̤ĥФϸꤷƤޤäƤʤΤϡץ쥤䡼ȾͤȤߤ뤳Ȥ

̥ץ饤ȤϡȤưʪΤ(ʥߥåܥǥȤ)ץ쥤䡼֤Ĥȡͤȿư̤롣ξ硢2ĤʪΤϡߤȿươdudeϤϤ̤ͤϤϤɡ̤ꤷƤΤǡץ쥤䡼פ뤳Ȥˤʤ롣

Ƚ

ơ褦䤯ȽˤĤǤ롣

updateؿˡΤ褦˥ץ쥤䡼ξȽꤷ褦

function update() {

    //  ץ쥤䡼platform롼פ˾Ƚɲ
   game.physics.arcade.collide(player, platforms); 
}

ºݤΥɤϡpart6.html򻲾ȡɽȤʴ

example_005.png

updateؿ

updateؿϡե졼ऴȤ˸ƤӽФ륲Τ֤ʬPhysics.collideؿϡΥץˡ򤫤Ƥ롣оݤȤʤ2ĤΥ֥ȤƥȤơ줾Υ֥ȤˤɤΤ褦˿񤦤롣

Ǥϡץ쥤䡼ץ饤Ȥplatform롼פоݥ֥ȤˤʤäƤ롣롼ץСξȽ򤹤ϡ̤ĥФˤĤơ줾ƥȤƤ롣

ä̤Ωä

Part.7ܡ

ȽϡOKɡޤץ쥤䡼ưʤǡ֤ɥȤΥ٥ȥꥹʡΤȤĴ٤ʤȻפä󤸤ʤʡǤסPhaserˤϡܡɥޥ͡㡼Ȥ߹ǤꡢʤäȤؿѤǤ롣

cursors = game.input.keyboard.createCursorKeys();

δؿˤϡ(up)(down)(left)(right)Ȥ4ĤΥץѥƥäcursors֥ȤŹǤäơPhaser.Keyhttp://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򻲾ȡɽȡʴ

example_006.png

ĤˡܡɤǤ!

ץ쥤䡼ư

Ǥϡɤ¿ɲäΤǡäȲ⤷Ƥߤ褦

ޤǽˡʿ®(ư)ꥻåȤƤ롣줫顢ɤƤ뤫å롣ǡ⤷Ƥʤ顢ʿΰư̤ޥʥˤơΥ˥᡼򳫻Ϥ롣⤷⡢Ƥʤ顢ʿΰư̤ץ饹ˤơΥ˥᡼򳫻Ϥ롣

Ǥϡե졼ऴȤˡ®٤򥯥ꥢƤưꤹ"ȥå-"ѤƤ롣Τǡץ쥤䡼Υץ饤Ȥϡ򲡤ƤȤˤϰưΥȳμ¤ߤ롣PhaserϡȤ®ȤäʣưͿ뤳ȤǤ뤱ɡΥץǤϡʴˤƤ

ǸΥɤǤϡ⥭ƤʤȤץ쥤䡼4ܤΥե졼ɽƤ롣4ܤΥե졼ǤϡdudeϤͤΩäƤ

ɤκǸΥѡȤϡ׵ǽɲäƤ롣ץܥˤʤäƤΤǡɤǤϡΥƤ뤫åƤ롣ǤϤʤץ쥤䡼̤դƤ뤫ˤ뤫åƤ롣ơץ쥤䡼̤ˤĤƤơġƤ硢350px/ ޤ®٤Ϳ롣

פץ쥤䡼ϡưŪƤplatoform롼פȾͤߤ롣

򲡤ơץ쥤䡼򤤤ȥ뤷ơgame worldõƤߤ褦part7.htmlΥɤͤĴơɤưˤʤ뤫Ƥߤɤ

Part.8Τ䤭

ǤϡŪդä褦̤ޤ餷ơץ쥤䡼Ϥ򽸤Ʋ롣

ǡ"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򻲾ȡǡɲä줿

example_007.png

°

ϡplatform롼פäȤȤۤƱˡJavascript"for"롼פ12ĤäƤ롣"i * 70"ȵҤơ70ԥ뤺ֳ֤֤롣

줫顢ץ쥤䡼˽ϤͿΤƱ褦ˡˤͿΤǡबȤȾ夫Ƥ褦ˤʤ롣ˡϤͤ(bounce)ꤷơplatformȤ֤ĤäȤäȥפ롣ΤϤͤ(bounce)ˤϡ0(Хɤʤ)1(äȥХɤ)ޤǤ롣ΥǤϡ0.70.9ޤǤŬͤꤷƤ롣

ξȽ

ɡȽ꤬ʤȡ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: Ǹλž夲

Ǹˡɽ褦ɤƤߤ褦ΤˤϡPhaser.text֥ȤȤΤˡĤѿѰդ롣ҤȤĤϡߤݻΡ⤦ҤȤĤϡƥȥ֥ȼΤ

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򻲾ȡǡ!

example_001a.png

ɤϡ塼ȥꥢpart9.html򻲾ȡ

Ǥ⡢ȤǤ롣

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

ޤȤ

줳ǡPhaserȤäñʥκ򤷤ʪ黻ץ饤Ȥץ쥤䡼ưۤʪΤߺѤˡʤɤ

󡢤äȤʵǽդä뤳ȤǤȤСΥꥢ̤ϤޤʤŨ⤤ʤŨˤϡ"spikes"롼פäơץ쥤䡼ȾȽꤹФ

Ūʥˡˤɤ򽸤뤫ˤƤ⤤͡assetsեˡۤξեåǺƤΤǡǥդޤƸߤ

250İʾ夢륳ɥץ⡢ΩĤϤ

ʤ顢Phaserեhttp://www.html5gamedevs.com/ʹƤߤƤ͡


˲ɤƤߤ

Υ塼ȥꥢΥȼ˲ɤưʤȥݤƤߤ

ϡʴ

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

Ϣ


  ȥå   ʬ Хåå   ñ측 ǽ   إ   ǽRSS
Last-modified: 2014-12-23 () 22:25:12 (1546d)