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
JavaScript

Viteのプロジェクトを作成するBat

注意この記事は古く、Viteのプロジェクトの構成が現在と異なります。以下の記事を参照してViteのそのものの仕組みでプロジェクトを作成することをお勧めします。やりたいこと以下のページでViteのプロジェクトを作成してみましたが手動で行うことが多いので、自動化する。batによるプロジェクト作成フォルダの作成プロジェクトに使用するフォルダを作成します。今回は以下のフォルダを作成しました。F:\TS\Vite_autobatの作成作成したフォルダにCreateViteProject.batファイルを作成します。作成したCreateViteProject.batに以下の内容をペーストして保存します。c...
2024.08.09
JavaScript
git

[batあり]git がgit config –global –add safe.directoryしろと言ってきたときのbat

やりたいことgitのリポジトリをCloneした直後などにgitから以下のメッセージが表示されPullなどができないことがあります。Could not open repository.libgit2 returned: repository path 'X:\XXXX' is not owned by current userTo add an exception for this directory call:git config --global --add safe.directory 'X:\XXXX'表示されたコマンドを少し変えて実行すればいいのですが、めんどくさいしルールもすぐ忘れる...
2024.08.08
git
JavaScript

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

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
Synfig Studio

Synfig StudioでSVGを読み込む

やりたいことInkscapeなどで作成したSVGをSynfig StudioでSVGを読み込みたい。なぜ必要なのか？Synfig Studioにはメニュー　ファイル　→　インポートからSVGファイルがインポートできます。しかし以下のようにSynfig Studioでは境界線（ほかにも曲線、Z orderなど）が正しく読み込めません。Inkscape上の表示Edge上の表示Synfig Studio上の表示この記事で紹介する方法で、見た目はInkscapeとSynfig Studioで近くなります。しかし以下の情報は復元できません。-　グラデーションまたグループ化の情報は失われます。グループ情報...
2024.07.15
Synfig Studio
JavaScript

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

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

Visual Studio CodeをTypeScriptの開発環境にする手順

やりたいことVisul Studio Codeを用いてTypeScript（TS）による開発を行う。(無料でTSのGUI付きの開発環境を作成する)環境OS : Windows11Visual Studio Code：1.88.1Node.js : 20.12.2環境構築まずは開発環境を構築するためにツール類をインストールします。Visual Studio Codeのインストール以下のリンクからVisual Studio Codeを環境にあったダウンロードしてインストールします。（多くPCの場合はUser Installのx64で問題ないと思います。）Node.jsのインストール以下のリンクから...
2024.05.05
TypeScriptUncategorized
次のページ