Unity 開発者向け Wonderland Engine

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

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

YouTube Video

スクリプティング 

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。

用語 

用語UnityWonderland Engine
プロジェクトプロジェクトファイル。複数のプロジェクトファイルが単一のプロジェクトルートディレクトリを共有する可能性があります。
インスペクタービュープロパティビュー

コード 

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

カスタムビヘイビア 

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

UnityWonderland Engine (JavaScript)Wonderland Engine (TypeScript)
 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 要素はパラメータのために生成されます。

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

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

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

UnityWonderland Engine
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;

子オブジェクトを取得 

UnityWonderland Engine
1
2gameObject.transform.GetChild(0);
1this.object.children[0];

親オブジェクトを取得 

UnityWonderland Engine
1gameObject.transform.parent
1this.object.parent;

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

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

UnityWonderland Engine
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 数学ライブラリの完全なドキュメントはこちらを参照してください。

UnityWonderland Engine
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 を使用してスコープされた変数を作成することです。