Unity 開発者向け Wonderland Engine

このページでは、UnityからWonderland Engineへのスクリプティングのマッピングを提供し、ソリューション構築のための違いをリストアップします。

ビデオ形式を好む場合は、YouTube チャンネルの切り替えガイドをチェックしてみてください。

スクリプティング 

Wonderland Engine はブラウザで動作し、JavaScript ランタイムがすでに組み込まれています。これにより、追加のダウンロードが不要であり、Web エンジンのスクリプト言語として最適です。

スクリプトを作成するには、Wonderland Editor のアセットブラウザで右クリックし、新しい JavaScript / TypeScript コンポーネントを作成します。開始のための基本的なテンプレートが含まれています。

JS/TS に適した IDE は Visual Studio Code です。

Wonderland Engine の API が Unity のものとどのように違うのかについては、コードセクションをご覧ください。

TypeScript と JavaScript 

TypeScript は JavaScript に静的型チェックを追加し、C# に近づけます。これにより、IDE のコード補完が大幅に向上します。Unity に慣れた開発者には TypeScript を推奨します。

Wonderland Engine は tsconfig.json のセットアップを自動で行います。アセットブラウザから TypeScript コンポーネントを作成するだけです。

パッケージング 

Unity のワークフローでは通常、エディタ内のプレビューを使用しますが、Wonderland Engine では最終パッケージングプロセスが非常に速いため（1 秒未満）、ブラウザ内の最終アプリをプレビューとして使用できます。

リパッケージするたびにページがブラウザでリロードされ、Views > Preferences で保存後に自動的に実行するように設定できます。

アプリケーションをデプロイするには、プロジェクトの deploy フォルダーの内容を Web サーバーにアップロードするだけです。また、Views > Plugins にてアクティブ化できる “Wonderland Cloud Publish” プラグインを使用してアップロードすることも可能です。

複数のシーン 

Wonderland Engine では、multiple project files(.wlp) で作成された複数のシーン間の切り替えが可能です。シーン切り替えチュートリアルを参照してください。

さらに、ランタイム中にシーンの一部をストリームすることができます。Streaming .bin Files チュートリアルもご覧ください。

プレハブ 

Wonderland Engine にはプレハブに相当するものがまだありません。代わりに、シーンでプロトタイプを設定し、object.clone() でその階層とすべてのコンポーネントを複製します。

または、プレハブオブジェクトを別のシーンに移動し、ランタイム中に engine.loadPrefab(…) を使用してロードし、インスタンス化します。

アセットのインポート 

Wonderland Engine では、シーンファイルがインポートされると（アセットブラウザからドラッグ＆ドロップして Scene View や Scene Outline に、または画像ファイルをマテリアルのテクスチャスロットにドラッグして）、変更があればリンクされて監視されます。シーンファイルで見つかったリソースはプロジェクト内で利用可能になり、「Resources」ビューで表示できます。

アセットブラウザからファイルがインポートされるまで、そのファイルはプロジェクトで使用できません。「Asset Browser」は、Unity のものとは異なるファイルブラウザと考えられます。

アセットの最適化 

インポートされたアセットはさらに最適化できます：

• メッシュは頂点数を削減するために自動的にデシメートされます
• メッシュは均一にスケーリングできます
• 画像は自動的に圧縮されます
• 画像は縮小が可能です

これらの設定は「Resources」ビューで見つけられます。

ディレクトリ 

• deploy にはパッケージングの最終結果が含まれています。
• static にはそのままデプロイされるファイルが含まれています。
• cache はキャッシュされたアセットコンパイル結果を含みます。通常削除しても安全ですが、再生成に時間を要します。

これらの設定は「Resources」ビューで見つけられます。

アニメーション 

アニメーションは animation コンポーネントタイプを通じて再生されます。スキンアニメーションは retarget チェックボックスを使用してターゲットスキンの骨/ジョイントの1つにコンポーネントが添付されている場合にリターゲットされます。

ブレンディング、キーフレーム編集やキーフレームイベントはまだサポートされていません。

物理演算 

リジッドボディは physx コンポーネントタイプを通じて作成されます。シーンはエディタで Debug > Simulate Physics (Alt + S) を使用してシミュレーションできます。

ネットワーキング 

ピアツーピアネットワーキングは、コミュニティサポートによる Wonderland Engine PeerJS Networking で実現可能です。

WebRTC を使用しており、一定の規模までデフォルトの PeerJS サーバーインフラを利用できます。

また、コミュニティはマルチユーザー用に Colyseus を統合しています。

UI 

ユーザーインターフェースは cursor、cursor-target、「collider」コンポーネントを使用して手動でセットアップされます。

以下の HTML5 Canvas ベースの2D UIはコミュニティによって維持されています：Lazy Widgets project。

用語 

コード 

以下に、一般的なコードパターンと、それに対応する Wonderland Engine の例を示します。

カスタムビヘイビア 

