Skip to content

Getting Started

Jump to bottom
Malik Whitten edited this page Sep 22, 2023 · 5 revisions

1. Including Redux

Ensure the script is placed in the body below the container so that redux can bind to it.

<body>
<div id="any id for your game window"></div>
<script src="./path/to/Redux.js" type="module"></script>
</body>

2. WorkSpace Structure

  • This is an example project folder for working with redux
├── /src
│   ├── Redux.js
│   └── init.js
|   └── scenes
|       └── startmenu.js
|   └── views
|     └── start.html
|      └── button.html
├── /
└── index.html

3. Creating our first scene

Redux uses scenes to manage game state - scenes also handle our input and help keep code clean!

//startmenu.js

import { Scene, UI } from '../src/Redux.js'

export class StartMenu extends Scene{
   constructor(engine){
     super(engine)
     this.button = new UI(x, y, width, height, content = HTMLELEMENT || ` String`, "Identifier")
     this.button.require('../views/button.html')
   }

  startLogic() {
       // this is fired when the scene is started
  }

  updateCallback(entities) {
      console.log(entities);
   }

   uiLogic() {
       // since we imported a button we can specify the elements id from the file
       this.button.on('btn', 'click', (e)=>{
        // You can call anything from here - or change scenes
      })
   }

   inputHandler() {
    // apply  input logic here
   }
}

Now we can add our scene to the engine to call engine.startScene('name') in which switches the scene

//init.js

import { StartMenu } from './scenes/startmenu.js'
import { ReduxEngine, Camera, Rfx,   Entity, UI } from './Redux.js'

const engine = new ReduxEngine('your container id', width, height, 60 //fps count )

let Start = new StartMenu(engine)

engine.addScene('start', start)

engine.startScene('start')
Clone this wiki locally