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
electron

Electronのメニューを消す

やりたいこと下の記事にてElectronを使ってWebページをWindowsの実行ファイルにビルドしてみました。しかし、下の用にメニューが表示されます(File, Edit…の部分)。基本的に不要(リリースするときはない方がいいDeveloperToolの表示もあります)ですので消したいと思います。実装先述のページのmain.js(Electronのエントリーポイント)は以下の通りです。const { app, BrowserWindow } = require('electron/main')const createWindow = () => { const win = new Brows...
2024.08.25
electron
nodejs

npmでのパッケージ管理の基本

やりたいことNode.jsやJavaScript/TypeScriptの調べ物をしているときなどによく出てくるnpmに関して簡単に説明します。ここではパッケージ管理に関しての基本をまとめます。NPMとはNPMはNode.jsで使用されるパッケージ管理システムです。(実際にはパッケージ管理だけでなくパッケージの実行などいろいろな機能があります)公式ページインストールNPMによるパッケージのインストールは以下のコマンドにより行います。npm install パッケージ名installはadd, i, in, ins, inst, insta, instal, isnt, isnta, isntal...
2024.08.24
nodejs
electron

Electronを使ってWebページからWindowsの実行ファイルを作る

やりたいこと下のElectronを使ってWindows向けのアプリケーションを作成します。electronとはelectronはJavaScript/HTML/CSSで作成したWebページから実行ファイルを作成します。Windows/MAC/Linux向けの実行ファイルが作成できますが、ここではWindows向けの実行ファイルを作成します。詳細は以下の公式ページ。プロジェクトの作成事前準備Node.jsが必要です。以下のリンクから環境にあったNode.jsをインストールします。プロジェクトの作成任意の作業フォルダを作成して以下のコマンドを実行します。npm init -yElectronでの実...
2024.08.24
electron
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
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
Vite

Vite でビルドしたら動作しなくなった

やりたいことViteの環境でnpm run buildを行いビルドをしたところ正しく動作しなかったことのまとめです・前提として開発環境にあったテンプレートを使用しています。(テンプレートなしだと構成などで苦戦したため)(随時更新)ビルド時エラーawaitawaitを使用した場合に以下のエラーが出てビルドに失敗しました。ERROR: Top-level await is not available in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari14" + 2 ov...
2024.08.17
Vite
Phaser3

Phaser3開発向けリンク

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

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