Set Up
NextJS

Set Up

Setting up RGE.js using NextJS

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

File Structure

Recommended file structure:

    • layout.jsx
    • page.jsx
    • index.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/page.jsx
    "use client";
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.

    app/page.jsx
    "use client";
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

    ReactJSThe Engine Object