NyaoTech

「phina.js」の導入

適当にindex.htmlファイルを作ってください。

bodyタグ内に以下の1行を追加(head内でももちろんいいゾ)

<script src="https://cdn.jsdelivr.net/gh/phinajs/phina.js@v0.2.3/build/phina.js"></script>

これで導入は完了

当たり判定プログラム

新たにscriptタグを作りその中に以下のjsをコピペ

      // グローバルに展開
      phina.globalize();
      // アセット
      var ASSETS = {
        // 画像
        image: {
          'tomapiko': 'https://cdn.jsdelivr.net/gh/phinajs/phina.js@v0.2.3/assets/images/tomapiko.png',
        },
      };
      /*
      * メインシーン
      */
      phina.define("MainScene", {
        // 継承
        superClass: 'DisplayScene',
        // コンストラクタ
        init: function() {
          // 親クラス初期化
          this.superInit();
          // 背景
          this.backgroundColor = 'skyblue';
          // 判定対象
          var shape = Shape({
            backgroundColor: 'blue',
            x: this.gridX.center(),
            y: this.gridY.center(),
            width: 100,
            height: 100,
          }).addChildTo(this);
          // スプライト画像作成
          var sprite = Sprite('tomapiko').addChildTo(this);
          // 初期位置
          sprite.x = this.gridX.span(1);
          sprite.y = this.gridY.span(1);
          // タッチイベント
          this.onpointmove = function(e) {
            // スプライトをタッチ位置に
            sprite.x = e.pointer.x;
            sprite.y = e.pointer.y;
          };
          // 更新処理
          this.update = function() {
            // 矩形判定
            if (sprite.hitTestElement(shape)) {
              shape.backgroundColor = 'red';
            }
            else {
              shape.backgroundColor = 'blue';
            }
          };
        },
      });
      /*
      * メイン処理
      */
      phina.main(function() {
        // アプリケーションを生成
        var app = GameApp({
          title: '当り判定(矩形)',
          // MainScene から開始
          startLabel: 'main',
          // アセット読み込み
          assets: ASSETS,
        });
        // fps表示
        //app.enableStats();
        // 実行
        app.run();
      });

解説

実行プログラム

phina.main(function() {
  // アプリケーションを生成
  var app = GameApp({
    title: '当り判定(矩形)',
    // MainScene から開始
    startLabel: 'main',
    // アセット読み込み
    assets: ASSETS,
  });
  // fps表示
  //app.enableStats();
  // 実行
  app.run();
});

これは、ゲームアプリとして実行するためのプログラム。ゲームSceneとassetを読み込んだ後、実行する。

アセット

var ASSETS = {
  // 画像
  image: {
    'tomapiko': 'https://cdn.jsdelivr.net/gh/phinajs/phina.js@v0.2.3/assets/images/tomapiko.png',
  },
};

画像などを読み込ませたい場合は、ここにリンクまたはファイルパスを記載することでいつでも呼び出すことができる

図形・画像の描画

var shape = Shape({
  backgroundColor: 'blue',
  x: this.gridX.center(),
  y: this.gridY.center(),
  width: 100,
  height: 100,
}).addChildTo(this);

このプログラムは正方形を描画している。座標においては「this.gridX.center()」で中心を指定している。

任意の場所にしたい場合は「this.gridX.span(1);」とし、数字を変えることで可能。なお、座標は左上を0,0としプラス方向に右下へ広がる

var sprite = Sprite('tomapiko').addChildTo(this);

asset内にいれた画像は上記のようにして呼び出すことができる。

また、shapeもspriteも後々に座標等を変更したい場合は「sprite.x = this.gridX.span(1);」というように、変数名.座標で指定できる。

当たり判定

this.update = function() {
   // 矩形判定
   if (sprite.hitTestElement(shape)) {
     shape.backgroundColor = 'red';
   }
   else {
     shape.backgroundColor = 'blue';
   }
 };

まず、jsで常時実行するためにはupdateを用いる。その中で、hitTestElement関数を呼び出すことによって、当たり判定をつけることができる