scratch-render

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Drawable - Documentation</title> <script src="scripts/prettify/prettify.js"></script> <script src="scripts/prettify/lang-css.js"></script>  <link type="text/css" rel="stylesheet" href="styles/prettify.css"> <link type="text/css" rel="stylesheet" href="styles/jsdoc.css"> </head> <body> <input type="checkbox" id="nav-trigger" class="nav-trigger" /> <label for="nav-trigger" class="navicon-button x"> <div class="navicon"></div> </label> <label for="nav-trigger" class="overlay"></label> <nav> <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BitmapSkin.html">BitmapSkin</a><ul class='methods'><li data-type='method'><a href="BitmapSkin.html#._getBitmapSize">_getBitmapSize</a></li><li data-type='method'><a href="BitmapSkin.html#calculateRotationCenter">calculateRotationCenter</a></li><li data-type='method'><a href="BitmapSkin.html#dispose">dispose</a></li><li data-type='method'><a href="BitmapSkin.html#getTexture">getTexture</a></li><li data-type='method'><a href="BitmapSkin.html#getUniforms">getUniforms</a></li><li data-type='method'><a href="BitmapSkin.html#setBitmap">setBitmap</a></li><li data-type='method'><a href="BitmapSkin.html#setRotationCenter">setRotationCenter</a></li></ul></li><li><a href="Drawable.html">Drawable</a><ul class='methods'><li data-type='method'><a href="Drawable.html#.color3bToID">color3bToID</a></li><li data-type='method'><a href="Drawable.html#.color4fFromID">color4fFromID</a></li><li data-type='method'><a href="Drawable.html#_calculateTransform">_calculateTransform</a></li><li data-type='method'><a href="Drawable.html#_skinWasAltered">_skinWasAltered</a></li><li data-type='method'><a href="Drawable.html#dispose">dispose</a></li><li data-type='method'><a href="Drawable.html#getAABB">getAABB</a></li><li data-type='method'><a href="Drawable.html#getBounds">getBounds</a></li><li data-type='method'><a href="Drawable.html#getEnabledEffects">getEnabledEffects</a></li><li data-type='method'><a href="Drawable.html#getFastBounds">getFastBounds</a></li><li data-type='method'><a href="Drawable.html#getUniforms">getUniforms</a></li><li data-type='method'><a href="Drawable.html#getVisible">getVisible</a></li><li data-type='method'><a href="Drawable.html#needsConvexHullPoints">needsConvexHullPoints</a></li><li data-type='method'><a href="Drawable.html#setConvexHullDirty">setConvexHullDirty</a></li><li data-type='method'><a href="Drawable.html#setConvexHullPoints">setConvexHullPoints</a></li><li data-type='method'><a href="Drawable.html#setTransformDirty">setTransformDirty</a></li><li data-type='method'><a href="Drawable.html#updateProperties">updateProperties</a></li></ul></li><li><a href="PenSkin.html">PenSkin</a><ul class='methods'><li data-type='method'><a href="PenSkin.html#_setAttributes">_setAttributes</a></li><li data-type='method'><a href="PenSkin.html#_setCanvasSize">_setCanvasSize</a></li><li data-type='method'><a href="PenSkin.html#calculateRotationCenter">calculateRotationCenter</a></li><li data-type='method'><a href="PenSkin.html#clear">clear</a></li><li data-type='method'><a href="PenSkin.html#dispose">dispose</a></li><li data-type='method'><a href="PenSkin.html#drawLine">drawLine</a></li><li data-type='method'><a href="PenSkin.html#drawPoint">drawPoint</a></li><li data-type='method'><a href="PenSkin.html#drawStamp">drawStamp</a></li><li data-type='method'><a href="PenSkin.html#getTexture">getTexture</a></li><li data-type='method'><a href="PenSkin.html#getUniforms">getUniforms</a></li><li data-type='method'><a href="PenSkin.html#onNativeSizeChanged">onNativeSizeChanged</a></li><li data-type='method'><a href="PenSkin.html#setRotationCenter">setRotationCenter</a></li></ul></li><li><a href="Rectangle.html">Rectangle</a><ul class='methods'><li data-type='method'><a href="Rectangle.html#clamp">clamp</a></li><li data-type='method'><a href="Rectangle.html#contains">contains</a></li><li data-type='method'><a href="Rectangle.html#initFromBounds">initFromBounds</a></li><li data-type='method'><a href="Rectangle.html#initFromPointsAABB">initFromPointsAABB</a></li><li data-type='method'><a href="Rectangle.html#intersects">intersects</a></li><li data-type='method'><a href="Rectangle.html#snapToInt">snapToInt</a></li></ul></li><li><a href="RenderWebGL.html">RenderWebGL</a><ul class='methods'><li data-type='method'><a href="RenderWebGL.html#_createGeometry">_createGeometry</a></li><li data-type='method'><a href="RenderWebGL.html#_drawThese">_drawThese</a></li><li data-type='method'><a href="RenderWebGL.html#_filterCandidatesTouching">_filterCandidatesTouching</a></li><li data-type='method'><a href="RenderWebGL.html#_getConvexHullPointsForDrawable">_getConvexHullPointsForDrawable</a></li><li data-type='method'><a href="RenderWebGL.html#_setNativeSize">_setNativeSize</a></li><li data-type='method'><a href="RenderWebGL.html#_touchingBounds">_touchingBounds</a></li><li data-type='method'><a href="RenderWebGL.html#createBitmapSkin">createBitmapSkin</a></li><li data-type='method'><a href="RenderWebGL.html#createDrawable">createDrawable</a></li><li data-type='method'><a href="RenderWebGL.html#createPenSkin">createPenSkin</a></li><li data-type='method'><a href="RenderWebGL.html#createSkinFromURL">createSkinFromURL</a></li><li data-type='method'><a href="RenderWebGL.html#createSVGSkin">createSVGSkin</a></li><li data-type='method'><a href="RenderWebGL.html#destroyDrawable">destroyDrawable</a></li><li data-type='method'><a href="RenderWebGL.html#destroySkin">destroySkin</a></li><li data-type='method'><a href="RenderWebGL.html#draw">draw</a></li><li data-type='method'><a href="RenderWebGL.html#extractDrawable">extractDrawable</a></li><li data-type='method'><a href="RenderWebGL.html#getBounds">getBounds</a></li><li data-type='method'><a href="RenderWebGL.html#getFencedPositionOfDrawable">getFencedPositionOfDrawable</a></li><li data-type='method'><a href="RenderWebGL.html#getNativeSize">getNativeSize</a></li><li data-type='method'><a href="RenderWebGL.html#getSkinSize">getSkinSize</a></li><li data-type='method'><a href="RenderWebGL.html#isTouchingColor">isTouchingColor</a></li><li data-type='method'><a href="RenderWebGL.html#isTouchingDrawables">isTouchingDrawables</a></li><li data-type='method'><a href="RenderWebGL.html#onNativeSizeChanged">onNativeSizeChanged</a></li><li data-type='method'><a href="RenderWebGL.html#penClear">penClear</a></li><li data-type='method'><a href="RenderWebGL.html#penLine">penLine</a></li><li data-type='method'><a href="RenderWebGL.html#penPoint">penPoint</a></li><li data-type='method'><a href="RenderWebGL.html#penStamp">penStamp</a></li><li data-type='method'><a href="RenderWebGL.html#pick">pick</a></li><li data-type='method'><a href="RenderWebGL.html#resize">resize</a></li><li data-type='method'><a href="RenderWebGL.html#setBackgroundColor">setBackgroundColor</a></li><li data-type='method'><a href="RenderWebGL.html#setDebugCanvas">setDebugCanvas</a></li><li data-type='method'><a href="RenderWebGL.html#setDrawableOrder">setDrawableOrder</a></li><li data-type='method'><a href="RenderWebGL.html#setStageSize">setStageSize</a></li><li data-type='method'><a href="RenderWebGL.html#updateDrawableProperties">updateDrawableProperties</a></li></ul></li><li><a href="ShaderManager.html">ShaderManager</a><ul class='methods'><li data-type='method'><a href="ShaderManager.html#_buildShader">_buildShader</a></li><li data-type='method'><a href="ShaderManager.html#getShader">getShader</a></li></ul></li><li><a href="Skin.html">Skin</a><ul class='methods'><li data-type='method'><a href="Skin.html#calculateRotationCenter">calculateRotationCenter</a></li><li data-type='method'><a href="Skin.html#dispose">dispose</a></li><li data-type='method'><a href="Skin.html#getTexture">getTexture</a></li><li data-type='method'><a href="Skin.html#getUniforms">getUniforms</a></li><li data-type='method'><a href="Skin.html#setRotationCenter">setRotationCenter</a></li></ul></li><li><a href="SvgRenderer.html">SvgRenderer</a><ul class='methods'><li data-type='method'><a href="SvgRenderer.html#_createSVGElement">_createSVGElement</a></li><li data-type='method'><a href="SvgRenderer.html#_draw">_draw</a></li><li data-type='method'><a href="SvgRenderer.html#_toString">_toString</a></li><li data-type='method'><a href="SvgRenderer.html#_transformMeasurements">_transformMeasurements</a></li><li data-type='method'><a href="SvgRenderer.html#_transformText">_transformText</a></li><li data-type='method'><a href="SvgRenderer.html#fromString">fromString</a></li><li data-type='method'><a href="SvgRenderer.html#getDrawRatio">getDrawRatio</a></li></ul></li><li><a href="SVGSkin.html">SVGSkin</a><ul class='methods'><li data-type='method'><a href="SVGSkin.html#calculateRotationCenter">calculateRotationCenter</a></li><li data-type='method'><a href="SVGSkin.html#dispose">dispose</a></li><li data-type='method'><a href="SVGSkin.html#getTexture">getTexture</a></li><li data-type='method'><a href="SVGSkin.html#getUniforms">getUniforms</a></li><li data-type='method'><a href="SVGSkin.html#setRotationCenter">setRotationCenter</a></li><li data-type='method'><a href="SVGSkin.html#setSVG">setSVG</a></li></ul></li></ul><h3>Modules</h3><ul><li><a href="module-RenderConstants.html">RenderConstants</a></li></ul><h3>Events</h3><ul><li><a href="RenderWebGL.html#event:event:NativeSizeChanged">event:NativeSizeChanged</a></li><li><a href="Skin.html#.event:event:WasAltered">event:WasAltered</a></li></ul><h3>Global</h3><ul><li><a href="global.html#FENCE_WIDTH">FENCE_WIDTH</a></li></ul> </nav> <div id="main"> <h1 class="page-title">Drawable</h1> <section> <header> <h2> Drawable </h2> </header> <article> <div class="container-overview"> <h4 class="name" id="Drawable"><span class="type-signature"></span>new Drawable<span class="signature">(id<span class="signature-attributes">non-null</span>)</span><span class="type-signature"></span></h4> <dl class="details"> <dt class="tag-todo">To Do:</dt> <dd class="tag-todo"> <ul> <li>double-buffer all rendering state (position, skin, effects, etc.)</li> </ul> </dd> </dl> <div class="description"> <p>An object which can be drawn by the renderer.</p> </div> <h5>Parameters:</h5> <table class="params"> <thead> <tr> <th>Name</th> <th>Type</th> <th class="last">Description</th> </tr> </thead> <tbody> <tr> <td class="name"><code>id</code></td> <td class="type"> <span class="param-type">int</span> </td> <td class="description last"><p>This Drawable's unique ID.</p></td> </tr> </tbody> </table> </div> <h3 class="subsection-title">Members</h3> <h4 class="name" id="_convexHullPoints"><span class="type-signature"></span>_convexHullPoints<span class="type-signature"></span></h4> <dl class="details"> <dt class="tag-todo">To Do:</dt> <dd class="tag-todo"> <ul> <li>move convex hull functionality, maybe bounds functionality overall, to Skin classes</li> </ul> </dd> </dl> <h4 class="name" id="_id"><span class="type-signature">(non-null) </span>_id<span class="type-signature"> :int</span></h4> <dl class="details"> </dl> <h5>Type:</h5> <ul> <li> <span class="param-type">int</span> </li> </ul> <h4 class="name" id="_uniforms"><span class="type-signature">(private) </span>_uniforms<span class="type-signature"> :Object.<string, *></span></h4> <dl class="details"> </dl> <div class="description"> <p>The uniforms to be used by the vertex and pixel shaders. Some of these are used by other parts of the renderer as well.</p> </div> <h5>Type:</h5> <ul> <li> <span class="param-type">Object.<string, *></span> </li> </ul> <h4 class="name" id="id"><span class="type-signature"></span>id<span class="type-signature"></span></h4> <dl class="details"> </dl> <h4 class="name" id="scale"><span class="type-signature"></span>scale<span class="type-signature"></span></h4> <dl class="details"> </dl> <h4 class="name" id="skin"><span class="type-signature"></span>skin<span class="type-signature"></span></h4> <dl class="details"> </dl> <h4 class="name" id="skin"><span class="type-signature"></span>skin<span class="type-signature"></span></h4> <dl class="details"> </dl> <h3 class="subsection-title">Methods</h3> <h4 class="name" id=".color3bToID"><span class="type-signature">(static) </span>color3bToID<span class="signature">(r, g, b)</span><span class="type-signature"> → {int}</span></h4> <dl class="details"> </dl> <div class="description"> <p>Calculate the ID number represented by the given color. If all components of the color are zero, the result will be RenderConstants.ID_NONE; otherwise the result will be a valid ID.</p> </div> <h5>Parameters:</h5> <table class="params"> <thead> <tr> <th>Name</th> <th>Type</th> <th class="last">Description</th> </tr> </thead> <tbody> <tr> <td class="name"><code>r</code></td> <td class="type"> <span class="param-type">int</span> </td> <td class="description last"><p>The red value of the color, in the range [0,255].</p></td> </tr> <tr> <td class="name"><code>g</code></td> <td class="type"> <span class="param-type">int</span> </td> <td class="description last"><p>The green value of the color, in the range [0,255].</p></td> </tr> <tr> <td class="name"><code>b</code></td> <td class="type"> <span class="param-type">int</span> </td> <td class="description last"><p>The blue value of the color, in the range [0,255].</p></td> </tr> </tbody> </table> <h5>Returns:</h5> <div class="param-desc"> <p>The ID represented by that color.</p> </div> <dl class="param-type"> <dt> Type </dt> <dd> <span class="param-type">int</span> </dd> </dl> <h4 class="name" id=".color4fFromID"><span class="type-signature">(static) </span>color4fFromID<span class="signature">(id)</span><span class="type-signature"> → {Array.<number>}</span></h4> <dl class="details"> </dl> <div class="description"> <p>Calculate a color to represent the given ID number. At least one component of the resulting color will be non-zero if the ID is not RenderConstants.ID_NONE.</p> </div> <h5>Parameters:</h5> <table class="params"> <thead> <tr> <th>Name</th> <th>Type</th> <th class="last">Description</th> </tr> </thead> <tbody> <tr> <td class="name"><code>id</code></td> <td class="type"> <span class="param-type">int</span> </td> <td class="description last"><p>The ID to convert.</p></td> </tr> </tbody> </table> <h5>Returns:</h5> <div class="param-desc"> <p>An array of [r,g,b,a], each component in the range [0,1].</p> </div> <dl class="param-type"> <dt> Type </dt> <dd> <span class="param-type">Array.<number></span> </dd> </dl> <h4 class="name" id="_calculateTransform"><span class="type-signature">(private) </span>_calculateTransform<span class="signature">()</span><span class="type-signature"></span></h4> <dl class="details"> </dl> <div class="description"> <p>Calculate the transform to use when rendering this Drawable.</p> </div> <h4 class="name" id="_skinWasAltered"><span class="type-signature">(private) </span>_skinWasAltered<span class="signature">()</span><span class="type-signature"></span></h4> <dl class="details"> </dl> <div class="description"> <p>Respond to an internal change in the current Skin.</p> </div> <h4 class="name" id="dispose"><span class="type-signature"></span>dispose<span class="signature">()</span><span class="type-signature"></span></h4> <dl class="details"> </dl> <div class="description"> <p>Dispose of this Drawable. Do not use it after calling this method.</p> </div> <h4 class="name" id="getAABB"><span class="type-signature"></span>getAABB<span class="signature">()</span><span class="type-signature"> → (non-null) {<a href="Rectangle.html">Rectangle</a>}</span></h4> <dl class="details"> </dl> <div class="description"> <p>Get the rough axis-aligned bounding box for the Drawable. Calculated by transforming the skin's bounds. Note that this is less precise than the box returned by <code>getBounds</code>, which is tightly snapped to account for a Drawable's transparent regions. <code>getAABB</code> returns a much less accurate bounding box, but will be much faster to calculate so may be desired for quick checks/optimizations.</p> </div> <h5>Returns:</h5> <div class="param-desc"> <p>Rough axis-aligned bounding box for Drawable.</p> </div> <dl class="param-type"> <dt> Type </dt> <dd> <span class="param-type"><a href="Rectangle.html">Rectangle</a></span> </dd> </dl> <h4 class="name" id="getBounds"><span class="type-signature"></span>getBounds<span class="signature">()</span><span class="type-signature"> → (non-null) {<a href="Rectangle.html">Rectangle</a>}</span></h4> <dl class="details"> </dl> <div class="description"> <p>Get the precise bounds for a Drawable. This function applies the transform matrix to the known convex hull, and then finds the minimum box along the axes. Before calling this, ensure the renderer has updated convex hull points.</p> </div> <h5>Returns:</h5> <div class="param-desc"> <p>Bounds for a tight box around the Drawable.</p> </div> <dl class="param-type"> <dt> Type </dt> <dd> <span class="param-type"><a href="Rectangle.html">Rectangle</a></span> </dd> </dl> <h4 class="name" id="getEnabledEffects"><span class="type-signature"></span>getEnabledEffects<span class="signature">()</span><span class="type-signature"> → {int}</span></h4> <dl class="details"> </dl> <h5>Returns:</h5> <div class="param-desc"> <p>A bitmask identifying which effects are currently in use.</p> </div> <dl class="param-type"> <dt> Type </dt> <dd> <span class="param-type">int</span> </dd> </dl> <h4 class="name" id="getFastBounds"><span class="type-signature"></span>getFastBounds<span class="signature">()</span><span class="type-signature"> → (non-null) {<a href="Rectangle.html">Rectangle</a>}</span></h4> <dl class="details"> </dl> <div class="description"> <p>Return the best Drawable bounds possible without performing graphics queries. I.e., returns the tight bounding box when the convex hull points are already known, but otherwise return the rough AABB of the Drawable.</p> </div> <h5>Returns:</h5> <div class="param-desc"> <p>Bounds for the Drawable.</p> </div> <dl class="param-type"> <dt> Type </dt> <dd> <span class="param-type"><a href="Rectangle.html">Rectangle</a></span> </dd> </dl> <h4 class="name" id="getUniforms"><span class="type-signature"></span>getUniforms<span class="signature">()</span><span class="type-signature"> → {object.<string, *>}</span></h4> <dl class="details"> </dl> <h5>Returns:</h5> <div class="param-desc"> <p>the shader uniforms to be used when rendering this Drawable.</p> </div> <dl class="param-type"> <dt> Type </dt> <dd> <span class="param-type">object.<string, *></span> </dd> </dl> <h4 class="name" id="getVisible"><span class="type-signature"></span>getVisible<span class="signature">()</span><span class="type-signature"> → {boolean}</span></h4> <dl class="details"> </dl> <h5>Returns:</h5> <div class="param-desc"> <p>whether this Drawable is visible.</p> </div> <dl class="param-type"> <dt> Type </dt> <dd> <span class="param-type">boolean</span> </dd> </dl> <h4 class="name" id="needsConvexHullPoints"><span class="type-signature"></span>needsConvexHullPoints<span class="signature">()</span><span class="type-signature"> → {boolean}</span></h4> <dl class="details"> </dl> <div class="description"> <p>Whether the Drawable needs convex hull points provided by the renderer.</p> </div> <h5>Returns:</h5> <div class="param-desc"> <p>True when no convex hull known, or it's dirty.</p> </div> <dl class="param-type"> <dt> Type </dt> <dd> <span class="param-type">boolean</span> </dd> </dl> <h4 class="name" id="setConvexHullDirty"><span class="type-signature"></span>setConvexHullDirty<span class="signature">()</span><span class="type-signature"></span></h4> <dl class="details"> </dl> <div class="description"> <p>Set the convex hull to be dirty. Do this whenever the Drawable's shape has possibly changed.</p> </div> <h4 class="name" id="setConvexHullPoints"><span class="type-signature"></span>setConvexHullPoints<span class="signature">(points)</span><span class="type-signature"></span></h4> <dl class="details"> </dl> <div class="description"> <p>Set the convex hull points for the Drawable.</p> </div> <h5>Parameters:</h5> <table class="params"> <thead> <tr> <th>Name</th> <th>Type</th> <th class="last">Description</th> </tr> </thead> <tbody> <tr> <td class="name"><code>points</code></td> <td class="type"> <span class="param-type">Array.<Array.<number>></span> </td> <td class="description last"><p>Convex hull points, as [[x, y], ...]</p></td> </tr> </tbody> </table> <h4 class="name" id="setTransformDirty"><span class="type-signature"></span>setTransformDirty<span class="signature">()</span><span class="type-signature"></span></h4> <dl class="details"> </dl> <div class="description"> <p>Mark this Drawable's transform as dirty. It will be recalculated next time it's needed.</p> </div> <h4 class="name" id="updateProperties"><span class="type-signature"></span>updateProperties<span class="signature">(properties)</span><span class="type-signature"></span></h4> <dl class="details"> </dl> <div class="description"> <p>Update the position, direction, scale, or effect properties of this Drawable.</p> </div> <h5>Parameters:</h5> <table class="params"> <thead> <tr> <th>Name</th> <th>Type</th> <th class="last">Description</th> </tr> </thead> <tbody> <tr> <td class="name"><code>properties</code></td> <td class="type"> <span class="param-type">object.<string, *></span> </td> <td class="description last"><p>The new property values to set.</p></td> </tr> </tbody> </table> </article> </section> </div> <br class="clear"> <footer> Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.4.3</a> using the <a href="https://github.com/clenemt/docdash">docdash</a> theme. </footer> <script>prettyPrint();</script> <script src="scripts/linenumber.js"></script> </body> </html>