物理エンジン

Phaser3

matterの物理エンジンで基本形状を使う(Phaser3)

やりたいこと下の記事では画像に複雑な形状の当たり判定を設定しましたが、ここでは画像を使用せずに基本形状(円、矩形、多角形)をmatterを使ってみます。実装円以下の実装で(300,30)に半径10で黒(0x000000)の円を描きます。2行目で同じ半径の当たり判定を作成した円に設定しています。 const circle = this.add.circle(300, 30, 10 ,0x000000); this.matter.add.gameObject(circle, { shape: { type: 'circle', radius: 10 } });矩形以下の実装で(100,200)に幅...
Phaser3

matterの物理エンジンで複雑な形状を使ってみる(Phaser3)

やりたいことPhaser3で複雑な形状で物理エンジンを使用するためにmatterを使ってみます。データの用意画像の用意画像をPNGで用意します。今回は例として上の画像を作成しました。わかりにくいですが白い領域は透明です。名前をc.pngとしました。サイズは100x100です。実装画像のロードsceneのpreloadで上記の画像を読み込みます。 preload () { this.load.image('c', 'assets/c.png'); }画像の追加sceneのcreateで上記の画像を追加します。 create () { const poly = this.add.image(300...
Phaser3

当たり判定の調整(Phaser3)

やりたいことPhaser3で物理エンジン(Arcade)の当たり判定を設定します。例としてPhaser 3チュートリアルのPart10を参考に行います。コードのダウンロードやコメントなどは以下のページに記載しましたのでご参照ください。準備まずは以下のページを参照して当たり判定を表示します。当たり判定の設定矩形を設定Phaser.Physics.Arcade.Components.Sizeを継承しているオブジェクトに対して(spriteなど)setSize()およびsetOffset()を呼びます。setSize(width, height, [center])SetSizeの引数は以下の通りで...
Phaser3

ゲーム上に当たり判定の表示(Phaser 3)

やりたいことPhaser 3 で物理エンジン(Arcade)の当たり判定をゲーム上に表示します。Phaser 3の調べ物をしているときにキャラクターやアイテムに四角が表示されているキャプチャを見ることがありますが、あれを表示します。例としてPhaser 3チュートリアルのPart10を参考に行います。コードのダウンロードやコメントなどは以下のページに記載しましたのでご参照ください。物理エンジンの設定Gameクラスに渡すConfigのphysicsに以下の用に debug: trueを追加します。 physics: { default: 'arcade', arcade: { gravity: ...