はじめに

Pixi.jsを使って円同士の衝突判定を実装する機会があったので、初めてPixi.jsを使用する方に出来るだけ分かりやすくまとめていきます。

① PIXI.Application の作成

まずは、PIXI.Applicationを作成します。

PIXI.Applicationとは土台のようなもので、ここに色々なオブジェクトを追加することで、画像を表示させたり、図形を描画したりできます。
PIXI.Applicationには色々なオプションを設定することができますが、今回はサイズ、背景色を設定します。
Canvasの縦幅、横幅は画面いっぱいにして、背景色は白色にします。
Pixi.jsでの色の指定は全て16進数で行うので、白色を設定する場合には0xffffffと記述します。

import * as PIXI from 'pixi.js'

const app = new PIXI.Application({
  width: window.innerWidth,
  height: window.innerHeight,
  backgroundColor: 0xffffff
});

// bodyにApplication追加
document.body.appendChild(app.view);

② 衝突させる円を作成する

次に、衝突させる円を作成していきます。

円を作成するにはPIXI.Graphicsの drawCircle を使用し、色指定にはbeginFillを使用して ff00ff に塗りつぶします。


// 円の半径
const radius = 50

const circle1 = new PIXI.Graphics()
     .beginFill(0xff00ff)
     .drawCircle(0, 0, radius)
     .endFill()

次に、作成した円をPIXI.Spriteに追加します。

PIXI.Spriteは基本的に画像を表示させるために使用しますが、今回はGraphicを追加します。
PIXI.Graphicsで座標の情報を保持してしまうと、基準点が左上になってしまうので Drag & Dropの際にズレが生じてしまいます。
そのため、描画する座標の情報はPIXI.Spriteで保持し、基準点は中心に設定します。

circleSprite1.anchor.set(0.5)
circleSprite1.position.set(200, 200)

また、物体の衝突判定の際に使用するため、作成したSpriteの情報を配列に格納します。
最後にapp.stageに作成したSpriteを追加して表示させます。

以下、ここまでのコードの全容です。


// 円の情報をもつ配列
let circles = []

// 円の半径
const radius = 50

// 衝突させる円1
const circleSprite1 = new PIXI.Sprite()
const circle1 = new PIXI.Graphics()
     .beginFill(0xff00ff)
     .drawCircle(0, 0, radius)
     .endFill()
circleSprite1.addChild(circle1)
circleSprite1.anchor.set(0.5)
circleSprite1.position.set(200, 200)
circles.push(circleSprite1)

// 衝突させる円2
const circleSprite2 = new PIXI.Sprite()
const circle2 = new PIXI.Graphics()
     .beginFill(0xff00ff)
     .drawCircle(0, 0, radius)
     .endFill()
circleSprite2.addChild(circle2)
circleSprite2.anchor.set(0.5)
circleSprite2.position.set(400,400)
circles.push(circleSprite2)

app.stage.addChild(circleSprite1)
app.stage.addChild(circleSprite2)

③ drag and dropで操作する円を作成する

次にdrag and dropで操作する円を作成します。
①と同じ要領でPIXI.Graphicsで円を描画し、Spriteに追加します。

// dragさせる円の半径
const dragCircleRadius = 50

// dragさせる円
const dragCircle = new PIXI.Graphics()
     .beginFill(0x0000ff)
     .drawCircle(0, 0, dragCircleRadius)
     .endFill()

const dragCircleSprite = new PIXI.Sprite()
dragCircleSprite.addChild(dragCircle)

Spriteのpointer up や pointer moveイベントを有効化するために、interactive を true に設定します。
わかりやすいように buttonMode もtrueにして、カーソルがpointerになるようにします。

dragCircleSprite.interactive = true
dragCircleSprite.buttonMode = true

次に作成したSpriteにイベントを登録させます。
第一引数にイベントの種類、第二引数に実行する関数を指定します。

dragCircleSprite.on('pointerdown', onPointerDown)
dragCircleSprite.on('pointerup', onPointerUp)

今ドラッグしているか否かの状態は isDragging で保持します。


// ドラッグ状態を管理
let isDragging = false

// pointer down時のevent
function onPointerDown(){
  isDragging = true
  dragCircleSprite.on('pointermove', onPointerMove)
}

