Tutorial: Quick start

Quick start

Assume you want to render an image image

Prepare:

  1. jsge is a web application. To run it, you will need a webserver.
  2. In this tutorial we will use nodejs webserver. So first you will need to install nodejs and npm.
  3. Then create a folder which will contain game files, put there an image with name "images.jpg".
  4. Create a package.json file which will store information about the game and its main dependencies. It can be done with from command line(terminal):
npm init
  1. After that install jsge:
npm i jsge
  1. install a webserver:
npm i http-server
  1. Put a command to run that server in the package.json:
"scripts": {
    "start": "http-server -c-1 -p 9000 -o /"
},
  1. Now you can start the server from command line(terminal):
npm start
  1. Check http://127.0.0.1:9000 in the browser, it will show your folder structure.

App logic:

  1. By default server runs index.html file, so lets create it:
<!DOCTYPE html>
<head>
    <script type="module" src="./index.js"></script>
</head>
<body>
    <div id="game_map"></div>
</body>
  1. Then create index.js file, which will store app logic.
  2. Inside index.js create a System instance, passing game options, or a SystemSettings object and game canvas container:
import { System, SystemSettings } from "/node_modules/jsge/src/index.js";
const app = new System(SystemSettings, document.getElementById("game_map"));
  1. Create you game pages using classes extended from GameStage:
import { ..., GameStage } from "/node_modules/jsge/src/index.js";

class CustomPage extends GameStage {
}
  1. Add image passing image key and path to CustomPage.iLoader.addImage() in the stage register() stage:
class CustomPage extends GameStage {
    register() {
        this.iLoader.addImage("image_key", "/images.jpg");
    }
}
  1. Create an DrawImageObject and add it to the stage, use image key, added on step 5:
        ...
        this.player = this.draw.image(100, 200, 16, 28, "image_key", 0);
    }
}
  1. Register pages in the application:
app.registerStage("CustomPageKey", CustomPage);
  1. Run preloadAllData() to load all data you added on step 5:
app.preloadAllData().then(() => {
  1. After preloadAllData() resolves, start the stage rendering with app.iSystem.startGameStage(pageKey):
app.preloadAllData().then(() => {
    app.iSystem.startGameStage("CustomPageKey");
});
  1. Now visit http://127.0.0.1:9000
  2. Your image now will be rendered!
    Use document.addEventListener to attach mouse or keyboard controllers and
    move attached object on the screen changing x, y, or rotation properties

Live example:

See the Pen JsGE basic example by Arturas-Alfredas Lapinskas (@yaalfred) on CodePen.