javascript

[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

ViteでGemini APIの音楽生成

やりたいことGoogleのGemini APIをNodeJSで使用して、音楽生成を行います。実装はフロントエンドのみでバックエンドはGoogleを使用します。GoogleのAPIキーを発行する必要があります。注意：この記事を書いて時点でGeminiの音楽生成はプレビュー機能です。今後仕様等変更になる可能性があります。この記事ではNodeJSを用いてクライアントサイドでの実装を行っています。しかしこの方法はAPI KEYが使用者に漏れる可能性がありますのでGoogleから推奨されていません。個人的な使用や、実験にとどめてください。この記事は基本的には以下のページをベースにしています。しかし下のペ...

2025.06.10

AI

Viteでローカル以外からアクセスできるコマンドを作成

やりたいことViteで作成したプロジェクトで以下コマンドを実行して、Severを起動するとローカルPCからはブラウザなどからアクセスできます。npm run dev出力： ➜ Local: ➜ Network: use --host to expose ➜ press h + enter to show helpしかし他のPCからはアクセスすることはできません。この記事ではローカルでの試験向けのnpm run devコマンドを保持しつつ、他のPCからもアクセスできる方法を用意する手順を紹介します。解決策他PCからのアクセスを許可まずは他PCからのアクセスを許可を試します。Viteで作成したプロ...

2025.05.14

Vite

画像を使用せずに凝ったボタンを作成する(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

VisualStudioCodeでNode.jsのサーバコードをデバッグする

やりたいことNode.jsでHTTPサーバを実装した際にVisualStudioCodeでデバッグします。環境Node.js　v20.16.0VisualStudioCode　1.94.2デバッグFileメニューから”Open Folder...”を選択して、プロジェクトのあるフォルダを開きます。画面左の"Run and Debug"をクリックして"Create a Launch.json file"をクリックします。画面上部に以下のプルダウンが表示されるのでNode.jsを選択します。しばらく待つと以下の内容でLaunch.jsonがプロジェクトフォルダ/.vscodeに作成されます。pro...

2024.10.31

nodejs