Phaser3

ドラッグでオブジェクトを移動する(Phaser3)

やりたいことPhaser3でオブジェクトをドラッグで移動します。実装準備シーンにドラッグで動かすオブジェクトを追加します。ここではRectangle(長方形)を追加しました。 create () { const rect = this.add.rectangle(400, 300, 100, 100, 0xff0000); }以下のように表示されます。(シーン全体は800ｘ600なのでシーンの中心に表示されています。)ドラッグの実装まずはrect.setInteractive({ draggable: true })を呼び、作成したRectにドラッグ操作を許可します。 create () { ...

2024.08.30

Phaser3

別のSceneの値を取得/更新する(Phaser3)

やりたいことPhaser3で異なるSceneの値の読み書きを行いたい。ここでは下のページで作成した二つのシーンを並べて表示するコードを例に行います。コードは以下の通りclass secondScene extends Phaser.Scene { create (data) { this.cameras.main.setSize(200,600); this.cameras.main.setPosition(data.x,data.y) this.add.rectangle(0, 0, 200, 600, 0x00ff00, 0.5).setOrigin(0); }}class mainSce...

2024.08.30

Phaser3

複数のSceneを並べて表示(Phaser3)

やりたいことPhaser3で複数のシーンを並べて表示します。以下の用にmainSceneとSecondSceneを並べて表示するようします。800ｘ600のmainSceneの表示領域を左側600ｘ600に限定し、右側に200x600のSecondSceneを表示します。実装準備mainSceneの作成MainSceneは以下の用に実装しました。サイズは800x600です。全体を半透明の赤の長方形で埋めています。(わかりやすくするために背景は灰色にしています) class mainScene extends Phaser.Scene { create () { this.add.rectang...

2024.08.29

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)に幅...

2024.08.18

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...

2024.08.17

Phaser3

Phaser3開発向けリンク

やりたいことPhaser3で開発するにあたり便利だったり必要だったりするサイトへのリンクをまとめます。(随時更新)リンク本家GitAPI Document有志のページ？階層になっていて探しやすい古いページ？* 少しわかりにくいですが画面上部の下のリンクをクリックすることでExample(Classごと) Template(Vite + JavaScript)Template(Vite + TypeScript)

2024.08.17

Phaser3

キー入力で任意の関数を実行する(Phaser3)

やりたいことPhaser3でキー入力があったときに任意の関数を実行します。以下の方法で登録しthis.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.A);updateの中で上記返り値の以下の値を取得することで、任意のコードを実行することはできます。isDownしかし行動以外のキーイベント(例えばポーズやリトライ)などはUpdateの中に書かない方がいいと思います。onによる実装以下のようにOnで実装することができます。だいたいの場合Createで呼ぶのがいいと思います。Spaceキーが入力されるとlistenerが実行されます。 th...

2024.08.13

Phaser3

当たり判定の調整（Phaser3）

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

2024.08.13

Phaser3

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

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

2024.08.13

Phaser3

Phaser 3 でシーンの再実行

やりたいことPhaser 3 でシーンの再起動を行う。例えばゲームオーバーになったときにゲームのシーンをはじめからやり直すなど。例としてPhaser 3チュートリアルのPart10を参考に行います。コードのダウンロードやコメントなどは以下のページに記載しましたのでご参照ください。Sceneのリスタートスクリプト以下をスクリプトを実行するとシーンが再実行されます。thisはSceneです。そのためSceneを継承したクラスから呼び出すときも以下のスクリプトで実行できます。(スクリプト中のthis.sceneはSceneクラスではなくScenePluginです。)this.scene.restar...

2024.08.13

Phaser3