Chapter 05

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

alkn203
alkn203
2021.09.12に更新

hittestelement

当たり判定

オブジェクト同士の当たり判定を行う方法について説明します。

hitTestElementメソッド

hitTestElementは矩形での当り判定を行うメソッドです。

// 更新処理
this.update = function() {
  // 矩形判定
  if (sprite.hitTestElement(shape)) {
    shape.backgroundColor = 'red';
  }
  else {
    shape.backgroundColor = 'blue';
  }
};
  • hitTestElementメソッドは、当たっているならtrueそれ以外はfalseを返します。
  • 一般的にはupdateのような毎フレーム更新処理の中で判定します。

サンプルコード

コードを見る
// グローバルに展開
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();
});

runstantプロジェクト

https://runstant.com/alkn203/projects/6c79261b
  • スプライトをドラッグして画面中心の矩形に近づけて下さい。
  • 当たっていると矩形が赤、それ以外は青に変わります。