Tutorial: Quick start

Quick start

Assume you want to render an image image

Prepare:

  1. jsge is nodejs application, first you will need to install nodejs and npm.
  2. Then create a folder which will contain game files, put there an image with name "images.jpg".
  3. 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. jsge is designed to work from browser so you will need a server to run it locally:
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 name:
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 ScreenPage:
import { ..., ScreenPage } from "/node_modules/jsge/src/index.js";

class CustomPage extends ScreenPage {
}
  1. Add image passing image key and path to CustomPage.loader.addImage() in the page register() stage:
class CustomPage extends ScreenPage {
    register() {
        this.loader.addImage("image_key", "/images.jpg");
    }
}
  1. Create CanvasView on CustomPage.init(), or CustomPage.start() stages:
class CustomPage extends ScreenPage {
    ...
    init() {
        this.createCanvasView("view_key");
        ...
  1. Attach data you added on step 5.to the view from step 6.:
        ...
        this.player = this.draw.image(100, 200, 16, 28, "image_key", 0);
        this.addRenderObject("view_key", this.player);
    }
}
  1. Register pages in the application:
app.registerPage("CustomPageKey", CustomPage);
  1. Run preloadAllData() to load all data you added on step 5:
app.preloadAllData().then(() => {
  1. After preloadAllData() resolves, start the page rendering with app.system.startScreenPage(pageKey):
app.preloadAllData().then(() => {
    app.system.startScreenPage("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