phina.js Advent Calendar 2015 - Qiita 8日目のエントリーです.

• 1日目 本日 JavaScript ゲームライブラリ『phina.js』をリリースしました! | phiary
• 2日目 ManagerSceneでゲームの流れを管理しよう | daishi blog
• 3日目 ゲーム開発 - 気鋭の新JSゲームライブラリ「phina.js」の概要を自分なりにまとめてみた - Qiita
• 4日目 【phina.js】Gridクラスを使いこなそう - Qiita
• 5日目 phina.js で Webフォント を使ってみるよ！ - Qiita
• 6日目 [phina.js] Tweenerを使いこなそう! [Tweener 基本編] - Qiita
• 7日目 [phina.js] サンプルから覚えるphina.js - Qiita

このブログでお馴染みの とりあえず試してみたい シリーズです. 今回は, 私が開発している phina.js について書きたいと思います.

phina.js の基礎となる機能の使いかたをそれぞれサンプルを交えて紹介しています.
Runstant でサンプルを作っているので全て Web 上で実行できます!!

それぞれの項目に付いている runstant というリンクをクリックすれば, サンプルとそのコードが表示されます. 実際に動かしたりコードをイジりながら遊んでみてください♪

ゲームプログラミングをしたことのない方でも気軽に使えるのでよかったらぜひ!!

phina.js とは?

phina.js(フィナ ドット ジェイ・エス) は, JavaScript で作られた国産のゲームライブラリです.

詳しくはこちらを御覧ください. 本日 JavaScript ゲームライブラリ『phina.js』をリリースしました! | phiary

• Official ... http://phinajs.com
• Github ... https://github.com/phi-jp/phina.js
• Gitter ... https://gitter.im/phi-jp/phina.js

雛形を作ろう

デモ

runstant

何も表示されていません. が実は画面中央に Canvas が表示されています. よく見ると白い枠が表示されているのが分かるかと思います.

解説

// TODO: 以降の部分にコードを書いていくことで, Canvas 上で画像やラベルを表示していきます.

ちなみに html 側は, phina.js を読み込んでいるだけでそれ以外のことは特にしていません.

図形を表示しよう

デモ

runstant

中央に図形を表示しています.

解説

phina.js では, デフォルトで様々な図形を表示することができます.

var shape = 図形(options).addChildTo(親要素);  

という形で使えます.

デフォルトで定義されている図形の種類はこちら

• CircleShape ... 円を表示
• RectangleShape ... 四角形を表示
• TriangleShape ... 三角形を表示
• StarShape ... 星形を表示
• PolygonShape ... 多角形を表示
• HeartShape ... ハートを表示

画像を表示しよう

デモ

runstant

画面中央に画像が表示されているのが分かるかと思います.

解説

アセット(画像や音, テキストファイルなど)は, GameApp 生成時のオプションに assets を渡すことでカンタンにできます.

各アセット名のオブジェクトを作成し, その中で キー名:画像のパスという形で 読み込みたいアセットを指定していきます.

今回は, 画像なので assets に image というオブジェクトを登録し, その中で tomapiko: tomapiko.png という形で指定しています.

var app = GameApp({  
  startLabel: 'main',
  assets: ASSETS,
});

読み込んだ画像を表示するには Sprite というクラスを使います. 下記のように使います.

var sprite = Sprite("画像のキー名").addChildTo(親要素);  

上で指定した tomapiko というキー名を Sprite 生成時に指定することで この画像を表示することができます.

ラベルを表示しよう

デモ

runstant

画面中央にラベルが表示されているのが分かるかと思います.

解説

ラベルの表示には Label というクラスを使います.

var label = Label("text").addChildTo(親要素);  

Shape と同じく fill や stroke といった指定が可能です.

要素を移動させてみよう

デモ

runstant

シェープが左右に移動するのが分かるかと思います.

解説

phina.js では, 要素の update 変数に関数を渡すことで
カンタンに更新処理を行うことができます.

