phina.js Tips集を試してみる(前半)

2020年12月13日

phina.jsの基本的なことが知りたかったのでこういうページはありがたい。ひとつひとつ丁寧に教えてくれる。サンプルコードがついているので試せる。よく入力間違いをしたが、サンプルコードと比較することで動かすことができた。間違いに気づくと理解が深まる。JavaScriptのエラーもちょっとだけ慣れてきた。一日で終わらず、とりあえず半分ほど試したが、すべて動かすことができた。

導入編

phina.jsのひな形。これをコピーしながら試した。

Shape編

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

次のような内容を説明してくれている。

  • addChildとaddChildToでDisplayScene等の子にする。
  • プロパティ設定は色々な書き方がある。
  • alphaが0とhide()では当たり判定やタッチ処理の有効無効が異なる。
  • Number.times()で繰り返し処理が書ける。
  • origin.setで原点の変更できる。
  • = function() { ここではthisが異なるのでself等の変数に入れてアクセスする。

試したコード

イベント編

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

  • イベント = function() {}ではひとつのハンドラしか登録できない。
  • on(イベント名, function() {})では複数のハンドラが登録できる(+=)
  • off(イベント名、ハンドラ)でハンドラ削除(-=)
  • clear(イベント名)ですべて削除。
  • one(イベント名、ハンドラ)で一度だけ実行。

試したコード

スプライト編

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

  • 移動、回転、拡大、透明
  • アニメーション
  • frequencyの変更方法(fit = false)
  • 終了処理
  • 後からassetsをloadする方法

試したコード

ラベル編

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

  • フォントサイズ、文字色、フォント、幅、高さ
  • ラベルを四角で囲う。

試したコード

キー入力／タッチ操作編

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

  • キーによる移動
  • タッチによる移動
  • 徐々に移動
  • タッチしたら消す

試したコード

グループ編

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

  • スプライトをグループ化してまとめて動かす。

試したコード

サウンド編

音の再生に関するTips

  • 音の再生、停止、中断、再開

試したコード

クラス編

クラスに関するTips

  • Buttonクラスを継承して押している間ちょっと小さくなるButtonの作成

試したコード

当たり判定編

当たり判定に関するTips

  • Circle,Rect,Lineの当たり判定
  • Collision.testCircleLineはphina.js v0.2.0で使えなかったが、v0.2.3にはあった。

試したコード

シーン編

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

サンプルにはgridがよく出てくるのだが、ここには説明が出てこないようだ。Gridを説明している@alkn203さんの記事があった。

phina.js