JSDoc: Tutorial: Quick Start

Assume you want to render an image

Prepare:

Set up a web server: jsge is a library for a web application, so you will need a web server.
In this tutorial, we will use a Node.js web server. First, install Node.js and npm.
Create a folder to contain your game files and place an image named "images.jpg" in it.
Create a package.json file to store information about the game and its main dependencies. You can do this from the command line (terminal) with
```
npm init
```
Install jsge:
```
npm i jsge
```
Install a webserver:
```
npm i http-server
```

Add a command to run the server in the package.json:

"scripts": {
    "start": "http-server -c-1 -p 9000 -o /"
},

Start the server from the command line (terminal):
```
npm start
```
Check http://127.0.0.1:9000 in the browser, it will show your folder structure.

Create index.html file:

<!DOCTYPE html>
<head>
    <script type="module" src="./index.js"></script>
</head>
<body>
    <div id="game_map"></div>
</body>

Create index.js file, which will store app logic. Inside index.js create a System instance, passing game options or a SystemSettings object and game canvas container:
```
import { System, SystemSettings } from "jsge";
const app = new System(SystemSettings, document.getElementById("game_map"));
```

Create you game pages using classes extended from GameStage:

import { ..., GameStage } from "jsge";

class CustomPage extends GameStage {
}

Add the image passing image key and path to CustomPage.iLoader.addImage() in the GameStage.register():

class CustomPage extends GameStage {
    register() {
        this.iLoader.addImage("image_key", "/images.jpg");
    }
}

Create an DrawImageObject and add it to the stage, use image key added on step 4:

        ...
        this.player = this.draw.image(100, 200, 16, 28, "image_key", 0);
    }
}

Register pages in the application:

app.registerStage("CustomPageKey", CustomPage);

Run preloadAllData() to load all data you added on step 4:
```
app.preloadAllData().then(() => {
```
After preloadAllData() resolves, start the stage rendering with app.iSystem.startGameStage(pageKey):
```
app.preloadAllData().then(() => {
    app.iSystem.startGameStage("CustomPageKey");
});
```
Now visit http://127.0.0.1:9000 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

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