<html><head><link type='text/css' rel='stylesheet' href='styles/javadoc.css'><link type='text/css' rel='stylesheet' href='styles/default.css'><!--<h1 class="page-title">Class: ImageCollection</h1>--> 
<section> 
 <header> 
  <h2> <span class="ancestors"><a href="Phaser.html">Phaser</a>.</span> ImageCollection </h2> 
 </header> 
 <article> 
  <div class="container-overview"> 
   <dt> 
    <h4 class="name " id="ImageCollection"><span class="type-signature"></span>new ImageCollection<span class="signature">(name, firstgid, <span class="optional">width</span>, <span class="optional">height</span>, <span class="optional">margin</span>, <span class="optional">spacing</span>, <span class="optional">properties</span>)</span><span class="type-signature"></span></h4> 
   </dt> 
   <dd> 
    <div class="description"> 
     <p>An Image Collection is a special tileset containing mulitple images, with no slicing into each image.</p> 
     <p>Image Collections are normally created automatically when Tiled data is loaded.</p> 
    </div> 
    <h5>Parameters:</h5> 
    <table class="params table table-striped"> 
     <thead> 
      <tr> 
       <th>Name</th> 
       <th>Type</th> 
       <th>Argument</th> 
       <th>Default</th> 
       <th class="last">Description</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td class="name"><code>name</code></td> 
       <td class="type"> <span class="param-type">string</span> </td> 
       <td class="attributes"> </td> 
       <td class="default"> </td> 
       <td class="description last"><p>The name of the image collection in the map data.</p></td> 
      </tr> 
      <tr> 
       <td class="name"><code>firstgid</code></td> 
       <td class="type"> <span class="param-type">integer</span> </td> 
       <td class="attributes"> </td> 
       <td class="default"> </td> 
       <td class="description last"><p>The first image index this image collection contains.</p></td> 
      </tr> 
      <tr> 
       <td class="name"><code>width</code></td> 
       <td class="type"> <span class="param-type">integer</span> </td> 
       <td class="attributes"> &lt;optional&gt;<br> </td> 
       <td class="default"> 32 </td> 
       <td class="description last"><p>Width of widest image (in pixels).</p></td> 
      </tr> 
      <tr> 
       <td class="name"><code>height</code></td> 
       <td class="type"> <span class="param-type">integer</span> </td> 
       <td class="attributes"> &lt;optional&gt;<br> </td> 
       <td class="default"> 32 </td> 
       <td class="description last"><p>Height of tallest image (in pixels).</p></td> 
      </tr> 
      <tr> 
       <td class="name"><code>margin</code></td> 
       <td class="type"> <span class="param-type">integer</span> </td> 
       <td class="attributes"> &lt;optional&gt;<br> </td> 
       <td class="default"> 0 </td> 
       <td class="description last"><p>The margin around all images in the collection (in pixels).</p></td> 
      </tr> 
      <tr> 
       <td class="name"><code>spacing</code></td> 
       <td class="type"> <span class="param-type">integer</span> </td> 
       <td class="attributes"> &lt;optional&gt;<br> </td> 
       <td class="default"> 0 </td> 
       <td class="description last"><p>The spacing between each image in the collection (in pixels).</p></td> 
      </tr> 
      <tr> 
       <td class="name"><code>properties</code></td> 
       <td class="type"> <span class="param-type">object</span> </td> 
       <td class="attributes"> &lt;optional&gt;<br> </td> 
       <td class="default"> {} </td> 
       <td class="description last"><p>Custom Image Collection properties.</p></td> 
      </tr> 
     </tbody> 
    </table> 
    <dl class="details"> 
     <dt class="tag-source">
      Source - 
      <a href="src_tilemap_ImageCollection.js.html">tilemap/ImageCollection.js</a>, 
      <a href="src_tilemap_ImageCollection.js.html#sunlight-1-line-22">line 22</a> 
     </dt> 
    </dl> 
   </dd> 
  </div> 
  <h3 class="subsection-title">Members</h3> 
  <dl> 
   <dt> 
    <h4 class="name " id="firstgid"><span class="type-signature"></span>firstgid<span class="type-signature"> :integer</span></h4> 
   </dt> 
   <dd> 
    <div class="description"> 
     <p>The Tiled firstgid value.<br>This is the starting index of the first image index this Image Collection contains.</p> 
    </div> 
    <dl class="details"> 
     <dt class="tag-source">
      Source - 
      <a href="src_tilemap_ImageCollection.js.html">tilemap/ImageCollection.js</a>, 
      <a href="src_tilemap_ImageCollection.js.html#sunlight-1-line-40">line 40</a> 
     </dt> 
    </dl> 
   </dd> 
   <dt> 
    <h4 class="name " id="imageHeight"><span class="type-signature">&lt;readonly&gt; </span>imageHeight<span class="type-signature"> :integer</span></h4> 
   </dt> 
   <dd> 
    <div class="description"> 
     <p>The height of the tallest image (in pixels).</p> 
    </div> 
    <dl class="details"> 
     <dt class="tag-source">
      Source - 
      <a href="src_tilemap_ImageCollection.js.html">tilemap/ImageCollection.js</a>, 
      <a href="src_tilemap_ImageCollection.js.html#sunlight-1-line-54">line 54</a> 
     </dt> 
    </dl> 
   </dd> 
   <dt> 
    <h4 class="name " id="imageMargin"><span class="type-signature">&lt;readonly&gt; </span>imageMargin<span class="type-signature"></span></h4> 
   </dt> 
   <dd> 
    <div class="description"> 
     <p>The margin around the images in the collection (in pixels).<br>Use <code>setSpacing</code> to change.</p> 
    </div> 
    <dl class="details"> 
     <h5 class="subsection-title">Properties:</h5> 
     <dl> 
      <table class="props table table-striped"> 
       <thead> 
        <tr> 
         <th>Name</th> 
         <th>Type</th> 
         <th class="last">Description</th> 
        </tr> 
       </thead> 
       <tbody> 
        <tr> 
         <td class="name"><code>imageMarge</code></td> 
         <td class="type"> <span class="param-type">integer</span> </td> 
         <td class="description last"></td> 
        </tr> 
       </tbody> 
      </table> 
     </dl> 
     <dt class="tag-source">
      Source - 
      <a href="src_tilemap_ImageCollection.js.html">tilemap/ImageCollection.js</a>, 
      <a href="src_tilemap_ImageCollection.js.html#sunlight-1-line-63">line 63</a> 
     </dt> 
    </dl> 
   </dd> 
   <dt> 
    <h4 class="name " id="images"><span class="type-signature">&lt;readonly&gt; </span>images<span class="type-signature"> :array</span></h4> 
   </dt> 
   <dd> 
    <div class="description"> 
     <p>The cached images that are a part of this collection.</p> 
    </div> 
    <dl class="details"> 
     <dt class="tag-source">
      Source - 
      <a href="src_tilemap_ImageCollection.js.html">tilemap/ImageCollection.js</a>, 
      <a href="src_tilemap_ImageCollection.js.html#sunlight-1-line-85">line 85</a> 
     </dt> 
    </dl> 
   </dd> 
   <dt> 
    <h4 class="name " id="imageSpacing"><span class="type-signature">&lt;readonly&gt; </span>imageSpacing<span class="type-signature"> :integer</span></h4> 
   </dt> 
   <dd> 
    <div class="description"> 
     <p>The spacing between each image in the collection (in pixels).<br>Use <code>setSpacing</code> to change.</p> 
    </div> 
    <dl class="details"> 
     <dt class="tag-source">
      Source - 
      <a href="src_tilemap_ImageCollection.js.html">tilemap/ImageCollection.js</a>, 
      <a href="src_tilemap_ImageCollection.js.html#sunlight-1-line-71">line 71</a> 
     </dt> 
    </dl> 
   </dd> 
   <dt> 
    <h4 class="name " id="imageWidth"><span class="type-signature">&lt;readonly&gt; </span>imageWidth<span class="type-signature"> :integer</span></h4> 
   </dt> 
   <dd> 
    <div class="description"> 
     <p>The width of the widest image (in pixels).</p> 
    </div> 
    <dl class="details"> 
     <dt class="tag-source">
      Source - 
      <a href="src_tilemap_ImageCollection.js.html">tilemap/ImageCollection.js</a>, 
      <a href="src_tilemap_ImageCollection.js.html#sunlight-1-line-47">line 47</a> 
     </dt> 
    </dl> 
   </dd> 
   <dt> 
    <h4 class="name " id="name"><span class="type-signature"></span>name<span class="type-signature"> :string</span></h4> 
   </dt> 
   <dd> 
    <div class="description"> 
     <p>The name of the Image Collection.</p> 
    </div> 
    <dl class="details"> 
     <dt class="tag-source">
      Source - 
      <a href="src_tilemap_ImageCollection.js.html">tilemap/ImageCollection.js</a>, 
      <a href="src_tilemap_ImageCollection.js.html#sunlight-1-line-33">line 33</a> 
     </dt> 
    </dl> 
   </dd> 
   <dt> 
    <h4 class="name " id="properties"><span class="type-signature"></span>properties<span class="type-signature"> :object</span></h4> 
   </dt> 
   <dd> 
    <div class="description"> 
     <p>Image Collection-specific properties that are typically defined in the Tiled editor.</p> 
    </div> 
    <dl class="details"> 
     <dt class="tag-source">
      Source - 
      <a href="src_tilemap_ImageCollection.js.html">tilemap/ImageCollection.js</a>, 
      <a href="src_tilemap_ImageCollection.js.html#sunlight-1-line-77">line 77</a> 
     </dt> 
    </dl> 
   </dd> 
   <dt> 
    <h4 class="name " id="total"><span class="type-signature">&lt;readonly&gt; </span>total<span class="type-signature"> :integer</span></h4> 
   </dt> 
   <dd> 
    <div class="description"> 
     <p>The total number of images in the image collection.</p> 
    </div> 
    <dl class="details"> 
     <dt class="tag-source">
      Source - 
      <a href="src_tilemap_ImageCollection.js.html">tilemap/ImageCollection.js</a>, 
      <a href="src_tilemap_ImageCollection.js.html#sunlight-1-line-93">line 93</a> 
     </dt> 
    </dl> 
   </dd> 
  </dl> 
  <h3 class="subsection-title">Methods</h3> 
  <dl> 
   <dt> 
    <h4 class="name " id="addImage"><span class="type-signature"></span>addImage<span class="signature">(gid, image)</span><span class="type-signature"></span></h4> 
   </dt> 
   <dd> 
    <div class="description"> 
     <p>Add an image to this Image Collection.</p> 
    </div> 
    <h5>Parameters:</h5> 
    <table class="params table table-striped"> 
     <thead> 
      <tr> 
       <th>Name</th> 
       <th>Type</th> 
       <th class="last">Description</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td class="name"><code>gid</code></td> 
       <td class="type"> <span class="param-type">integer</span> </td> 
       <td class="description last"><p>The gid of the image in the Image Collection.</p></td> 
      </tr> 
      <tr> 
       <td class="name"><code>image</code></td> 
       <td class="type"> <span class="param-type">string</span> </td> 
       <td class="description last"><p>The the key of the image in the Image Collection and in the cache.</p></td> 
      </tr> 
     </tbody> 
    </table> 
    <dl class="details"> 
     <dt class="tag-source">
      Source - 
      <a href="src_tilemap_ImageCollection.js.html">tilemap/ImageCollection.js</a>, 
      <a href="src_tilemap_ImageCollection.js.html#sunlight-1-line-114">line 114</a> 
     </dt> 
    </dl> 
   </dd> 
   <dt> 
    <h4 class="name " id="containsImageIndex"><span class="type-signature"></span>containsImageIndex<span class="signature">(imageIndex)</span><span class="type-signature"> ? {boolean}</span></h4> 
   </dt> 
   <dd> 
    <div class="description"> 
     <p>Returns true if and only if this image collection contains the given image index.</p> 
    </div> 
    <h5>Parameters:</h5> 
    <table class="params table table-striped"> 
     <thead> 
      <tr> 
       <th>Name</th> 
       <th>Type</th> 
       <th class="last">Description</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td class="name"><code>imageIndex</code></td> 
       <td class="type"> <span class="param-type">integer</span> </td> 
       <td class="description last"><p>The image index to search for.</p></td> 
      </tr> 
     </tbody> 
    </table> 
    <h5>Returns:</h5> 
    <div class="returns"> 
     <div class="returns-type"> 
      <span class="param-type">boolean</span> - 
     </div> 
     <div class="returns-desc param-desc"> 
      <p>True if this Image Collection contains the given index.</p> 
     </div> 
    </div> 
    <dl class="details"> 
     <dt class="tag-source">
      Source - 
      <a href="src_tilemap_ImageCollection.js.html">tilemap/ImageCollection.js</a>, 
      <a href="src_tilemap_ImageCollection.js.html#sunlight-1-line-98">line 98</a> 
     </dt> 
    </dl> 
   </dd> 
  </dl> 
 </article> 
</section></head></html>