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

Phaser 3 でシーンの再実行

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

Vite + Phaser 3 + VisualStudioCodeの開発環境を作成する

やりたいことPhaser 3(Javascriptの２Dゲームエンジン)を使用するViteの環境を作成します。Viteが動作する環境(Node.jsなど)はインストール済みの前提です。テンプレートの使用ありがたいことにPhaser 3を使用するViteのテンプレートが用意されていますので使用します。テンプレートの取得テンプレートを以下のどちらかの方法で取得します。リポジトリからクローン以下のリンクからクローンします。(クローンってなに？という方は下のzipのダウンロードをお試しください)クローンが終わったらプロジェクトのフォルダに.gitフォルダ以外をコピーします。Zipでダウンロード以下のペ...
2024.08.10
Phaser3
次のページ