UNPKG

oxygen-core

Version:

Oxygen game engine (Xenon Core for browsers)

793 lines (668 loc) 35 kB
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <base data-ice="baseUrl" href="../../../"> <title data-ice="title">src/components/UiSprite.js | oxygen-core</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="Oxygen game engine (Xenon Core for browsers)"><meta property="twitter:card" content="summary"><meta property="twitter:title" content="oxygen-core"><meta property="twitter:description" content="Oxygen game engine (Xenon Core for browsers)"></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> <div class="search-box"> <span> <img src="./image/search.png"> <span class="search-input-edge"></span><input class="search-input"><span class="search-input-edge"></span> </span> <ul class="search-result"></ul> </div> <a style="position:relative; top:3px;" href="https://github.com/PsichiX/Oxygen"><img width="20px" src="./image/github.png"></a></header> <nav class="navigation" data-ice="nav"><div> <ul> <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/index.js~EventsController.html">EventsController</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-lazyInitialization">lazyInitialization</a></span></span></li> <li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#asset-loaders">asset-loaders</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/asset-loaders/AssemblyAsset.js~AssemblyAsset.html">AssemblyAsset</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/asset-loaders/AtlasAsset.js~AtlasAsset.html">AtlasAsset</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/asset-loaders/BinaryAsset.js~BinaryAsset.html">BinaryAsset</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/asset-loaders/FontAsset.js~FontAsset.html">FontAsset</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/asset-loaders/ImageAsset.js~ImageAsset.html">ImageAsset</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/asset-loaders/JSONAsset.js~JSONAsset.html">JSONAsset</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/asset-loaders/MusicAsset.js~MusicAsset.html">MusicAsset</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/asset-loaders/PackAsset.js~PackAsset.html">PackAsset</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/asset-loaders/ParticleSystemAsset.js~ParticleSystemAsset.html">ParticleSystemAsset</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/asset-loaders/PostprocessRackEffectAsset.js~PostprocessRackEffectAsset.html">PostprocessRackEffectAsset</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/asset-loaders/SVGAsset.js~SVGAsset.html">SVGAsset</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/asset-loaders/SceneAsset.js~SceneAsset.html">SceneAsset</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/asset-loaders/SetAsset.js~SetAsset.html">SetAsset</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/asset-loaders/ShaderAsset.js~ShaderAsset.html">ShaderAsset</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/asset-loaders/SkeletonAsset.js~SkeletonAsset.html">SkeletonAsset</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/asset-loaders/SoundAsset.js~SoundAsset.html">SoundAsset</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/asset-loaders/TextAsset.js~TextAsset.html">TextAsset</a></span></span></li> <li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#components">components</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/components/AtlasSprite.js~AtlasSprite.html">AtlasSprite</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/components/Camera.js~Camera.html">Camera</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/components/Camera.js~PostprocessPass.html">PostprocessPass</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/components/Camera2D.js~Camera2D.html">Camera2D</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/components/CameraDirector2D.js~CameraDirector2D.html">CameraDirector2D</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/components/CircleShape.js~CircleShape.html">CircleShape</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/components/Container.js~Container.html">Container</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/components/DeferredRenderer.js~DeferredPipeline.html">DeferredPipeline</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/components/DeferredRenderer.js~DeferredRenderer.html">DeferredRenderer</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/components/GestureListener.js~GestureListener.html">GestureListener</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/components/InputHandler.js~InputHandler.html">InputHandler</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/components/MultipassRenderer.js~MultipassPipeline.html">MultipassPipeline</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/components/MultipassRenderer.js~MultipassRenderer.html">MultipassRenderer</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/components/Particles.js~Particles.html">Particles</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/components/PhysicsBody.js~PhysicsBody.html">PhysicsBody</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/components/PhysicsWorld.js~PhysicsWorld.html">PhysicsWorld</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/components/PolygonShape.js~PolygonShape.html">PolygonShape</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/components/PostprocessRack.js~PostprocessRack.html">PostprocessRack</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/components/PostprocessRack.js~PostprocessRackPass.html">PostprocessRackPass</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/components/PostprocessRack.js~PostprocessRackRawEffectPass.html">PostprocessRackRawEffectPass</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/components/PrefabInstance.js~PrefabInstance.html">PrefabInstance</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/components/RectangleRenderer.js~RectangleRenderer.html">RectangleRenderer</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/components/RectangleShape.js~RectangleShape.html">RectangleShape</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/components/Script.js~Script.html">Script</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/components/Shape.js~Shape.html">Shape</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/components/Skeleton.js~Skeleton.html">Skeleton</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/components/SortedActions.js~SortedActions.html">SortedActions</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/components/Sprite.js~Sprite.html">Sprite</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/components/TextRenderer.js~TextRenderer.html">TextRenderer</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/components/UiLayout.js~UiLayout.html">UiLayout</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/components/UiSprite.js~UiSprite.html">UiSprite</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/components/VerticesRenderer.js~VerticesRenderer.html">VerticesRenderer</a></span></span></li> <li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#systems">systems</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/systems/AssemblySystem.js~AssemblySystem.html">AssemblySystem</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/systems/AudioSystem.js~AudioSystem.html">AudioSystem</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/systems/InputSystem.js~InputSystem.html">InputSystem</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/systems/RenderSystem.js~Command.html">Command</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/systems/RenderSystem.js~Pipeline.html">Pipeline</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/systems/RenderSystem.js~RenderFullscreenCommand.html">RenderFullscreenCommand</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/systems/RenderSystem.js~RenderSystem.html">RenderSystem</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/systems/RenderSystem.js~RenderTargetWrapper.html">RenderTargetWrapper</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/systems/StorageSystem.js~StorageSystem.html">StorageSystem</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/systems/System.js~System.html">System</a></span></span></li> <li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#systems-assetsystem">systems/AssetSystem</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/systems/AssetSystem/Asset.js~Asset.html">Asset</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/systems/AssetSystem/index.js~AssetSystem.html">AssetSystem</a></span></span></li> <li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#systems-entitysystem">systems/EntitySystem</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/systems/EntitySystem/Component.js~Component.html">Component</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/systems/EntitySystem/Entity.js~Entity.html">Entity</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/systems/EntitySystem/index.js~EntitySystem.html">EntitySystem</a></span></span></li> <li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#utils">utils</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/utils/Events.js~Events.html">Events</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-angleDifference">angleDifference</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-bezierCubic">bezierCubic</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-convertGlobalPointToLocalPoint">convertGlobalPointToLocalPoint</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-convertLocalPointToGlobalPoint">convertLocalPointToGlobalPoint</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-findMapKeyOfValue">findMapKeyOfValue</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-getMipmapScale">getMipmapScale</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-getPOT">getPOT</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-isGlobalPointInGlobalBoundingBox">isGlobalPointInGlobalBoundingBox</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-isLocalPointInLocalBoundingBox">isLocalPointInLocalBoundingBox</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-isPOT">isPOT</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-propsEnumStringify">propsEnumStringify</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-stringToRGBA">stringToRGBA</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-waitForSeconds">waitForSeconds</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-variable">V</span><span data-ice="name"><span><a href="variable/index.html#static-variable-Box2D">Box2D</a></span></span></li> </ul> </div> </nav> <div class="content" data-ice="content"><h1 data-ice="title">src/components/UiSprite.js</h1> <pre class="source-code line-number raw-source-code"><code class="prettyprint linenums" data-ice="content">import VerticesRenderer from &apos;./VerticesRenderer&apos;; import System from &apos;../systems/System&apos;; import { vec2, vec4 } from &apos;../utils&apos;; const cachedTemp1 = vec2.create(); const cachedTemp2 = vec2.create(); const cachedTemp3 = vec2.create(); export default class UiSprite extends VerticesRenderer { static factory() { return new UiSprite(); } static get propsTypes() { return { visible: VerticesRenderer.propsTypes.visible, shader: VerticesRenderer.propsTypes.shader, overrideUniforms: VerticesRenderer.propsTypes.overrideUniforms, overrideSamplers: VerticesRenderer.propsTypes.overrideSamplers, layers: VerticesRenderer.propsTypes.layers, overrideBaseTexture: &apos;string_null&apos;, overrideBaseFiltering: &apos;enum(nearest, linear)&apos;, camera: &apos;string_null&apos;, width: &apos;number&apos;, height: &apos;number&apos;, widthAnchor: &apos;number&apos;, heightAnchor: &apos;number&apos;, xOrigin: &apos;number&apos;, yOrigin: &apos;number&apos;, topOffset: &apos;number&apos;, bottomOffset: &apos;number&apos;, leftOffset: &apos;number&apos;, rightOffset: &apos;number&apos;, leftOffset: &apos;number&apos;, topBorder: &apos;number&apos;, bottomBorder: &apos;number&apos;, leftBorder: &apos;number&apos;, rightBorder: &apos;number&apos;, atlas: &apos;asset(atlas?:.*$)&apos;, color: &apos;rgba&apos; }; } get overrideBaseTexture() { const { overrideSamplers } = this; const sampler = overrideSamplers.sBase; return !!sampler ? sampler.texture : null; } set overrideBaseTexture(value) { const { overrideSamplers } = this; if (!value) { delete overrideSamplers.sBase; this.overrideSamplers = overrideSamplers; return; } if (typeof value !== &apos;string&apos;) { throw new Error(&apos;`value` is not type of String!&apos;); } const sampler = overrideSamplers[&apos;sBase&apos;]; if (!sampler) { overrideSamplers.sBase = { texture: value, filtering: &apos;linear&apos; }; } else { sampler.texture = value; } this.overrideSamplers = overrideSamplers; this._atlas = null; this._frame = null; } get overrideBaseFiltering() { const { overrideSamplers } = this; const sampler = overrideSamplers.get(&apos;sBase&apos;); return !!sampler ? sampler.filtering : null; } set overrideBaseFiltering(value) { const { overrideSamplers } = this; if (typeof value !== &apos;string&apos;) { throw new Error(&apos;`value` is not type of String!&apos;); } const sampler = overrideSamplers.sBase; if (!sampler) { overrideSamplers.sBase = { texture: &apos;&apos;, filtering: value }; } else { sampler.filtering = value; } this.overrideSamplers = overrideSamplers; } get camera() { return this._camera; } set camera(value) { if (!value) { this._camera = null; this._cameraEntity = null; this._cameraComponent = null; return; } if (typeof value !== &apos;string&apos;) { throw new Error(&apos;`value` is not type of String!&apos;); } const { entity } = this; this._camera = value; if (!!entity) { this._cameraEntity = entity.findEntity(value); if (!this._cameraEntity) { throw new Error(`Cannot find entity: ${value}`); } this._cameraComponent = this._cameraEntity.getComponent(&apos;Camera2D&apos;); if (!this._cameraComponent) { throw new Error( `Entity doe not have Camera2D component: ${this._cameraEntity.path}` ); } } this.recalculateSize(); } get width() { return this._width; } set width(value) { if (typeof value !== &apos;number&apos;) { throw new Error(&apos;`value` is not type of Number!&apos;); } this._width = value; this.recalculateSize(); } get height() { return this._height; } set height(value) { if (typeof value !== &apos;number&apos;) { throw new Error(&apos;`value` is not type of Number!&apos;); } this._height = value; this.recalculateSize(); } get widthAnchor() { return this._widthAnchor; } set widthAnchor(value) { if (typeof value !== &apos;number&apos;) { throw new Error(&apos;`value` is not type of Number!&apos;); } this._widthAnchor = value; this.recalculateSize(); } get heightAnchor() { return this._heightAnchor; } set heightAnchor(value) { if (typeof value !== &apos;number&apos;) { throw new Error(&apos;`value` is not type of Number!&apos;); } this._heightAnchor = value; this.recalculateSize(); } get xOrigin() { return this._xOrigin; } set xOrigin(value) { if (typeof value !== &apos;number&apos;) { throw new Error(&apos;`value` is not type of Number!&apos;); } this._xOrigin = value; this.recalculateSize(); } get yOrigin() { return this._yOrigin; } set yOrigin(value) { if (typeof value !== &apos;number&apos;) { throw new Error(&apos;`value` is not type of Number!&apos;); } this._yOrigin = value; this.recalculateSize(); } get topOffset() { return this._topOffset; } set topOffset(value) { if (typeof value !== &apos;number&apos;) { throw new Error(&apos;`value` is not type of Number!&apos;); } this._topOffset = value; this._rebuild = true; } get bottomOffset() { return this._bottomOffset; } set bottomOffset(value) { if (typeof value !== &apos;number&apos;) { throw new Error(&apos;`value` is not type of Number!&apos;); } this._bottomOffset = value; this._rebuild = true; } get leftOffset() { return this._leftOffset; } set leftOffset(value) { if (typeof value !== &apos;number&apos;) { throw new Error(&apos;`value` is not type of Number!&apos;); } this._leftOffset = value; this._rebuild = true; } get rightOffset() { return this._rightOffset; } set rightOffset(value) { if (typeof value !== &apos;number&apos;) { throw new Error(&apos;`value` is not type of Number!&apos;); } this._rightOffset = value; this._rebuild = true; } get topBorder() { return this._topBorder; } set topBorder(value) { if (typeof value !== &apos;number&apos;) { throw new Error(&apos;`value` is not type of Number!&apos;); } this._topBorder = Math.max(value, 0); this._rebuild = true; } get bottomBorder() { return this._bottomBorder; } set bottomBorder(value) { if (typeof value !== &apos;number&apos;) { throw new Error(&apos;`value` is not type of Number!&apos;); } this._bottomBorder = Math.max(value, 0); this._rebuild = true; } get leftBorder() { return this._leftBorder; } set leftBorder(value) { if (typeof value !== &apos;number&apos;) { throw new Error(&apos;`value` is not type of Number!&apos;); } this._leftBorder = Math.max(value, 0); this._rebuild = true; } get rightBorder() { return this._rightBorder; } set rightBorder(value) { if (typeof value !== &apos;number&apos;) { throw new Error(&apos;`value` is not type of Number!&apos;); } this._rightBorder = Math.max(value, 0); this._rebuild = true; } get atlas() { return this._atlas; } set atlas(value) { if (!value || value === &apos;&apos;) { this._atlas = value; this.overrideBaseTexture = &apos;&apos;; return; } if (typeof value !== &apos;string&apos;) { throw new Error(&apos;`value` is not type of String!&apos;); } const found = value.indexOf(&apos;:&apos;); if (found &lt; 0) { throw new Error(&apos;`value` does not conform rule of &quot;atlas:frame&quot; naming!&apos;); } const original = value; const frame = value.substr(found + 1); value = value.substr(0, found); const assets = System.get(&apos;AssetSystem&apos;); if (!assets) { throw new Error(&apos;There is no registered AssetSystem!&apos;); } const atlas = assets.get(`atlas://${value}`); if (!atlas) { throw new Error(`There is no atlas asset loaded: ${value}`); } const { meta, frames } = atlas.data.descriptor; if (!meta || !frames) { throw new Error(`There is either no metadata or frames in atlas: ${value}`); } const info = frames[frame]; if (!info || !info.frame) { throw new Error(`There is no frame information in atlas: ${value} (${frame})`); } this.overrideBaseTexture = meta.image; this._atlas = original; this._frame = info.frame; this._rebuild = true; } get color() { return this._color; } set color(value) { if (typeof value === &apos;string&apos;) { value = stringToRGBA(value); } if (!(value instanceof Array) &amp;&amp; !(value instanceof Float32Array)) { throw new Error(&apos;`value` is not type of either Array or Float32Array!&apos;); } if (value.length &lt; 4) { throw new Error(&apos;`value` array must have at least 4 items!&apos;); } vec4.copy(this._color, value); const { overrideUniforms } = this; overrideUniforms.uColor = this._color; this.overrideUniforms = overrideUniforms; } get cachedWidth() { return this._cachedWidth; } get cachedHeight() { return this._cachedHeight; } constructor() { super(); this._camera = null; this._cameraEntity = null; this._cameraComponent = null; this._width = 0; this._height = 0; this._widthAnchor = 1; this._heightAnchor = 1; this._xOrigin = 0; this._yOrigin = 0; this._topOffset = 0; this._bottomOffset = 0; this._leftOffset = 0; this._rightOffset = 0; this._topBorder = 0; this._bottomBorder = 0; this._leftBorder = 0; this._rightBorder = 0; this._atlas = null; this._color = vec4.fromValues(1, 1, 1, 1); this._frame = null; this._cachedWidth = 0; this._cachedHeight = 0; this._rebuild = true; } dispose() { super.dispose(); this._camera = null; this._cameraEntity = null; this._cameraComponent = null; this._atlas = null; this._frame = null; } recalculateSize() { this._cachedWidth = 0; this._cachedHeight = 0; const { entity, _width, _height, _widthAnchor, _heightAnchor } = this; if (!entity) { return; } const { parent } = entity; if (!parent) { return; } const sprite = parent.getComponent(&apos;UiSprite&apos;); let pw = 0; let ph = 0; if (!!sprite) { pw = sprite.cachedWidth; ph = sprite.cachedHeight; } else { const { _cameraComponent } = this; if (!!_cameraComponent) { vec2.set(cachedTemp1, -1, -1); vec2.transformMat4( cachedTemp2, cachedTemp1, _cameraComponent.inverseProjectionMatrix ); vec2.set(cachedTemp1, 1, 1); vec2.transformMat4( cachedTemp3, cachedTemp1, _cameraComponent.inverseProjectionMatrix ); pw = Math.abs(cachedTemp3[0] - cachedTemp2[0]); ph = Math.abs(cachedTemp3[1] - cachedTemp2[1]); } } this._cachedWidth = (_width &lt; 0 ? pw : _width) * _widthAnchor; this._cachedHeight = (_height &lt; 0 ? ph : _height) * _heightAnchor; this._rebuild = true; } ensureVertices(renderer) { if (!this._rebuild) { return; } const meta = renderer.getTextureMeta(this.overrideBaseTexture) || { width: 1, height: 1 }; const { _cachedWidth, _cachedHeight, _xOrigin, _yOrigin, _topOffset, _bottomOffset, _leftOffset, _rightOffset, _topBorder, _bottomBorder, _leftBorder, _rightBorder, _frame } = this; const ox = _cachedWidth * _xOrigin; const oy = _cachedHeight * _yOrigin; const p0c = _leftOffset - ox; const p1c = p0c + _leftBorder; const p3c = p0c + _cachedWidth - _rightOffset - _leftOffset; const p2c = p3c - _rightBorder; const p0r = _topOffset - oy; const p1r = p0r + _topBorder; const p3r = p0r + _cachedHeight - _bottomOffset - _topOffset; const p2r = p3r - _bottomBorder; if (!_frame) { const t0c = 0; const t1c = _leftBorder / meta.width; const t2c = 1 - _rightBorder / meta.width; const t3c = 1; const t0r = 0; const t1r = _topBorder / meta.width; const t2r = 1 - _bottomBorder / meta.width; const t3r = 1; this.vertices = [ p0c, p0r, t0c, t0r, p1c, p0r, t1c, t0r, p2c, p0r, t2c, t0r, p3c, p0r, t3c, t0r, p0c, p1r, t0c, t1r, p1c, p1r, t1c, t1r, p2c, p1r, t2c, t1r, p3c, p1r, t3c, t1r, p0c, p2r, t0c, t2r, p1c, p2r, t1c, t2r, p2c, p2r, t2c, t2r, p3c, p2r, t3c, t2r, p0c, p3r, t0c, t3r, p1c, p3r, t1c, t3r, p2c, p3r, t2c, t3r, p3c, p3r, t3c, t3r ]; } else { const { x, y, w, h } = _frame; const t0c = x / meta.width; const t1c = t0c + _leftBorder / meta.width; const t3c = (x + w) / meta.width; const t2c = t3c - _rightBorder / meta.width; const t0r = y / meta.height; const t1r = t0r + _topBorder / meta.height; const t3r = (y + h) / meta.height; const t2r = t3r - _bottomBorder / meta.height; this.vertices = [ p0c, p0r, t0c, t0r, p1c, p0r, t1c, t0r, p2c, p0r, t2c, t0r, p3c, p0r, t3c, t0r, p0c, p1r, t0c, t1r, p1c, p1r, t1c, t1r, p2c, p1r, t2c, t1r, p3c, p1r, t3c, t1r, p0c, p2r, t0c, t2r, p1c, p2r, t1c, t2r, p2c, p2r, t2c, t2r, p3c, p2r, t3c, t2r, p0c, p3r, t0c, t3r, p1c, p3r, t1c, t3r, p2c, p3r, t2c, t3r, p3c, p3r, t3c, t3r ]; } this.indices = [ 0, 1, 5, 5, 4, 0, 1, 2, 6, 6, 5, 1, 2, 3, 7, 7, 6, 2, 4, 5, 9, 9, 8, 4, 5, 6,10,10, 9, 5, 6, 7,11,11,10, 6, 8, 9,13,13,12, 8, 9,10,14,14,13, 9, 10,11,15,15,14,10 ]; this._rebuild = false; // 0, 1, 2, 3, // 4, 5, 6, 7, // 8, 9,10,11, //12,13,14,15 } onAttach() { super.onAttach(); const { overrideUniforms } = this; overrideUniforms.uColor = this._color; this.overrideUniforms = overrideUniforms; this.camera = this.camera; } onAction(name, ...args) { if (name === &apos;camera-changed&apos;) { return this.onCameraChanged(...args); } else { return super.onAction(name, ...args); } } onPropertySerialize(name, value) { if (name === &apos;overrideSamplers&apos;) { const result = super.onPropertySerialize(name, value); if (!result) { return null; } delete result.sBase; return Object.keys(result).length &gt; 0 ? result : null; } else { return super.onPropertySerialize(name, value); } } onRender(gl, renderer, deltaTime, layer) { this.ensureVertices(renderer); super.onRender(gl, renderer, deltaTime, layer); } onCameraChanged(camera) { if (camera === this._cameraComponent &amp;&amp; (this._width &lt; 0 || this._height &lt; 0) ) { this.recalculateSize(); } } } </code></pre> </div> <footer class="footer"> Generated by <a href="https://esdoc.org">ESDoc<span data-ice="esdocVersion">(1.1.0)</span><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>