jsge
Version:
Javascript Game Engine
2,457 lines (582 loc) • 29.1 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="expires" content="Wen, 05 Jun 2024 07:01:00 GMT">
<title>JSDoc: Class: DrawImageObject</title>
<script src="scripts/prettify/prettify.js"> </script>
<script src="scripts/prettify/lang-css.js"> </script>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
<link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
</head>
<body>
<div id="main">
<h1 class="stage-title">Class: DrawImageObject</h1>
<section>
<header>
<h2><span class="attribs"><span class="type-signature"></span></span>DrawImageObject</h2>
<div class="class-description">Image object to draw</div>
</header>
<article>
<div class="container-overview">
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="base_2d_DrawImageObject.js.html">base/2d/DrawImageObject.js</a>, <a href="base_2d_DrawImageObject.js.html#line11">line 11</a>
</li></ul></dd>
<dt class="tag-see">See:</dt>
<dd class="tag-see">
<ul>
<li><a href="DrawObjectFactory.html">DrawObjectFactory</a> should be created with factory method</li>
</ul>
</dd>
</dl>
</div>
<h3 class="subsection-title">Extends</h3>
<ul>
<li><a href="DrawShapeObject.html">DrawShapeObject</a></li>
</ul>
<!--
<h3 class="subsection-title">Classes</h3>
<dl>
<dt><a href="DrawImageObject.html">DrawImageObject</a></dt>
<dd></dd>
</dl>
-->
<h3 class="subsection-title">Members</h3>
<h4 class="name" id="activeAnimation"><span class="type-signature"></span>activeAnimation<span class="type-signature"> :null|string</span></h4>
<!--
<h5>Type:</h5>
<ul>
<li>
<span class="param-type">null</span>
|
<span class="param-type">string</span>
</li>
</ul>
-->
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="base_2d_DrawImageObject.js.html">base/2d/DrawImageObject.js</a>, <a href="base_2d_DrawImageObject.js.html#line168">line 168</a>
</li></ul></dd>
</dl>
<h4 class="name" id="bgColor"><span class="type-signature"></span>bgColor<span class="type-signature"> :string</span></h4>
<div class="description">
Background color as rgba(r,g,b,a).
</div>
<!--
<h5>Type:</h5>
<ul>
<li>
<span class="param-type">string</span>
</li>
</ul>
-->
<dl class="details">
<dt class="tag-overrides">Overrides:</dt>
<dd class="tag-overrides"><ul class="dummy"><li>
<a href="DrawShapeObject.html#bgColor">DrawShapeObject#bgColor</a>
</li></ul></dd>
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="base_2d_DrawShapeObject.js.html">base/2d/DrawShapeObject.js</a>, <a href="base_2d_DrawShapeObject.js.html#line69">line 69</a>
</li></ul></dd>
</dl>
<h4 class="name" id="boundaries"><span class="type-signature"></span>boundaries<span class="type-signature"> :Array.<Array.<number>></span></h4>
<!--
<h5>Type:</h5>
<ul>
<li>
<span class="param-type">Array.<Array.<number>></span>
</li>
</ul>
-->
<dl class="details">
<dt class="important tag-deprecated">Deprecated:</dt><dd><ul class="dummy"><li>- use .vertices instead</li></ul></dd>
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="base_2d_DrawImageObject.js.html">base/2d/DrawImageObject.js</a>, <a href="base_2d_DrawImageObject.js.html#line176">line 176</a>
</li></ul></dd>
</dl>
<h4 class="name" id="hasAnimations"><span class="type-signature"></span>hasAnimations<span class="type-signature"> :boolean</span></h4>
<div class="description">
Determines if image is animated or not
</div>
<!--
<h5>Type:</h5>
<ul>
<li>
<span class="param-type">boolean</span>
</li>
</ul>
-->
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="base_2d_DrawImageObject.js.html">base/2d/DrawImageObject.js</a>, <a href="base_2d_DrawImageObject.js.html#line161">line 161</a>
</li></ul></dd>
</dl>
<h4 class="name" id="height"><span class="type-signature"></span>height<span class="type-signature"> :number</span></h4>
<!--
<h5>Type:</h5>
<ul>
<li>
<span class="param-type">number</span>
</li>
</ul>
-->
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="base_2d_DrawImageObject.js.html">base/2d/DrawImageObject.js</a>, <a href="base_2d_DrawImageObject.js.html#line94">line 94</a>
</li></ul></dd>
</dl>
<h4 class="name" id="image"><span class="type-signature"></span>image<span class="type-signature"> :ImageBitmap</span></h4>
<!--
<h5>Type:</h5>
<ul>
<li>
<span class="param-type">ImageBitmap</span>
</li>
</ul>
-->
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="base_2d_DrawImageObject.js.html">base/2d/DrawImageObject.js</a>, <a href="base_2d_DrawImageObject.js.html#line117">line 117</a>
</li></ul></dd>
</dl>
<h4 class="name" id="imageIndex"><span class="type-signature"></span>imageIndex<span class="type-signature"> :number</span></h4>
<div class="description">
Current image index
</div>
<!--
<h5>Type:</h5>
<ul>
<li>
<span class="param-type">number</span>
</li>
</ul>
-->
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="base_2d_DrawImageObject.js.html">base/2d/DrawImageObject.js</a>, <a href="base_2d_DrawImageObject.js.html#line133">line 133</a>
</li></ul></dd>
</dl>
<h4 class="name" id="key"><span class="type-signature"></span>key<span class="type-signature"> :string</span></h4>
<div class="description">
A key should match an image loaded through AssetsManager
</div>
<!--
<h5>Type:</h5>
<ul>
<li>
<span class="param-type">string</span>
</li>
</ul>
-->
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="base_2d_DrawImageObject.js.html">base/2d/DrawImageObject.js</a>, <a href="base_2d_DrawImageObject.js.html#line110">line 110</a>
</li></ul></dd>
</dl>
<h4 class="name" id="margin"><span class="type-signature"></span>margin<span class="type-signature"> :number</span></h4>
<div class="description">
Image spacing (for tilesets.margin > 0)
</div>
<!--
<h5>Type:</h5>
<ul>
<li>
<span class="param-type">number</span>
</li>
</ul>
-->
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="base_2d_DrawImageObject.js.html">base/2d/DrawImageObject.js</a>, <a href="base_2d_DrawImageObject.js.html#line153">line 153</a>
</li></ul></dd>
</dl>
<h4 class="name" id="spacing"><span class="type-signature"></span>spacing<span class="type-signature"> :number</span></h4>
<div class="description">
Image spacing (for tilesets.spacing > 0)
</div>
<!--
<h5>Type:</h5>
<ul>
<li>
<span class="param-type">number</span>
</li>
</ul>
-->
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="base_2d_DrawImageObject.js.html">base/2d/DrawImageObject.js</a>, <a href="base_2d_DrawImageObject.js.html#line145">line 145</a>
</li></ul></dd>
</dl>
<h4 class="name" id="width"><span class="type-signature"></span>width<span class="type-signature"> :number</span></h4>
<!--
<h5>Type:</h5>
<ul>
<li>
<span class="param-type">number</span>
</li>
</ul>
-->
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="base_2d_DrawImageObject.js.html">base/2d/DrawImageObject.js</a>, <a href="base_2d_DrawImageObject.js.html#line87">line 87</a>
</li></ul></dd>
</dl>
<h4 class="name" id="x"><span class="type-signature"></span>x<span class="type-signature"> :number</span></h4>
<!--
<h5>Type:</h5>
<ul>
<li>
<span class="param-type">number</span>
</li>
</ul>
-->
<dl class="details">
<dt class="tag-overrides">Overrides:</dt>
<dd class="tag-overrides"><ul class="dummy"><li>
<a href="DrawShapeObject.html#x">DrawShapeObject#x</a>
</li></ul></dd>
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="base_2d_DrawShapeObject.js.html">base/2d/DrawShapeObject.js</a>, <a href="base_2d_DrawShapeObject.js.html#line87">line 87</a>
</li></ul></dd>
</dl>
<h4 class="name" id="y"><span class="type-signature"></span>y<span class="type-signature"> :number</span></h4>
<!--
<h5>Type:</h5>
<ul>
<li>
<span class="param-type">number</span>
</li>
</ul>
-->
<dl class="details">
<dt class="tag-overrides">Overrides:</dt>
<dd class="tag-overrides"><ul class="dummy"><li>
<a href="DrawShapeObject.html#y">DrawShapeObject#y</a>
</li></ul></dd>
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="base_2d_DrawShapeObject.js.html">base/2d/DrawShapeObject.js</a>, <a href="base_2d_DrawShapeObject.js.html#line94">line 94</a>
</li></ul></dd>
</dl>
<h3 class="subsection-title">Methods</h3>
<h4 class="name" id="addAnimation"><span class="type-signature"></span>addAnimation<span class="signature">(eventName, animationSpriteIndexes, isRepeated<span class="signature-attributes">opt</span>)</span><span class="type-signature"></span></h4>
<div class="description">
Adds image animations
</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>eventName</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="attributes">
</td>
<td class="default">
</td>
<td class="description last">animation name</td>
</tr>
<tr>
<td class="name"><code>animationSpriteIndexes</code></td>
<td class="type">
<span class="param-type">Array.<number></span>
|
<span class="param-type">Array.<{duration:number, id:number}></span>
</td>
<td class="attributes">
</td>
<td class="default">
</td>
<td class="description last">animation image indexes</td>
</tr>
<tr>
<td class="name"><code>isRepeated</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
false
</td>
<td class="description last">animation is cycled or not, cycled animation could be stopped only with stopRepeatedAnimation();</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="base_2d_DrawImageObject.js.html">base/2d/DrawImageObject.js</a>, <a href="base_2d_DrawImageObject.js.html#line254">line 254</a>
</li></ul></dd>
</dl>
<h4 class="name" id="addEventListener"><span class="type-signature"></span>addEventListener<span class="signature">(eventName, listener, options)</span><span class="type-signature"></span></h4>
<div class="description">
Subscribe
</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>eventName</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last"></td>
</tr>
<tr>
<td class="name"><code>listener</code></td>
<td class="type">
<span class="param-type">*</span>
</td>
<td class="description last"></td>
</tr>
<tr>
<td class="name"><code>options</code></td>
<td class="type">
<span class="param-type">*</span>
</td>
<td class="description last"></td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="base_2d_DrawImageObject.js.html">base/2d/DrawImageObject.js</a>, <a href="base_2d_DrawImageObject.js.html#line234">line 234</a>
</li></ul></dd>
</dl>
<h4 class="name" id="destroy"><span class="type-signature"></span>destroy<span class="signature">()</span><span class="type-signature"></span></h4>
<div class="description">
Destroy object on next render iteration.
</div>
<dl class="details">
<dt class="tag-overrides">Overrides:</dt>
<dd class="tag-overrides"><ul class="dummy"><li>
<a href="DrawShapeObject.html#destroy">DrawShapeObject#destroy</a>
</li></ul></dd>
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="base_2d_DrawShapeObject.js.html">base/2d/DrawShapeObject.js</a>, <a href="base_2d_DrawShapeObject.js.html#line152">line 152</a>
</li></ul></dd>
</dl>
<h4 class="name" id="emit"><span class="type-signature"></span>emit<span class="signature">(eventName, …eventParams)</span><span class="type-signature"></span></h4>
<div class="description">
Emit event
</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>eventName</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="attributes">
</td>
<td class="description last"></td>
</tr>
<tr>
<td class="name"><code>eventParams</code></td>
<td class="type">
<span class="param-type">any</span>
</td>
<td class="attributes">
<repeatable><br>
</td>
<td class="description last"></td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="base_2d_DrawImageObject.js.html">base/2d/DrawImageObject.js</a>, <a href="base_2d_DrawImageObject.js.html#line222">line 222</a>
</li></ul></dd>
</dl>
<h4 class="name" id="removeAllAnimations"><span class="type-signature"></span>removeAllAnimations<span class="signature">()</span><span class="type-signature"></span></h4>
<div class="description">
Removes animations
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="base_2d_DrawImageObject.js.html">base/2d/DrawImageObject.js</a>, <a href="base_2d_DrawImageObject.js.html#line298">line 298</a>
</li></ul></dd>
</dl>
<h4 class="name" id="removeEventListener"><span class="type-signature"></span>removeEventListener<span class="signature">(eventName, listener, options)</span><span class="type-signature"></span></h4>
<div class="description">
Unsubscribe
</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>eventName</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last"></td>
</tr>
<tr>
<td class="name"><code>listener</code></td>
<td class="type">
<span class="param-type">*</span>
</td>
<td class="description last"></td>
</tr>
<tr>
<td class="name"><code>options</code></td>
<td class="type">
<span class="param-type">*</span>
</td>
<td class="description last"></td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="base_2d_DrawImageObject.js.html">base/2d/DrawImageObject.js</a>, <a href="base_2d_DrawImageObject.js.html#line244">line 244</a>
</li></ul></dd>
</dl>
<h4 class="name" id="setMask"><span class="type-signature"></span>setMask<span class="signature">(mask)</span><span class="type-signature"></span></h4>
<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>mask</code></td>
<td class="type">
<span class="param-type"><a href="DrawShapeObject.html">DrawShapeObject</a></span>
</td>
<td class="description last"></td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-overrides">Overrides:</dt>
<dd class="tag-overrides"><ul class="dummy"><li>
<a href="DrawShapeObject.html#setMask">DrawShapeObject#setMask</a>
</li></ul></dd>
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="base_2d_DrawShapeObject.js.html">base/2d/DrawShapeObject.js</a>, <a href="base_2d_DrawShapeObject.js.html#line171">line 171</a>
</li></ul></dd>
</dl>
<h4 class="name" id="stopRepeatedAnimation"><span class="type-signature"></span>stopRepeatedAnimation<span class="signature">(eventName<span class="signature-attributes">opt</span>)</span><span class="type-signature"></span></h4>
<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>eventName</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="description last">animation name, if not provided - stop current active animation event</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="base_2d_DrawImageObject.js.html">base/2d/DrawImageObject.js</a>, <a href="base_2d_DrawImageObject.js.html#line290">line 290</a>
</li></ul></dd>
</dl>
<h4 class="name" id="turnOffOffset"><span class="type-signature"></span>turnOffOffset<span class="signature">()</span><span class="type-signature"></span></h4>
<div class="description">
turn off offset for specific draw object
gameStageData.centerCameraPosition() will take no effect on such object
Can be used for something that should be always on screen: control buttons, overlay masks etc.
</div>
<dl class="details">
<dt class="tag-overrides">Overrides:</dt>
<dd class="tag-overrides"><ul class="dummy"><li>
<a href="DrawShapeObject.html#turnOffOffset">DrawShapeObject#turnOffOffset</a>
</li></ul></dd>
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="base_2d_DrawShapeObject.js.html">base/2d/DrawShapeObject.js</a>, <a href="base_2d_DrawShapeObject.js.html#line197">line 197</a>
</li></ul></dd>
</dl>
</article>
</section>
</div>
<nav>
<div class="switcher"><ul><li class="active"><a href="/">1.5.9</a></li></div>
<h2><a href="/">Home</a></h2><h3>Classes</h3><ul><li><a href="DrawCircleObject.html">DrawCircleObject</a></li><li><a href="DrawConusObject.html">DrawConusObject</a></li><li><a href="DrawImageObject.html">DrawImageObject</a></li><li><a href="DrawLineObject.html">DrawLineObject</a></li><li><a href="DrawObjectFactory.html">DrawObjectFactory</a></li><li><a href="DrawPolygonObject.html">DrawPolygonObject</a></li><li><a href="DrawRectObject.html">DrawRectObject</a></li><li><a href="DrawShapeObject.html">DrawShapeObject</a></li><li><a href="DrawTextObject.html">DrawTextObject</a></li><li><a href="DrawTiledLayer.html">DrawTiledLayer</a></li><li><a href="GameStage.html">GameStage</a></li><li><a href="GameStageData.html">GameStageData</a></li><li><a href="IExtension.html">IExtension</a></li><li><a href="INetwork.html">INetwork</a></li><li><a href="IRender.html">IRender</a></li><li><a href="ISystem.html">ISystem</a></li><li><a href="ISystemAudio.html">ISystemAudio</a></li><li><a href="RenderLoop.html">RenderLoop</a></li><li><a href="RenderLoopDebug.html">RenderLoopDebug</a></li><li><a href="System.html">System</a></li><li><a href="SystemSettings.html">SystemSettings</a></li></ul><h3>Tutorials</h3><ul><li><a href="tutorial-application_scheme.html">Application Scheme</a></li><li><a href="tutorial-assets_manager.html">Assets Manager</a></li><li><a href="tutorial-common_issues.html">Common Issues</a></li><li><a href="tutorial-how_to_add_and_use_audio.html">How to add and use audio</a></li><li><a href="tutorial-how_to_do_animations.html">How to Create Animations</a></li><li><a href="tutorial-how_to_load_and_use_tilemaps.html">How to Load and Use Tilemaps</a></li><li><a href="tutorial-quick_start.html">Quick Start</a></li><li><a href="tutorial-spine_animations.html">How to Add Spine Animations</a></li><li><a href="tutorial-stages_lifecycle.html">Stages Lifecycle</a></li></ul>
</nav>
<br class="clear">
<footer>
Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.4</a> on Wed Jun 18 2025 06:53:54 GMT+0000 (Coordinated Universal Time)
</footer>
<script> prettyPrint(); </script>
<script src="scripts/linenumber.js"> </script>
</body>
</html>