seed-engine

Version:

A Lightweight 2D game engine using WebGL2. The engine is designed on the focus of creating a bridge between creating and publishing games to the Seed Network as modules.

github.com/JaegarSarauer/SeedGameEngine

JaegarSarauer/SeedGameEngine

284 lines (264 loc) • 23.7 kB

HTML

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <base data-ice="baseUrl" href="../../../"> <title data-ice="title">src/component/Animation.js | seed-engine</title> <link type="text/css" rel="stylesheet" href="css/style.css"> <link type="text/css" rel="stylesheet" href="css/prettify-tomorrow.css"> <script src="script/prettify/prettify.js"></script> <script src="script/manual.js"></script> <meta name="description" content="A Lightweight 2D game engine using WebGL2. The engine is designed on the focus of creating a bridge between creating and publishing games to the Seed Network as modules."><meta property="twitter:card" content="summary"><meta property="twitter:title" content="seed-engine"><meta property="twitter:description" content="A Lightweight 2D game engine using WebGL2. The engine is designed on the focus of creating a bridge between creating and publishing games to the Seed Network as modules."></head> <body class="layout-container" data-ice="rootContainer"> <header> <a href="./">Home</a> <a href="identifiers.html">Reference</a> <a href="source.html">Source</a> <a href="test.html" data-ice="testLink">Test</a> <div class="search-box"> <img src="./image/search.png"> <input class="search-input"> <ul class="search-result"></ul> </div> <a style="position:relative; top:3px;" href="https://github.com/JaegarSarauer/SeedGameEngine"><img width="20px" src="./image/github.png"></a></header> <nav class="navigation" data-ice="nav"><div> <ul> <li data-ice="doc">C<a href="class/src/Engine.js~_Engine.html">_Engine</a></li> <li data-ice="doc">V<a href="variable/index.html#static-variable-Engine">Engine</a></li> <li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#base">base</a>C<a href="class/src/base/Updateable.js~Updateable.html">Updateable</a></li> <li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#component">component</a>C<a href="class/src/component/Animation.js~Animation.html">Animation</a></li> <li data-ice="doc">C<a href="class/src/component/Audio.js~Audio.html">Audio</a></li> <li data-ice="doc">C<a href="class/src/component/BoxCollider.js~BoxCollider.html">BoxCollider</a></li> <li data-ice="doc">C<a href="class/src/component/CircleCollider.js~CircleCollider.html">CircleCollider</a></li> <li data-ice="doc">C<a href="class/src/component/ClickController.js~ClickController.html">ClickController</a></li> <li data-ice="doc">C<a href="class/src/component/Collider.js~Collider.html">Collider</a></li> <li data-ice="doc">C<a href="class/src/component/Collider2D.js~Collider2D.html">Collider2D</a></li> <li data-ice="doc">C<a href="class/src/component/Component.js~Component.html">Component</a></li> <li data-ice="doc">C<a href="class/src/component/Controller.js~Controller.html">Controller</a></li> <li data-ice="doc">C<a href="class/src/component/Physics.js~Physics.html">Physics</a></li> <li data-ice="doc">C<a href="class/src/component/Physics2D.js~Physics2D.html">Physics2D</a></li> <li data-ice="doc">C<a href="class/src/component/Renderable.js~Renderable.html">Renderable</a></li> <li data-ice="doc">C<a href="class/src/component/Renderable2D.js~Renderable2D.html">Renderable2D</a></li> <li data-ice="doc">C<a href="class/src/component/Renderable2DGrid.js~Renderable2DGrid.html">Renderable2DGrid</a></li> <li data-ice="doc">C<a href="class/src/component/Renderable2DMultitex.js~Renderable2DMultitex.html">Renderable2DMultitex</a></li> <li data-ice="doc">C<a href="class/src/component/RenderableSquare.js~RenderableSquare.html">RenderableSquare</a></li> <li data-ice="doc">C<a href="class/src/component/RenderableText.js~RenderableText.html">RenderableText</a></li> <li data-ice="doc">C<a href="class/src/component/TopDownController.js~TopDownController.html">TopDownController</a></li> <li data-ice="doc">C<a href="class/src/component/Transform.js~Transform.html">Transform</a></li> <li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#const">const</a>V<a href="variable/index.html#static-variable-DEFAULT_F">DEFAULT_F</a></li> <li data-ice="doc">V<a href="variable/index.html#static-variable-TILEMAP_F">TILEMAP_F</a></li> <li data-ice="doc">V<a href="variable/index.html#static-variable-KeyCode">KeyCode</a></li> <li data-ice="doc">V<a href="variable/index.html#static-variable-DEFAULT_V">DEFAULT_V</a></li> <li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#internal">internal</a>C<a href="class/src/internal/Bounds.js~Bounds.html">Bounds</a></li> <li data-ice="doc">C<a href="class/src/internal/Color.js~Color.html">Color</a></li> <li data-ice="doc">C<a href="class/src/internal/Point.js~Point.html">Point</a></li> <li data-ice="doc">C<a href="class/src/internal/PostBoard.js~PostBoard.html">PostBoard</a></li> <li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#manager">manager</a>C<a href="class/src/manager/AudioManager.js~_AudioManager.html">_AudioManager</a></li> <li data-ice="doc">C<a href="class/src/manager/DOMManager.js~_DOMManager.html">_DOMManager</a></li> <li data-ice="doc">C<a href="class/src/manager/EngineManager.js~_EngineManager.html">_EngineManager</a></li> <li data-ice="doc">C<a href="class/src/manager/InputManager.js~_InputManager.html">_InputManager</a></li> <li data-ice="doc">C<a href="class/src/manager/Manager.js~Manager.html">Manager</a></li> <li data-ice="doc">C<a href="class/src/manager/PersistentManager.js~_PersistentManager.html">_PersistentManager</a></li> <li data-ice="doc">C<a href="class/src/manager/PhysicsManager.js~_PhysicsManager.html">_PhysicsManager</a></li> <li data-ice="doc">C<a href="class/src/manager/ProgramManager.js~_ProgramManager.html">_ProgramManager</a></li> <li data-ice="doc">C<a href="class/src/manager/RenderManager.js~_RenderManager.html">_RenderManager</a></li> <li data-ice="doc">C<a href="class/src/manager/SceneManager.js~_SceneManager.html">_SceneManager</a></li> <li data-ice="doc">C<a href="class/src/manager/TextureManager.js~_TextureManager.html">_TextureManager</a></li> <li data-ice="doc">C<a href="class/src/manager/UIManager.js~_UIManager.html">_UIManager</a></li> <li data-ice="doc">C<a href="class/src/manager/UpdateableManager.js~_UpdateableManager.html">_UpdateableManager</a></li> <li data-ice="doc">V<a href="variable/index.html#static-variable-AudioManager">AudioManager</a></li> <li data-ice="doc">V<a href="variable/index.html#static-variable-DOMManager">DOMManager</a></li> <li data-ice="doc">V<a href="variable/index.html#static-variable-EngineManager">EngineManager</a></li> <li data-ice="doc">V<a href="variable/index.html#static-variable-InputManager">InputManager</a></li> <li data-ice="doc">V<a href="variable/index.html#static-variable-PersistentManager">PersistentManager</a></li> <li data-ice="doc">V<a href="variable/index.html#static-variable-PhysicsManager">PhysicsManager</a></li> <li data-ice="doc">V<a href="variable/index.html#static-variable-ProgramManager">ProgramManager</a></li> <li data-ice="doc">V<a href="variable/index.html#static-variable-RenderManager">RenderManager</a></li> <li data-ice="doc">V<a href="variable/index.html#static-variable-SceneManager">SceneManager</a></li> <li data-ice="doc">V<a href="variable/index.html#static-variable-TextureManager">TextureManager</a></li> <li data-ice="doc">V<a href="variable/index.html#static-variable-UIManager">UIManager</a></li> <li data-ice="doc">V<a href="variable/index.html#static-variable-UpdateableManager">UpdateableManager</a></li> <li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#object">object</a>C<a href="class/src/object/GameObject.js~GameObject.html">GameObject</a></li> <li data-ice="doc">C<a href="class/src/object/PersistentObject.js~PersistentObject.html">PersistentObject</a></li> <li data-ice="doc">C<a href="class/src/object/SceneObject.js~SceneObject.html">SceneObject</a></li> <li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#prefab-ui">prefab/ui</a>C<a href="class/src/prefab/ui/UIButton.js~UIButton.html">UIButton</a></li> <li data-ice="doc">C<a href="class/src/prefab/ui/UIElement.js~UIElement.html">UIElement</a></li> <li data-ice="doc">C<a href="class/src/prefab/ui/UIPanel.js~UIPanel.html">UIPanel</a></li> <li data-ice="doc">C<a href="class/src/prefab/ui/UIText.js~UIText.html">UIText</a></li> <li data-ice="doc">C<a href="class/src/prefab/ui/UITextInput.js~UITextInput.html">UITextInput</a></li> <li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#render">render</a>C<a href="class/src/render/Viewport.js~Viewport.html">Viewport</a></li> <li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#render-webgl">render/WebGL</a>C<a href="class/src/render/WebGL/Matrix.js~Matrix.html">Matrix</a></li> <li data-ice="doc">C<a href="class/src/render/WebGL/Matrix3.js~Matrix3.html">Matrix3</a></li> <li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#scene">scene</a>C<a href="class/src/scene/BasicScene.js~BasicScene.html">BasicScene</a></li> <li data-ice="doc">C<a href="class/src/scene/Scene.js~Scene.html">Scene</a></li> <li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#utils">utils</a>C<a href="class/src/utils/Loader.js~Loader.html">Loader</a></li> <li data-ice="doc">C<a href="class/src/utils/Messager.js~Messager.html">Messager</a></li> <li data-ice="doc">F<a href="function/index.html#static-function-degToRad">degToRad</a></li> <li data-ice="doc">F<a href="function/index.html#static-function-radToDeg">radToDeg</a></li> </ul> </div> </nav> <div class="content" data-ice="content"><h1 data-ice="title">src/component/Animation.js</h1> <pre class="source-code line-number raw-source-code"><code class="prettyprint linenums" data-ice="content">import Component from './Component'; /** * Animation component to be added to a GameObject to create animations inline with * the global game loop. Animation Components currently only offer transform interpolation * frames. Using buildInterpolation can be used to make custom animations which last n frames. */ export default class Animation extends Component { /** * Constructor for the animation component. A GameObject may have more than one Animation component. */ constructor() { super(false); this.className = 'Animation'; this.interpolationData = {}; this.animationFrames = 0; } /** * Returns the frames left until all animations are complete. */ animationFramesLeft() { return this.animationFrames; } /** * Checks to see if an animation, defined by the interpol animation key, * still has frames left to complete the animation. * * @param {string} interpol Animation interpolation key. */ isAnimating(interpol = null) { if (interpol == null) return Object.keys(this.interpolationData).length > 0; return this.interpolationData[interpol] != null; } /** * Adds an animation to the Animation component. The animation component will keep track * and trigger the animation frames once per game tick until there are no more frames left. * On the final frame, the finalFrame callback will be called instead. * * @param {string} key Animation interpolation key. * @param {number} frames How many game ticks will this animation run. * @param {function} frameChange Callback function executed once per animation frame. * @param {function} finalFrame Callback function execured as the last frame. Defaults to frameChange. */ buildInterpolation(key, frames, frameChange, finalFrame = frameChange) { this.interpolationData[key] = { frameChange, finalFrame, framesLeft: frames, }; } /** * Clears an animation from executing any more frames. The animation to remove is defined * by the key parameter. * * @param {string} key Animation interpolation key. */ clearAnimation(key) { delete this.interpolationData[key]; } /** * Clear all animations on this Animation component. */ clearAnimations() { this.interpolationData = {}; this.animationFrames = 0; } /** * Wrapper function for creating animations of moving from one point to another (translating). * * @param {number} posX X position move per frame. * @param {number} posY Y position move per frame. * @param {number} posZ Z position move per frame. * @param {number} frames Amount of frames in this animation. * @param {number} cycles Amount of times to repeat this animation. * @param {boolean} reset Reset the position on animation finish. */ interpolatePosition(posX = 0, posY = 0, posZ = 0, frames = 1, cycles = 1, reset = false) { let start = this.gameObject.transform.getPosition(); this.buildInterpolation('position', frames, () => { this.gameObject.transform.translate(posX, posY, posZ); }, () => { this.gameObject.transform.setPosition(start.x + (reset ? 0 : posX * frames), start.y + (reset ? 0 : posY * frames), start.z + (reset ? 0 : posZ * frames)); if (--cycles > 0) this.interpolatePosition(posX, posY, posZ, frames, cycles, reset); }) } /** * Wrapper function for creating animations to change the scale of the GameObject. * * @param {number} posX X scale change per frame. * @param {number} posY Y scale change per frame. * @param {number} posZ Z scale change per frame. * @param {number} frames Amount of frames in this animation. * @param {number} cycles Amount of times to repeat this animation. * @param {boolean} reset Reset the position on animation finish. */ interpolateScale(scaleX = 0, scaleY = 0, scaleZ = 0, frames = 1, cycles = 1, reset = false) { let start = this.gameObject.transform.getScale(); this.buildInterpolation('scale', frames, () => { this.gameObject.transform.scale(scaleX, scaleY, scaleZ); },() => { this.gameObject.transform.setScale(start.x + (reset ? 0 : scaleX * frames), start.y + (reset ? 0 : scaleY * frames), start.z + (reset ? 0 : scaleZ * frames)); if (--cycles > 0) this.interpolateScale(scaleX, scaleY, scaleZ, frames, cycles, reset); }); } /** * Wrapper function for creating animations to rotate the GameObject. * * @param {number} posX X scale change per frame. * @param {number} posY Y scale change per frame. * @param {number} posZ Z scale change per frame. * @param {number} frames Amount of frames in this animation. * @param {number} cycles Amount of times to repeat this animation. * @param {boolean} reset Reset the position on animation finish. */ interpolateRotation(rotate, frames = 1, cycles = 1, reset = false) { let start = this.gameObject.transform.getRotation(); this.buildInterpolation('rotation', frames, () => { this.gameObject.transform.rotate(rotate); },() => { this.gameObject.transform.setRotation(start + (reset ? 0 : rotate * frames)); if (--cycles > 0) this.interpolateRotation(rotate, frames, cycles, reset); }); } /** * onUpdate is called automatically as a Component. Executes a frame for each animation. */ onUpdate() { let newFrameCount = --this.animationFrames; let interpols = Object.keys(this.interpolationData); for (let i = 0; i < interpols.length; i++) { let interpol = this.interpolationData[interpols[i]]; newFrameCount = Math.max(this.animationFrames, interpol.framesLeft - 1); if (interpol.framesLeft > 1) { interpol.frameChange(); interpol.framesLeft--; } else if (interpol.framesLeft >= 1) { interpol.finalFrame(); interpol.framesLeft--; } else if (interpol.framesLeft < 1) { delete this.interpolationData[interpols[i]]; } } this.animationFrames = newFrameCount; } }</code></pre> </div> <footer class="footer"> Generated by <a href="https://esdoc.org">ESDoc(1.1.0)<img src="./image/esdoc-logo-mini-black.png"></a> </footer> <script src="script/search_index.js"></script> <script src="script/search.js"></script> <script src="script/pretty-print.js"></script> <script src="script/inherited-summary.js"></script> <script src="script/test-summary.js"></script> <script src="script/inner-link.js"></script> <script src="script/patch-for-local.js"></script> </body> </html>