oxygen-core

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <base data-ice="baseUrl" href="../../../"> <title data-ice="title">src/components/TextRenderer.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"> <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/PsichiX/Oxygen"><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/index.js~EventsController.html">EventsController</a></li> <li data-ice="doc">F<a href="function/index.html#static-function-lazyInitialization">lazyInitialization</a></li> <li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#asset-loaders">asset-loaders</a>C<a href="class/src/asset-loaders/AssemblyAsset.js~AssemblyAsset.html">AssemblyAsset</a></li> <li data-ice="doc">C<a href="class/src/asset-loaders/AtlasAsset.js~AtlasAsset.html">AtlasAsset</a></li> <li data-ice="doc">C<a href="class/src/asset-loaders/BinaryAsset.js~BinaryAsset.html">BinaryAsset</a></li> <li data-ice="doc">C<a href="class/src/asset-loaders/FontAsset.js~FontAsset.html">FontAsset</a></li> <li data-ice="doc">C<a href="class/src/asset-loaders/ImageAsset.js~ImageAsset.html">ImageAsset</a></li> <li data-ice="doc">C<a href="class/src/asset-loaders/JSONAsset.js~JSONAsset.html">JSONAsset</a></li> <li data-ice="doc">C<a href="class/src/asset-loaders/MusicAsset.js~MusicAsset.html">MusicAsset</a></li> <li data-ice="doc">C<a href="class/src/asset-loaders/PackAsset.js~PackAsset.html">PackAsset</a></li> <li data-ice="doc">C<a href="class/src/asset-loaders/ParticleSystemAsset.js~ParticleSystemAsset.html">ParticleSystemAsset</a></li> <li data-ice="doc">C<a href="class/src/asset-loaders/PostprocessRackEffectAsset.js~PostprocessRackEffectAsset.html">PostprocessRackEffectAsset</a></li> <li data-ice="doc">C<a href="class/src/asset-loaders/SVGAsset.js~SVGAsset.html">SVGAsset</a></li> <li data-ice="doc">C<a href="class/src/asset-loaders/SceneAsset.js~SceneAsset.html">SceneAsset</a></li> <li data-ice="doc">C<a href="class/src/asset-loaders/SetAsset.js~SetAsset.html">SetAsset</a></li> <li data-ice="doc">C<a href="class/src/asset-loaders/ShaderAsset.js~ShaderAsset.html">ShaderAsset</a></li> <li data-ice="doc">C<a href="class/src/asset-loaders/SkeletonAsset.js~SkeletonAsset.html">SkeletonAsset</a></li> <li data-ice="doc">C<a href="class/src/asset-loaders/SoundAsset.js~SoundAsset.html">SoundAsset</a></li> <li data-ice="doc">C<a href="class/src/asset-loaders/TextAsset.js~TextAsset.html">TextAsset</a></li> <li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#components">components</a>C<a href="class/src/components/AtlasSprite.js~AtlasSprite.html">AtlasSprite</a></li> <li data-ice="doc">C<a href="class/src/components/Camera.js~Camera.html">Camera</a></li> <li data-ice="doc">C<a href="class/src/components/Camera.js~PostprocessPass.html">PostprocessPass</a></li> <li data-ice="doc">C<a href="class/src/components/Camera2D.js~Camera2D.html">Camera2D</a></li> <li data-ice="doc">C<a href="class/src/components/CameraDirector2D.js~CameraDirector2D.html">CameraDirector2D</a></li> <li data-ice="doc">C<a href="class/src/components/CircleShape.js~CircleShape.html">CircleShape</a></li> <li data-ice="doc">C<a href="class/src/components/Container.js~Container.html">Container</a></li> <li data-ice="doc">C<a href="class/src/components/DeferredRenderer.js~DeferredPipeline.html">DeferredPipeline</a></li> <li data-ice="doc">C<a href="class/src/components/DeferredRenderer.js~DeferredRenderer.html">DeferredRenderer</a></li> <li data-ice="doc">C<a href="class/src/components/GestureListener.js~GestureListener.html">GestureListener</a></li> <li data-ice="doc">C<a href="class/src/components/InputHandler.js~InputHandler.html">InputHandler</a></li> <li data-ice="doc">C<a href="class/src/components/MultipassRenderer.js~MultipassPipeline.html">MultipassPipeline</a></li> <li data-ice="doc">C<a href="class/src/components/MultipassRenderer.js~MultipassRenderer.html">MultipassRenderer</a></li> <li data-ice="doc">C<a href="class/src/components/Particles.js~Particles.html">Particles</a></li> <li data-ice="doc">C<a href="class/src/components/PhysicsBody.js~PhysicsBody.html">PhysicsBody</a></li> <li data-ice="doc">C<a href="class/src/components/PhysicsWorld.js~PhysicsWorld.html">PhysicsWorld</a></li> <li data-ice="doc">C<a href="class/src/components/PolygonShape.js~PolygonShape.html">PolygonShape</a></li> <li data-ice="doc">C<a href="class/src/components/PostprocessRack.js~PostprocessRack.html">PostprocessRack</a></li> <li data-ice="doc">C<a href="class/src/components/PostprocessRack.js~PostprocessRackPass.html">PostprocessRackPass</a></li> <li data-ice="doc">C<a href="class/src/components/PostprocessRack.js~PostprocessRackRawEffectPass.html">PostprocessRackRawEffectPass</a></li> <li data-ice="doc">C<a href="class/src/components/PrefabInstance.js~PrefabInstance.html">PrefabInstance</a></li> <li data-ice="doc">C<a href="class/src/components/RectangleRenderer.js~RectangleRenderer.html">RectangleRenderer</a></li> <li data-ice="doc">C<a href="class/src/components/RectangleShape.js~RectangleShape.html">RectangleShape</a></li> <li data-ice="doc">C<a href="class/src/components/Script.js~Script.html">Script</a></li> <li data-ice="doc">C<a href="class/src/components/Shape.js~Shape.html">Shape</a></li> <li data-ice="doc">C<a href="class/src/components/Skeleton.js~Skeleton.html">Skeleton</a></li> <li data-ice="doc">C<a href="class/src/components/SortedActions.js~SortedActions.html">SortedActions</a></li> <li data-ice="doc">C<a href="class/src/components/Sprite.js~Sprite.html">Sprite</a></li> <li data-ice="doc">C<a href="class/src/components/TextRenderer.js~TextRenderer.html">TextRenderer</a></li> <li data-ice="doc">C<a href="class/src/components/UiLayout.js~UiLayout.html">UiLayout</a></li> <li data-ice="doc">C<a href="class/src/components/UiSprite.js~UiSprite.html">UiSprite</a></li> <li data-ice="doc">C<a href="class/src/components/VerticesRenderer.js~VerticesRenderer.html">VerticesRenderer</a></li> <li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#systems">systems</a>C<a href="class/src/systems/AssemblySystem.js~AssemblySystem.html">AssemblySystem</a></li> <li data-ice="doc">C<a href="class/src/systems/AudioSystem.js~AudioSystem.html">AudioSystem</a></li> <li data-ice="doc">C<a href="class/src/systems/InputSystem.js~InputSystem.html">InputSystem</a></li> <li data-ice="doc">C<a href="class/src/systems/RenderSystem.js~Command.html">Command</a></li> <li data-ice="doc">C<a href="class/src/systems/RenderSystem.js~Pipeline.html">Pipeline</a></li> <li data-ice="doc">C<a href="class/src/systems/RenderSystem.js~RenderFullscreenCommand.html">RenderFullscreenCommand</a></li> <li data-ice="doc">C<a href="class/src/systems/RenderSystem.js~RenderSystem.html">RenderSystem</a></li> <li data-ice="doc">C<a href="class/src/systems/RenderSystem.js~RenderTargetWrapper.html">RenderTargetWrapper</a></li> <li data-ice="doc">C<a href="class/src/systems/StorageSystem.js~StorageSystem.html">StorageSystem</a></li> <li data-ice="doc">C<a href="class/src/systems/System.js~System.html">System</a></li> <li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#systems-assetsystem">systems/AssetSystem</a>C<a href="class/src/systems/AssetSystem/Asset.js~Asset.html">Asset</a></li> <li data-ice="doc">C<a href="class/src/systems/AssetSystem/index.js~AssetSystem.html">AssetSystem</a></li> <li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#systems-entitysystem">systems/EntitySystem</a>C<a href="class/src/systems/EntitySystem/Component.js~Component.html">Component</a></li> <li data-ice="doc">C<a href="class/src/systems/EntitySystem/Entity.js~Entity.html">Entity</a></li> <li data-ice="doc">C<a href="class/src/systems/EntitySystem/index.js~EntitySystem.html">EntitySystem</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/Events.js~Events.html">Events</a></li> <li data-ice="doc">F<a href="function/index.html#static-function-angleDifference">angleDifference</a></li> <li data-ice="doc">F<a href="function/index.html#static-function-bezierCubic">bezierCubic</a></li> <li data-ice="doc">F<a href="function/index.html#static-function-convertGlobalPointToLocalPoint">convertGlobalPointToLocalPoint</a></li> <li data-ice="doc">F<a href="function/index.html#static-function-convertLocalPointToGlobalPoint">convertLocalPointToGlobalPoint</a></li> <li data-ice="doc">F<a href="function/index.html#static-function-findMapKeyOfValue">findMapKeyOfValue</a></li> <li data-ice="doc">F<a href="function/index.html#static-function-getMipmapScale">getMipmapScale</a></li> <li data-ice="doc">F<a href="function/index.html#static-function-getPOT">getPOT</a></li> <li data-ice="doc">F<a href="function/index.html#static-function-isGlobalPointInGlobalBoundingBox">isGlobalPointInGlobalBoundingBox</a></li> <li data-ice="doc">F<a href="function/index.html#static-function-isLocalPointInLocalBoundingBox">isLocalPointInLocalBoundingBox</a></li> <li data-ice="doc">F<a href="function/index.html#static-function-isPOT">isPOT</a></li> <li data-ice="doc">F<a href="function/index.html#static-function-propsEnumStringify">propsEnumStringify</a></li> <li data-ice="doc">F<a href="function/index.html#static-function-stringToRGBA">stringToRGBA</a></li> <li data-ice="doc">F<a href="function/index.html#static-function-waitForSeconds">waitForSeconds</a></li> <li data-ice="doc">V<a href="variable/index.html#static-variable-Box2D">Box2D</a></li> </ul> </div> </nav> <div class="content" data-ice="content"><h1 data-ice="title">src/components/TextRenderer.js</h1> <pre class="source-code line-number raw-source-code"><code class="prettyprint linenums" data-ice="content">import VerticesRenderer from './VerticesRenderer'; import System from '../systems/System'; import { vec4 } from '../utils/gl-matrix'; import { stringToRGBA } from '../utils'; export default class TextRenderer extends VerticesRenderer { static factory() { return new TextRenderer(); } static get propsTypes() { return { visible: VerticesRenderer.propsTypes.visible, shader: VerticesRenderer.propsTypes.shader, overrideUniforms: VerticesRenderer.propsTypes.overrideUniforms, overrideSamplers: VerticesRenderer.propsTypes.overrideSamplers, layers: VerticesRenderer.propsTypes.layers, text: 'string', font: 'asset(font)', color: 'rgba', colorOutline: 'rgba', halign: 'enum(left, center, right)', valign: 'enum(top, middle, bottom)', filtering: 'enum(nearest, linear)' }; } get text() { return this._text; } set text(value) { if (typeof value !== 'string') { throw new Error('`value` is not type of String!'); } this._text = value; this._rebuild = true; } get font() { return this._font; } set font(value) { if (typeof value !== 'string') { throw new Error('`value` is not type of String!'); } const assets = System.get('AssetSystem'); if (!assets) { throw new Error('There is no registered AssetSystem!'); } const font = assets.get(`font://${value}`); if (!font) { throw new Error(`There is no font asset loaded: ${value}`); } this._font = value; this._fontData = font.data.descriptor; this._rebuild = true; } get color() { return this._color; } set color(value) { if (typeof value === 'string') { value = stringToRGBA(value); } if (!(value instanceof Array) && !(value instanceof Float32Array)) { throw new Error('`value` is not type of either Array or Float32Array!'); } if (value.length < 4) { throw new Error('`value` array must have at least 4 items!'); } vec4.copy(this._color, value); const { overrideUniforms } = this; overrideUniforms.uColor = this._color; this.overrideUniforms = overrideUniforms; } get colorOutline() { return this._colorOutline; } set colorOutline(value) { if (typeof value === 'string') { value = stringToRGBA(value); } if (!(value instanceof Array) && !(value instanceof Float32Array)) { throw new Error('`value` is not type of either Array or Float32Array!'); } if (value.length < 4) { throw new Error('`value` array must have at least 4 items!'); } vec4.copy(this._colorOutline, value); const { overrideUniforms } = this; overrideUniforms.uColorOutline = this._colorOutline; this.overrideUniforms = overrideUniforms; } get halign() { return this._halign; } set halign(value) { if (typeof value !== 'string') { throw new Error('`value` is not type of String!'); } this._halign = value; this._rebuild = true; } get valign() { return this._valign; } set valign(value) { if (typeof value !== 'string') { throw new Error('`value` is not type of String!'); } this._valign = value; this._rebuild = true; } get filtering() { return this._filtering; } set filtering(value) { if (typeof value !== 'string') { throw new Error('`value` is not type of String!'); } this._filtering = value; const { _fontData } = this; if (!_fontData) { return; } const { pages } = _fontData; const samplers = {}; for (let i = 0, c = pages.size; i < c; ++i) { samplers[`sPage${i}`] = { texture: pages.get(i).file, filtering: value }; } this.overrideSamplers = samplers; } constructor() { super(); this._text = null; this._font = null; this._color = vec4.fromValues(1, 1, 1, 1); this._colorOutline = vec4.fromValues(0, 0, 0, 1); this._halign = 'left'; this._valign = 'top'; this._filtering = 'linear'; this._fontData = null; this._rebuild = true; } dispose() { super.dispose(); this._text = null; this._font = null; this._fontData = null; } onAttach() { const { overrideUniforms } = this; overrideUniforms.uColor = this._color; overrideUniforms.uColorOutline = this._colorOutline; this.overrideUniforms = overrideUniforms; } onRender(gl, renderer, deltaTime, layer) { this.ensureVertices(renderer); const { _text, _fontData } = this; if (!!_text && _text !== '' && !!_fontData) { super.onRender(gl, renderer, deltaTime); } } onPropertySerialize(name, value) { if (name === 'color' || name === 'colorOutline') { return [ ...value ]; } else if (name === 'overrideUniforms') { const result = super.onPropertySerialize(name, value); if (!result) { return null; } delete result.uColor; delete result.uColorOutline; return Object.keys(result).length > 0 ? result : null; } else if (name === 'overrideSamplers') { const result = super.onPropertySerialize(name, value); if (!result) { return null; } for (const key in result) { if (key.indexOf('sPage') === 0) { delete result[key]; } } return Object.keys(result).length > 0 ? result : null; } else { return super.onPropertySerialize(name, value); } } ensureVertices(renderer) { if (!this._rebuild) { return; } this._rebuild = false; const { _text, _fontData, _halign, _valign, _filtering } = this; if (!_text || _text === '' || !_fontData) { this.vertices = [0]; this.indices = [0, 0, 0]; return; } const { common, pages, chars } = _fontData; const { lineHeight, scaleW, scaleH } = common; const vertices = []; const indices = []; const samplers = {}; for (let i = 0, c = pages.size; i < c; ++i) { samplers[`sPage${i}`] = { texture: pages.get(i).file, filtering: _filtering }; } let x = 0; let y = 0; let lineStartPos = 0; for (let i = 0, c = _text.length, pos = 0; i < c; ++i) { const code = _text.charCodeAt(i); if (code === 10 || code === 13) { const { length } = vertices; if (_halign === 'right') { for (let j = lineStartPos; j < length; j += 5) { vertices[j] -= x; } } else if (_halign === 'center') { for (let j = lineStartPos; j < length; j += 5) { vertices[j] -= x * 0.5; } } x = 0; y += lineHeight; lineStartPos = vertices.length; continue; } const char = chars.get(code); if (!char) { continue; } const xs = x + char.xoffset; const ys = y + char.yoffset; const xe = xs + char.width; const ye = ys + char.height; const txs = char.x / scaleW; const tys = char.y / scaleH; const txe = (char.x + char.width) / scaleW; const tye = (char.y + char.height) / scaleH; vertices.push( xs, ys, txs, tys, char.page | 0, xe, ys, txe, tys, char.page | 0, xe, ye, txe, tye, char.page | 0, xs, ye, txs, tye, char.page | 0 ); indices.push( pos, pos + 1, pos + 2, pos + 2, pos + 3, pos ); pos += 4; x += char.xadvance; } const { length } = vertices; if (_halign === 'right') { for (let j = lineStartPos; j < length; j += 5) { vertices[j] -= x; } } else if (_halign === 'center') { for (let j = lineStartPos; j < length; j += 5) { vertices[j] -= x * 0.5; } } if (_valign === 'bottom') { for (let j = 1; j < length; j += 5) { vertices[j] -= y + lineHeight; } } else if (_valign === 'middle') { for (let j = 1; j < length; j += 5) { vertices[j] -= (y + lineHeight) * 0.5; } } this.vertices = vertices; this.indices = indices; this.overrideSamplers = samplers; } } </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>