Set Up

Setting up RGE.js using ReactJS

This page walks you through installing, configuring, and running your RGE.js environment using ReactJS.

File Structure

Recommended file structure:

App.js
index.js
index.css
App.css

package.json

package-lock.json

Install

Paste this into your terminal at your project's directory:

npm install rge.js@latest

We then import RGE.js like this:

import * as r from "rge.js";

Great! Now RGE.js has been installed via npm. Let's now take a look at instantiating RGE.js.

Instantiating RGE.js

In order to instantiate RGE.js, we first have to create a canvas element, and attach a ref to it.

src/App.js

import React, { useRef, useEffect } from 'react';
import * as r from "rge.js";
 
function App() {
  const canvasRef = useRef(null);
  return (
    <div className="App">
    <canvas
      ref={canvasRef}
      id="gameCanvas"
      // Set your desired canvas size
      width={800}
      height={600}
    />
    </div>
  );
}
 
export default App;

Now inside of a useEffect we will write our logic to instantiate RGE.js.

src/App.js

import React, { useRef, useEffect } from 'react';
import * as r from "rge.js";
 
function App() {
  const canvasRef = useRef(null);
  useEffect(() => {
    // Takes the canvas ID and expected FPS.
    const rge = new r.Engine('gameCanvas', 120);
 
    rge.start();
 
    return () => {
        // Safely dispose of RGE when component is unmounted.
        rge.stop()
    }
  }, [])
  return (
    <div className="App">
    <canvas
      ref={canvasRef}
      id="gameCanvas"
      // Set your desired canvas size
      width={800}
      height={600}
    />
    </div>
  );
}
 
export default App;

Great job! You have now installed and instantiated RGE.js.

Learn the basics of RGE.js

HTML/JS NextJS