javascript

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でキー入力があったときに任意の関数を実行します。以下の方法で登録し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

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

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

2024.08.10

Phaser3

WebPackが難しいのでViteでバンドル

やりたいことVite(ヴィート)でバンドルをします。バンドルとは複数のJavaScriptファイルを一つのJavaScriptファイルにまとめることです。webpackが有名ですが、設定が難しく、また開発が終了しているためViteを使用してみます。環境node.js: v20.16.0Vite: 5.3.4プロジェクトの作成任意のプロジェクトのフォルダを作成して以下のコマンドを実行します。npm init vite@latest以下のように聞かれたらｙを入力してエンターを入力します。Need to install the following packages:create-vite@5.4.0...

2024.08.07

JavaScript

Phaser3のチュートリアルコードの実行と日本語コメント

やりたいこと２Dゲームの作成エンジンであるPhaser3のチュートリアルゲームを実行します。また元が英語なので可能な限り日本語のコメントを残します。チュートリアルゲームの実行ソースコードのダウンロード以下のページからソースコード(phaser3-tutorial-src.zip)をダウンロードします。少しわかりにくいですが、Requiementsの章に”Download this zip file”のリンクがあります。ソースコードの実行phaser3-tutorial-src.zipを任意の場所に展開します。ここではVisual Studio CodeのLive Serverを使用して起動しま...

2024.08.04

Phaser3

Visual studio codeからローカルサーバーを起動する

やりたいことVisual studio codeからローカルサーバーを起動、HTMLの確認を行いたい。なぜ必要なのか？ローカルで作成したHTMLファイルをchromeなどのブラウザで表示することで、動作確認を行うことができます。しかし一部の機能はローカルファイルからは実行することはできません。そのためローカルにHTTPサーバーを起動し作成したHTMLファイルをサーバー上のファイルとしてブラウザから読広必要があります。例えばmoduleのjava scriptをローカルのHTMLから読み込もうとした場合、以下のようなエラーが表示され、動作しません。（Chromeの起動パラメータで動作するようにで...

2024.05.06

JavaScript

JavaScriptでサーバー上かローカルでの実行か知る

やりたいことJavascriptでサーバ上で実行されているかローカルで実行しているのか確認します。（ローカルではテストコードを動かし、サーバ上では本番のコードを動かすときなどに使用しています）プロトコルによる確認URLのプロトコルパートで確認できます。ローカルで動作するときはURLのプロトコルは”file:”、サーバ上で動作する場合は”http:”もしくは”https:"です。そのため以下のようなコードで確認することができます。 if (location.protocol == "file:") { //////ローカルで実行} else { //////サーバ上で実行}結果Javascrip...

2024.01.02

JavaScript