Environment – OO.ONCYBER

2. Building and Scripting Your Game in Oncyber Studio

Oncyber Studio (opens in a new tab) simplifies the game development process by focusing on two primary aspects: adding components to your scene and scripting the game logic.

To create your game, you'll typically add various types of components to the game scene. Then add one or more scripts to define the game logic. Inside the script code, you can access the instances of scene components and modify their apparences or behavior using the specific instance API (like playing an animation on a 3D model ...).

Adding Components to the Scene

Creating a game in Oncyber Studio starts with the scene – a virtual 3D world where your game takes shape. In this environment, you can add various components like characters, items, and landscapes. These components are the fundamental elements that make up your game world.

Components can be of various types: 3D models, VRM Avatars, Terrains, Images, Audio Assets, Text ... In fact anything that adds content to the game space is defined via a component (lights, background ...).

Scripting Game Logic

Once your scene is set, the next step is to breathe life into it through scripting. Scripting in Oncyber Studio is how you define the behavior and rules of your game. You can add one or more scripts to your scene, each responsible for different aspects of the game's logic. Whether it's character movement, environmental interactions, or complex game mechanics, scripting is where your game's narrative and mechanics come together.

The Code Editing Interface

The code editor in Oncyber Studio is a robust tool designed to streamline your development workflow. It features capabilities like IntelliSense, which offers code completions based on variable types, function definitions, and imported modules. This feature is incredibly helpful in reducing errors and speeding up the coding process.

Importing and Utilizing Libraries

The scripting environment allows you to import code from other scripts. You can also use some built-in libraries such as Three.js for 3D rendering or Rapier for physics simulations. This integration allows for creating more complex and visually appealing games by leveraging well-established libraries.

The bulk of the oncyber scripting api is exposed via the @oo/scripting. This package exposes some important global objects that give access to the current game world and its content. For example:

import {  World, Components } from "@oo/scripting"

Additionally, the Editor provides access to other useful libraries for various tasks (3D, Physics, UI ...).

Threejs (opens in a new tab) (3D Graphics)

The oncyber game engine is built on top the Three.js (opens in a new tab) library. Three.js is a battle-tested JavaScript library used to create and display 3D graphics in a web browser.

You can access to the three.js library directly from you script by importing from the three package. For example:

import { Vector3 } from "three"

Rapier (opens in a new tab) (Physics)

The oncyber game engine handle the game physics via the Rapier (opens in a new tab) library. Rapier is a physics engine written using the Rust programming language, offering efficient simulation of rigid body dynamics. It is optimized for performance, supporting a range of collision shapes and constraints.

The game engine use the webassembly version of Rapier.

You can access to Rapier from you script by importing from the "@dimforge/rapier3d" package. For example:

import * as RAPIER from "@dimforge/rapier3d"

React (opens in a new tab) (UI)

To add UI elements to your game, you can use React (opens in a new tab) library. React is an open-source JavaScript library for building user interfaces, particularly web applications with dynamic, interactive elements. It emphasizes a component-based architecture, allowing developers to create reusable UI components.

To use React from your scripts, you can import from the "react" package, for example:

import * as React from "react"

The code editor supports JSX syntax, So you can create your components the same way you do in a typical react application

function GameTimer({ remainingSeconds }) {
 
    return <div>{remainingSeconds}s</div>
}

As an example on how to render the component, you can use the same code as in Getting started course

export default class MyGame {
 
    //...
    elapsedSeconds = 0
 
    maxGameSeconds = 60
 
    // ...
 
    onUpdate(dt) {
 
        this.elapsedSeconds += dt
 
        const remainingSeconds = this.maxGameSeconds - this.elapsedSeconds
 
        Display.root.render(
            <GameTimer remainingSeconds={remainingSeconds} />
        )
    }
}

gsap (opens in a new tab) (Animation)

We also provide access to gsap (opens in a new tab). gsap is a robust JavaScript library that can be used to animate pretty much anything (3D, UI ...).

You can import it from the "gsap" package, for example:

import gsap from "gsap"

Introduction Scripting Lifecycle