elm.update = function() {  
  // TODO: 毎フレーム呼ばれる
  this.x += 1;
};

この中で x と y の値を変更することで移動させることができます.

要素を回転させてみよう

デモ

runstant

回転しているのが分かるかと思います.

解説

回転には rotation プロパティを使います. rotation に 0 ~ 360 の値を指定することで回転させることができます.

// 逆さまー
elm.rotation = 180;  

要素を拡大させてみよう

デモ

runstant

拡大しているのが分かるかと思います.

解説

要素の拡大, 縮小には scaleX, scaleY を使います. それぞれ x 軸, y 軸方向へのスケールを指定することができます.

// たてながー
elm.scaleX = 0.5;  
elm.scaleY = 2.0;  

タッチに反応させてみよう

デモ

runstant

タッチすると, その要素が消えます. これだけでもちょっとしたゲームになりますね♪

解説

要素に対して

elm.setInteractive(true);  

とすることで, タッチ判定を有効にすることができます. 有効になるとタッチ系のイベントが発火するようになるので, 下記のようにイベントを登録することで タッチ時に様々な処理を行うことができます.

// タッチ開始時
elm.onpointstart = function() {  
 // ...
}
// タッチ移動時
elm.onpointmove = function() {  
 // ...
}
// タッチ終了時
elm.onpointend = function() {  
 // ...
}
// 複数登録も可能
elm.on('pointstart', function() {  
 // ...
});

キーボードで動かしてみよう

デモ

runstant

キーボードの上下左右(arrow)キーを押すと, キャラクターが 移動するのが分かるかと思います.

解説

キーボード情報は, update で渡ってくるアプリケーション(app) が持っている keyboard から取得することができます!

keyboard の getKey() で押しているかを調べたいキー名を渡すと bool 値で結果を返してくれます.

var keyboard = app.keyboard;  
// left を押している時
if (keyboard.getKey('left')) {  
  // TODO: 
}
// a を押した瞬間
if (keyboard.getKeyDown('a')) {  
  // TODO: 
}
// b を離した瞬間
if (keyboard.getKeyUp('a')) {  
  // TODO: 
}

衝突判定をしてみよう

デモ

runstant

タッチした位置にキャラクターが移動し, 衝突したシェープの 色が変わるのが分かるかと思います.

解説

要素のもつ hitTestElement() で, 他の要素との衝突判定を行うことができます.

if (a.hitTestElement(b)) {  
  // TODO: a と b が衝突した際の処理
}

トゥイーンアニメーションさせてみよう

デモ

runstant

トゥイーンアニメーションします.

解説

Tweener を使うことでカンタンに移動アニメーションやフェードアニメーション
させることができます.

下記のように使います.

elm.tweener.to({x:100}, 2000); // x 軸を 2 秒かけて 100 に変化  

音を鳴らそう

デモ

runstant

タッチすると画面上にボールが出現し, 地面に当たる際に音が鳴るのが分かるかと思います.

解説

音の読み込みも画像の時と同様 assets を使います.

読み込んだサウンドは, AssetManager.get('sound', 'キー名') で取得できます.

取得後, play() メソッドを呼ぶことで音を鳴らすことができます.

// 取得
var touchSE = AssetManager.get('sound', 'touch');  
// 鳴らす
touchSE.play();  

発展

phina.js には, まだまだたくさん便利な機能があります.
コントリビュータの方々が, 個別でまとめてくれているのでよかったら参考にしてください.

• Scene 遷移について -> ManagerSceneでゲームの流れを管理しよう | daishi blog by @daishi_hmr san
• Grid クラスについて -> 【phina.js】Gridクラスを使いこなそう - Qiita by @alkn203 san
• WebFont について -> phina.js で Webフォント を使ってみるよ！ - Qiita by @YFukuyama san
• Tweener について -> [phina.js] Tweenerを使いこなそう! [Tweener 基本編] - Qiita by @simiraaaa san
• SpriteSheet について -> @minimo san が書いてくれる予定