Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
124
Help us understand the problem. What are the problem?

posted at

updated at

旧 phina.js Tips集

コンテンツは以下のzennのbookに移行しました。
今後はzennの方を更新する予定です。

phina.js Tips集

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

phina.jsについて

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

導入編

  1. phina.jsの環境を構築する
  2. 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を移動させる
  10. Shapeの種類について知る

スプライト編

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

  1. Spriteを表示する
  2. Spriteを移動させる
  3. Spriteを回転させる
  4. Spriteを拡大・縮小させる
  5. Spriteを透明にする
  6. Spriteの向き反転させる
  7. Spriteにフレームアニメーションさせる
  8. Spriteをフレームアニメーションしながら移動させる
  9. フレームアニメーション速度を動的に変更する
  10. スプライトのサイズがスプライトシートに定義されたサイズにフィットしないようにする
  11. フレームアニメーションの終了を検知する
  12. 任意のタイミングでアセットを読み込む(AssetLoader)

ラベル編

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

  1. ラベル(文字)を表示する
  2. ラベルの文字を変更する
  3. ラベルの文字色を指定する
  4. ラベルの枠の色を指定する
  5. ラベルのフォントを指定する
  6. ラベルの幅と高さを調べる

イベント編

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

  1. 更新イベントを登録する
  2. タッチイベントを登録する
  3. 独自のイベントを登録・発行する
  4. 登録したイベントを削除する
  5. 一度だけ発行されるイベントを登録する
  6. 特定の種類のイベントを全て削除する

キー入力/タッチ操作編

キーボード入力、タッチに関する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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
124
Help us understand the problem. What are the problem?