Getting Started

Requirements

Unity.Mathematics
Unity Version 2021.3+ (for stable UI Toolkit)
Unity Version 2022.1+ (if you need to use UI Toolkit's Vector API)

Live Reload requires Run in Background to be turned ON in Player settings (under Resolution and Presentation). Depending on your Unity version or platform, this may or may not be ON by default. So it never hurts to double-check.

Installation

You can use any one of the following three methods.

Download and import from Asset Store.
Get private repo access (/collab cmd in Discord), and clone the repo directly into your Unity project's Assets folder.
Clone the repo anywhere on your machine, and use Install package from disk from Package Manager.

Quick Start

Drag and drop the ScriptEngine prefab onto a new scene.
Enter Play mode.

If you see [index.tsx]: OneJS is good to go in the console, then OneJS is all set. The first time ScriptEngine runs, it'll setup the working directory with some default files. Feel free to read and tweak the various setting files (tsconfig.json, esbuild.mjs, postcss.config.js etc) as you see fit.

OneJS uses {ProjectDir}/App as its working directory (NOTE: {ProjectDir} is not your Assets folder; it is one level above the Assets folder). So, you can safely check the App folder into Version Control. When building for standalone, the scripts from {ProjectDir}/App will be automatically bundled up and be extracted to {persistentDataPath}/App at runtime. Refer to the Deployment page for more details on that. (The name "App" is also configurable on the ScriptEngine component.)

Make sure you have Typescript installed on your system (i.e. via npm install -g typescript)

Open {ProjectDir}/App with VSCode.
Run npm run setup in VSCode's terminal.
Use Ctrl + Shift + B or Cmd + Shift + B to start up all 3 watch tasks: esbuild, tailwind, and tsc.
In VSCode, save the following into the index.tsx file.

TSX

import { parseColor } from "onejs/utils"
import { Camera, Collider, CollisionDetectionMode, Color, GameObject, MeshRenderer, PhysicMaterial, Physics, PrimitiveType, Rigidbody, Vector3 } from "UnityEngine"

// Make a plane
const plane = GameObject.CreatePrimitive(PrimitiveType.Plane)
plane.GetComp(MeshRenderer).material.color = Color.yellow

// Make a sphere
const sphere = GameObject.CreatePrimitive(PrimitiveType.Sphere)
sphere.GetComp(MeshRenderer).material.color = parseColor("FireBrick")
sphere.transform.position = new Vector3(0, 5, 0)

// Adjust camera
Camera.main.transform.position = new Vector3(9, 4, -8)
Camera.main.transform.LookAt(new Vector3(0, 1, 0))

// Add rigidbody and physics material to make a bouncing ball
Physics.gravity = new Vector3(0, -20, 0) // -9.8 is too "floaty", -20 makes things slightly more realistic
let rb = sphere.AddComp(Rigidbody)
rb.collisionDetectionMode = CollisionDetectionMode.Continuous
let pm = new PhysicMaterial() // use "PhysicsMaterial" in Unity 6+ (note the extra s)
pm.bounciness = 0.8
plane.GetComp(Collider).material = pm
sphere.GetComp(Collider).material = pm

With Unity still in Playmode, you'll see a bouncing sphere. As you can see, the code is very similar to what you'd normally write in C#. Thanks to Typescript, we get all the benefits of auto-completions, auto-imports, type-checking, etc. Feel free to play around with the code and see how OneJS live-reloads your changes in Unity.

NOTE: All .NET/C# namespaces and classes are accessible through the CS. global namespace in JavaScript. This approach can sometimes be more convenient than using import statements. For example:

TSX

import { GameObject } from "UnityEngine";

const go = new GameObject("My Obj");

can also be written as:

TSX

const go = new CS.UnityEngine.GameObject("My Obj");

Move on to Ult Meter for a tutorial on interop between C# and JS.

Tutorials