phina.js Tips集

javascriptのゲーム作成用ライブラリphina.jsに関するTipsについて書いています。非公式ですが、少しでも参考になれば幸いです。


こちらのブログでもphina.jsのチュートリアルとか書いてます。



phina.jsについて

自分なりにphina.jsについて書いたエントリーです。


導入編

phina.jsのテンプレートについて


  1. phina.jsの基本テンプレートについて


Shape編

phina.jsにおけるオブジェクトの基本形であるShapeに関するTips


  1. Shapeを生成してSceneに追加する

  2. Shapeの位置を指定する

  3. Shapeのサイズを指定する

  4. Shapeの背景色を指定する

  5. Shapeを透明化・非表示にする

  6. Shapeをランダムな位置に表示する

  7. Shapeをランダムな位置にたくさん表示する

  8. カラフルなShapeをランダムな位置にたくさん表示する

  9. Shapeの原点を変更する


イベント編

タッチなどのイベントに関する基本的なTips


  1. 更新イベントを登録する

  2. タッチイベントを登録する

  3. 独自のイベントを登録・発行する

  4. 登録したイベントを削除する

  5. 一度だけ発行されるイベントを登録する

  6. 特定の種類のイベントを全て削除する


スプライト編

ゲーム作りで定番のスプライトに関するTips


  1. Spriteを表示する

  2. Spriteを移動させる

  3. Spriteを回転させる

  4. Spriteを回転させる(setRotation)

  5. Spriteを拡大・縮小させる(setScale使用)

  6. Spriteを透明にする

  7. Spriteにフレームアニメーションさせる

  8. Spriteをフレームアニメーションしながら移動させる

  9. Spriteを画面外に出ないように制御する

  10. Sprite の進行方向に応じて表示する向きを変更する

  11. フレームアニメーション速度を動的に変更する

  12. スプライトのサイズがスプライトシートに定義されたサイズにフィットしないようにする

  13. フレームアニメーションの終了を検知する

  14. 任意のタイミングでアセットを読み込む(AssetLoader)


ラベル編

文字を表示するラベルに関するTips


  1. ラベル(文字)を表示する

  2. ラベルの文字色を指定する

  3. ラベルのフォントを指定する

  4. ラベルの幅と高さを調べる


キー入力/タッチ操作編

キーボード入力、タッチに関するTips


  1. Spriteをキーボードで操作する

  2. タッチした位置にSpriteを移動させる

  3. タッチしている位置にSpriteを移動させる

  4. タッチしている位置に徐々にSpriteを移動させる

  5. タッチしたスプライトを消す


グループ編

スプライトなどのオブジェクトのグループ管理に関するTips


  1. スプライトをグループ化する

  2. スプライトをまとめて動かしてみる


サウンド編

音の再生に関するTips


  1. 音を再生してみる

  2. 音の再生を停止してみる

  3. 音の再生を中断・再開してみる


クラス編

クラスに関するTips


  1. クラスを作成してみる

  2. Sprite クラスを継承して独自のクラスを作る

  3. クラス継承をしてみよう【応用】


当たり判定編

当たり判定に関するTips


  1. 当たり判定を行う(矩形判定)

  2. 当たり判定を行う(円判定)

  3. Collisionクラスを使った当たり判定)


シーン編

ゲームの流れを管理するシーンに関するTips


  1. デフォルトで用意されてるSceneについて知る

  2. Sceneをプッシュしてポーズ画面を作成する

  3. 独自のSceneを作って遷移させる

  4. デフォルトのSceneを上書きする(独自のTitleSceneを作成する)

  5. Scene遷移で値を渡す

  6. LoadingSceneを途中で入れる


Physical編

物理的移動を扱うPhysicalクラスに関するTips


  1. Physicalクラスを使ってオブジェクトを移動させる

  2. Physicalクラスを使ってオブジェクトに落下運動をさせる

  3. Physicalクラスを使ってオブジェクトを徐々に減速させる

  4. Physicalクラスを使ってオブジェクトを加速させる


Tweener編

オブジェクトの移動アニメーションなどが簡単に行えるTweenerクラスに関するTips


  1. Tweenerでオブジェクトを移動させる【moveTo】

  2. Tweenerでオブジェクトを移動させる【moveBy】

  3. Tweenerでオブジェクトを回転させる【rotateTo】

  4. Tweenerでオブジェクトを回転させる【rotateBy】

  5. Tweenerでオブジェクトを拡大・縮小させる【scaleTo】

  6. Tweenerでオブジェクトを拡大・縮小させる【scaleBy】

  7. Tweenerでオブジェクトを透明化させる【fade】

  8. Tweenerでオブジェクトをフェードアウトさせる【fadeOut】

  9. Tweenerでオブジェクトをフェードインさせる【fadeIn】


  10. Tweenerで複数のプロパティを同時に変更する【to】


  11. Tweenerで複数のプロパティを同時に変更する【by】

  12. Tweenerで指定時間処理を待つ【wait】

  13. Tweenerで処理をループさせる【setLoop】

  14. Tweenerで複数の処理を並行して適用する【attachTo】

  15. JSON形式でTweenerを定義する【fromJSON】


Canvas編

Canvas拡張クラスに関するTips


  1. PlainElementでCanvas描画


その他

その他ゲーム作成に関するTips


  1. ゲーム画面の背景色を変える

  2. ゲームのfpsを変えてみる

  3. ゲームの経過フレーム数を取得する

  4. ゲームの経過秒数を取得する

  5. ゲーム画面を拡縮させないようにする

  6. 任意のタイミングからゲームの経過秒数をカウントする

  7. JSON形式でオブジェクトを追加する【fromJSON】

  8. Flowで非同期処理を行う

  9. ゲーム画面を表示するcanvasを指定する


参考にしたサイト

enchant.js 怒涛の 100 tips