scratch-render

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>RenderWebGL - 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">RenderWebGL</h1> <section> <header> <h2> RenderWebGL </h2> </header> <article> <div class="container-overview"> <h4 class="name" id="RenderWebGL"><span class="type-signature"></span>new RenderWebGL<span class="signature">(canvas, xLeft<span class="signature-attributes">opt</span>, xRight<span class="signature-attributes">opt</span>, yBottom<span class="signature-attributes">opt</span>, yTop<span class="signature-attributes">opt</span>)</span><span class="type-signature"></span></h4> <dl class="details"> <dt class="tag-see">See:</dt> <dd class="tag-see"> <ul> <li><a href="RenderWebGL.html#setStageSize">RenderWebGL#setStageSize</a></li> <li><a href="RenderWebGL.html#resize">RenderWebGL#resize</a></li> </ul> </dd> </dl> <div class="description"> <p>Create a renderer for drawing Scratch sprites to a canvas using WebGL. Coordinates will default to Scratch 2.0 values if unspecified. The stage's "native" size will be calculated from the these coordinates. For example, the defaults result in a native size of 480x360. Queries such as "touching color?" will always execute at the native size.</p> </div> <h5>Parameters:</h5> <table class="params"> <thead> <tr> <th>Name</th> <th>Type</th> <th>Attributes</th> <th>Default</th> <th class="last">Description</th> </tr> </thead> <tbody> <tr> <td class="name"><code>canvas</code></td> <td class="type"> <span class="param-type">canvas</span> </td> <td class="attributes"> </td> <td class="default"> </td> <td class="description last"><p>The canvas to draw onto.</p></td> </tr> <tr> <td class="name"><code>xLeft</code></td> <td class="type"> <span class="param-type">int</span> </td> <td class="attributes"> <optional><br> </td> <td class="default"> <code>-240</code> </td> <td class="description last"><p>The x-coordinate of the left edge.</p></td> </tr> <tr> <td class="name"><code>xRight</code></td> <td class="type"> <span class="param-type">int</span> </td> <td class="attributes"> <optional><br> </td> <td class="default"> <code>240</code> </td> <td class="description last"><p>The x-coordinate of the right edge.</p></td> </tr> <tr> <td class="name"><code>yBottom</code></td> <td class="type"> <span class="param-type">int</span> </td> <td class="attributes"> <optional><br> </td> <td class="default"> <code>-180</code> </td> <td class="description last"><p>The y-coordinate of the bottom edge.</p></td> </tr> <tr> <td class="name"><code>yTop</code></td> <td class="type"> <span class="param-type">int</span> </td> <td class="attributes"> <optional><br> </td> <td class="default"> <code>180</code> </td> <td class="description last"><p>The y-coordinate of the top edge.</p></td> </tr> </tbody> </table> <h5>Listens to Events:</h5> <ul> <li><a href="RenderWebGL.html#event:event:NativeSizeChanged">RenderWebGL#event:NativeSizeChanged</a></li> </ul> </div> <h3 class="subsection-title">Members</h3> <h4 class="name" id=".MAX_TOUCH_SIZE"><span class="type-signature">(static, constant) </span>MAX_TOUCH_SIZE<span class="type-signature"> :Array.<int></span></h4> <dl class="details"> <dt class="tag-todo">To Do:</dt> <dd class="tag-todo"> <ul> <li>Figure out a reasonable max size. Maybe this should be configurable?</li> </ul> </dd> </dl> <div class="description"> <p>Maximum touch size for a picking check.</p> </div> <h5>Type:</h5> <ul> <li> <span class="param-type">Array.<int></span> </li> </ul> <h4 class="name" id=".TOLERANCE_TOUCHING_COLOR"><span class="type-signature">(static, constant) </span>TOLERANCE_TOUCHING_COLOR<span class="type-signature"> :int</span></h4> <dl class="details"> </dl> <div class="description"> <p>"touching {color}?" or "{color} touching {color}?" tests will be true if the target is touching a color whose components are each within this tolerance of the corresponding component of the query color. between 0 (exact matches only) and 255 (match anything).</p> </div> <h5>Type:</h5> <ul> <li> <span class="param-type">int</span> </li> </ul> <h4 class="name" id="_allDrawables"><span class="type-signature"></span>_allDrawables<span class="type-signature"> :Array.<<a href="Drawable.html">Drawable</a>></span></h4> <dl class="details"> </dl> <h5>Type:</h5> <ul> <li> <span class="param-type">Array.<<a href="Drawable.html">Drawable</a>></span> </li> </ul> <h4 class="name" id="_allSkins"><span class="type-signature"></span>_allSkins<span class="type-signature"> :Array.<<a href="Skin.html">Skin</a>></span></h4> <dl class="details"> </dl> <h5>Type:</h5> <ul> <li> <span class="param-type">Array.<<a href="Skin.html">Skin</a>></span> </li> </ul> <h4 class="name" id="_allSkins%5Bundefined%5D"><span class="type-signature"></span>_allSkins[undefined]<span class="type-signature"> :<a href="PenSkin.html">PenSkin</a></span></h4> <dl class="details"> </dl> <h5>Type:</h5> <ul> <li> <span class="param-type"><a href="PenSkin.html">PenSkin</a></span> </li> </ul> <h4 class="name" id="_allSkins%5Bundefined%5D"><span class="type-signature"></span>_allSkins[undefined]<span class="type-signature"> :<a href="PenSkin.html">PenSkin</a></span></h4> <dl class="details"> </dl> <h5>Type:</h5> <ul> <li> <span class="param-type"><a href="PenSkin.html">PenSkin</a></span> </li> </ul> <h4 class="name" id="_allSkins%5Bundefined%5D"><span class="type-signature"></span>_allSkins[undefined]<span class="type-signature"> :<a href="PenSkin.html">PenSkin</a></span></h4> <dl class="details"> </dl> <h5>Type:</h5> <ul> <li> <span class="param-type"><a href="PenSkin.html">PenSkin</a></span> </li> </ul> <h4 class="name" id="_allSkins%5Bundefined%5D"><span class="type-signature"></span>_allSkins[undefined]<span class="type-signature"> :<a href="PenSkin.html">PenSkin</a></span></h4> <dl class="details"> </dl> <h5>Type:</h5> <ul> <li> <span class="param-type"><a href="PenSkin.html">PenSkin</a></span> </li> </ul> <h4 class="name" id="_drawList"><span class="type-signature"></span>_drawList<span class="type-signature"> :Array.<int></span></h4> <dl class="details"> </dl> <h5>Type:</h5> <ul> <li> <span class="param-type">Array.<int></span> </li> </ul> <h4 class="name" id="_nextDrawableId"><span class="type-signature"></span>_nextDrawableId<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="_nextSkinId"><span class="type-signature"></span>_nextSkinId<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="_projection"><span class="type-signature"></span>_projection<span class="type-signature"> :module:twgl/m4.Mat4</span></h4> <dl class="details"> </dl> <h5>Type:</h5> <ul> <li> <span class="param-type">module:twgl/m4.Mat4</span> </li> </ul> <h4 class="name" id="_shaderManager"><span class="type-signature"></span>_shaderManager<span class="type-signature"> :<a href="ShaderManager.html">ShaderManager</a></span></h4> <dl class="details"> </dl> <h5>Type:</h5> <ul> <li> <span class="param-type"><a href="ShaderManager.html">ShaderManager</a></span> </li> </ul> <h4 class="name" id="_skinUrlMap"><span class="type-signature"></span>_skinUrlMap<span class="type-signature"> :Object.<string, int></span></h4> <dl class="details"> </dl> <h5>Type:</h5> <ul> <li> <span class="param-type">Object.<string, int></span> </li> </ul> <h4 class="name" id="_tempCanvas"><span class="type-signature"></span>_tempCanvas<span class="type-signature"> :HTMLCanvasElement</span></h4> <dl class="details"> </dl> <h5>Type:</h5> <ul> <li> <span class="param-type">HTMLCanvasElement</span> </li> </ul> <h4 class="name" id="gl"><span class="type-signature"></span>gl<span class="type-signature"></span></h4> <dl class="details"> </dl> <h3 class="subsection-title">Methods</h3> <h4 class="name" id="_createGeometry"><span class="type-signature">(private) </span>_createGeometry<span class="signature">()</span><span class="type-signature"></span></h4> <dl class="details"> </dl> <div class="description"> <p>Build geometry (vertex and index) buffers.</p> </div> <h4 class="name" id="_drawThese"><span class="type-signature">(private) </span>_drawThese<span class="signature">(drawables, drawMode, projection, opts<span class="signature-attributes">opt</span>)</span><span class="type-signature"></span></h4> <dl class="details"> </dl> <div class="description"> <p>Draw a set of Drawables, by drawable ID</p> </div> <h5>Parameters:</h5> <table class="params"> <thead> <tr> <th>Name</th> <th>Type</th> <th>Attributes</th> <th class="last">Description</th> </tr> </thead> <tbody> <tr> <td class="name"><code>drawables</code></td> <td class="type"> <span class="param-type">Array.<int></span> </td> <td class="attributes"> </td> <td class="description last"><p>The Drawable IDs to draw, possibly this._drawList.</p></td> </tr> <tr> <td class="name"><code>drawMode</code></td> <td class="type"> <span class="param-type"><a href="ShaderManager.html#.DRAW_MODE">ShaderManager.DRAW_MODE</a></span> </td> <td class="attributes"> </td> <td class="description last"><p>Draw normally, silhouette, etc.</p></td> </tr> <tr> <td class="name"><code>projection</code></td> <td class="type"> <span class="param-type">module:twgl/m4.Mat4</span> </td> <td class="attributes"> </td> <td class="description last"><p>The projection matrix to use.</p></td> </tr> <tr> <td class="name"><code>opts</code></td> <td class="type"> <span class="param-type">object</span> </td> <td class="attributes"> <optional><br> </td> <td class="description last"><p>Options for drawing</p> <h6>Properties</h6> <table class="params"> <thead> <tr> <th>Name</th> <th>Type</th> <th class="last">Description</th> </tr> </thead> <tbody> <tr> <td class="name"><code>filter</code></td> <td class="type"> <span class="param-type">idFilterFunc</span> </td> <td class="description last"><p>An optional filter function.</p></td> </tr> <tr> <td class="name"><code>extraUniforms</code></td> <td class="type"> <span class="param-type">object.<string, *></span> </td> <td class="description last"><p>Extra uniforms for the shaders.</p></td> </tr> <tr> <td class="name"><code>effectMask</code></td> <td class="type"> <span class="param-type">int</span> </td> <td class="description last"><p>Bitmask for effects to allow</p></td> </tr> </tbody> </table> </td> </tr> </tbody> </table> <h4 class="name" id="_filterCandidatesTouching"><span class="type-signature"></span>_filterCandidatesTouching<span class="signature">(drawableID, candidateIDs, bounds)</span><span class="type-signature"> → (nullable) {Array.<int>}</span></h4> <dl class="details"> </dl> <div class="description"> <p>Filter a list of candidates for a touching query into only those that could possibly intersect the given bounds.</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>drawableID</code></td> <td class="type"> <span class="param-type">int</span> </td> <td class="description last"><p>ID for drawable of query.</p></td> </tr> <tr> <td class="name"><code>candidateIDs</code></td> <td class="type"> <span class="param-type">Array.<int></span> </td> <td class="description last"><p>Candidates for touching query.</p></td> </tr> <tr> <td class="name"><code>bounds</code></td> <td class="type"> <span class="param-type"><a href="Rectangle.html">Rectangle</a></span> </td> <td class="description last"><p>Bounds to limit candidates to.</p></td> </tr> </tbody> </table> <h5>Returns:</h5> <div class="param-desc"> <p>Filtered candidateIDs, or null if none.</p> </div> <dl class="param-type"> <dt> Type </dt> <dd> <span class="param-type">Array.<int></span> </dd> </dl> <h4 class="name" id="_getConvexHullPointsForDrawable"><span class="type-signature"></span>_getConvexHullPointsForDrawable<span class="signature">(drawableID)</span><span class="type-signature"> → {Array.<Array.<number>>}</span></h4> <dl class="details"> </dl> <div class="description"> <p>Get the convex hull points for a particular Drawable. To do this, draw the Drawable unrotated, unscaled, and untranslated. Read back the pixels and find all boundary points. Finally, apply a convex hull algorithm to simplify the set.</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>drawableID</code></td> <td class="type"> <span class="param-type">int</span> </td> <td class="description last"><p>The Drawable IDs calculate convex hull for.</p></td> </tr> </tbody> </table> <h5>Returns:</h5> <div class="param-desc"> <p>points Convex hull points, as [[x, y], ...]</p> </div> <dl class="param-type"> <dt> Type </dt> <dd> <span class="param-type">Array.<Array.<number>></span> </dd> </dl> <h4 class="name" id="_setNativeSize"><span class="type-signature">(private) </span>_setNativeSize<span class="signature">(width, height)</span><span class="type-signature"></span></h4> <dl class="details"> </dl> <div class="description"> <p>Set the "native" size of the stage, which is used for pen, query renders, etc.</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>width</code></td> <td class="type"> <span class="param-type">int</span> </td> <td class="description last"><p>the new width to set.</p></td> </tr> <tr> <td class="name"><code>height</code></td> <td class="type"> <span class="param-type">int</span> </td> <td class="description last"><p>the new height to set.</p></td> </tr> </tbody> </table> <h5>Fires:</h5> <ul> <li><a href="RenderWebGL.html#event:event:NativeSizeChanged">RenderWebGL#event:NativeSizeChanged</a></li> </ul> <h4 class="name" id="_touchingBounds"><span class="type-signature"></span>_touchingBounds<span class="signature">(drawableID)</span><span class="type-signature"> → (nullable) {<a href="Rectangle.html">Rectangle</a>}</span></h4> <dl class="details"> </dl> <div class="description"> <p>Get the candidate bounding box for a touching query.</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>drawableID</code></td> <td class="type"> <span class="param-type">int</span> </td> <td class="description last"><p>ID for drawable of query.</p></td> </tr> </tbody> </table> <h5>Returns:</h5> <div class="param-desc"> <p>Rectangle bounds for touching query, or null.</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="createBitmapSkin"><span class="type-signature"></span>createBitmapSkin<span class="signature">(bitmapData, costumeResolution<span class="signature-attributes">opt, non-null</span>, rotationCenter<span class="signature-attributes">nullable</span>)</span><span class="type-signature"> → (non-null) {int}</span></h4> <dl class="details"> </dl> <div class="description"> <p>Create a new bitmap skin from a snapshot of the provided bitmap data.</p> </div> <h5>Parameters:</h5> <table class="params"> <thead> <tr> <th>Name</th> <th>Type</th> <th>Attributes</th> <th>Default</th> <th class="last">Description</th> </tr> </thead> <tbody> <tr> <td class="name"><code>bitmapData</code></td> <td class="type"> <span class="param-type">ImageData</span> | <span class="param-type">HTMLImageElement</span> | <span class="param-type">HTMLCanvasElement</span> | <span class="param-type">HTMLVideoElement</span> </td> <td class="attributes"> </td> <td class="default"> </td> <td class="description last"><p>new contents for this skin.</p></td> </tr> <tr> <td class="name"><code>costumeResolution</code></td> <td class="type"> <span class="param-type">int</span> </td> <td class="attributes"> <optional><br> </td> <td class="default"> <code>1</code> </td> <td class="description last"><p>The resolution to use for this bitmap.</p></td> </tr> <tr> <td class="name"><code>rotationCenter</code></td> <td class="type"> <span class="param-type">Array.<number></span> </td> <td class="attributes"> <nullable><br> </td> <td class="default"> </td> <td class="description last"><p>Optional: rotation center of the skin. If not supplied, the center of the skin will be used</p></td> </tr> </tbody> </table> <h5>Returns:</h5> <div class="param-desc"> <p>the ID for the new skin.</p> </div> <dl class="param-type"> <dt> Type </dt> <dd> <span class="param-type">int</span> </dd> </dl> <h4 class="name" id="createDrawable"><span class="type-signature"></span>createDrawable<span class="signature">()</span><span class="type-signature"> → {int}</span></h4> <dl class="details"> </dl> <div class="description"> <p>Create a new Drawable and add it to the scene.</p> </div> <h5>Returns:</h5> <div class="param-desc"> <p>The ID of the new Drawable.</p> </div> <dl class="param-type"> <dt> Type </dt> <dd> <span class="param-type">int</span> </dd> </dl> <h4 class="name" id="createPenSkin"><span class="type-signature"></span>createPenSkin<span class="signature">()</span><span class="type-signature"> → (non-null) {int}</span></h4> <dl class="details"> </dl> <div class="description"> <p>Create a new PenSkin - a skin which implements a Scratch pen layer.</p> </div> <h5>Returns:</h5> <div class="param-desc"> <p>the ID for the new skin.</p> </div> <dl class="param-type"> <dt> Type </dt> <dd> <span class="param-type">int</span> </dd> </dl> <h4 class="name" id="createSkinFromURL"><span class="type-signature"></span>createSkinFromURL<span class="signature">(skinUrl<span class="signature-attributes">non-null</span>, costumeResolution<span class="signature-attributes">opt, non-null</span>, rotationCenter<span class="signature-attributes">nullable</span>)</span><span class="type-signature"> → (non-null) {int}</span></h4> <dl class="details"> <dt class="important tag-deprecated">Deprecated:</dt><dd class="yes-def tag-deprecated"><ul class="dummy"><li>Yes</li></ul></dd> </dl> <div class="description"> <p>Create a skin by loading a bitmap or vector image from a URL, or reuse an existing skin created this way. WARNING: This method is deprecated and will be removed in the near future. Use <code>createBitmapSkin</code> or <code>createSVGSkin</code> instead.</p> </div> <h5>Parameters:</h5> <table class="params"> <thead> <tr> <th>Name</th> <th>Type</th> <th>Attributes</th> <th class="last">Description</th> </tr> </thead> <tbody> <tr> <td class="name"><code>skinUrl</code></td> <td class="type"> <span class="param-type">string</span> </td> <td class="attributes"> </td> <td class="description last"><p>The URL of the skin.</p></td> </tr> <tr> <td class="name"><code>costumeResolution</code></td> <td class="type"> <span class="param-type">int</span> </td> <td class="attributes"> <optional><br> </td> <td class="description last"><p>Optional: resolution for the skin. Ignored unless creating a new Bitmap skin.</p></td> </tr> <tr> <td class="name"><code>rotationCenter</code></td> <td class="type"> <span class="param-type">Array.<number></span> </td> <td class="attributes"> <nullable><br> </td> <td class="description last"><p>Optional: rotation center of the skin. If not supplied, the center of the skin will be used.</p></td> </tr> </tbody> </table> <h5>Returns:</h5> <div class="param-desc"> <p>The ID of the Skin.</p> </div> <dl class="param-type"> <dt> Type </dt> <dd> <span class="param-type">int</span> </dd> </dl> <h4 class="name" id="createSVGSkin"><span class="type-signature"></span>createSVGSkin<span class="signature">(svgData<span class="signature-attributes">non-null</span>, rotationCenter<span class="signature-attributes">nullable</span>)</span><span class="type-signature"> → (non-null) {int}</span></h4> <dl class="details"> </dl> <div class="description"> <p>Create a new SVG skin.</p> </div> <h5>Parameters:</h5> <table class="params"> <thead> <tr> <th>Name</th> <th>Type</th> <th>Attributes</th> <th class="last">Description</th> </tr> </thead> <tbody> <tr> <td class="name"><code>svgData</code></td> <td class="type"> <span class="param-type">string</span> </td> <td class="attributes"> </td> <td class="description last"><p>new SVG to use.</p></td> </tr> <tr> <td class="name"><code>rotationCenter</code></td> <td class="type"> <span class="param-type">Array.<number></span> </td> <td class="attributes"> <nullable><br> </td> <td class="description last"><p>Optional: rotation center of the skin. If not supplied, the center of the skin will be used</p></td> </tr> </tbody> </table> <h5>Returns:</h5> <div class="param-desc"> <p>the ID for the new skin.</p> </div> <dl class="param-type"> <dt> Type </dt> <dd> <span class="param-type">int</span> </dd> </dl> <h4 class="name" id="destroyDrawable"><span class="type-signature"></span>destroyDrawable<span class="signature">(drawableID)</span><span class="type-signature"></span></h4> <dl class="details"> </dl> <div class="description"> <p>Destroy a Drawable, removing it from the scene.</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>drawableID</code></td> <td class="type"> <span class="param-type">int</span> </td> <td class="description last"><p>The ID of the Drawable to remove.</p></td> </tr> </tbody> </table> <h4 class="name" id="destroySkin"><span class="type-signature"></span>destroySkin<span class="signature">(skinId<span class="signature-attributes">non-null</span>)</span><span class="type-signature"></span></h4> <dl class="details">