scrawl-canvas
Version:
Version 8.9.4 - 19 Nov 2022
1,059 lines (684 loc) • 43.4 kB
HTML
<html>
<head>
<title>SpriteAsset factory</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
<link rel="stylesheet" media="all" href="../../docco.css" />
</head>
<body>
<div id="container">
<div id="background"></div>
<ul id="jump_to">
<li>
<a class="large" href="javascript:void(0);">Jump To …</a>
<a class="small" href="javascript:void(0);">+</a>
<div id="jump_wrapper">
<div id="jump_page_wrapper">
<div id="jump_page">
<a class="source" href="../core/animationloop.html">
./source/core/animationloop.js
</a>
<a class="source" href="../core/document.html">
./source/core/document.js
</a>
<a class="source" href="../core/events.html">
./source/core/events.js
</a>
<a class="source" href="../core/init.html">
./source/core/init.js
</a>
<a class="source" href="../core/library.html">
./source/core/library.js
</a>
<a class="source" href="../core/random-seed.html">
./source/core/random-seed.js
</a>
<a class="source" href="../core/snippets.html">
./source/core/snippets.js
</a>
<a class="source" href="../core/userInteraction.html">
./source/core/userInteraction.js
</a>
<a class="source" href="../core/utilities.html">
./source/core/utilities.js
</a>
<a class="source" href="action.html">
./source/factory/action.js
</a>
<a class="source" href="anchor.html">
./source/factory/anchor.js
</a>
<a class="source" href="animation.html">
./source/factory/animation.js
</a>
<a class="source" href="bezier.html">
./source/factory/bezier.js
</a>
<a class="source" href="block.html">
./source/factory/block.js
</a>
<a class="source" href="canvas.html">
./source/factory/canvas.js
</a>
<a class="source" href="cell.html">
./source/factory/cell.js
</a>
<a class="source" href="cog.html">
./source/factory/cog.js
</a>
<a class="source" href="color.html">
./source/factory/color.js
</a>
<a class="source" href="conicGradient.html">
./source/factory/conicGradient.js
</a>
<a class="source" href="coordinate.html">
./source/factory/coordinate.js
</a>
<a class="source" href="crescent.html">
./source/factory/crescent.js
</a>
<a class="source" href="element.html">
./source/factory/element.js
</a>
<a class="source" href="emitter.html">
./source/factory/emitter.js
</a>
<a class="source" href="filter.html">
./source/factory/filter.js
</a>
<a class="source" href="filterEngine-bluenoiseData.html">
./source/factory/filterEngine-bluenoiseData.js
</a>
<a class="source" href="filterEngine.html">
./source/factory/filterEngine.js
</a>
<a class="source" href="fontAttributes.html">
./source/factory/fontAttributes.js
</a>
<a class="source" href="gradient.html">
./source/factory/gradient.js
</a>
<a class="source" href="grid.html">
./source/factory/grid.js
</a>
<a class="source" href="group.html">
./source/factory/group.js
</a>
<a class="source" href="imageAsset.html">
./source/factory/imageAsset.js
</a>
<a class="source" href="line.html">
./source/factory/line.js
</a>
<a class="source" href="lineSpiral.html">
./source/factory/lineSpiral.js
</a>
<a class="source" href="loom.html">
./source/factory/loom.js
</a>
<a class="source" href="mesh.html">
./source/factory/mesh.js
</a>
<a class="source" href="net.html">
./source/factory/net.js
</a>
<a class="source" href="noiseAsset.html">
./source/factory/noiseAsset.js
</a>
<a class="source" href="oval.html">
./source/factory/oval.js
</a>
<a class="source" href="palette.html">
./source/factory/palette.js
</a>
<a class="source" href="particle.html">
./source/factory/particle.js
</a>
<a class="source" href="particleForce.html">
./source/factory/particleForce.js
</a>
<a class="source" href="particleHistory.html">
./source/factory/particleHistory.js
</a>
<a class="source" href="particleSpring.html">
./source/factory/particleSpring.js
</a>
<a class="source" href="particleWorld.html">
./source/factory/particleWorld.js
</a>
<a class="source" href="pattern.html">
./source/factory/pattern.js
</a>
<a class="source" href="phrase.html">
./source/factory/phrase.js
</a>
<a class="source" href="picture.html">
./source/factory/picture.js
</a>
<a class="source" href="polygon.html">
./source/factory/polygon.js
</a>
<a class="source" href="polyline.html">
./source/factory/polyline.js
</a>
<a class="source" href="quadratic.html">
./source/factory/quadratic.js
</a>
<a class="source" href="quaternion.html">
./source/factory/quaternion.js
</a>
<a class="source" href="radialGradient.html">
./source/factory/radialGradient.js
</a>
<a class="source" href="rawAsset.html">
./source/factory/rawAsset.js
</a>
<a class="source" href="rdAsset.html">
./source/factory/rdAsset.js
</a>
<a class="source" href="rectangle.html">
./source/factory/rectangle.js
</a>
<a class="source" href="renderAnimation.html">
./source/factory/renderAnimation.js
</a>
<a class="source" href="shape.html">
./source/factory/shape.js
</a>
<a class="source" href="spiral.html">
./source/factory/spiral.js
</a>
<a class="source" href="spriteAsset.html">
./source/factory/spriteAsset.js
</a>
<a class="source" href="stack.html">
./source/factory/stack.js
</a>
<a class="source" href="star.html">
./source/factory/star.js
</a>
<a class="source" href="state.html">
./source/factory/state.js
</a>
<a class="source" href="tetragon.html">
./source/factory/tetragon.js
</a>
<a class="source" href="ticker.html">
./source/factory/ticker.js
</a>
<a class="source" href="tracer.html">
./source/factory/tracer.js
</a>
<a class="source" href="tween.html">
./source/factory/tween.js
</a>
<a class="source" href="unstackedElement.html">
./source/factory/unstackedElement.js
</a>
<a class="source" href="vector.html">
./source/factory/vector.js
</a>
<a class="source" href="videoAsset.html">
./source/factory/videoAsset.js
</a>
<a class="source" href="wheel.html">
./source/factory/wheel.js
</a>
<a class="source" href="../mixin/anchor.html">
./source/mixin/anchor.js
</a>
<a class="source" href="../mixin/asset.html">
./source/mixin/asset.js
</a>
<a class="source" href="../mixin/assetAdvancedFunctionality.html">
./source/mixin/assetAdvancedFunctionality.js
</a>
<a class="source" href="../mixin/assetConsumer.html">
./source/mixin/assetConsumer.js
</a>
<a class="source" href="../mixin/base.html">
./source/mixin/base.js
</a>
<a class="source" href="../mixin/cascade.html">
./source/mixin/cascade.js
</a>
<a class="source" href="../mixin/delta.html">
./source/mixin/delta.js
</a>
<a class="source" href="../mixin/displayShape.html">
./source/mixin/displayShape.js
</a>
<a class="source" href="../mixin/dom.html">
./source/mixin/dom.js
</a>
<a class="source" href="../mixin/entity.html">
./source/mixin/entity.js
</a>
<a class="source" href="../mixin/filter.html">
./source/mixin/filter.js
</a>
<a class="source" href="../mixin/mimic.html">
./source/mixin/mimic.js
</a>
<a class="source" href="../mixin/path.html">
./source/mixin/path.js
</a>
<a class="source" href="../mixin/pattern.html">
./source/mixin/pattern.js
</a>
<a class="source" href="../mixin/pivot.html">
./source/mixin/pivot.js
</a>
<a class="source" href="../mixin/position.html">
./source/mixin/position.js
</a>
<a class="source" href="../mixin/shapeBasic.html">
./source/mixin/shapeBasic.js
</a>
<a class="source" href="../mixin/shapeCurve.html">
./source/mixin/shapeCurve.js
</a>
<a class="source" href="../mixin/shapePathCalculation.html">
./source/mixin/shapePathCalculation.js
</a>
<a class="source" href="../mixin/styles.html">
./source/mixin/styles.js
</a>
<a class="source" href="../mixin/tween.html">
./source/mixin/tween.js
</a>
</div>
</div>
</li>
</ul>
<ul class="sections">
<li id="section-1">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-1">§</a>
</div>
<h1 id="spriteasset-factory">SpriteAsset factory</h1>
<p>The factory generates wrapper Objects around spritesheet <img> elements fetched from the server using an URL address.</p>
<ul>
<li>Scrawl-canvas expects every spritesheet to be accompanied by a <strong>manifest</strong>, defined in either a <code>.json</code> encoded file, or a Javascript object. There is no single source of truth for the requirements or format of manifests, so Scrawl-canvas uses its own manifest format.</li>
</ul>
<p>SpriteAssets are used by <a href="./picture.html">Picture</a> and <a href="./grid.html">Grid</a> entitys, and <a href="./pattern.html">Pattern</a> styles.</p>
<p>TODO: SpriteAssets don’t support animated <code>.gif</code> images (or if they do, then its entirely a lucky accident). Tested image formats are <code>.jpg</code> and <code>.png</code>.</p>
</div>
</li>
<li id="section-2">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-2">§</a>
</div>
<h4 id="demos">Demos:</h4>
<ul>
<li><a href="../../demo/canvas-021.html">Canvas-021</a> - Import and use spritesheets</li>
<li><a href="../../demo/canvas-023.html">Canvas-023</a> - Grid entity - using picture-based assets (image, video, sprite)</li>
</ul>
</div>
</li>
<li id="section-3">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-3">§</a>
</div>
<h4 id="imports">Imports</h4>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">import</span> { constructors } <span class="hljs-keyword">from</span> <span class="hljs-string">'../core/library.js'</span>;
<span class="hljs-keyword">import</span> { mergeOver, isa_obj, λ<span class="hljs-literal">null</span>, λ<span class="hljs-variable language_">this</span>, Ωempty } <span class="hljs-keyword">from</span> <span class="hljs-string">'../core/utilities.js'</span>;
<span class="hljs-keyword">import</span> baseMix <span class="hljs-keyword">from</span> <span class="hljs-string">'../mixin/base.js'</span>;
<span class="hljs-keyword">import</span> assetMix <span class="hljs-keyword">from</span> <span class="hljs-string">'../mixin/asset.js'</span>;</pre></div></div>
</li>
<li id="section-4">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-4">§</a>
</div>
<h4 id="spriteasset-constructor">SpriteAsset constructor</h4>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">const</span> <span class="hljs-title class_">SpriteAsset</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">items = Ωempty</span>) {
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">assetConstructor</span>(items);
<span class="hljs-keyword">return</span> <span class="hljs-variable language_">this</span>;
};</pre></div></div>
</li>
<li id="section-5">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-5">§</a>
</div>
<h4 id="spriteasset-prototype">SpriteAsset prototype</h4>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">let</span> P = <span class="hljs-title class_">SpriteAsset</span>.<span class="hljs-property"><span class="hljs-keyword">prototype</span></span> = <span class="hljs-title class_">Object</span>.<span class="hljs-title function_">create</span>(<span class="hljs-title class_">Object</span>.<span class="hljs-property"><span class="hljs-keyword">prototype</span></span>);
P.<span class="hljs-property">type</span> = <span class="hljs-string">'Sprite'</span>;
P.<span class="hljs-property">lib</span> = <span class="hljs-string">'asset'</span>;
P.<span class="hljs-property">isArtefact</span> = <span class="hljs-literal">false</span>;
P.<span class="hljs-property">isAsset</span> = <span class="hljs-literal">true</span>;</pre></div></div>
</li>
<li id="section-6">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-6">§</a>
</div>
<h4 id="mixins">Mixins</h4>
<ul>
<li><a href="../mixin/base.html">base</a></li>
<li><a href="../mixin/asset.html">asset</a></li>
</ul>
</div>
<div class="content"><div class='highlight'><pre>P = <span class="hljs-title function_">baseMix</span>(P);
P = <span class="hljs-title function_">assetMix</span>(P);</pre></div></div>
</li>
<li id="section-7">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-7">§</a>
</div>
<h4 id="spriteasset-attributes">SpriteAsset attributes</h4>
<ul>
<li>Attributes defined in the <a href="../mixin/base.html">base mixin</a>: <strong>name</strong>.</li>
<li>Attributes defined in the <a href="../mixin/asset.html">asset mixin</a>: <strong>source, subscribers</strong>.</li>
</ul>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">let</span> defaultAttributes = {</pre></div></div>
</li>
<li id="section-8">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-8">§</a>
</div>
<p><strong>manifest</strong> - TODO - documentation</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-attr">manifest</span>: <span class="hljs-literal">null</span>,
};
P.<span class="hljs-property">defs</span> = <span class="hljs-title function_">mergeOver</span>(P.<span class="hljs-property">defs</span>, defaultAttributes);</pre></div></div>
</li>
<li id="section-9">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-9">§</a>
</div>
<h4 id="packet-management">Packet management</h4>
<p>Assets do not take part in the packet or clone systems; they can, however, be used for importing and actioning packets as they retain those base functions</p>
</div>
<div class="content"><div class='highlight'><pre>P.<span class="hljs-property">saveAsPacket</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) {
<span class="hljs-keyword">return</span> [<span class="hljs-variable language_">this</span>.<span class="hljs-property">name</span>, <span class="hljs-variable language_">this</span>.<span class="hljs-property">type</span>, <span class="hljs-variable language_">this</span>.<span class="hljs-property">lib</span>, {}];
};
P.<span class="hljs-property">stringifyFunction</span> = λ<span class="hljs-literal">null</span>;
P.<span class="hljs-property">processPacketOut</span> = λ<span class="hljs-literal">null</span>;
P.<span class="hljs-property">finalizePacketOut</span> = λ<span class="hljs-literal">null</span>;</pre></div></div>
</li>
<li id="section-10">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-10">§</a>
</div>
<h4 id="clone-management">Clone management</h4>
</div>
<div class="content"><div class='highlight'><pre>P.<span class="hljs-property">clone</span> = λ<span class="hljs-variable language_">this</span>;</pre></div></div>
</li>
<li id="section-11">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-11">§</a>
</div>
<h4 id="kill-management">Kill management</h4>
<p>No additional kill functionality required</p>
</div>
</li>
<li id="section-12">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-12">§</a>
</div>
<h4 id="get-set-deltaset">Get, Set, deltaSet</h4>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">let</span> G = P.<span class="hljs-property">getters</span>,
S = P.<span class="hljs-property">setters</span>,
D = P.<span class="hljs-property">deltaSetters</span>;</pre></div></div>
</li>
<li id="section-13">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-13">§</a>
</div>
<p><strong>source</strong></p>
</div>
<div class="content"><div class='highlight'><pre>S.<span class="hljs-property">source</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">items = []</span>) {
<span class="hljs-keyword">if</span> (items && items[<span class="hljs-number">0</span>]) {
<span class="hljs-keyword">if</span> (!<span class="hljs-variable language_">this</span>.<span class="hljs-property">sourceHold</span>) <span class="hljs-variable language_">this</span>.<span class="hljs-property">sourceHold</span> = {};
<span class="hljs-keyword">let</span> hold = <span class="hljs-variable language_">this</span>.<span class="hljs-property">sourceHold</span>;
items.<span class="hljs-title function_">forEach</span>(<span class="hljs-function"><span class="hljs-params">item</span> =></span> {
<span class="hljs-keyword">let</span> name = item.<span class="hljs-property">id</span> || item.<span class="hljs-property">name</span>;
<span class="hljs-keyword">if</span> (name) hold[name] = item;
})
<span class="hljs-variable language_">this</span>.<span class="hljs-property">source</span> = items[<span class="hljs-number">0</span>];
<span class="hljs-variable language_">this</span>.<span class="hljs-property">sourceNaturalWidth</span> = items[<span class="hljs-number">0</span>].<span class="hljs-property">naturalWidth</span>;
<span class="hljs-variable language_">this</span>.<span class="hljs-property">sourceNaturalHeight</span> = items[<span class="hljs-number">0</span>].<span class="hljs-property">naturalHeight</span>;
<span class="hljs-variable language_">this</span>.<span class="hljs-property">sourceLoaded</span> = items[<span class="hljs-number">0</span>].<span class="hljs-property">complete</span>;
}
};</pre></div></div>
</li>
<li id="section-14">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-14">§</a>
</div>
<h4 id="prototype-functions">Prototype functions</h4>
</div>
</li>
<li id="section-15">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-15">§</a>
</div>
<p>Sprite assets do not use the <code>checkSource</code> function. Instead, Picture entitys will interrogate the checkSpriteFrame function (defined in mixin/assetConsumer.js)</p>
</div>
<div class="content"><div class='highlight'><pre>P.<span class="hljs-property">checkSource</span> = λ<span class="hljs-literal">null</span>;</pre></div></div>
</li>
<li id="section-16">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-16">§</a>
</div>
<p><code>gettableSpriteAssetAtributes</code>, <code>settableSpriteAssetAtributes</code> - exported Arrays.</p>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">const</span> gettableSpriteAssetAtributes = [];
<span class="hljs-keyword">const</span> settableSpriteAssetAtributes = [];</pre></div></div>
</li>
<li id="section-17">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-17">§</a>
</div>
<h4 id="importing-spritesheets-into-scrawl-canvas">Importing spritesheets into Scrawl-canvas</h4>
</div>
</li>
<li id="section-18">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-18">§</a>
</div>
<p><code>importSprite</code> - load sprite images and manifest files from a remote server and create assets from them</p>
<p>Arguments can be a comma-separated list of String urls. For example, for a spritesheet at server url <code>http://www.example.com/path/to/image/flower.jpg</code>:</p>
<ul>
<li>Will attempt to give the new spriteAsset object, and img element, a name/id value of eg ‘flower’ (but not guaranteed)</li>
<li>Will attempt to load the associated manifest JSON file, which it expects to find at ‘/path/to/image/flower.json’</li>
<li>Will not add the new img element to the DOM</li>
</ul>
<p>Note: if using an url string path to import the spritesheet image, a manifest JSON file with the same filename (ending in <code>.json</code>) in the same folder <strong>must</strong> also be supplied!</p>
</div>
</li>
<li id="section-19">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-19">§</a>
</div>
<p>Alternatively, the arguments can include an object with the following attributes:</p>
<ul>
<li><strong>name</strong> string.</li>
<li><strong>imageSrc</strong> (required) image url string, or an Array of such strings (for sprites using frames from multiple spritesheets).</li>
<li><strong>manifestSrc</strong> (required) JSON manifest file url string, or an object detailing the manifest.</li>
<li><strong>parent</strong> CSS search string - if set, Scrawl-canvas will attempt to append the new img element to the corresponding DOM element.</li>
<li><strong>isVisible</strong> boolean - if true, and new img element has been added to DOM, make that image visible; default is false.</li>
<li><strong>className</strong> string - list of classes to be added to the new img element.</li>
</ul>
<p>Note: strings and object arguments can be mixed - Scrawl-canvas will interrrogate each argument in turn and take appropriate action to load the assets.</p>
<p>The <strong>manifest</strong> must resolve to an object containing a set of attributes which represent ‘tracks’ - sequences of frames which, when run, will result in a particular animation (eg ‘walk’, ‘turn’, ‘fire-arrow’, ‘die’, etc). Each track attribute is an Array of arrays, with each sub-array supplying details of the source file, copy start coordinates, and copy dimensions for each frame:</p>
<pre><code><span class="hljs-attr">manifestSrc</span>: {
<span class="hljs-string">"default"</span> : [
[<span class="hljs-string">'picturename'</span>, copyStartX, copyStartY, width, height]
],
<span class="hljs-string">"walk"</span>: [
[<span class="hljs-string">'picturename'</span>, copyStartX, copyStartY, width, height]
[<span class="hljs-string">'picturename'</span>, copyStartX, copyStartY, width, height]
[<span class="hljs-string">'picturename'</span>, copyStartX, copyStartY, width, height]
],
}
</code></pre>
<ul>
<li>Note that the frames for any track can be spread across more than one spritesheet image file.
Note also that the <strong>default</strong> track is mandatory, and should consist of at least one frame.</li>
</ul>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">const</span> importSprite = <span class="hljs-keyword">function</span> (<span class="hljs-params">...args</span>) {
<span class="hljs-keyword">let</span> reg = <span class="hljs-regexp">/.*\/(.*?)\./</span>,
fileTlas = <span class="hljs-regexp">/\.(jpeg|jpg|png|gif|webp|svg|JPEG|JPG|PNG|GIF|WEBP|SVG)/</span>,
results = [];
args.<span class="hljs-title function_">forEach</span>(<span class="hljs-function"><span class="hljs-params">item</span> =></span> {</pre></div></div>
</li>
<li id="section-20">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-20">§</a>
</div>
<p>Load the sprite image in the normal way</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">let</span> name, urls, className, visibility, manifest,
parent = <span class="hljs-literal">false</span>;
<span class="hljs-keyword">let</span> flag = <span class="hljs-literal">false</span>;
<span class="hljs-keyword">if</span> (item.<span class="hljs-property">substring</span>) {
<span class="hljs-keyword">let</span> match = reg.<span class="hljs-title function_">exec</span>(item);
name = (match && match[<span class="hljs-number">1</span>]) ? match[<span class="hljs-number">1</span>] : <span class="hljs-string">''</span>;
urls = [item];
className = <span class="hljs-string">''</span>;
visibility = <span class="hljs-literal">false</span>;
manifest = item.<span class="hljs-title function_">replace</span>(fileTlas, <span class="hljs-string">'.json'</span>);
flag = <span class="hljs-literal">true</span>;
}
<span class="hljs-keyword">else</span> {
<span class="hljs-keyword">if</span> (!<span class="hljs-title function_">isa_obj</span>(item) || !item.<span class="hljs-property">imageSrc</span> || !item.<span class="hljs-property">manifestSrc</span>) results.<span class="hljs-title function_">push</span>(<span class="hljs-literal">false</span>);
<span class="hljs-keyword">else</span> {
name = item.<span class="hljs-property">name</span> || <span class="hljs-string">''</span>;
urls = <span class="hljs-title class_">Array</span>.<span class="hljs-title function_">isArray</span>(item.<span class="hljs-property">imageSrc</span>) ? item.<span class="hljs-property">imageSrc</span> : [item.<span class="hljs-property">imageSrc</span>];
manifest = item.<span class="hljs-property">manifestSrc</span>;
className = item.<span class="hljs-property">className</span> || <span class="hljs-string">''</span>;
visibility = item.<span class="hljs-property">visibility</span> || <span class="hljs-literal">false</span>;
parent = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">querySelector</span>(item.<span class="hljs-property">parent</span>);
flag = <span class="hljs-literal">true</span>;
}
}
<span class="hljs-keyword">if</span> (flag) {
<span class="hljs-keyword">let</span> image = <span class="hljs-title function_">makeSpriteAsset</span>({
<span class="hljs-attr">name</span>: name,
});</pre></div></div>
</li>
<li id="section-21">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-21">§</a>
</div>
<p>Get manifest</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">if</span> (<span class="hljs-title function_">isa_obj</span>(manifest)) image.<span class="hljs-property">manifest</span> = manifest;
<span class="hljs-keyword">else</span> {
<span class="hljs-title function_">fetch</span>(manifest)
.<span class="hljs-title function_">then</span>(<span class="hljs-function"><span class="hljs-params">response</span> =></span> {
<span class="hljs-keyword">if</span> (response.<span class="hljs-property">status</span> !== <span class="hljs-number">200</span>) <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">Error</span>(<span class="hljs-string">'Failed to load manifest'</span>);
<span class="hljs-keyword">return</span> response.<span class="hljs-title function_">json</span>();
})
.<span class="hljs-title function_">then</span>(<span class="hljs-function"><span class="hljs-params">jsonString</span> =></span> image.<span class="hljs-property">manifest</span> = jsonString)
.<span class="hljs-title function_">catch</span>(<span class="hljs-function"><span class="hljs-params">err</span> =></span> <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(err.<span class="hljs-property">message</span>));
}
<span class="hljs-keyword">let</span> imgArray = [];
urls.<span class="hljs-title function_">forEach</span>(<span class="hljs-function"><span class="hljs-params">url</span> =></span> {
<span class="hljs-keyword">let</span> img = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">createElement</span>(<span class="hljs-string">'img'</span>),
filename, match;
<span class="hljs-keyword">if</span> (fileTlas.<span class="hljs-title function_">test</span>(url)) {
match = reg.<span class="hljs-title function_">exec</span>(url);
filename = (match && match[<span class="hljs-number">1</span>]) ? match[<span class="hljs-number">1</span>] : <span class="hljs-string">''</span>;
}
img.<span class="hljs-property">name</span> = filename || name;
img.<span class="hljs-property">className</span> = className;
img.<span class="hljs-property">crossorigin</span> = <span class="hljs-string">'anonymous'</span>;
img.<span class="hljs-property">style</span>.<span class="hljs-property">display</span> = (visibility) ? <span class="hljs-string">'block'</span> : <span class="hljs-string">'none'</span>;
<span class="hljs-keyword">if</span> (parent) parent.<span class="hljs-title function_">appendChild</span>(img);
img.<span class="hljs-property">src</span> = url;
imgArray.<span class="hljs-title function_">push</span>(img);
});
image.<span class="hljs-title function_">set</span>({
<span class="hljs-attr">source</span>: imgArray,
});
results.<span class="hljs-title function_">push</span>(name);
}
<span class="hljs-keyword">else</span> results.<span class="hljs-title function_">push</span>(<span class="hljs-literal">false</span>);
});
<span class="hljs-keyword">return</span> results;
};</pre></div></div>
</li>
<li id="section-22">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-22">§</a>
</div>
<p>TODO: Scrawl-canvas does not yet support importing spritesheets defined in the web page HTML code</p>
</div>
</li>
<li id="section-23">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-23">§</a>
</div>
<h4 id="factory">Factory</h4>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">const</span> makeSpriteAsset = <span class="hljs-keyword">function</span> (<span class="hljs-params">items</span>) {
<span class="hljs-keyword">if</span> (!items) <span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>;
<span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">SpriteAsset</span>(items);
};
constructors.<span class="hljs-property">SpriteAsset</span> = <span class="hljs-title class_">SpriteAsset</span>;</pre></div></div>
</li>
<li id="section-24">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-24">§</a>
</div>
<h4 id="exports">Exports</h4>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">export</span> {
makeSpriteAsset,
gettableSpriteAssetAtributes,
settableSpriteAssetAtributes,
importSprite,
};</pre></div></div>
</li>
<li id="section-25">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-25">§</a>
</div>
<p>Examples used in Demos</p>
<ul>
<li>Dino - <a href="https://www.gameart2d.com/free-dino-sprites.html">https://www.gameart2d.com/free-dino-sprites.html</a></li>
<li>Wolf - <a href="https://opengameart.org/content/lpc-wolf-animation">https://opengameart.org/content/lpc-wolf-animation</a></li>
<li>Wall tiles - <a href="https://opengameart.org/content/2d-wall-tilesets">https://opengameart.org/content/2d-wall-tilesets</a></li>
<li>Bunny sprite - <a href="https://opengameart.org/content/bunny-sprite">https://opengameart.org/content/bunny-sprite</a></li>
<li>Cat - <a href="https://www.kisspng.com/png-walk-cycle-css-animations-drawing-sprite-sprite-1064760/">https://www.kisspng.com/png-walk-cycle-css-animations-drawing-sprite-sprite-1064760/</a></li>
</ul>
</div>
</li>
</ul>
</div>
</body>
</html>