Chapter 06

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

alkn203
alkn203
2021.09.12に更新

testcirclecircle

当たり判定(円判定)

現在のバージョン(0.2.3)では、オブジェクト同士の直接的な円判定は実装されていません。そこで、今回はCollisionクラスを使って円判定を行います。

testCircleCircle

Collision.testCircleCircleCollisionクラスのメソッドで、円と円の当たり判定を行います。

// 更新処理
this.update = function() {
  // 矩形判定
  if (sprite.hitTestElement(shape)) {
    shape.backgroundColor = 'red';
  }
  else {
    shape.backgroundColor = 'blue';
  }
};
  • Circleクラスを使って判定用の円を作成しています。 CircleクラスはCircleShapeと違って位置と大きさだけを持ったクラスです。
  • Spriteのようなオブジェクトは内部でradiusプロパティを持っているので、矩形にフィットした円を簡単に得ることができます。
  • 得られた円情報を元に、 CollisionクラスのtestCircleCirlceメソッドを使って円同士の当たり判定を行っています。

サンプルコード

コードを見る
// グローバルに展開
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 circle = CircleShape({
      x: this.gridX.center(),
      y: this.gridY.center(),
      radius: 100,
      fill: 'blue',
    }).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() {
      // 判定用の円
      var c = Circle(sprite.x, sprite.y, sprite.radius); 
      // 円判定
      if (Collision.testCircleCircle(c, circle)) {
        circle.fill = 'red';
      }
      else {
        circle.fill = 'blue';
      }
    };
  },
});
/*
 * メイン処理
 */
phina.main(function() {
  // アプリケーションを生成
  var app = GameApp({
    title: '当り判定(円)',
    // MainScene から開始
    startLabel: 'main',
    // アセット読み込み
    assets: ASSETS,
  });
  // fps表示
  //app.enableStats();
  // 実行
  app.run();
});

runstantプロジェクト

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