phaser/tutorial_01 のバックアップ差分(No.2)



  • 追加された行はこの色です。
  • 削除された行はこの色です。
[[Programing]] > [[Phaser]] > Tutorial 01

#title(「Tutorial: Making your first Phaser game」をやってみた)
#title(Making your first Phaser gameをやってみた)

高速でサクサク開発できる、HTML5/Javascript向け2Dゲームエンジン「Phaser」のチュートリアルをやってみたメモ。Phaserの開発元であるPhotom Stormのブログに載っているヤツで、Phaserにも収録されている。
高速でサクサク開発できる、HTML5/Javascript向け2Dゲームエンジン「Phaser」のチュートリアル「Making your first Phaser game:はじめてのPhaserゲームを作ろう」をやってみたメモ。

こんな感じのゲームを作る。
(というか、ほとんど日本語訳なんだけど、かなり超訳になっている)

#ref(example_001.png)
Phaserの開発元であるPhotom Stormのブログに載っているヤツで、Phaserにも収録されている。

オリジナル版は、ここにある。
こんな感じのゲームを作る。> [[完成版:http://www.catch.jp/program/phaser/making_your_first_Phaser_game.html]]

http://www.photonstorm.com/phaser/tutorial-making-your-first-phaser-game
#ref(example_001.png)

このチュートリアルを書いたのは、 Alvin Ourrad と Richard Davey。
 以下、書きかけ

#contents

* Phaserってナニ? [#z7ff7bd2]

Phaserは、HTML5対応でクロスプラットフォームのWebゲーム開発フレームワーク。デスクトップとモバイルに対応、だそうな。

* 必要なもの [#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ゲームでキャラクターや背景のグラフィックを表示するための機能。ゲーム内のキャラクターは、小さな画像(スプライト)として表示される。これをすばやく切り替えることで、アニメーションさせる。

では、そのスプライトを表示させてみよう。まずは、星を1個表示させる。

create関数に、次のコードを記述する。

で、そのhtmlファイルをいったん保存して、ブラウザで表示させると、次のように星が表示される。

実際のコードは、チュートリアルのpart3.htmlを参照。うーむ、やっと出た!


* Licence [#i3506f04]

** Japanese Tutorial [#ub6ea4f0]

Copyright 2014 Yutaka Kachi released under MIT license.

** Original [#s448435d]

Copyright 2006 - 2014 Photon Storm Ltd. All rights reserved.

Copyright (c) 2014 Richard Davey, Photon Storm Ltd.

チュートリアルのオリジナル版は、ここにある。

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

このチュートリアルを書いたのは、 Alvin Ourrad と Richard Davey。

Phaserの配布セットに含まれているので、たぶんMITライセンス。


トップ   一覧 単語検索 最終更新   ヘルプ   最終更新のRSS