やりたいこと
Phaser 3(Javascriptの２Dゲームエンジン)を使用するViteの環境を作成します。
Viteが動作する環境(Node.jsなど)はインストール済みの前提です。
テンプレートの使用
ありがたいことにPhaser 3を使用するViteのテンプレートが用意されていますので使用します。
テンプレートの取得
テンプレートを以下のどちらかの方法で取得します。
リポジトリからクローン
以下のリンクからクローンします。
(クローンってなに？という方は下のzipのダウンロードをお試しください)
クローンが終わったらプロジェクトのフォルダに.gitフォルダ以外をコピーします。
Zipでダウンロード
以下のページにアクセスします。
画面上側、中央あたりにあるCodeをクリックします。
Download zipをクリックします。
ダウンロードが終わったらプロジェクトのフォルダにzip内のtemplate-vite-mainフォルダの中身を解凍します。
プロジェクトの初期化
VisualStudioCodeを開きファイルメニュー内の”Open Folder…”からプロジェクトのフォルダを開きます。
VisualStudioCodeのTeminal(表示されていない場合はViewメニューからTeminalを選択)から以下のコマンドを実行します。
npm install以上で準備完了です。
バンドルまでの流れ
コード修正
コードはSrcフォルダ下にあるので修正します。
試験サーバの起動
ターミナルで以下のコマンドを実行します。
npm run devこのテンプレートはポートが8080固定です。
バンドル
ターミナルで以下のコマンドを実行します。
npm run buildバンドルされたファイルはdistフォルダに保存されます。
バンドルしたファイルの確認(追記)
設定ファイルの更新
package.jsonを開きます。
以下のScriptsの部分を以下のようにPreviewno行を追加し保存します。
"scripts": {
"dev": "vite --config vite/config.dev.mjs",
"build": "vite build --config vite/config.prod.mjs",
"preview": "vite preview "
},実行
ターミナルから以下を実行します。
npm run preview以下の用にURLが表示されるのでブラウザで表示するとバンドルされたファイルを使用して表示覚ます。
➜ Local: http://localhost:4173/結果
Phaser 3を使用するViteの環境を作成できました。
コメント