Wonderland Engine では「Component」を使用します。「MonoBehaviour」の代わりに、Component クラスを拡張します：

 1using UnityEngine;
 2using System.Collections;
 3
 4public class MainPlayer : MonoBehaviour
 5{
 6  [field: SerializeField]
 7  public string myName;
 8
 9  string privateName;
10
11  void Start()
12  {
13    Debug.Log("My name is", this.myName, this.privateName);
14  }
15
16  void Update()
17  {
18    Debug.Log("Delta time:", Time.deltaTime);
19  }
20}

 1import {Component, Property} from '@wonderlandengine/api';
 2
 3export class MainPlayer extends Component {
 4  static TypeName = 'main-player';
 5
 6  /* Properties are exposed in the editor */
 7  static Properties = {
 8      myName: Property.string("Alice")
 9  };
10
11  privateName = "Bob";
12
13  start() {
14    console.log("My name is", myName, privateName);
15  }
16
17  update(dt) {
18    console.log("Delta time:", dt);
19  }
20}

 1import {Component} from '@wonderlandengine/api';
 2import {property} from '@wonderlandengine/api/decorators.js';
 3
 4export class MainPlayer extends Component {
 5  static TypeName = 'main-player';
 6
 7  /* Properties are exposed in the editor */
 8  @property.string("Alice")
 9  myName!: string;
10
11  privateName = "Bob";
12
13  start() {
14    console.log("My name is", myName, privateName);
15  }
16
17  update(dt: number) {
18    console.log("Delta time:", dt);
19  }
20}

Unity と同様に、いくつかの UI 要素はパラメータのために生成されます。

ゲームオブジェクトにあるコンポーネントを取得 

1gameObject.GetComponent<MyComponent>();

1// 推奨される方法、型が推論されるため
2this.object.getComponent(MyComponent);
3
4// または: 型名で指定
5this.object.getComponent('my-component');

オブジェクトにコンポーネントを追加 

1MyComponent sc = gameObject.AddComponent<MyComponent>();
2sc.property = "set";

1this.object.addComponent(MyComponent, {property: "set"});
2
3// または: 型名で指定
4this.object.addComponent('my-component', {property: 'set'});
5
6// または: アクティベーションを遅延
7const sc = this.object.addComponent('my-component', {active: false});
8sc.property = 'set';
9sc.active = true;

子オブジェクトを取得 

1
2gameObject.transform.GetChild(0);

1this.object.children[0];

親オブジェクトを取得 

1gameObject.transform.parent

1this.object.parent;

マテリアルプロパティを設定 

色やテクスチャなど様々なマテリアルプロパティを設定します。

1var mesh = gameObject.GetComponent<MeshRenderer>();
2mesh.material.SetColor("_Color", Color.green);

1const mesh = this.object.getComponent(MeshComponent);
2mesh.material.diffuseColor = [0.0, 1.0, 0.0, 1.0];

数学 

JavaScript は operator overloading をサポートしていないため、数学コードに対して別のアプローチをとります。

多くの場合、Wonderland Engine の Object3D API には変換を操作するための多くの関数があり、これらは WebAssembly で効率的に実装されています。

1/* オブジェクトを複数の軸上で移動します。ベクトルのために一時的なメンバーまたはモジュールスコープ内の定数を使用してください。 */
2this.object.translateWorld([1, 2, 3]);
3
4/* Y軸を中心にオブジェクトを回転します。 */
5const AxisY = [0, 1, 0];
6this.object.rotateAxisAngleDegLocal(AxisY, 25);

ガベージコレクション 

JavaScript はガベージコレクションを使用する言語であり、自動ガベージコレクションによる予期しない中断が発生する可能性があります。リストやベクトル、または簡単に収集されないオブジェクトをメモリに追加することは避けるのがベストプラクティスです。

カスタムコンポーネントのコンストラクタまたはボディ内で、一時的なベクトルやクォータニオンを作成し再利用するか、慎重に使用する場合は、コンポーネントのモジュールスコープ内に置くことをお勧めします（クラスの上）。 [0, 1, 0] のような定数ベクトルは、スコープ内に const AxisY = [0, 1, 0] として宣言するのが理想的です。

数学ライブラリ 

JavaScript/TypeScript 向けの性能とガベージコレクションに配慮した数学ライブラリ glMatrix の使用をお勧めします。このライブラリは、デフォルトテンプレートとデフォルトコンポーネントにすでにインストールされているため、自分でインストールする必要はありません。

glMatrix が計算するベクトルやクォータニオンは、新たに割り当てられたベクトルを返すのではなく、結果をどこに書き込むかを最初のパラメータとして指定します。プリミティブを返す関数は通常通り結果を返します。

glMatrix 数学ライブラリの完全なドキュメントはこちらを参照してください。

1var v = new Vector3(1, 2, 3);
2v.Set(3, 2, 1);

1const v = vec3.fromValues(1, 2, 3);
2vec3.set(v, 3, 2, 1);

1var a = new Vector3(1, 2, 3);
2var b = new Vector3(1, 2, 3);
3
4var v = a + b;
5var a = a * b;
6var a = 2.0*a;

1import {vec3} from 'gl-matrix';
2
3const a = vec3.fromValues(1, 2, 3);
4const b = vec3.fromValues(1, 2, 3);
5
6const v = vec3.add(vec3.create(), a, b);
7vec3.mul(a, a, b);
8vec3.scale(a, a, 2.0);

JavaScript と C# の比較 

C# から移行してくる際の顕著な違いは以下の通りです：

• メンバー変数にアクセスする際には常に this. をプレフィックスに追加します。
• var は「グローバル」を作成し、現在のスコープに制限されません。最善の方法は let または const を使用してスコープされた変数を作成することです。