Phaser3

[Phaser3]Full screen表示を行う

やりたいことPhaser3でFullScreen表示を行います。ブラウザの表示部分に大きく表示するわけではなく、動画などをFull Screen表示した場合と同様にブラウザのGUIは非表示になり、ESCでFull Screen表示が終了します。実装Full screenSceneの子供のクラスからは以下を呼ぶだけです。this.scale.startFullscreen();Full screen解除Sceneの子供のクラスからは以下を呼ぶだけです。this.scale.stopFullscreen();シーンの移動に関してstartFullscreen/stopFullscreenはシーンの...

2025.06.12

Phaser3

画像を使用せずに凝ったボタンを作成する(graphics)(Phaser3)

やりたいことPhaser3ではGameObjectにクリックのイベントを登録してボタンとして使用することができます。しかしGameObjectは四角形や円などで画像を使用する以外に凝ったボタンを作成する子は難しいです。ここではgraphicsオブジェクトを使用して凝った(過度の丸い)ボタンを作成します。コード以下の関数を作成しました。function createRoundedRectangle(scene, x, y, width, height, radius, fill, stroke, strokeThickness) { const graphics = scene.add.grap...

2024.12.25

Phaser3

画像を使用せずに凝ったボタンを作成する(DOM)(Phaser3)

やりたいことPhaser3ではGameObjectにクリックのイベントを登録してボタンとして使用することができます。しかしGameObjectは四角形や円などで画像を使用する以外に凝ったボタンを作成する子は難しいです。ここではDomオブジェクトを使用して凝ったボタンを作成します。作成方法Domのオブジェクトは以下の記事で作成方法を紹介しました。記事を踏まえて以下の関数を作成しました。export function createBtn(scene, x, y, text, font_size, color, callback){ let el = document.createElement('...

2024.12.25

Phaser3

Domオブジェクトを使うまとめ(Phaser3)

やりたいことPhaser3上にHTMLのタグ(DOM)を配置するDomオブジェクトを使用すると、他のGameObjectとは使用方法が異なったため使用方法と注意点をまとめます。使用方法準備DOMオブジェクトを使用するには以下のコンフィグをセットする必要があります。 dom :{ createContainer: true },例えば以下のようにConfigを作成してセットします。const config = { type: Phaser.AUTO, width: 300, height: 200, parent: 'game-container', backgroundColor: '#000...

2024.12.25

Phaser3

imgエレメントの画像を表示(Phaser3)

やりたいことimgエレメントに設定された画像をPhaser3上に表示します。使用例以下の記事にあるようにScreenCaptureを行うと、画像はimgエレメントで返却されます。ScreenCaptureした画像を表示するにはこの記事で紹介する方法を行う必要があります。実装以下のようにimageエレメントからTextureを作成し、Textureに対してadd()でFrameを追加します。作成したTextureはimageとしてシーンに追加することができます。let image // this is image element // for example get by document.ge...

2024.12.03

Phaser3

画面の一部のScreenCapture(Phaser3)

やりたいことPhaser3で表示している画面のScreenCapture（snapshot）を取得します。背景Canvasエレメントを取得してImageを取得しようと思ったのですが、2DのContextを取得できなかったため、別の方法をさがしました。実装任意のシーンで以下の関数を呼びます。this.game.renderer.snapshotArea(x, y, width, height, callback);x,yは表示領域の左上からの座標です。（下図の赤領域がキャプチャする領域です。）callbackの引数はImageエレメントです。例として以下のような関数をcallbackとして設定し...

2024.12.02

Phaser3

上下スペースキーの押下時にページスクロールしないようにする(Phaser3)

やりたいことPhaser3でゲームを作成した際に、上下スペースキーをキーを押下したときにページが意図せずにスクロールしてしまうことがあります。（ローカル環境でフィットするようにスケールするように設定していると気が付きにくいのですが、サーバ上にアップロードした際に広告などの影響で顕在化することがあります。）ここでは意図したスクロールを止めます。実装以下のコードを上下スペースキーを押下する必要のあるシーンに追加します。create()で呼べば問題ありません。this.input.keyboard.on('keydown-DOWN', event => { event.preventDefault(...

2024.11.09

Phaser3

不連続なSpliteでアニメーション(Phaser3)

やりたいことPhaser3でキャラクタにアニメをつける場合以下のように連続したSplite（下の例だとdudeの0～3）からアニメーションを作成します。 this.anims.create({////左移動時のアニメーション key: 'left', frames: this.anims.generateFrameNumbers('dude', { start: 0, end: 3 }), frameRate: 10, repeat: -1 });しかし連続していないspliteを用いたい場合もあります。ここでは連続していないSpliteでアニメーションを作成します。上記のチュートリアルの詳細...

2024.10.03

Phaser3

Vite + Phaser 3 のテンプレートで複数のHTMLを作成する

やりたいこと以下の記事で作成したVite + Phaser 3 のテンプレートで複数のHTMLをビルドの対象にします。具体的にはProjectディレクトリにあるindex.html以外のHTMLをビルド対象にして、npm run buildでビルドした際にhtmlをビルド、distフォルダにコピーされるようにします。ここではProjectディレクトリにあるindexA.htmlを追加することを例にします。設定の変更以下のファイルを開きます。vite¥config.prod.mjs以下の内容になっていると思います。import { defineConfig } from 'vite';const...

2024.10.01

Phaser3

GameObjectに対するマウスイベント一覧(Phaser3)

やりたいことPhaser3でGameObjectに対するマウスイベントをまとめます。イベントの受け方まずゲームオブジェクトにマウス操作を許可しますGameObject.setInteractive();ドラッグを行う場合は以下のオプションが必要です。GameObject.setInteractive({ draggable: true });イベント時に処理は以下の用に紐づけます。GameObject.on(イベント名, function)); 例： const rect = this.add.rectangle(400, 300, 100, 100, 0xff0000); rect.setI...

2024.08.31

Phaser3