jsge
Version:
Javascript Game Engine
90 lines (75 loc) • 5.17 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: Assets Manager</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: Assets Manager</h1>
<section>
<header>
<h2>Assets Manager</h2>
</header>
<article>
<p>The Assets Manager is an <a href="https://github.com/ALapinskas/assetsm">external module</a></p>
<p>It is used to load and hold game assets such as tilmaps(.tmg files), images and audio.<br>
To attach data use in the <a href="tutorial-stages_lifecycle.html">GameStage.register()</a>:</p>
<pre class="prettyprint source"><code>register() {
stage.iLoader.addAudio(key, url)
stage.iLoader.addImage(key, url)
stage.iLoader.addTileMap(key, url)
}
</code></pre>
<p>then call</p>
<pre class="prettyprint source"><code>app.preloadAllData()
</code></pre>
<p>after <a href="System.html#preloadAllData">preloadAllData()</a> promise is resolved,<br>
the data will be available during the <a href="tutorial-stages_lifecycle.html">GameStage.init() and GameStage.start() stages</a></p>
<pre class="prettyprint source"><code>start() {
const audio = stage.iLoader.getAudio(key)
const image = stage.iLoader.getImage(key)
const tilemap = stage.iLoader.getTileMap(key)
...
}
</code></pre>
<p><em>*be careful with loading tilemaps and attached tilesets and images, everything should be in the same folder or subfolder.</em></p>
<p>Alternatively, you can manage tileset loading separately by passing <code>false</code> as the third parameter to <code>addTileMap</code>, and then adding <code>addTileSet()</code> calls:</p>
<pre class="prettyprint source"><code> stage.iLoader.addTileMap(key, url, false);
stage.iLoader.addTileSet(key, url, gui1);
stage.iLoader.addTileSet(key, url, gui2);
</code></pre>
<p>*It is better to register added audio files in the AudioInterface. See <a href="tutorial-how_to_add_and_use_audio.html">How to add and use audio</a></p>
<h3>AtlasXML</h3>
<p>Starting from jsge@1.3.0, iLoader supports AtlasXML files:</p>
<pre class="prettyprint source"><code>register() {
stage.iLoader.addAtlasXML(key, url);
}
start() {
// part of xml: <SubTexture name="tankBody_blue.png" x="257" y="42" width="38" height="38"/>
stage.draw.image(100, 300, 38, 38, "tankBody_blue");
}
</code></pre>
</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>