2016年9月20日火曜日

表示しているテキストを書き換や装飾変更


setText()で表示中のテキストを書き換える事ができます
装飾部分などは引き継ぎます
オブジェクト名.setText('新しいテキスト');
オブジェクト名.textでも変更可能です
オブジェクト名.text = '新しいテキスト';

装飾部分なども動的に変更する場合は(テキストオブジェクト名:text)
フォント
text.font = '';
太字(bold,nomal)
text.fontWeight = ;
サイズ(整数)
text.fontSize = ;
色(#カラーコード)
text.fill = '';
色(#カラーコード,整数)
text.addColor(色,n文字目から);
角度(-180~180)
text.angle = ;
(#カラーコード)
text.stroke = ;
(整数)
text.strokeThickness = ;
アンカー(初期値:0中間値:0.5)
text.anchor = ;

指定時間後に処理を実行する


time.eventsを使って指定時間後に処理を実行する
ゲーム名.time.events.add(Phaser.Timer.SECOND, 実行する関数名, this);
繰り返し処理を実行するにはtime.events.loopを使いますが、一度だけ処理を実行するのはtime.events.addになります

10秒後に処理を実行します
SECOND*10

time.eventsでゲーム時間を取得して更新処理をする


time.eventsを使った更新処理を行う
ゲーム名.time.events.loop(Phaser.Timer.SECOND, 実行する関数名, this);
第1因数のSECONDの部分は更新間隔でSECONDは1秒毎となります
公式のドキュメントやサンプルを探したらSECOND*4で4秒と出来る様でした

第2因数は実行する関数名でこれはupdateの中に入れなくても設定した更新間隔で実行されます

SECOND*0.1

2016年9月19日月曜日

オブジェクトに重力を適用する


画像を読み込む


利用する画像ファイルをpreload内でload.imageを使って読み込みます
preload(){
    game.load.image('sample', 'assets/image/sball.png');
}
create(){
    var image = game.add.sprite(game.world.centerX, 0, 'sample');
    imageanchor.set(0.5、0.5);
}

オブジェクトに重力を適用する

①game.physics.arcade.gravityでゲーム自体に重力を反映させる
x方向y方向の指定とかかる重力の大きさを指定できます

②game.physics.arcade.enable(対象オブジェクト名)で対象に重力による影響を適用する(物理処理全般かも)
preload(){
    game.load.image('sample', 'assets/image/sboul.png');
}
create(){
    var image = game.add.sprite(game.world.centerX, -100, 'sample');
    image.anchor.set(0.5、0.5);
    game.physics.arcade.gravity.y = 10;
    game.physics.arcade.enable(image);
}
結果


これではオブジェクトを動かしただけと変わらないですね

ゲーム画面枠に対して物理判定と反動を加える

collideWorldBoundsにてゲーム画面枠にオブジェクトが当たると物理処理される様になります
オブジェクト名.body.collideWorldBounds=true;

メモ1:collideWorldBounds=(false, false, false, true);左右上下
メモ2:ゲーム名.physics.setBoundsToWorld=trueで全体?

bounceで反動する力を処理してバウンドする様になります、X軸Y軸も指定
反動する力は0~指定できます
1で永久機関、それ以上は常に反動の大きさがましていきます
オブジェクト名..body.bounce.y = 0.8;

結果

画像やオブジェクトを回転させる


画像の読み込みと表示


画像ファイルをpreload内でload.imageを使って読み込みます
preload(){
    game.load.image('sample', 'assets/image/sample.png');
}

create(){
    var image = game.add.sprite(game.world.centerX, game.world.centerY, 'sample');
    imageanchor.set(0.5、0.5);
}


画像の角度変更

画像やオブジェクトの角度を変更するのは変数angleで指定します
angleは-180から180の角度で設定でき、初期値は0です
preload(){
    game.load.image('sample', 'assets/image/sample.png');
}

create(){
    var image = game.add.sprite(game.world.centerX, game.world.centerY, 'sample');
    image.anchor.set(0.5、0.5);
    image.angle = 120;
}
結果


画像の回転

画像を回転させるにはupdate内などで更新毎に変数angleを増減させます
preload(){
    game.load.image('sample', 'assets/image/sample.png');
}
var image;
create(){
    image = game.add.sprite(game.world.centerX, game.world.centerY, 'sample');
    image.anchor.set(0.5、0.5);
}

function update() {
   image.angle += 1;
}
結果

2016年9月18日日曜日

画像などのオブジェクトを並べて表示する


画像を揃えて連結表示する方法

画像の読み込み

画像ファイルをpreload内でload.imageを使って読み込みます
preload(){
    game.load.image('sample', 'assets/image/sample.png');
}

画像を横に並べて連結表示する

alignToで対象とする画像と位置を指定する方法
第1引数に対象の画像名
第2引数に対象からみた位置関係(下部参照)
第3引数もある様ですがまだ仕様がわからないです
第3因数は対象との間隔でした、マイナスも指定可
preload(){
game.add.sprite().alignTo(対象,対象との位置関係,対象との間隔);
}
var game = new Phaser.Game(320, 120, Phaser.CANVAS, 'phaser-img', { preload: preload, create: create});

       function preload(){
    game.load.image('sample', 'http://repop.jp/phaser/assets/image/sample01s.png');
       }

create(){
    var image1 = game.add.sprite(-10, 10, 'sample');
    var image2 = game.add.sprite(0, 0, 'sample').alignTo(image1, Phaser.RIGHT_CENTER,-20);
    var image3 = game.add.sprite(0, 0, 'sample').alignTo(image2, Phaser.RIGHT_CENTER,-20);
    var image4 = game.add.sprite(0, 0, 'sample').alignTo(image3, Phaser.RIGHT_CENTER,-20);
}
結果


第2因数に使う位置関係の定義

TOP_LEFT
TOP_CENTER
TOP_RIGHT
LEFT_TOP
LEFT_CENTER
LEFT_BOTTOM
RIGHT_TOP
RIGHT_CENTER
RIGHT_BOTTOM
BOTTOM_LEFT
BOTTOM_CENTER
BOTTOM_RIGHT

縦に並べて表示する時はBOTTOM_LEFTかBOTTOM_CENTERになりますね

使用感

今回は画像を対象の記事にしましたがオブジェクト全般に対応しているのでテキストやステージ等のリスト表示等にも使えそうです

実際はfor文で回す事になるかと思いますが、折り返し等の処理は自前で書くしかないかもですね

他にも方法があると思いますが、覚えるまではこれでいこうと思います

画像ファイルの読み込みと表示

画像の読み込み

画像ファイルはpreload内でload.imageを使って読み込みます
第一引数に名前を付けた名前で呼び出す事ができます
第一引数にはファイルパスを指定します
preload(){
    game.load.image('sample', 'assets/image/sample.png');
}

画像の表示

画像の表示はadd.spriteを使います
preload(){
game.add.sprite(X座標,Y座標, 'sample');
}

サンプル

サンプルコード①
 var game = new Phaser.Game(300, 200, Phaser.CANVAS, 'phaser', { preload: preload, create: create});

       function preload(){
    game.load.image('sample', 'assets/image/sample.png');
       }
        
       function create(){
    var sample1 = game.add.sprite(150, 100, 'sample');
       }
結果

座標はXYともに中央を指定していますが、これだと位置が悪いです
原因は画像の始点が左上になっているからですね
anchorで始点も中央に設定します
    sample1.anchor.set(0.5,0.5);
このままでは大きいのでscaleで大きさを調節します
    sample1.scale.set(0.5);
結果



🔺サンプルに使った画像

2016年9月16日金曜日

ゲーム画面サイズと背景色の指定


ゲーム画面サイズ

ゲーム画面サイズはnew Phaser.Gameコード内で指定できる
var game = new Phaser.Game(横サイズ, 縦サイズ, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update:update, render: render });


%(パーセンテージ)で指定する場合は文字列として指定
var game = new Phaser.Game('100%', '100%', Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update:update, render: render });


スマートフン表示

スマートフォン表示の場合はmetaタグでviewportもしておくべきかもしれません
<meta name="viewport" content="width=device-width,initial-scale=1.0" />


スマホ端末の様に画面サイズが一定ではない場合、別途javascriptで画面サイズを取得して各オブジェクトの表示サイズを変更するのですが、一括変更してくれる処理機能がphaserに存在しているのかがまだ未確認です


ゲーム画面の背景色の指定

ゲームの再背面の背景色はstage.backgroundColorにて変更可能です
game.stage.backgroundColor = '#000000';

テキストの表示と位置、anchor指定とか

Phaserでゲーム画面内にテキストを表示します
text = game.add.text(x座標または位置,y座標または位置, 'テキスト',Style属性);
text.anchor.set(x始点.y始点);
テキスト表示に最低限必要なコードはこれだけだと思います
Style属性についてはCSS指定となりますね

テキストを左上に表示する

多くはゲーム画面サイズ内で指定する事になると思いますが0,0であれば左上隅になります
text = game.add.text(game.world.centerX, game.world.centerY, 'テキスト',{font: "65px Arial",fill: "#FFF"});
text.anchor.set(0,0);

テキストを右上に表示する

0,0であれば左上隅になりますが右上の座標は、game.world.width,0で取得できます
anchorが0,0だとテキストの始点が左上なので画面右橋から表示され画面内には表示されません
anchorのx始点を1とするとテキストの右上が始点となり画面内に収まります
text = game.add.text(game.world.width, 0, 'テキスト',{font: "65px Arial",fill: "#FFF"});
text.anchor.set(1,0);

テキストを画面の中央に揃える

また、game.world.centerX・game.world.centerYと指定するとゲーム画面サイズの中央になりますがその場合、anchor.setを0.5,0.5とすると始点もテキストの中央となりゲーム画面上中央で表示されます

text = game.add.text(game.world.centerX, game.world.centerY, 'テキスト',{font: "65px Arial",fill: "#FFF"});
text.anchor.set(0.5,0.5);

anchorの指定について



画像の背景が白でわかりにくいですが、、
余白などを考慮して0以下、1以上も指定できると思いますが余白はスタイル属性側でやるべきかな

ゲームウィンドウのフォーカスを失った場合のの一時停止設定のオンオフ


Phaserを触ってみるとスグに気付くのですが、ウィンドウが非アクティブ時には職設定でゲームのupdate処理が止まる設定になっています
厳密にはウィンドウではなくゲーム画面外にフォーカスが出た場合に処理されます

なんとも気の利いた機能ですが、放置系ゲームなど非アクティブ時にも実行し続けたいジャンルもあります

その非アクティブ時にも処理を止めない様に変更する方法を調べました

フォーカスが非アクティブ時の停止処理 disableVisibilityChange

http://phaser.io/docs/2.4.2/Phaser.Stage.html#disableVisibilityChange
デフォルトでは、ブラウザのタブは、ゲームが一時停止しますフォーカスを失った場合。あなたは、このプロパティをtrueに設定することによって、その動作を停止することができます。
初期値:false;
game.stage.disableVisibilityChange = true;
game.stage.disableVisibilityChange = false;

確認用にお金が増えるコードを書いてみた

disableVisibilityChange = true


disableVisibilityChange = false

Phaserのセッツアップと基本ひな形


Phaserをダウンロード


http://phaser.io/download
Phaserのインストールといっても、PhaserのjsファイルをサーバーにアップしてHTMLで読み込むだけですね
ZIPファイルに一通りはいってるのだと思います

ローカルなら適所に置いておけば動きます

Phaserの基本形

Phaserで作成する時のひな形というか基本形

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>phaser</title>
        <script src="phaser.min.js"></script>
        <script src="game-gui.js"></script>
    </head>
    <body>
 
 <div id="phaser-example"></div>

        <script type="text/javascript">
  
 var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, render: render });

       function preload(){
       }
        
       function create(){
       }
    
       function update(){
       }

       function render(){
       }
    
    </script>

    </body>
