Rogue Engine - Component Basics - In Two Minutes

Components in Rogue Engine enable you to add code to objects in your scene.

The Rogue Engine framework is built on top of the Three.js library. Any object in a Rogue scene can have code attached to it to use the power of Three.js. These bits of code are called components.

Here is a very simple example of a Rogue Engine component.

You can use the default cube for this example.

First right click in the Assets panel and create a new component. Components can be javascript or typescript. We will use typescript. Give it a name and confirm.

That will create a blank component in the asset panel.

If you double click this icon it will open up in your default code editor. If you don't have one installed I would recommend downloading Visual Studio Code from Microsoft.

The blank component already has somethings set up. All components import the Rogue Engine

The component already has its class Export set up and three methods, awake, start and update. For this example we just need the update method.

We are going to rotate the cube in the scene so in the update method that runs each time the screen updates, we can write this.object3d.rotateY and then give it an angle.

This is fine but we don't know how fast the scene is updating so if we want to keep the rotation consistent whatever speed the scene is running, we can ask Rogue how long since the last update and use that value.

We get this delta value by reading RE.Runtime.deltaTime.

So that's our code - save it and go back to the Rogue Editor.

If we run our scene without the component attached to the cube, nothing happens. But if we add the component to the cube by dragging and dropping it and then run the scene, you will see that the cube rotates smoothly.

So that's how you add a basic component to an object in Rogue Engine.