Wonderland Engine for Unity Developers

This page provides mappings from Unity to Wonderland Engine for scripting and provides a list of differences for building solutions.

Scripting 

Beware that Wonderland Engine currently does not automatically track all scripts in the Asset Browser. You have to specify them manually in “Views > Project Settings”.

TypeScript 

TypeScript adds static type checking to JavaScript which brings it closer to C#.

Packaging 

While a Unity workflow will often preview the game in the editor, in Wonderland Engine the final packaging process is fast enough (less than 1 second) that the final app in the browser can be used to preview.

Multiple Scenes 

Wonderland Engine allows switching between multiple scenes created in multiple project files (.wlp). Check the Switching Scenes Tutorial for instructions.

Prefabs 

Wonderland Engine does not have an equivalent to prefabs yet.

Code 

Below is a list of common code patterns and their Wonderland Engine equivalents:

Importing Assets 

In Wonderland Engine, if a scene file is imported (by drag and drop from the asset browser either into the Scene View or Scene Outline, or by dragging image files into a material’s texture slot), it is linked and watched for changes. The resulting resources that were found in the scene file will be made available in the project and can be viewed in the “Resources” view.

Until a file is imported from the Asset Browser, it is unavailble for use in the project. The “Asset Browser” could be considered a file browser which is different from what you might be used to in Unity.

Optimizing Assets 

Once imported assets can be further optimized:

• Meshes can be auto-decimated to reduce the vertex count
• Meshes can be scaled uniformly
• Images are automatically compressed
• Images can be downscaled

These settings are found in the “Resources” view.

Directories 

• deploy contains the final result of packaging
• static contains files which are copied to deploy as-is
• cache contains cached asset compilation results, e.g. compressed images. Can usually be safely deleted, but will take time to regenerate.

These settings are found in the “Resources” view.

Animations 

Animations are played via the animation component type. Skinned animations are retargeted with the retarget checkbox, if the component is attached to one of the bones/joints of the target skin.

Blending, editing keyframes or keyframe events are not supported yet.

Physics 

Rigid bodies are created via the physx component type. The scene can be simulated in the editor with Debug > Simulate Physics (Alt + S).

Networking 

Peer-to-Peer networking can be achieved with the community supported wle-networking project.

It uses WebRTC, which to a certain scale can make use of default PeerJS server infrastructure.

UI 

User interface is either set up manually with the cursor and cursor-target components, and the collider component type or using a HTML5 Canvas based 2D UI with the community supported wl-canvas-ui project.

Terminology 

Custom Behaviour 

In Wonderland Engine “MonoBehaviour” is called a “Component”. In Wonderland Engine, they need to be registered by calling WL.registerComponent():

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

using UnityEngine;
using System.Collections;

public class MainPlayer : MonoBehaviour
{
  [field: SerializeField]
  public string myName;

  string privateName;

  void Start()
  {
    Debug.Log("My name is", this.myName, this.privateName);
  }

  void Update()
  {
    Debug.Log("Delta time:", Time.deltaTime);
  }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

import {Component, Property} from '@wonderlandengine/api';

export class MainPlayer extends Component {
  static TypeName = 'main-player';

  /* Properties are exposed in the editor */
  static Properties = {
      myName: Property.string("Alice")
  };

  privateName = "Bob";

  start() {
    console.log("My name is", myName, privateName);
  }

  update(dt) {
    console.log("Delta time:", dt);
  }
}

As in Unity, some UI elements will be generated for the parameters.

Get parent object 

Get component on game object 

1

gameObject.GetComponent<MyComponent>();

1
2
3
4

this.object.getComponent(MyComponent);

// or: by type name
this.object.getComponent('my-component');

Attach a component to an object 

1
2

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

1
2
3
4
5
6
7
8
9

this.object.addComponent(MyComponent, {property: "set"});

// or: by type name
this.object.addComponent('my-component', {property: 'set'});

// or: defer activation
const sc = this.object.addComponent('my-component', {active: false});
sc.property = 'set';
sc.active = true;

Get a child object 

1
2

gameObject.transform.GetChild(0);

1

this.object.children[0];

Get parent object 

1

gameObject.transform.parent

1

this.object.parent;

Set a Material Property 

Set various material properties like color or textures.

1
2

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

1
2

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

Math 

JavaScript does not support operator overloading, which means that we need to take a different approach to math code.

Additionally, JavaScript is a garbage collected language and to avoid frequent interruptions due to automatic garbage collection, it is best practice to avoid adding memory onto the heap in form of lists/vectors or objects, which aren’t trivially collected.

It is best practice to create temporary vectors/quaternions in init() of a custom component and be reused.

Find the full documentation of the glMatrix JavaScript math library here.

1
2

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

1
2

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

1
2
3
4
5
6

var a = new Vector3(1, 2, 3);
var b = new Vector3(1, 2, 3);

var v = a + b;
var a = a * b;
var a = 2.0*a;

1
2
3
4
5
6
7
8

import {vec3} from 'gl-matrix';

const a = vec3.fromValues(1, 2, 3);
const b = vec3.fromValues(1, 2, 3);

const v = vec3.add(vec3.create(), a, b);
vec3.mul(a, a, b);
vec3.scale(a, a, 2.0);

JavaScript 

Some more prominent differences when coming from C# include:

• Always prefix this. to access member variables.
• var creates a “global”, which is not restricted to the current scope. It is best practice to avoid it and use let or const instead, which create scoped variables.