The Engine Object

This is a brief overview of only the most used and vital parts of the Engine object. For a more in-depth overview, look here.

⚠️

This tutorial assumes that you have a basic understanding of object oriented programming.

Creating the Engine object

The Engine object is one of the most important objects, and provides an interface to perform nearly all of your project's logic related actions. Instantiating the engine is rather simple.

// First parameter is ID of the canvas
// Second parameter is target FPS
const rge = new r.Engine('gameCanvas', 60)

Basic Utilities

The Engine object provides a vast amount of utilities which you can use in order to make your project function. Let's take a look at some of the most used ones.

`start()`

Code Snippet

// Goes at EOF
rge.start()

Use Case

start() initiates the rendering of entities, as well as attaching event detectors (such as onClick, onKeyPress, collision, etc) to the rendered entities.

⚠️

Component unmounting and remounting in React can cause hydration errors if not handled correctly.

`stop()`

Code Snippet

rge.stop()

Using with React/NextJS to handle hydration errors caused by the component dismounting:

useEffect(() => {
    const rge = new r.Engine('gameCanvas', 60);
    rge.start();
 
    return () => {
        rge.stop();
    }
}, []);

Use Case

stop() deletes all entities and event detectors from the canvas, and detaches itself. It can be used for a variety of reasons. The two main reasons are:

If you want to detach one Engine instance from the canvas, and attach a different one
You are handling component lifecycles (with react) to make sure that hydration errors do not occur.

💡

stop() can be used in the return statement of useEffect to prevent hydration errors!

`addEntity()`

Code Snippet

rge.addEntity(entity)

Use Case

Registers an entity to an array. When start() is called, it cycles through each entity every refresh, and paints them to the canvas.

ℹ

You can read more about entites here

`destroyEntity()`

Code Snippet

rge.destroyEntity(entity)

Use Case

Deletes the entity from the entity array, so it is no longer rendered. Also set's a value inside the entity to destroyed so it no longer looks for collisions.

`configure()`

Code Snippet

function preload() {
 
}
 
function tick() {
 
}
 
rge.configure({
  tick: tick,
  preload: preload,
  centeredOrigin: true | false
})

Use Case

configure() is used to set a function to be the preload and tick functions.

More Utilities

The utilities mentioned above are only the few most commonly used ones. There are a huge plethora of utilities provided by the RGE.js engine. You can read more about them here

NextJS Entities