</html>

ゲーム画面の設定

var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, render: render });

ファイルのロード preload()

       function preload(){    
       }

ゲームの基本部分 create()

       function create(){        
       }

ゲーム更新毎の処理 update()

       function update(){        
       }

update後に呼び出される処理

       function render(){        
       }

HTML5ゲームエンジンPhaserを使ってみる事にした


HTML5で出力できるゲームエンジンは多数ありますが、王道unityがシンプルな2DゲームだったとしてもWebGLで出力する為、スマートフォン端末のブラウザに直接再生できない

簡単なテキストベースのゲームを作りたいだけだとにUnityやcocos2Dでは機能過多となってしまいます

Unityは少しは慣れてきたのと2DのUIが便利で使いやすいので、canvas出力もあればいいのですが
正直、新しいモノを覚えるぐらいなら物理エンジンもアニメーションも使わない予定のモノなのでjavascriptだけで書いた方が早いのでは?と感じていますが、、



さて、『Phaser』ですが、海外では活発に利用されているとの事で情報量は多いと思います

日本語ドキュメントや記事が少ないので勉強としては少々壁がありますね

私も英語がまったくダメですので前途多難ですが、それでも英語でのフォーラムも活発で本家サイトでもサンプル表示とコードが多数ありますので日本語翻訳を相棒に乗り越えて行ければと、、