jsge
Version:
Javascript Game Engine
132 lines (117 loc) • 7.77 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="expires" content="Wen, 05 Jun 2024 07:01:00 GMT">
<title>JSDoc: Tutorial: Quick Start</title>
<script src="scripts/prettify/prettify.js"> </script>
<script src="scripts/prettify/lang-css.js"> </script>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
<link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
</head>
<body>
<div id="main">
<h1 class="stage-title">Tutorial: Quick Start</h1>
<section>
<header>
<h2>Quick Start</h2>
</header>
<article>
<p>Assume you want to render an image <img src="images.jpg" alt="image"></p>
<h2>Prepare:</h2>
<ol>
<li><strong>Set up a web server:</strong> jsge is a library for a web application, so you will need a web server.<br>
In this tutorial, we will use a Node.js web server. First, install Node.js and npm.</li>
<li><strong>Create a folder</strong> to contain your game files and place an image named "images.jpg" in it.</li>
<li><strong>Create a <code>package.json</code> file</strong> to store information about the game and its main dependencies. You can do this from the command line (terminal) with<pre class="prettyprint source"><code>npm init
</code></pre>
</li>
<li><strong>Install jsge</strong>:<pre class="prettyprint source"><code>npm i jsge
</code></pre>
</li>
<li><strong>Install a webserver</strong>:<pre class="prettyprint source"><code>npm i http-server
</code></pre>
</li>
<li><strong>Add a command to run the server in the <code>package.json</code>:</strong><pre class="prettyprint source"><code>"scripts": {
"start": "http-server -c-1 -p 9000 -o /"
},
</code></pre>
</li>
<li><strong>Start the server</strong> from the command line (terminal):<pre class="prettyprint source"><code>npm start
</code></pre>
</li>
<li><strong>Check <code>http://127.0.0.1:9000</code></strong> in the browser, it will show your folder structure.</li>
</ol>
<h2>App logic:</h2>
<ol>
<li><strong>Create index.html file</strong>:<pre class="prettyprint source"><code><!DOCTYPE html>
<head>
<script type="module" src="./index.js"></script>
</head>
<body>
<div id="game_map"></div>
</body>
</code></pre>
</li>
<li><strong>Create index.js file</strong>, which will store app logic. Inside index.js create a <a href="System.html">System</a> instance, passing game options or a <a href="SystemSettings.html">SystemSettings</a> object and game canvas container:<pre class="prettyprint source"><code>import { System, SystemSettings } from "jsge";
const app = new System(SystemSettings, document.getElementById("game_map"));
</code></pre>
</li>
<li><strong>Create you game pages</strong> using classes extended from <a href="GameStage.html">GameStage</a>:<pre class="prettyprint source"><code>import { ..., GameStage } from "jsge";
class CustomPage extends GameStage {
}
</code></pre>
</li>
<li><strong>Add the image</strong> passing image key and path to <a href="tutorial-assets_manager.html">CustomPage.iLoader</a>.addImage() in the <a href="tutorial-stages_lifecycle.html">GameStage.register()</a>:<pre class="prettyprint source"><code>class CustomPage extends GameStage {
register() {
this.iLoader.addImage("image_key", "/images.jpg");
}
}
</code></pre>
</li>
<li><strong>Create an DrawImageObject and add it to the stage</strong>, use image key added on step 4:<pre class="prettyprint source"><code> ...
this.player = this.draw.image(100, 200, 16, 28, "image_key", 0);
}
}
</code></pre>
</li>
<li><strong>Register pages in the application:</strong><pre class="prettyprint source"><code>app.registerStage("CustomPageKey", CustomPage);
</code></pre>
</li>
<li><strong>Run <a href="System.html#preloadAllData">preloadAllData()</a></strong> to load all data you added on step 4:<pre class="prettyprint source"><code>app.preloadAllData().then(() => {
</code></pre>
</li>
<li><strong>After <code>preloadAllData()</code> resolves, start the stage rendering</strong> with app.iSystem.startGameStage(pageKey):<pre class="prettyprint source"><code>app.preloadAllData().then(() => {
app.iSystem.startGameStage("CustomPageKey");
});
</code></pre>
</li>
<li><strong>Now visit <code>http://127.0.0.1:9000</code></strong> Your image now will be rendered!</li>
<li><strong>Use <code>document.addEventListener</code></strong> to attach mouse or keyboard controllers and<br>
move attached object on the screen changing <code>x</code>, <code>y</code>, or <code>rotation</code> properties</li>
</ol>
<h2>Live example:</h2>
<p class="codepen" data-height="500" data-default-tab="js,result" data-slug-hash="mdvgQyv" data-user="yaalfred" style="height: 500px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
<span>See the Pen <a href="https://codepen.io/yaalfred/pen/mdvgQyv">
JsGE basic example</a> by Arturas-Alfredas Lapinskas (<a href="https://codepen.io/yaalfred">@yaalfred</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
</article>
</section>
</div>
<nav>
<div class="switcher"><ul><li class="active"><a href="/">1.5.9</a></li></div>
<h2><a href="/">Home</a></h2><h3>Classes</h3><ul><li><a href="DrawCircleObject.html">DrawCircleObject</a></li><li><a href="DrawConusObject.html">DrawConusObject</a></li><li><a href="DrawImageObject.html">DrawImageObject</a></li><li><a href="DrawLineObject.html">DrawLineObject</a></li><li><a href="DrawObjectFactory.html">DrawObjectFactory</a></li><li><a href="DrawPolygonObject.html">DrawPolygonObject</a></li><li><a href="DrawRectObject.html">DrawRectObject</a></li><li><a href="DrawShapeObject.html">DrawShapeObject</a></li><li><a href="DrawTextObject.html">DrawTextObject</a></li><li><a href="DrawTiledLayer.html">DrawTiledLayer</a></li><li><a href="GameStage.html">GameStage</a></li><li><a href="GameStageData.html">GameStageData</a></li><li><a href="IExtension.html">IExtension</a></li><li><a href="INetwork.html">INetwork</a></li><li><a href="IRender.html">IRender</a></li><li><a href="ISystem.html">ISystem</a></li><li><a href="ISystemAudio.html">ISystemAudio</a></li><li><a href="RenderLoop.html">RenderLoop</a></li><li><a href="RenderLoopDebug.html">RenderLoopDebug</a></li><li><a href="System.html">System</a></li><li><a href="SystemSettings.html">SystemSettings</a></li></ul><h3>Tutorials</h3><ul><li><a href="tutorial-application_scheme.html">Application Scheme</a></li><li><a href="tutorial-assets_manager.html">Assets Manager</a></li><li><a href="tutorial-common_issues.html">Common Issues</a></li><li><a href="tutorial-how_to_add_and_use_audio.html">How to add and use audio</a></li><li><a href="tutorial-how_to_do_animations.html">How to Create Animations</a></li><li><a href="tutorial-how_to_load_and_use_tilemaps.html">How to Load and Use Tilemaps</a></li><li><a href="tutorial-quick_start.html">Quick Start</a></li><li><a href="tutorial-spine_animations.html">How to Add Spine Animations</a></li><li><a href="tutorial-stages_lifecycle.html">Stages Lifecycle</a></li></ul>
</nav>
<br class="clear">
<footer>
Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.4</a> on Wed Jun 18 2025 06:53:54 GMT+0000 (Coordinated Universal Time)
</footer>
<script> prettyPrint(); </script>
<script src="scripts/linenumber.js"> </script>
</body>
</html>