Zenn
🦁

creator kit script を使うときに webpack を使う手順メモ #cluster #clusterベータ

2024/02/25に公開
JavaScript
Node.js
cluster
nodenv
tech

creator kit script を使うときに webpack が使えるとクラスを使ったりできて便利そうなので試したメモ書きです。

プロジェクト・フォルダの作成

ClusterCreatorKitTemplate をダウンロードして creator kit script　のためのフォルダを作成しましょう。

Assets 以下に webpack-sample01 を作成する

% mkdir -p Assets/webpack-sample01/Scripts

npm を導入

webpackや便利なライブラリを簡単に使うために node.js を導入して npm 利用できるようにしましょう。
ndenv を使って環境を整えると後々楽なこともあるので 導入をお勧めします。

% brew update
% brew install ndenv
% ndenv -v

% cd Assets/webpack-sample01/Scripts
% nodenv install -l
% nodenv install 20.2.0
% nodenv local 20.2.0
% nodenv local

javascrip プロジェクトを初期化

% cd Assets/webpack-sample01/Scripts
% npm init -y

webpack のインストール

% cd Assets/webpack-sample01/Scripts
% npm install --save-dev webpack webpack-cli

cluster-script-types

@clustervr/cluster-script-types

cluster-script-typesを導入する creater kit script のメソッドなどの保管機能を利用できるようになります。

% cd Assets/webpack-sample01/Scripts
% npm i --save-dev @clustervr/cluster-script-types

スクリプトファイルの用意

VSCode を起動して以下の簡単なスクリプトファイルを用意しまししょう。

% mkdir -p Assets/webpack-sample01/Scripts/src
% mkdir -p Assets/webpack-sample01/Scripts/src/modules

% cd Assets/webpack-sample01/Scripts/src
code .
modules/hello.js
export class Hello {
    constructor(name) {
        this.name = name;
    }
  
    log(tag) {
        $.log(`${tag} ${this.name}!`);
    }
}
itemA.js
import { Hello } from "./modules/hello";

// 起動時に実行される
$.onStart(() => {
    const hello = new Hello("A Hello");
    hello.log('World'); 
});
itemB.js
import { Hello } from "./modules/hello";

// インタラクトイベント時に実行される
$.onInteract(() => {
    const hello = new Hello("B Hello");
    hello.log('World'); 
});

webpack.config.js バンドル設定ファイルの作成

./src/item.mjs を バンドル処理をして ./dist/item.js を作成する設定を用意します。
target: 'node' で バンドルすることで Creater Kit Scropt でも実行することができる形式で出力されます。

% cd Assets/webpack-sample01/Scripts
% # パス指定にワールドカードを使うために glob ライブラリを追加
% npm install --save-dev glob
webpack.config.js
const path = require('path');
const glob = require('glob');

const entries = {};
const srcDir = './src';
glob.sync('*.js', {
  cwd: srcDir,
}).map((value) => {
  entries[value] = path.resolve(srcDir, value);
});

module.exports = {
  mode: process.env.WEBPACK_ENV,
  devtool: false,
  target: 'node',
  entry: entries,
  output: {
    filename: '[name]',
    path: path.resolve(__dirname, 'dist'),
  },
};

バンドルを実行する

% cd Assets/webpack-sample01/Scripts
% WEBPACK_ENV=development npx webpack

バンドルを実行すると
dist/itemA.js, dist/itemB.jsが作成されます。

package.json に バンドル実行 の設定を追加

npm run xxx で バンドルを実行できるようにしておきましょう。 後日見た時に バンドルの引数を忘れて困るとかがなくなります。

{
... 省略
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build-dev": "WEBPACK_ENV=development webpack --config webpack.config.js",
    "build-prod": "WEBPACK_ENV=production webpack --config webpack.config.js"
  },
...
}

scripts に build-dev が追加されたので 次のコマンドで バンドル実行することができます。

% npm run
% npm run build-dev 

> scripts@1.0.0 build-dev
> WEBPACK_ENV=development webpack --config webpack.config.js

asset itemB.js 3.53 KiB [emitted] (name: itemB)
asset itemA.js 3.5 KiB [emitted] (name: itemA)
runtime modules 1.31 KiB 6 modules
cacheable modules 571 bytes
  ./src/itemA.js 188 bytes [built] [code generated]
  ./src/itemB.js 215 bytes [built] [code generated]
  ./src/modules/hello.js 168 bytes [built] [code generated]
webpack 5.90.3 compiled successfully in 72 ms

開発が終わってスクリプトサイズを小さくする場合は npm run build-prod を使うと 出力されるファイルサイズが小さくなります。

% npm run build-prod

npm run build-prod

> scripts@1.0.0 build-prod
> WEBPACK_ENV=production webpack --config webpack.config.js

asset itemB.js 152 bytes [emitted] [minimized] (name: itemB)
asset itemA.js 149 bytes [emitted] [minimized] (name: itemA)
orphan modules 168 bytes [orphan] 1 module
./src/itemA.js + 1 modules 356 bytes [built] [code generated]
./src/itemB.js + 1 modules 383 bytes [built] [code generated]
webpack 5.90.3 compiled successfully in 170 ms

Unity のシーンに追加してみましょう

GameObject に ScriptItem を追加して dist/item.js を設定してみましょう。

  1. MinimalSample を開く
    Assets/ClusterCreatorKitTemplate/Minimal/Scenes/MinimalSample.unity

  2. シーンを Save as で 別名 Sample で保存する
    Assets/webpack-sample01/Scenes/Sample.unity

  3. Hierarchy で GameObject を新規作成 ScriptItem を追加する

    1. GameObject の名前を ItemA に変更
    2. Add component で ScriptItem を追加

  4. ScriptItem に バンドル実行して作った dist/itemA.js を 設定する

  5. Hierarchy で GameObject を新規作成 ScriptItem を追加する

    1. GameObject の名前を ItemB に変更
    2. Add component で ScriptItem を追加
    3. Hierarchy で ItemB 以下に Cube を追加

  6. ScriptItem に バンドル実行して作った dist/itemB.js を 設定する

  7. アップロードして動作確認してみる

    ワールド入室時に A Hello World がログに表示されるはず。
    ItemB をインタラクトすると B Hello World が ログに表示されるはず

まとめ

creator kit script で webpack を使えるようになると 同じような動きする クラスを作って楽にコードを管理したりが可能になります。 ゲーム作りなど 複雑になってもコードで管理できて便利になるはずです。
あと見通しも良くて不具合も見つけやすく、減るようになります。

Discussion