// pointer up時のevent
function onPointerUp() {
  isDragging = false
  dragCircleSprite.removeListener('pointermove')
}

pointer moveイベントではドラッグ状態がtrueの場合のみ、Spriteの座標を現在のマウスの位置に合わせます。
引数からInteraction Eventを参照できるので、座標の情報はそこから取得します。

// pointer move時のevent
function onPointerMove(e) {
  if(isDragging) {
    const target = e.currentTarget
    const position = e.data.getLocalPosition(app.stage)
    target.position.set(position.x, position.y)
  }
}

以下ここまでのコードの全容です。
公式Exampleの drag and drop も参考にしてみてください。


// ドラッグ状態を管理
let isDragging = false

// dragさせる円の半径
const dragCircleRadius = 50

// dragさせる円
const dragCircle = new PIXI.Graphics()
     .beginFill(0x0000ff)
     .drawCircle(0, 0, dragCircleRadius)
     .endFill()

const dragCircleSprite = new PIXI.Sprite()
dragCircleSprite.addChild(dragCircle)

// interactiveをtrueにしないとイベントが発火しない
dragCircleSprite.interactive = true
dragCircleSprite.buttonMode = true
// 初期のポジション
dragCircleSprite.position.set(200,400)
// アンカーポイントを真ん中に設定
dragCircleSprite.anchor.set(0.5)

// pointerイベントの登録
dragCircleSprite.on('pointerdown', onPointerDown)
dragCircleSprite.on('pointerup', onPointerUp)

// pointer down時のevent
function onPointerDown(){
  isDragging = true
  dragCircleSprite.on('mousemove', onPointerMove)
}

// pointer up時のevent
function onPointerUp() {
  isDragging = false
  dragCircleSprite.removeListener('mousemove')
}

// pointer move時のevent
function onPointerMove(e) {
  if(isDragging) {
    const target = e.currentTarget
    const position = e.data.getLocalPosition(app.stage)
    target.position.set(position.x, position.y)
  }
}

app.stage.addChild(dragCircleSprite)

③ 円同士の衝突を判定するロジック

では、本題の円同士の衝突判定です。
まず、当たり判定となる基準ですが、ドラッグしている円が既に描画されている円に衝突した時（重なった時）に当たり判定とします。
これを実現するために、2つの円それぞれの中心からの距離と半径の和を比べて、半径の和 > 2つの円の距離となれば当たり、と判定します。

2つの円の距離は三平方の定理を使って求めます。

直角三角形では、斜辺cの2乗は，他の辺a，bをそれぞれ2乗した数の和に等しい、というやつです。
この定理をどのように使用するかと言いますと、、、

図のように、2つの円の中心を結んだものを斜辺cとし直角三角形を作ると、それぞれx座標同士、y座標同士の距離が2辺 a, bとなり、
直角三角形では，2つの辺の長さがわかると，三平方の定理を使って他の1辺の長さが計算できるので、中心座標の数字がわかればcの長さを計算することが可能になります。

Math.hypot() 関数は、各引数の二乗の合計値の平方根を返しますので、これを使用すると簡単に上記の式が実現できそうです。
コードに落とし込むと、、、


const a = x1 - x2
const b = y1 - y2
const c = Math.hypot(a, b)
if(c < radius + dragCircleRadius) {
	// 当たり
  return
} else {
  // 当たってない
}

④ pointer moveの時に衝突判定

上記のロジックをpointer move時のイベント関数内に実装します。
衝突判定させる円が複数個あるため、円をまとめた配列をループして判定するようにします。
衝突した時にSpriteの透明度を下げるようにします。

function onPointerMove(e) {
  if(isDragging) {
    const target = e.currentTarget
    const position = e.data.getLocalPosition(app.stage)
    target.position.set(position.x, position.y)

    for(let i = 0; i < circles.length; i++) {
      const centerPosition = {
        x: circles[i].x,
        y: circles[i].y
      }

      const a = centerPosition.x - position.x
      const b = centerPosition.y - position.y
      const c = Math.hypot(a, b)
      if(c < radius + dragCircleRadius) {
        dragCircleSprite.alpha = 0.3
        return
      } else {
        dragCircleSprite.alpha = 1
      }
    }
  }
}

いい感じになりました。

コードの全容はこちらのcodepen に載せましたのでよければご参考までに！