jsge

Version:

Javascript Game Engine

90 lines (76 loc) • 5.72 kB

HTML

<!DOCTYPE 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: How to Add Spine Animations</title> <script src="scripts/prettify/prettify.js"> </script> <script src="scripts/prettify/lang-css.js"> </script>  <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: How to Add Spine Animations</h1> <section> <header> <h2>How to Add Spine Animations</h2> </header> <article> <p>To use Spine animations, you will need to enable the Spine module.</p> <ol> <li><strong>Import the Spine module:</strong><pre class="prettyprint source"><code> import SpineModuleInitialization from "../node_modules/jsge/modules/spine/dist/bundle.js"; </code></pre> </li> <li><strong>Install the module</strong>, passing the module key, <code>spineModule</code>, and the spine assets folder:<pre class="prettyprint source"><code> this.spineModule = this.iSystem.installModule( "spineModule", SpineModuleInitialization, "./spine/spine-assets"); </code></pre> </li> <li><strong>After installing the module(step 2)</strong>, the <a href="tutorial-assets_manager.html">iLoader</a> will be expanded to include three new methods for loading Spine animation file:<pre class="prettyprint source"><code>register() { ... this.iLoader.addSpineJson("spine-text-key", "./spine-file.json"); this.iLoader.addSpineBinary("spine-binary-key", "./spine-file.skel"); this.iLoader.addSpineAtlas("spine-atlas", "./spine-file.atlas"); ... </code></pre> </li> <li><strong>The GameStage.draw will have two new methods:</strong> <code>stage.draw.spine(x,y, spine-text-key | spine-binary-key, spine-atlas)</code> and <code>stage.draw.texture(x, y, width, height, "texture-image-key")</code>:<pre class="prettyprint source"><code>init() { const spineDrawObject = this.draw.spine(0, 0, "spine-text-key", "spine-atlas"); ... </code></pre> </li> <li><strong>These objects should be added to the stage</strong> in the same way as other draw objects.<br> Spine specific methods will be available:<pre class="prettyprint source"><code>spineDrawObject.scale(0.5); spineDrawObject.animationState.setAnimation(0, "run", true); spineDrawObject.setSkin("goblin"); </code></pre> </li> <li><strong>After that, Spine objects will be rendered.</strong></li> </ol> <h2>Live example</h2> <p class="codepen" data-height="500" data-default-tab="js,result" data-slug-hash="MWLRBjp" 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/MWLRBjp"> JsGE - Spine animations</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>