[[Programing]] > [[Phaser]] > Tutorial 01 #title(Making your first Phaser game¤ò¤ä¤Ã¤Æ¤ß¤¿) ¹â®¤Ç¥µ¥¯¥µ¥¯³«È¯¤Ç¤¤ë¡¢HTML5/Javascript¸þ¤±2D¥²¡¼¥à¥¨¥ó¥¸¥ó¡Ö[[Phaser:http://phaser.io/]]¡×(¥Õ¥§¥¤¥¶¡¼)¡£ ¤³¤ì¤Ï¡¢¤½¤Î¥Á¥å¡¼¥È¥ê¥¢¥ë¡ÖMaking your first Phaser game¡§¤Ï¤¸¤á¤Æ¤ÎPhaser¥²¡¼¥à¤òºî¤í¤¦¡×¤ò¤ä¤Ã¤Æ¤ß¤¿¥á¥â¡£ ¤È¤¤¤¦¤«¡¢¤Û¤È¤ó¤ÉÆüËܸìÌõ¤Ê¤ó¤À¤±¤É¡¢¤«¤Ê¤ê[[ĶÌõ¤Ã¤Ý¤¯:http://www.ea-go.com/html/page08.html]]¤Ê¤Ã¤Æ¤¤¤ë¡£ ¤Á¤Ê¤ß¤Ë¡¢¤³¤ó¤Ê´¶¤¸¤Î¥²¡¼¥à¤òºî¤ë¡£ #ref(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 ---- * ÍøÍѾò·ï [#e134672f] ** Japanese Tutorial [#ub6ea4f0] Copyright 2014 Yutaka Kachi released under MIT license. ´Ö°ã¤¤¤Ê¤É¤¢¤ë¤«¤âÃΤì¤Þ¤»¤ó¡£ ¤â¤·¤â¸«¤Ä¤±¤¿¤é¡¢[[Twitter @y_catch:https://twitter.com/y_catch]]¤ØÏ¢Íí¤¤¤¿¤À¤±¤ë¤È½õ¤«¤ê¤Þ¤¹¡£ ** Original [#s448435d] 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ÇÛÉÛ¥»¥Ã¥È¤Ë´Þ¤Þ¤ì¤Æ¤¤¤ë¡£ ---- #contents * Phaser¤Ã¤Æ¥Ê¥Ë¡© [#z7ff7bd2] Phaser¤Ï¡¢HTML5Âбþ¤Ç¥¯¥í¥¹¥×¥é¥Ã¥È¥Õ¥©¡¼¥à¤ÎWeb¥²¡¼¥à³«È¯¥Õ¥ì¡¼¥à¥ï¡¼¥¯¡£¥Ç¥¹¥¯¥È¥Ã¥×¤È¥â¥Ð¥¤¥ë¤ËÂбþ¡¢¤À¤½¤¦¤Ê¡£ ¤¸¤Ä¤Ï¡¢2D¥°¥é¥Õ¥£¥Ã¥¯¥é¥¤¥Ö¥é¥ê[[Pixi.js:http://www.pixijs.com/]]¤ò¥³¥¢¤Ë¤·¤Æ¡¢¥µ¥¦¥ó¥É¤È¤«¾×ÆÍȽÄê¤È¤«ÊªÍý±é»»¤òÄɲä·¤¿2D¥²¡¼¥à³«È¯¥Õ¥ì¡¼¥à¥ï¡¼¥¯¡£ PC¤È¥â¥Ð¥¤¥ë¤Î¥Þ¥ë¥Á¥×¥é¥Ã¥È¥Õ¥©¡¼¥àÂбþ¤Ç¡¢¥ª¡¼¥×¥ó¥½¡¼¥¹(MIT¥é¥¤¥»¥ó¥¹)¡£ -[[Phaser¤Î¤Ï¤¸¤áÊý>Phaser]]¤ò»²¾È * ɬÍפʤâ¤Î [#j22cbfb9] + ¥Á¥å¡¼¥È¥ê¥¢¥ë¤Î¥½¡¼¥¹¤ÈÁǺà¤ò¥À¥¦¥ó¥í¡¼¥É¤¹¤ë -- ¤¹¤Ç¤ËPhaserËÜÂΤò¥À¥¦¥ó¥í¡¼¥ÉºÑ¤ß¤Ê¤é¡¢°Ê²¼¤Ë¤¢¤ë -- phaser/resources/tutorials/02 Making your first game/ -- ¤Þ¤ÀPhaserËÜÂΤò¥À¥¦¥ó¥í¡¼¥É¤·¤Æ¤Ê¤¤¤Ê¤é¡¢°Ê²¼¤Î¥ê¥ó¥¯¤«¤é -- http://gametest.mobi/phaser/tutorials/02%20Making%20your%20first%20game/phaser_tutorial_02.zip + ¤È¤Ã¤Æ¤â¤È¤Ã¤Æ¤â´ðËÜŪ¤ÊJavascript¤ÎÃ챤¬É¬Í× + ¤¢¤È¡¢Phaser¤Ç³«È¯¤¹¤ë´Ä¶¤òÀ°¤¨¤Æ¤ª¤¯¤³¤È --[[Phaser¤Î¤Ï¤¸¤áÊý>Phaser]]¤Ë¤¹¤³¤·À°Íý¤·¤Æ¤ª¤¤¤¿ * Part.1¡§¹üÁÈ¤ß [#j63337f1] ¥Á¥å¡¼¥È¥ê¥¢¥ë¤Î¥µ¥ó¥×¥ë¥Õ¥¡¥¤¥ë¤Î¤¦¤Á¡¢part1.html¤ò¥¨¥Ç¥£¥¿¤Ç³«¤¯¤È¡¢¤³¤ó¤Ê¤Õ¤¦¤Ë¤Ê¤Ã¤Æ¤¤¤ë¡£¤³¤ì¤¬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¤ò¥Ö¥é¥¦¥¶¤Ç³«¤¤¤Æ¤â»ÄÇ°¤Ê¤¬¤é¡¢¤Ê¤Ë¤âɽ¼¨¤µ¤ì¤Ê¤¤¡£ ** var game = new Phaser.Game ¡¦¡¦¡¦ [#nf4e4f9b] ¤Ç¤Ï¡¢Javascript¤Î1¹ÔÌÜ(°Ê²¼¤Î¤È¤³¤í)¤ò¸«¤Æ¤¤¤³¤¦¡£ var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update }); ¤³¤Î¹Ô¤Ç¤Ï¡¢Phaser¤Î¥¤¥ó¥¹¥¿¥ó¥¹¤òÀ¸À®¤·¤Æ¡¢gameÊÑ¿ô¤Ë³ä¤êÅö¤Æ¤ë¤³¤È¤Ç¡¢Phaser¤ËÀ¸Ì¿¤ò¤¢¤¿¤¨¤ë¡£¤Ù¤Ä¤Ë"game"¤È¤¤¤¦ÊÑ¿ô̾¤Ç¤Ê¤¯¤Æ¤â¤¤¤¤¤±¤É¡¢¤³¤ó¤Ê¤Õ¤¦¤Ë¤¹¤ë¤Î¤¬°ìÈÌŪ¤Ê¤ä¤êÊý¤Ë¤Ê¤Ã¤Æ¤¤¤ë¡£¤Û¤«¤Î¥µ¥ó¥×¥ë¤Ç¤â¡¢¤³¤ó¤Ê¤Õ¤¦¤Ë¤·¤Æ¤¢¤ë¡£ ** Éý¤È¹â¤µ [#n1da4f09] ºÇ½é¤Î2¤Ä¤ÎÀßÄêÃͤϡ¢Éý(width = 800)¤È¹â¤µ(height = 600)¤Ç¡¢Phaser¤¬À¸À®¤¹¤ëCanvas¥¿¥°¤Î¥µ¥¤¥º¤ò»ØÄꤷ¤Æ¤¤¤ë¡£¤³¤³¤Ç¤Ï¡¢800¡ß600¥Ô¥¯¥»¥ë¤Ë¤Ê¤Ã¤Æ¤¤¤ë¡£¤³¤ì¤Ï¡¢¼«Ê¬¤Î¹¥¤¤Ê¥µ¥¤¥º¤ò»ØÄê¤Ç¤¤ë¤±¤É¡¢¼Â¹Ô¤¹¤ë¥Ç¥Ð¥¤¥¹¤Î²òÁüÅÙ¤ÎÃæ¤Ë¼ý¤Þ¤Ã¤Æ¤¤¤Ê¤±¤ì¤Ð¤Ê¤é¤Ê¤¤¡£ ** CANVAS¤«WebGL¤ÎÁªÂò [#df56fe6a] 3ÈÖÌܤÎÀßÄêÃͤϡ¢¡ÖPhaser.CANVAS¡×¤«¡ÖPhaser.WEBGL¡×¤«¡ÖPhaser.AUTO¡×¤Î¤É¤ì¤«¡£ÃΤäƤ¤¤ë¤È¤ª¤ê¡¢CANVAS¤âWebGL¤âJavascript/HTML5¤Ç¥°¥é¥Õ¥£¥Ã¥¯¤òÉÁ¤¯ÊýË¡¤Ç¡¢¼«Ê¬¤Î»È¤¤¤¿¤¤¤â¤Î¤ò»ØÄꤹ¤ì¤Ð¤¤¤¤¡£¥ª¥¹¥¹¥á¤Ï¡¢¡ÖPhaser.AUTO¡×¡£¤³¤ì¤Ï¡¢¤Þ¤ºWebGL¤ÇÉÁ¤¤¤Æ¤ß¤Æ¡¢¥Ö¥é¥¦¥¶¤¬¥µ¥Ý¡¼¥È¤·¤Æ¤¤¤Ê¤±¤ì¤ÐCANVAS¤ÇÉÁ¤¤¤Æ¤¯¤ì¤ë¡£ ** DOM¤Ø¤ÎÁÞÆþ [#de623942] 4ÈÖÌܤÎÀßÄêÃͤϡ¢¶õ¤Ã¤Ý¤Îʸ»úÎó¤Ë¤Ê¤Ã¤Æ¤¤¤ë¤±¤É¡¢Phaser¤¬À¸À®¤·¤¿CANVAS¤ÎDOM-ID¤ò»ØÄê¤Ç¤¤ë¡£º£²ó¤Ï¡¢¶õ¤Ã¤Ý¤Î¤Þ¤Þ¤Ê¤Î¤Ç¡¢bodyÍ×ÁǤËCANVAS¤¬ÁÞÆþ¤µ¤ì¤ë¡£ ** ´Ø¿ô¤Î³ä¤êÅö¤Æ [#k590e6bb] ºÇ¸å¤ÎÀßÄêÃͤǡ¢Phaser¤Çɬ¿Ü¤È¤Ê¤ë´Ø¿ô¤ò¥ª¥Ö¥¸¥§¥¯¥È¤Ë³ä¤êÅö¤Æ¤Æ¤¤¤ë¡£»È¤¤Êý¤Ï¡¢[[¤³¤³¤ËÀâÌÀ¤·¤Æ¤¢¤ë:http://www.html5gamedevs.com/topic/1372-phaser-function-order-reserved-names-and-special-uses/]]¡£ Note: ¤³¤Î¥ª¥Ö¥¸¥§¥¯¥È¤Ï¤«¤Ê¤é¤º¤·¤âɬÍפ¸¤ã¤Ê¤¤¤±¤É¡¢¤³¤³¤Ç¤Ï¡¢¤¹¤Ð¤ä¤¯¥×¥í¥È¥¿¥¤¥×¤òºî¤ë¤¿¤á¤Ë¡¢¤³¤ÎÊýË¡¤òºÎÍѤ·¤Æ¤¤¤ë¡£ ¤Ç¡¢¤³¤³¤Ç³ä¤êÅö¤Æ¤¿´Ø¿ô( preload()¡¢create()¡¢update())¤ÎÃæ¿È¤ò¡¢¤³¤Î¤¢¤Èµ½Ò¤·¤Æ¤¤¤¯¡£ * Part.2¡§¥²¡¼¥àÁǺà¤Î¥í¡¼¥É [#sc2aa036] ¤Ç¤Ï¡¢¥²¡¼¥à¤Ç»È¤¦ÁǺà¤ò»ØÄꤷ¤Æ¥í¡¼¥É¤¹¤ë¡£ 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¤ò»²¾È¡£¤Ç¤â¡¢¤Þ¤À²¿¤âɽ¼¨¤µ¤ì¤Ê¤¤¡£ ** ¥¢¥»¥Ã¥È [#f521235c] ¤Á¤Ê¤ß¤Ë¡¢¤³¤Î¤è¤¦¤ÊÁǺà¤òAssets(¥¢¥»¥Ã¥È)¤È¸Æ¤ó¤Ç¤¤¤ë¡£ ¤³¤³¤Ç¤Ï¡¢3¤Ä¤Î²èÁü¤È1¤Ä¤Î¥¹¥×¥é¥¤¥È¥·¡¼¥È¤òÆɤ߹þ¤ó¤Ç¤¤¤ë¡£ ÁǺà¤Ï¡¢¥Á¥å¡¼¥È¥ê¥¢¥ë¤Îassets¥Õ¥©¥ë¥À¤Ë¤¢¤ë¤Î¤Ç¡¢¥Õ¥¡¥¤¥ë¥Ñ¥¹¤È¥Õ¥¡¥¤¥ë̾¤Çµ½Ò¤·¤Æ¤ä¤ë¡£ ** ¥¢¥»¥Ã¥È¥¡¼ [#mcf74bd6] ¤â¤¦¤Ò¤È¤ÄÃíÌܤ·¤ÆÍߤ·¤¤¤Î¤¬¡¢game.load¥á¥½¥Ã¥É¤ÎºÇ½é¤Î°ú¿ô¡£'sky' 'ground' 'star' 'dude'¤È¤¤¤¦Ê¸»úÎ󤬻ØÄꤷ¤Æ¤¢¤ë¤±¤É¡¢¤³¤ì¤¬¥¢¥»¥Ã¥È¥¡¼¡£¥²¡¼¥à¤ËÁǺà¤ò¸Æ¤Ó½Ð¤¹¤Ë¤Ï¡¢¤³¤Î¥¢¥»¥Ã¥È¥¡¼¤ò¥³¡¼¥É¤«¤é»ØÄꤹ¤ë¡£¥¢¥»¥Ã¥È¥¡¼¤Ï¡¢Javascript¤Îʸ»úÎó¤Ê¤é²¿¤Ç¤â¼«Í³¤Ë»È¤¨¤ë¡£ * Part.3¡§¥¹¥×¥é¥¤¥È¤Îɽ¼¨ [#c7bdeef1] ¥¹¥×¥é¥¤¥È¤Î¤³¤È¤ÏÃΤäƤ¤¤ë¤«¤Ê? ¥¹¥×¥é¥¤¥È¤È¤Ï¡¢2D¥²¡¼¥à¤Ç¥¥ã¥é¥¯¥¿¡¼¤äÇطʤΥ°¥é¥Õ¥£¥Ã¥¯¤òɽ¼¨¤¹¤ë¤¿¤á¤Îµ¡Ç½¡£¥²¡¼¥àÆâ¤Î¥¥ã¥é¥¯¥¿¡¼¤Ï¡¢¾®¤µ¤Ê²èÁü(¥¹¥×¥é¥¤¥È)¤È¤·¤Æɽ¼¨¤µ¤ì¤ë¡£¤³¤ì¤ò¤¹¤Ð¤ä¤¯ÀÚ¤êÂؤ¨¤ë¤³¤È¤Ç¡¢¥¢¥Ë¥á¡¼¥·¥ç¥ó¤µ¤»¤ë¡£ ¤Ç¤Ï¡¢¤½¤Î¥¹¥×¥é¥¤¥È¤òɽ¼¨¤µ¤»¤Æ¤ß¤è¤¦¡£¤Þ¤º¤Ï¡¢À±¤ò£±¸Äɽ¼¨¤µ¤»¤ë¡£ create´Ø¿ô¤Ë¡¢¼¡¤Î¥³¡¼¥É¤òµ½Ò¤¹¤ë¡£ function create() { game.add.sprite(0, 0, 'star'); } ¤Ç¡¢¤½¤Îhtml¥Õ¥¡¥¤¥ë¤ò¤¤¤Ã¤¿¤óÊݸ¤·¤Æ¡¢¥Ö¥é¥¦¥¶¤Çɽ¼¨¤µ¤»¤ë¤È¡¢¼¡¤Î¤è¤¦¤Ë¡¢º¸¾å¤ËÀ±¤¬É½¼¨¤µ¤ì¤ë¡£ #ref(example_002.png) ¼ÂºÝ¤Î¥³¡¼¥É¤Ï¡¢¥Á¥å¡¼¥È¥ê¥¢¥ë¤Îpart3.html¤ò»²¾È¡£¤¦¡¼¤à¡¢¤ä¤Ã¤È½Ð¤¿! ** ɽ¼¨½ç¤Ë¤Ä¤¤¤Æ [#i3e0644b] º£¤Î¤È¤³¤í¡¢ÇطʤϹõ¿§¤Ë¤Ê¤Ã¤Æ¤¤¤ë¡£ ¥¹¥×¥é¥¤¥È¤¬É½¼¨¤µ¤ì¤ë½çÈ֤ϡ¢¥³¡¼¥É¤òµ½Ò¤·¤¿½çÈ֤ˤʤ롣 ¤À¤«¤é¡¢À±¤ÎÇطʤòɽ¼¨¤·¤¿¤¤¾ì¹ç¤Ï¡¢À±¤ÎÁ°¤ËÇطʤΥ¹¥×¥é¥¤¥È¤Î¥³¡¼¥É¤òµ½Ò¤¹¤ë¡£ ** game.add.sprite ¥á¥½¥Ã¥É [#z603198e] ¥²¡¼¥à¤Î΢¦¤Ç¡¢game.add.sprite¥á¥½¥Ã¥É¤Ï¡¢¿·¤·¤¤[[Phaser.Sprite¥ª¥Ö¥¸¥§¥¯¥È:http://docs.phaser.io/Phaser.Sprite.html]]¤òÀ¸À®¤·¤Æ¡¢¥¹¥×¥é¥¤¥È¤ò¡Ègame world¡É¤ËÄɲ乤롣¤³¤Î¡Ègame world¡É¤Ë¡¢¥²¡¼¥à¤Î¥ª¥Ö¥¸¥§¥¯¥È¤¬Â¸ºß¤·¤Æ¤¤¤ë¡£ ** ¥²¡¼¥à¤ÎºÂɸ [#bda6626e] ¤³¤Î¡Ègame world¡É¤Ï¡¢¤¸¤Ä¤Ï¥µ¥¤¥º¤¬¸ÇÄꤵ¤ì¤Æ¤¤¤Ê¤¤¤·¡¢Ìµ¸Â¤Ë¹¤¬¤Ã¤Æ¤¤¤ë¡£ºÂɸ¤Î¸¶ÅÀ¤Ï¡Ö0,0¡×¤Ë¤Ê¤Ã¤Æ¤¤¤Æ¡¢°ì¸«¤¹¤ë¤Èº¸¾å¤Î¥³¡¼¥Ê¡¼¤Ë³ä¤êÅö¤Æ¤é¤ì¤Æ¤¤¤ë¡£¤À¤±¤É¡¢ÁȤ߹þ¤ß¤ÎCamera¥³¥Þ¥ó¥É¤Ç¼«Í³¤ËÄ´À°¤Ç¤¤ë¡£ * Part.4¡§¡Ègame world¡É¤ò¹½ÃÛ¤¹¤ë [#uda5c758] ¤Ç¤Ï¡¢¡È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"¤Ë¤Ê¤Ã¤Æ¤¤¤Æ¡¢¤³¤ì¤ÇÇطʤò»ØÄꤹ¤ë¡£ ¤³¤ÎÇطʤˤϡ¢800¡ß600¥µ¥¤¥º¤ÎPNG¥Õ¥¡¥¤¥ë¤òÆɤ߹þ¤ó¤Ç¤¤¤ë¡£ #ref(example_003.png) ** ¥°¥ë¡¼¥×µ¡Ç½¤Ë¤Ä¤¤¤Æ [#r127ae81] Phaser¤Î¥°¥ë¡¼¥×µ¡Ç½¤Ï¡¢¤Û¤ó¤È¤¦¤Ë¶¯ÎϤÀ¡£¥°¥ë¡¼¥×µ¡Ç½¤Ï¡¢¤½¤Î̾Á°¤¬¼¨¤¹¤È¤ª¤ê¡¢¤è¤¯»÷¤¿¥ª¥Ö¥¸¥§¥¯¥È¤ò¤Ò¤È¤Ä¤Ë¤Þ¤È¤á¤Æ¡¢Ã±°ì¤ÎÉôÉʤΤ褦¤Ë¥³¥ó¥È¥í¡¼¥ë¤¹¤ë¡£¤µ¤é¤Ë¡¢¥°¥ë¡¼¥×´Ö¤Ç¾×ÆÍȽÄê¤â¥µ¥Ý¡¼¥È¤·¤Æ¤¤¤ë¡£¤³¤Î¥µ¥ó¥×¥ë¥²¡¼¥à¤Ç¤Ï¡¢Àè¤Û¤É¤Î¥³¡¼¥É¤Çºî¤Ã¤¿platform¥°¥ë¡¼¥×¤È¡¢¤â¤¦¤Ò¤È¤Ä¤Î¥°¥ë¡¼¥×¤È¤Î´Ö¤Ç¾×ÆͤòȽÄꤹ¤ë¡£ ¼¡¤Î¥³¡¼¥É¤Ï¡¢Àè¤Û¤Éplatform¥°¥ë¡¼¥×¤òÄêµÁ¤·¤¿¤È¤¤Î¥³¡¼¥É¤À¡£ platforms = game.add.group(); ¤³¤³¤Ç¤Ï¡¢platform¤È¤¤¤¦¥í¡¼¥«¥ëÊÑ¿ô¤Ë¡¢¥°¥ë¡¼¥×¥ª¥Ö¥¸¥§¥¯¥È¤òÂåÆþ¤·¤Æ¤¤¤ë¡£¤³¤Î¥°¥ë¡¼¥×¥ª¥Ö¥¸¥§¥¯¥È¤Ë¡¢¥²¡¼¥à²èÌ̤ËÇÛÃÖ¤¹¤ëÍ×ÁǤòÄɲ䷤Ƥ¤¤¯¡£ºÇ½é¤Ë¡¢ÃÏÌÌ(ground)¤òÄɲä·¤¿¡£¤³¤ÎÃÏÌÌ¥ª¥Ö¥¸¥§¥¯¥È¤Ï¡¢¥²¡¼¥à²èÌ̤κDz¼Éô¤Ë¤¢¤Ã¤Æ¡¢"ground"¥¤¥á¡¼¥¸¤¬É½¼¨¤µ¤ì¤ë¡£ÃÏÌÌ¥ª¥Ö¥¸¥§¥¯¥È¤ÎÉý¤Ï¡¢¥²¡¼¥à²èÌ̤˹礦¤è¤¦³ÈÂç½Ì¾®¤·¤Æ¤¤¤ë¡£¤½¤ì¤«¤é¡¢"immovable"¥×¥í¥Ñ¥Æ¥£¤ò"true"¤Ë¤¹¤ë¡£¤³¤¦¤·¤Æ¤ª¤¯¤È¡¢¥×¥ì¡¼¥ä¡¼¤Î¥¥ã¥é¥¯¥¿¤¬ÃÏÌ̤˾×Æͤ·¤Æ¤â¡¢ÃÏÌÌ¥ª¥Ö¥¸¥§¥¯¥È¤Ï¸ÇÄꤵ¤ì¤Æ¤¤¤ë(¤µ¤é¤Ë¾Ü¤·¤¤ÀâÌÀ¤Ï¡¢¤³¤Î¤¢¤È)¡£ * Part.5¡§¥×¥ì¥¤¥ä¡¼¤òÍÑ°Õ¤¹¤ë [#udc77a75] ¿·¤·¤¤¥í¡¼¥«¥ëÊÑ¿ô"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¤¬¡¢ÊªÍý±é»»¤Ë¤·¤¿¤¬¤Ã¤Æ¡¢ÃÏÌ̤β¼¤Þ¤Ç¾¡¼ê¤ËÍî¤Á¤ë¡£ #ref(example_004.png) ** ¥¹¥×¥é¥¤¥È¥·¡¼¥È [#r7232d0b] ¤³¤³¤Ç¤Ï¡¢player¥¹¥×¥é¥¤¥È¤òÍÑ°Õ¤·¤Æ¡¢²£32¥Ô¥¯¥»¥ë¡¢¹â¤µ¤Ï¥²¡¼¥à²èÌ̤κDz¼Éô¤«¤é150¥Ô¥¯¥»¥ë¤ËÇÛÃÖ¤·¤Æ¤¤¤ë¡£¤³¤Î"dude"([[¥Ç¥å¡¼¥Ç¥å:http://ejje.weblio.jp/content/dude]])¥¢¥»¥Ã¥È¤Ï¡¢ºÇ½é¤Î¤È¤³¤í¤Ç¥í¡¼¥É¤·¤¿¥ä¥Ä¤À¡£preload´Ø¿ô¤Î¤È¤³¤í¤ò¥Á¥é¥Ã¤È¤Î¤¾¤¤¤Æ¤ß¤ë¤È¡¢¤³¤ì¤¬¥¤¥á¡¼¥¸¤Ç¤Ï¤Ê¤¯¡¢¥¹¥×¥é¥¤¥È¥·¡¼¥È(spritesheet)¤È¤·¤ÆÆɤ߹þ¤Þ¤ì¤Æ¤¤¤ë¤Î¤¬Ê¬¤«¤ë¤À¤í¤¦¡£ game.load.spritesheet('dude', 'assets/dude.png', 32, 48); ¥¹¥×¥é¥¤¥È¥·¡¼¥È¤Ï¡¢Ã±°ì¤Î¥¤¥á¡¼¥¸¤Ç¤Ï¤Ê¤¯¡¢Æ°¤¤òɽ¸½¤¹¤ë¥¢¥Ë¥á¡¼¥·¥ç¥ó¤Î¥³¥Þ¤¬¡¢¤Ò¤È¤Ä¤Î²èÁü¥Õ¥¡¥¤¥ë¤Ë¤Þ¤È¤á¤é¤ì¤Æ¤¤¤ë¡£¼ÂºÝ¤Î¥¹¥×¥é¥¤¥È¥·¡¼¥È¤ò²èÁü¥Õ¥¡¥¤¥ë¤È¤·¤Æ³«¤¯¤È¡¢¤³¤ó¤Ê´¶¤¸¤Ë¤Ê¤Ã¤Æ¤¤¤ë¡£ #ref(example_dude.png) ** ¥¢¥Ë¥á¡¼¥·¥ç¥ó¤ÎÄêµÁ [#f6140c56] ¥³¡¼¥É¤Ç¤Ï¡¢"left"¤È"right"¤È¤¤¤¦2¤Ä¤Î¥¢¥Ë¥á¡¼¥·¥ç¥ó¤òÄêµÁ¤·¤Æ¤¤¤ë¡£ player.animations.add('left', [0, 1, 2, 3], 10, true); "left"¥¢¥Ë¥á¡¼¥·¥ç¥ó¤Ï¡¢¥¹¥×¥é¥¤¥È¥·¡¼¥È¤Îº¸¤«¤é0, 1, 2, 3ÈÖÌܤޤǤΥ³¥Þ¤ò»È¤¤¡¢1ÉÃÅö¤¿¤ê10¥³¥Þ¤Î®ÅÙ¤Çɽ¼¨¤¹¤ë¡£"true"¥Ñ¥é¥á¡¼¥¿¤Ï¡¢¥¢¥Ë¥á¡¼¥·¥ç¥ó¤ò¤¯¤êÊÖ¤¹»Ø¼¨¤Ë¤Ê¤ë¡£¤³¤ì¤¬¡¢Áö¤ê¤Î´ðËܼþ´ü¤Ç¡¢¤³¤ì¤òÈ¿ÂЦ¤Ç¤âƱ¤¸¤è¤¦¤ËÄêµÁ¤·¤Æ¤¤¤ë¡£ ¤¢¤È¡¢ÊªÍýŪ¤Ê¥Ñ¥é¥á¡¼¥¿¤â¡¢¤¹¤³¤·ÀßÄꤷ¤Æ¤¢¤ë¡£ Note: Phaser¤Ï¡¢¥¹¥×¥é¥¤¥È¤Îȿžµ¡Ç½¤ò¥µ¥Ý¡¼¥È¤·¤Æ¡¢¥¢¥Ë¥á¡¼¥·¥ç¥ó¤Î¥³¥Þ¤òÀáÌó¤Ç¤¤ë¤±¤ì¤É¡¢¤³¤³¤Ç¤Ï´ðËܤËÃé¼Â¤Ë¤ä¤Ã¤Æ¤¤¤ë¡£ ** ʪÍý±é»» [#d6e2a466] Phaser¤Ï¡¢¤¤¤¯¤Ä¤«¤Î°Û¤Ê¤ëʪÍý±é»»¥¨¥ó¥¸¥ó¤ò¥µ¥Ý¡¼¥È¤·¤Æ¤¤¤ë¡£¡ÖArcade Physics¡×¤È¡ÖNinja Physics¡×¡ÖP2.JS Full-Body Physics¡×¤Î3¼ïÎà¤À¡£¤³¤Î¥Á¥å¡¼¥È¥ê¥¢¥ë¤Ç¤Ï¡¢¥â¥Ð¥¤¥ë¤ËŬ¤·¤¿¡¢¥·¥ó¥×¥ë¤Ç·ÚÎ̤ʡÖArcade Physics¡×¥¨¥ó¥¸¥ó¤ò¼è¤ê¾å¤²¤Æ¤¤¤ë¡£ÊªÍý¥¨¥ó¥¸¥ó¤ò»È¤¦¤Ë¤Ï¡¢¥³¡¼¥É¾å¤Ç¤½¤ì¤òÁö¤é¤»¡¢¤µ¤é¤Ë¡¢¤¹¤Ù¤Æ¤Î¥¹¥×¥é¥¤¥È¤È¥°¥ë¡¼¥×¤ÇʪÍý¥¨¥ó¥¸¥ó¤òŬÍѤ·¤Ê¤±¤ì¤Ð¤Ê¤é¤Ê¤¤¡£ °ìÅÙ¡¢¥¹¥×¥é¥¤¥È¤Ë¡¢[[ArcadePhysics.Body.:http://docs.phaser.io/Phaser.Physics.Arcade.Body.html]]¥¤¥ó¥¹¥¿¥ó¥¹¤Îbody¥×¥í¥Ñ¥Æ¥£¤ò³ä¤êÅö¤Æ¤ë¡£¤¹¤ë¤È¡¢gravity¤Ê¤Ébody¥ª¥Ö¥¸¥§¥¯¥È¤¬»ý¤Ä¿¤¯¤ÎÍøÍѤǤ¤ë¤è¤¦¤Ë¤Ê¤ë¡£½ñ¤¯¤Î¤Ï¡¢¤³¤ó¤Ê¤Õ¤¦¤Ë´Êñ¤À¡£ player.body.gravity.y = 300; ¤³¤ì¤Ï¡¢¥Æ¥¥È¡¼¤ÊÎã¤À¤±¤É¡¢¤½¤ì¤Ê¤ê¤ËÆ°ºî¤¹¤ë¡£ÀßÄêÃͤ¬Â礤¹¤®¤ë¤Î¤Ç¡¢¥×¥ì¥¤¥ä¡¼¤Î¥¥ã¥é¤Ï¡¢½Å¤¹¤®¤Æ¡¢¤¹¤È¤ó¤ÈÃÏÌ̤β¼¤Þ¤ÇÍî¤Á¤Æ²èÌ̤β¼¤ËÄ¥¤êÉÕ¤¤¤Æ¤·¤Þ¤¦(part5.html¤Ç³Îǧ¤Ç¤¤ë)¡£ *Part.6¡§¾×ÆÍȽÄê¤Èupdate´Ø¿ô [#f92bf2e6] ¤µ¤Æ¡¢¤É¤¦¤·¤Æ¤³¤ó¤Ê¤Õ¤¦¤Ë¤Ê¤Ã¤Æ¤·¤Þ¤¦¤«¤È¸À¤¦¤È¡¢¤Þ¤À¡¢¥°¥ë¡¼¥×¤È¥×¥ì¡¼¥ä¡¼¤Î´Ö¤Ë¾×ÆÍȽÄê¤òÀßÄꤷ¤Æ¤Ê¤¤¤«¤é¤À¡£¤¹¤Ç¤Ë¡¢ÃÏÌ̤ÈÄ¥¤ê½Ð¤·¤Ï¸ÇÄꤷ¤Æ¤ª¤¤¤¿¡£¤Þ¤À¤ä¤Ã¤Æ¤Ê¤¤¤Î¤Ï¡¢¥×¥ì¥¤¥ä¡¼¤¬²¿¤«¤È¾×Æͤ·¤¿¤È¤¡¢¤Á¤ã¤ó¤ÈÄä»ß¤µ¤»¤ë¤³¤È¤À¡£ ÃÏÌÌ¥¹¥×¥é¥¤¥È¤Ï¡¢¤â¤È¤â¤ÈÆ°¤¯ÊªÂΤÇ(¥À¥¤¥Ê¥ß¥Ã¥¯¥Ü¥Ç¥£¤È¤â¸À¤¦)¡¢¥×¥ì¥¤¥ä¡¼¤¬¤Ö¤Ä¤«¤ë¤È¡¢¾×ÆͤÎÈ¿Æ°¤ÏÃÏÌ̤ËÅÁ¤ï¤ë¡£¤³¤Î¾ì¹ç¡¢2¤Ä¤ÎʪÂΤϡ¢¸ß¤¤¤ËÈ¿ÂÐÊý¸þ¤ËÆ°¤¤¤Æ¡¢dude¤Ï¤Ï¤Í¤«¤¨¤êÃÏÌ̤ÏÍî¤Á»Ï¤á¤ë¤Ï¤º¤À¡£¤À¤±¤É¡¢ÃÏÌ̤¬¸ÇÄꤷ¤Æ¤¢¤ë¤Î¤Ç¡¢¥×¥ì¥¤¥ä¡¼¤À¤±¤¬¥¸¥ã¥ó¥×¤¹¤ë¤³¤È¤Ë¤Ê¤ë¡£ ** ¾×ÆÍȽÄê [#kd91ab9c] ¤µ¤Æ¡¢¤è¤¦¤ä¤¯¾×ÆÍȽÄê¤Ë¤Ä¤¤¤ÆÀâÌÀ¤Ç¤¤ë¡£ update´Ø¿ô¤Ë¡¢¼¡¤Î¤è¤¦¤Ë¥×¥ì¥¤¥ä¡¼¤Î¾×ÆÍȽÄê¤òÀßÄꤷ¤è¤¦¡£ function update() { // ¥×¥ì¥¤¥ä¡¼¤Èplatform¥°¥ë¡¼¥×¤Ë¾×ÆÍȽÄê¤òÄɲà game.physics.arcade.collide(player, platforms); } ¼ÂºÝ¤Î¥³¡¼¥É¤Ï¡¢part6.html¤ò»²¾È¡£É½¼¨¤¹¤ë¤È¤³¤ó¤Ê´¶¤¸¡£ #ref(example_005.png) ** update´Ø¿ô [#s89afead] update´Ø¿ô¤Ï¡¢¥Õ¥ì¡¼¥à¤´¤È¤Ë¸Æ¤Ó½Ð¤µ¤ì¤ë¥²¡¼¥à¤Î¤¯¤êÊÖ¤·½èÍýÉôʬ¤À¡£[[Physics.collide:http://docs.phaser.io/Phaser.Physics.Arcade.html#toc22]]´Ø¿ô¤Ï¡¢¤³¤Î¥²¡¼¥à¥×¥í¥°¥é¥à¤ËËâË¡¤ò¤«¤±¤Æ¤¯¤ì¤ë¡£ÂоݤȤʤë2¤Ä¤Î¥ª¥Ö¥¸¥§¥¯¥È¤ò¥Æ¥¹¥È¤·¤Æ¡¢¤½¤ì¤¾¤ì¤Î¥ª¥Ö¥¸¥§¥¯¥È¤Ë¤É¤Î¤è¤¦¤Ë¿¶Éñ¤¦¤«¤òÅÁ¤¨¤ë¡£ ¤³¤ÎÎã¤Ç¤Ï¡¢¥×¥ì¥¤¥ä¡¼¥¹¥×¥é¥¤¥È¤Èplatform¥°¥ë¡¼¥×¤¬Âоݥª¥Ö¥¸¥§¥¯¥È¤Ë¤Ê¤Ã¤Æ¤¤¤ë¡£¥°¥ë¡¼¥×¥á¥ó¥Ð¡¼¤Î¾×ÆÍȽÄê¤ò¤¹¤ë¾ì¹ç¤Ï¡¢ÃÏÌ̤ÈÄ¥¤ê½Ð¤·¤Ë¤Ä¤¤¤Æ¡¢¤½¤ì¤¾¤ì¥Æ¥¹¥È¤·¤Æ¤¯¤ì¤ë¡£ ¤ä¤Ã¤ÈÃÏÌ̤ËΩ¤Ã¤¿¡£ * Part.7¡§¥¡¼¥Ü¡¼¥ÉÁàºî [#h6f41a54] ¾×ÆÍȽÄê¤Ï¡¢¤³¤ì¤ÇOK¡£¤À¤±¤É¡¢¤Þ¤À¥×¥ì¥¤¥ä¡¼¤¬Æ°¤«¤Ê¤¤¡£¤³¤³¤Ç¡¢¤¿¤Ö¤ó¥É¥¥å¥á¥ó¥È¤Î¥¤¥Ù¥ó¥È¥ê¥¹¥Ê¡¼¤Î¤È¤³¤í¤òÄ´¤Ù¤Ê¤¯¤Á¤ã¤È»×¤Ã¤¿¤ó¤¸¤ã¤Ê¤¤¤«¤Ê¡£¤Ç¤âÂç¾æÉס£Phaser¤Ë¤Ï¡¢¥¡¼¥Ü¡¼¥É¥Þ¥Í¡¼¥¸¥ã¡¼¤¬ÁȤ߹þ¤ó¤Ç¤¢¤ê¡¢¤³¤ó¤Ê¤Á¤ç¤Ã¤È¤·¤¿´Ø¿ô¤ÇÍøÍѤǤ¤ë¡£ cursors = game.input.keyboard.createCursorKeys(); ¤³¤Î´Ø¿ô¤Ë¤Ï¡¢¾å(up)¡¢²¼(down)¡¢º¸(left)¡¢±¦(right)¤È¤¤¤¦4¤Ä¤Î¥×¥í¥Ñ¥Æ¥£¤ò»ý¤Ã¤¿cursors¥ª¥Ö¥¸¥§¥¯¥È¤¬»Å¹þ¤ó¤Ç¤¢¤Ã¤Æ¡¢[[Phaser.Key¡§http://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¤ò»²¾È¡£É½¼¨¤¹¤ë¤È¡¢¤³¤ó¤Ê´¶¤¸¡£ #ref(example_006.png) ¤Ä¤¤¤Ë¡¢¥¡¼¥Ü¡¼¥É¤ÇÁàºî¤Ç¤¤¿! ** ¥×¥ì¥¤¥ä¡¼¤òÆ°¤«¤¹¥³¡¼¥É [#n5a2cfb4] ¤³¤³¤Ç¤Ï¡¢¥³¡¼¥É¤ò¿¤á¤ËÄɲä·¤¿¤Î¤Ç¡¢¤Á¤ç¤Ã¤È²òÀ⤷¤Æ¤ß¤è¤¦¡£ ¤Þ¤ººÇ½é¤Ë¡¢¿åÊ¿Êý¸þ¤Î®ÅÙ(°ÜÆ°ÎÌ)¤ò¥ê¥»¥Ã¥È¤·¤Æ¤¤¤ë¡£¤½¤ì¤«¤é¡¢¤É¤ÎÌð°õ¥¡¼¤¬²¡¤µ¤ì¤Æ¤¤¤ë¤«¥Á¥§¥Ã¥¯¤¹¤ë¡£¤½¤ì¤Ç¡¢¤â¤·º¸Ìð°õ¥¡¼¤¬²¡¤µ¤ì¤Æ¤¤¤ë¤Ê¤é¡¢¿åÊ¿Êý¸þ¤Î°ÜÆ°Î̤ò¥Þ¥¤¥Ê¥¹¤Ë¤·¤Æ¡¢º¸¸þ¤¤Î¥¢¥Ë¥á¡¼¥·¥ç¥ó¤ò³«»Ï¤¹¤ë¡£¤â¤·¤â¡¢±¦Ìð°õ¥¡¼¤¬²¡¤µ¤ì¤Æ¤¤¤ë¤Ê¤é¡¢¿åÊ¿Êý¸þ¤Î°ÜÆ°Î̤ò¥×¥é¥¹¤Ë¤·¤Æ¡¢º¸¸þ¤¤Î¥¢¥Ë¥á¡¼¥·¥ç¥ó¤ò³«»Ï¤¹¤ë¡£ ¤³¤³¤Ç¤Ï¡¢¥Õ¥ì¡¼¥à¤´¤È¤Ë¡¢Â®ÅÙ¤ò¥¯¥ê¥¢¤·¤Æ¤«¤é°ÜÆ°Êý¸þ¤òÀßÄꤹ¤ë"¥¹¥È¥Ã¥×-¥¹¥¿¡¼¥È"¥¹¥¿¥¤¥ë¤òºÎÍѤ·¤Æ¤¤¤ë¡£¤½¤Î¤ª¤«¤²¤Ç¡¢¥×¥ì¥¤¥ä¡¼¤Î¥¹¥×¥é¥¤¥È¤Ï¡¢Ìð°õ¥¡¼¤ò²¡¤·¤Æ¤¤¤ë¤È¤¤Ë¤Ï°ÜÆ°¤·¡¢Î¥¤¹¤È³Î¼Â¤ËÄä»ß¤¹¤ë¡£Phaser¤Ï¡¢´·À¤È¤«²Ã®¤È¤«¡¢¤â¤Ã¤ÈÊ£»¨¤ÊÆ°¤¤òÍ¿¤¨¤ë¤³¤È¤¬¤Ç¤¤ë¤±¤É¡¢¤³¤Î¥µ¥ó¥×¥ë¤Ç¤Ï¡¢¤³¤ó¤Ê´¶¤¸¤Ë¤·¤Æ¤ª¤³¤¦¡£ ºÇ¸å¤Î¥³¡¼¥É¤Ç¤Ï¡¢²¿¤â¥¡¼¤¬²¡¤µ¤ì¤Æ¤¤¤Ê¤¤¤È¤¡¢¥×¥ì¥¤¥ä¡¼¤â4ÈÖÌܤΥե졼¥à¤òɽ¼¨¤µ¤»¤Æ¤¤¤ë¡£4ÈÖÌܤΥե졼¥à¤Ç¤Ï¡¢dude¤Ï¤¿¤ÀÆͤÃΩ¤Ã¤Æ¤¤¤ë¤À¤±¤À¡£ ** ¥¸¥ã¥ó¥× [#k8d35401] ¥³¡¼¥É¤ÎºÇ¸å¤Î¥Ñ¡¼¥È¤Ï¡¢¥¸¥ã¥ó¥×µ¡Ç½¤òÄɲ䷤Ƥ¤¤ë¡£¾åÌð°õ¥¡¼¤¬¥¸¥ã¥ó¥×¥Ü¥¿¥ó¤Ë¤Ê¤Ã¤Æ¤¤¤ë¤Î¤Ç¡¢¥³¡¼¥É¤Ç¤Ï¡¢¤³¤Î¥¡¼¤¬²¡¤µ¤ì¤Æ¤¤¤ë¤«¤ò¥Á¥§¥Ã¥¯¤·¤Æ¤¤¤ë¡£¤·¤«¤·¡¢¤½¤ì¤À¤±¤Ç¤Ï¤Ê¤¯¡¢¥×¥ì¥¤¥ä¡¼¤¬ÃÏÌ̤ËÉÕ¤¤¤Æ¤¤¤ë¤«¡¢¶õÃæ¤Ë¤¤¤ë¤«¤â¥Á¥§¥Ã¥¯¤·¤Æ¤¤¤ë¡£¤½¤·¤Æ¡¢¥×¥ì¥¤¥ä¡¼¤¬ÃÏÌ̤ˤĤ¤¤Æ¤¤¤Æ¡¢¤«¤Ä¡¢¾åÌð°õ¥¡¼¤¬²¡¤µ¤ì¤Æ¤¤¤ë¾ì¹ç¡¢¾åÊý¸þ¤Ë350px/Éà ¥³¥Þ¤Î®ÅÙ¤òÍ¿¤¨¤ë¡£ ¥¸¥ã¥ó¥×¤·¤¿¥×¥ì¥¤¥ä¡¼¤Ï¡¢¼«Æ°Åª¤ËÍî¤Á¤Æ¤¤¤¡¢platoform¥°¥ë¡¼¥×¤È¾×Æͤ¹¤ë¤ÈÄä»ß¤¹¤ë¡£ ¥¡¼¤ò²¡¤·¤Æ¡¢¥×¥ì¥¤¥ä¡¼¤ò¤¤¤í¤¤¤í¥³¥ó¥È¥í¡¼¥ë¤·¤Æ¡¢game world¤òõ¸¡¤·¤Æ¤ß¤è¤¦¡£part7.html¤Î¥½¡¼¥¹¥³¡¼¥É¤ÎÃͤòÄ´À°¤·¤Æ¡¢¤É¤ó¤ÊÆ°¤¤Ë¤Ê¤ë¤«¡¢»î¤·¤Æ¤ß¤ë¤ÈÎɤ¤¤À¤í¤¦¡£ * Part.8¡§À±¤Î¤«¤¬¤ä¤ [#j8d842df] ¤Ç¤Ï¡¢¥²¡¼¥à¤ËÌÜŪ¤ËÉÕ¤±²Ã¤¨¤è¤¦¡£¥²¡¼¥à²èÌ̤ËÀ±¤ò¤Þ¤¤Á¤é¤·¤Æ¡¢¥×¥ì¥¤¥ä¡¼¤Ï¤½¤ì¤ò½¸¤á¤Æ²ó¤ë¡£ ¤½¤³¤Ç¡¢"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¤ò»²¾È¡£¤³¤ì¤Ç¡¢À±¤¬Äɲ䵤줿¡£ #ref(example_007.png) ** À±¤Î°À [#w2d45f76] À±¤òºî¤ë¼ê½ç¤Ï¡¢platform¥°¥ë¡¼¥×¤òºî¤Ã¤¿¤È¤¤È¤Û¤ÜƱ¤¸¤À¡£¤µ¤é¤Ë¡¢Javascript¤Î"for"¥ë¡¼¥×¤Ç12¸Ä¤ÎÀ±¤òºî¤Ã¤Æ¤¤¤ë¡£"i * 70"¤Èµ½Ò¤·¤Æ¡¢²£70¥Ô¥¯¥»¥ë¤º¤ÄÅù´Ö³Ö¤ËÇÛÃÖ¤¹¤ë¡£ ¤½¤ì¤«¤é¡¢¥×¥ì¥¤¥ä¡¼¤Ë½ÅÎϤòÍ¿¤¨¤¿¤Î¤ÈƱ¤¸¤è¤¦¤Ë¡¢À±¤Ë¤âÍ¿¤¨¤ë¤Î¤Ç¡¢¥²¡¼¥à¤¬¥¹¥¿¡¼¥È¤¹¤ë¤È¾å¤«¤éÍî¤Á¤Æ¤¯¤ë¤è¤¦¤Ë¤Ê¤ë¡£¤µ¤é¤Ë¡¢¤Ï¤Í¤«¤¨¤ê(bounce)¤òÀßÄꤷ¤Æ¡¢platform¤È¤Ö¤Ä¤«¤Ã¤¿¤È¤¡¢¤Á¤ç¤Ã¤È¥¸¥ã¥ó¥×¤¹¤ë¡£¤³¤Î¤Ï¤Í¤«¤¨¤ê(bounce)¤Ë¤Ï¡¢0(¥Ð¥¦¥ó¥É¤·¤Ê¤¤)¤«¤é1(¤º¤Ã¤È¥Ð¥¦¥ó¥É¤¹¤ë)¤Þ¤ÇÀßÄê¤Ç¤¤ë¡£¤³¤Î¥²¡¼¥à¤Ç¤Ï¡¢0.7¤«¤é0.9¤Þ¤Ç¤ÎŬÅö¤ÊÃͤòÀßÄꤷ¤Æ¤¤¤ë¡£ ** À±¤Î¾×ÆÍȽÄê [#y74c2d9f] ¤À¤±¤É¡¢¾×ÆÍȽÄ꤬¤Ê¤¤¤È¡¢À±¤Ï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: ºÇ¸å¤Î»Å¾å¤² [#s32ae67d] ¤µ¤¢ºÇ¸å¤Ë¡¢ÆÀÅÀ¤òɽ¼¨¤¹¤ë¤è¤¦²þÎɤ·¤Æ¤ß¤è¤¦¡£¤½¤Î¤¿¤á¤Ë¤Ï¡¢[[Phaser.text:http://docs.phaser.io/Phaser.Text.html]]¥ª¥Ö¥¸¥§¥¯¥È¤ò»È¤¦¡£¤½¤Î¤¿¤á¤Ë¡¢¼¡¤ÎÆó¤Ä¤ÎÊÑ¿ô¤òÍÑ°Õ¤¹¤ë¡£¤Ò¤È¤Ä¤Ï¡¢¸½ºß¤ÎÆÀÅÀ¤òÊÝ»ý¤¹¤ë¤â¤Î¡£¤â¤¦¤Ò¤È¤Ä¤Ï¡¢¥Æ¥¥¹¥È¥ª¥Ö¥¸¥§¥¯¥È¼«ÂΤÀ¡£ 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¤ò»²¾È¡£¤³¤ì¤Ç¡¢´°À®! #ref(example_001a.png) ´°À®¤·¤¿¥³¡¼¥É¤Ï¡¢¥Á¥å¡¼¥È¥ê¥¢¥ë¤Îpart9.html¤ò»²¾È¡£ ¤³¤³¤Ç¤â¡¢»î¤¹¤³¤È¤¬¤Ç¤¤ë¡£ http://www.catch.jp/program/phaser/001/making_your_first_Phaser_game.html * ¤Þ¤È¤á [#c3f24cad] ¤µ¤ì¤³¤ì¤Ç¡¢Phaser¤ò»È¤Ã¤¿´Êñ¤Ê¥²¡¼¥à¤Îºî¤êÊý¤òÍý²ò¤·¤¿¡£ÊªÍý±é»»¤òÈ÷¤¨¤¿¥¹¥×¥é¥¤¥È¤ÎÀ¸À®¡¢¥×¥ì¥¤¥ä¡¼¤ÎÆ°¤«¤·Êý¡¢¤Û¤«¤ÎʪÂΤÈÁê¸ßºîÍѤ¹¤ëÊýË¡¤Ê¤É¤À¡£ ¤â¤Á¤í¤ó¡¢¤â¤Ã¤È¤¤¤í¤¤¤í¤Êµ¡Ç½¤òÉÕ¤±²Ã¤¨¤ë¤³¤È¤â¤Ç¤¤ë¤À¤í¤¦¡£¤¿¤È¤¨¤Ð¡¢¥²¡¼¥à¤Î¥¯¥ê¥¢²èÌ̤ϤޤÀ¤Ê¤¤¤·¡¢Å¨¥¥ã¥é¤â¤¤¤Ê¤¤¡£Å¨¥¥ã¥é¤òºî¤ë¤Ë¤Ï¡¢"spikes"¥°¥ë¡¼¥×¤òºî¤Ã¤Æ¡¢¥×¥ì¥¤¥ä¡¼¤È¾×ÆÍȽÄꤹ¤ì¤Ð¤¤¤¤¡£ ¹¶·âŪ¤Ê¥²¡¼¥à¤ÎÂå¤ï¤ê¤Ë¡¢°ìÄê»þ´ÖÆâ¤Ë¤É¤ì¤À¤±À±¤ò½¸¤á¤ë¤«¶¥¤¦¥²¡¼¥à¤Ë¤·¤Æ¤â¤¤¤¤¤Í¡£assets¥Õ¥©¥ë¥À¤Ë¡¢¤Û¤ó¤Î¾¯¤·¥°¥é¥Õ¥£¥Ã¥¯ÁǺà¤òÆþ¤ì¤Æ¤¢¤ë¤Î¤Ç¡¢¥¢¥¤¥Ç¥¢¤ò¤Õ¤¯¤é¤Þ¤»¤Æ¸«¤ÆÍߤ·¤¤¡£ ¤¢¤È[[250¸Ä°Ê¾å¤¢¤ë¥³¡¼¥É¥µ¥ó¥×¥ë:http://examples.phaser.io/]]¤â¡¢Ìò¤ËΩ¤Ä¤Ï¤º¡£ µ¿ÌäÅÀ¤¬¤¢¤ë¤Ê¤é¡¢[[Phaser¥Õ¥©¡¼¥é¥àhttp://www.html5gamedevs.com/]]¤Çʹ¤¤¤Æ¤ß¤Æ¤Í¡£ ---- * ¤µ¤é¤Ë²þÎɤ·¤Æ¤ß¤¿ [#e553cc7e] ¤³¤Î¥Á¥å¡¼¥È¥ê¥¢¥ë¤Î¥²¡¼¥à¤ò¡¢Æȼ«¤Ë²þÎɤ·¤Æ°ìÃʤȥ²¡¼¥à¤Ý¤¯¤·¤Æ¤ß¤¿¡£ -[[Phaser¤Î¥²¡¼¥à¤ò²þÎɤ·¤Æ¤ß¤¿>phaser/tutorial_02]] ²þÎÉÅÀ¤Ï¡¢¤³¤ó¤Ê´¶¤¸¡£ - ¥ë¡¼¥ë¡ÊÀ±¤¬¤É¤ó¤É¤óÁý¤¨¤Æ¤¤¤¯¡£À©¸Â»þ´ÖÀ©¡Ë - ¥¿¥¤¥Þ¡¼¤ò»È¤¤¡¢»þ´ÖÀ©¸Â¥²¡¼¥à¤Ë¤·¤¿ - Phaser¤ËƱº¤ÎBasic Project Template¤ò»È¤¦ - ¥°¥í¡¼¥Ð¥ëÊÑ¿ô¤ò»È¤ï¤º¡¢¥²¡¼¥à¤Î¥¹¥Æ¡¼¥¿¥¹¤¬Á«°Ü¤·¤Æ¤¤¤¯ - ¥á¥¤¥ó¥á¥Ë¥å¡¼¤È¥²¡¼¥à¥ª¡¼¥Ð¡¼²èÌ̤ÎÄɲà - ¸ú²Ì²» * ´ØÏ¢»ñÎÁ [#gd664ba0] -[[Phaser:http://phaser.io/]]¡¡¥ª¥Õ¥£¥·¥ã¥ë¥µ¥¤¥È -[[Phaser¤Î¤Ï¤¸¤áÊý>Phaser]] -[[Phaser tutorial:http://www.lessmilk.com/phaser-tutorial/]] ¥Á¥å¡¼¥È¥ê¥¢¥ë¥ê¥¹¥È(±Ñ¸ì)