oxygen-core

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <base data-ice="baseUrl" href="../../../../"> <title data-ice="title">src/systems/AssetSystem/index.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/systems/AssetSystem/index.js</h1> <pre class="source-code line-number raw-source-code"><code class="prettyprint linenums" data-ice="content">import System from '../System'; import Asset from './Asset'; import Events from '../../utils/Events'; import parser from '../../utils/jsonParser'; export { Asset }; const _pathRegex = /(\w+)(\:\/\/)(.*)/; /** * Assets database and loader. * * @example * const system = new AssetSystem('assets/', { cache: 'no-store' }, AssetSystem.fetchArrayView); */ export default class AssetSystem extends System { /** * Default browser fetch mechanism. * * @param {*} args - Fetch engine parameters. * * @return {Promise} Promise that fetches file. */ static fetch(...args) { return fetch(...args); } /** * Custom fetch mechanism that loads data from array view. * * @param {ArrayBufferView} view - Data array buffer view. * @param {string} path - Asset path. * @param {*} options - Fetch engine options. * @param {Function} fallbackEngine - Fallback fetch engine. * * @return {Promise} Promise that fetches file from array view. */ static fetchArrayView(view, path, options = {}, fallbackEngine = null) { if (!!view && !ArrayBuffer.isView(view)) { throw new Error('`view` is not type of ArrayView!'); } if (typeof path !== 'string') { throw new Error('`path` is not type of String!'); } if (!!fallbackEngine && !(fallbackEngine instanceof Function)) { throw new Error('`fallbackEngine` is not type of Function!'); } try { if (!view) { if (!!fallbackEngine) { return fallbackEngine(path, options); } else { return Promise.resolve(new Response(new Blob(), { status: 404 })); } } else { return Promise.resolve( new Response(new Blob([ view ]), { status: 200 }) ); } } catch(error) { return Promise.reject(error); } } /** * Web fetch mechanism generator that loads data from specified address. * * @param {string} address - Assets hosting address. * @param {Function} fallbackEngine - Fallback fetch engine. * * @return {Function} Function that fetches file from web. */ static makeFetchEngineWeb(address, fallbackEngine = AssetSystem.fetch) { if (typeof address !== 'string') { throw new Error('`address` is not type of String!'); } return (path, options) => AssetSystem.fetch( `${address}/${path}`, options, fallbackEngine ); } /** @type {string} */ get pathPrefix() { return this._pathPrefix; } /** @type {*} */ get fetchOptions() { return this._fetchOptions; } /** @type {Function} */ get fetchEngine() { return this._fetchEngine; } /** @type {Function} */ set fetchEngine(value) { if (!(value instanceof Function)) { throw new Error('`value` is not type of Function!'); } this._fetchEngine = value; } /** @type {Events} */ get events() { return this._events; } /** * Constructor. * * @param {string|null} pathPrefix - Path prefix used for every requested asset or null no path prefix. * @param {*|null} fetchOptions - Custom fetch options or null if default will be used. * @param {Function|null} fetchEngine - Custom fetch engine or null if default will be used. */ constructor(pathPrefix, fetchOptions, fetchEngine) { super(); if (!!pathPrefix && typeof pathPrefix !== 'string') { throw new Error('`pathPrefix` is not type of String!'); } this._pathPrefix = pathPrefix || ''; this._fetchOptions = fetchOptions || {}; this._fetchEngine = fetchEngine || AssetSystem.fetch; this._assets = new Map(); this._loaders = new Map(); this._events = new Events(); this._loaded = 0; this._toLoad = 0; } /** * Destructor (dispose internal resources and clear assets database). * * @example * system.dispose(); * system = null; */ dispose() { const { _assets, _loaders, _events } = this; for (const asset of _assets.values()) { asset.dispose(); } _assets.clear(); _loaders.clear(); _events.dispose(); } /** * Register assets loader under given protocol. * * @param {string} protocol - Assets loader protocol name. * @param {Function} assetConstructor - Asset factory. * * @example * system.registerProtocol('json', JSONAsset.factory); */ registerProtocol(protocol, assetConstructor) { if (typeof protocol !== 'string') { throw new Error('`protocol` is not type of String!'); } if (!(assetConstructor instanceof Function)) { throw new Error('`assetConstructor` is not type of Function!'); } const { _loaders } = this; if (_loaders.has(protocol)) { throw new Error(`There is already registered protocol: ${protocol}`); } _loaders.set(protocol, assetConstructor); } /** * Unregister given assets loader protocol. * * @param {string} protocol - Assets loader protocol name. * * @example * system.unregisterProtocol('json'); */ unregisterProtocol(protocol) { if (typeof protocol !== 'string') { throw new Error('`protocol` is not type of String!'); } if (!this._loaders.delete(protocol)) { throw new Error(`There is no registered protocol: ${protocol}`); } } /** * Get asset by it's full path. * * @param {string} path - Asset path (with protocol). * * @return {Asset|null} Asset instance if found or null otherwise. * * @example * const config = system.get('json://config.json'); */ get(path) { if (typeof path !== 'string') { throw new Error('`path` is not type of String!'); } return this._assets.get(path) || null; } /** * Load asset from given path. * * @param {string} path - Asset path (with protocol). * * @return {Promise} Promise of fetch engine loader. * * @example * system.load('json://config.json').then(asset => console.log(asset.data)); */ load(path) { this._events.trigger('progress', this._loaded, this._toLoad); ++this._toLoad; return this._load(path) .then(asset => { ++this._loaded; this._events.trigger('progress', this._loaded, this._toLoad); --this._loaded; --this._toLoad; this._events.trigger('progress', this._loaded, this._toLoad); return asset; }) .catch(error => { ++this._loaded; this._events.trigger('progress', this._loaded, this._toLoad); --this._loaded; --this._toLoad; this._events.trigger('progress', this._loaded, this._toLoad); throw error; }); } /** * Load list of assets in sequence (one by one). * * @param {Array.<string>} paths - Array of assets paths. * * @return {Promise} Promise of fetch engine loader. * * @example * const list = [ 'json://config.json', 'text://hello.txt' ]; * system.loadSequence(list).then(assets => console.log(assets.map(a => a.data))); */ async loadSequence(paths) { if (!(paths instanceof Array)) { throw new Error('`paths` is not type of Array!'); } const result = []; this._events.trigger('progress', this._loaded, this._toLoad); this._toLoad += paths.length; for (let i = 0, c = paths.length; i < c; ++i) { result.push( await this._load(paths[i]) .then(asset => { ++this._loaded; this._events.trigger('progress', this._loaded, this._toLoad); return asset; }) .catch(error => { ++this._loaded; this._events.trigger('progress', this._loaded, this._toLoad); throw error; }) ); } this._loaded -= paths.length; this._toLoad -= paths.length; this._events.trigger('progress', this._loaded, this._toLoad); return result; } /** * Load list of assets possibly all at the same time (asynchronously). * * @param {Array.<string>} paths - Array of assets paths. * * @return {Promise} Promise of fetch engine loader. * * @example * const list = [ 'json://config.json', 'text://hello.txt' ]; * system.loadAll(list).then(assets => console.log(assets.map(a => a.data))); */ async loadAll(paths) { if (!(paths instanceof Array)) { throw new Error('`paths` is not type of Array!'); } this._events.trigger('progress', this._loaded, this._toLoad); this._toLoad += paths.length; return Promise.all(paths.map( path => this._load(path) .then(asset => { ++this._loaded; this._events.trigger('progress', this._loaded, this._toLoad); return asset; }) .catch(error => { ++this._loaded; this._events.trigger('progress', this._loaded, this._toLoad); throw error; }) )) .then(assets => { this._loaded -= paths.length; this._toLoad -= paths.length; this._events.trigger('progress', this._loaded, this._toLoad); return assets; }) .catch(error => { this._loaded -= paths.length; this._toLoad -= paths.length; this._events.trigger('progress', this._loaded, this._toLoad); throw error; }); } /** * Load asset from given path with specified fetch engine. * * @param {string} path - Asset path (with protocol). * @param {Function} fetchEngine - Fetch engine used to fetch asset. * * @return {Promise} Promise of fetch engine loader. * * @example * system.loadWithFetchEngine('json://config.json', AssetSystem.fetch).then(asset => console.log(asset.data)); */ async loadWithFetchEngine(path, fetchEngine) { const fe = this.fetchEngine; this.fetchEngine = fetchEngine; const result = await this.load(path); this.fetchEngine = fe; return result; } /** * Load list of assets in sequence (one by one) with specified fetch engine. * * @param {Array.<string>} paths - Array of assets paths. * @param {Function} fetchEngine - Fetch engine used to fetch assets. * * @return {Promise} Promise of fetch engine loader. * * @example * const list = [ 'json://config.json', 'text://hello.txt' ]; * system.loadSequenceWithFetchEngine(list, AssetSystem.fetch).then(assets => console.log(assets.map(a => a.data))); */ async loadSequenceWithFetchEngine(paths, fetchEngine) { const fe = this.fetchEngine; this.fetchEngine = fetchEngine; const result = await this.loadSequence(paths); this.fetchEngine = fe; return result; } /** * Load list of assets possibly all at the same time (asynchronously) with specified fetch engine. * * @param {Array.<string>} paths - Array of assets paths. * @param {Function} fetchEngine - Fetch engine used to fetch assets. * * @return {Promise} Promise of fetch engine loader. * * @example * const list = [ 'json://config.json', 'text://hello.txt' ]; * system.loadAllWithFetchEngine(list, AssetSystem.fetch).then(assets => console.log(assets.map(a => a.data))); */ async loadAllWithFetchEngine(paths, fetchEngine) { const fe = this.fetchEngine; this.fetchEngine = fetchEngine; const result = await this.loadAll(paths); this.fetchEngine = fe; return result; } /** * Unload asset by path and remove from database. * * @param {string} path - Asset path (with protocol). * * @example * system.unload('json://config.json'); */ unload(path) { const { _assets } = this; const asset = _assets.get(path); if (!asset) { throw new Error(`Trying to unload non-existing asset: ${path}`); } this._events.trigger('unload', asset); asset.dispose(); _assets.delete(path); } /** * Unload all assets from paths list. * * @param {Array.<string>} paths - Array of assets paths. */ unloadAll(paths) { if (!(paths instanceof Array)) { throw new Error('`paths` is not type of Array!'); } for (const path of paths) { this.unload(path); } } /** * @override */ onUnregister() { dispose(); } _load(path) { if (typeof path !== 'string') { throw new Error('`path` is not type of String!'); } const found = path.lastIndexOf('|'); if (found < 0) { return this._loadPart(path); } else { const prefix = path.substr(0, found).trim(); const container = this._assets.get(prefix); if (!container) { throw new Error(`There is no loaded subassets container: ${prefix}`); } const oldEngine = this.fetchEngine; const postfix = path.substr(found + 1).trim(); this.fetchEngine = container.makeFetchEngine(oldEngine); return this._loadPart(postfix, path).finally(() => { this.fetchEngine = oldEngine; }); } } _loadPart(path, key = null) { if (typeof path !== 'string') { throw new Error('`path` is not type of String!'); } let options = null; const found = path.indexOf('?'); if (found >= 0) { options = parser.parse(path.substr(found + 1)); path = path.substr(0, found); } if (!key) { key = path; } const result = _pathRegex.exec(path); if (!result) { throw new Error(`\`path\` does not conform asset path name rules: ${path}`); } const [ , protocol,, filename ] = result; const loader = this._loaders.get(protocol); if (!loader) { throw new Error(`There is no registered protocol: ${protocol}`); } const { _assets } = this; if (_assets.has(path)) { return Promise.resolve(_assets.get(path)); } const asset = loader(this, protocol, filename, options); if (!(asset instanceof Asset)) { throw new Error( `Cannot create asset for file: ${filename} of protocol: ${protocol}` ); } return asset.load().then(data => { this._assets.set(key, asset); this._events.trigger('load', asset); return data; }); } } </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>