<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>SpriteSheetLoader - Pixi.JS</title>
<link rel="stylesheet" href="http://yui.yahooapis.com/3.9.1/build/cssgrids/cssgrids-min.css">
<link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
<link rel="stylesheet" href="../assets/css/main.css" id="site_styles">
<link rel="shortcut icon" type="image/png" href="../assets/favicon.png">
<script src="http://yui.yahooapis.com/combo?3.9.1/build/yui/yui-min.js"></script>
</head>
<body class="yui3-skin-sam">
<div id="doc">
<div id="hd" class="yui3-g header">
<div class="yui3-u-3-4">
<h1><img src="http://www.goodboydigital.com/pixijs/logo_small.png" title="Pixi.JS"></h1>
</div>
<div class="yui3-u-1-4 version">
<em>API Docs for: 1.3.0</em>
</div>
</div>
<div id="bd" class="yui3-g">
<div class="yui3-u-1-4">
<div id="docs-sidebar" class="sidebar apidocs">
<div id="api-list">
<h2 class="off-left">APIs</h2>
<div id="api-tabview" class="tabview">
<ul class="tabs">
<li><a href="#api-classes">Classes</a></li>
<li><a href="#api-modules">Modules</a></li>
</ul>
<div id="api-tabview-filter">
<input type="search" id="api-filter" placeholder="Type to filter APIs">
</div>
<div id="api-tabview-panel">
<ul id="api-classes" class="apis classes">
<li><a href="../classes/AbstractFilter.html">AbstractFilter</a></li>
<li><a href="../classes/AssetLoader.html">AssetLoader</a></li>
<li><a href="../classes/BaseTexture.html">BaseTexture</a></li>
<li><a href="../classes/BitmapFontLoader.html">BitmapFontLoader</a></li>
<li><a href="../classes/BitmapText.html">BitmapText</a></li>
<li><a href="../classes/BlurFilter.html">BlurFilter</a></li>
<li><a href="../classes/CanvasGraphics.html">CanvasGraphics</a></li>
<li><a href="../classes/CanvasRenderer.html">CanvasRenderer</a></li>
<li><a href="../classes/Circle.html">Circle</a></li>
<li><a href="../classes/ColorMatrixFilter.html">ColorMatrixFilter</a></li>
<li><a href="../classes/CustomRenderable.html">CustomRenderable</a></li>
<li><a href="../classes/DisplacementFilter.html">DisplacementFilter</a></li>
<li><a href="../classes/DisplayObject.html">DisplayObject</a></li>
<li><a href="../classes/DisplayObjectContainer.html">DisplayObjectContainer</a></li>
<li><a href="../classes/Ellipse.html">Ellipse</a></li>
<li><a href="../classes/EventTarget.html">EventTarget</a></li>
<li><a href="../classes/Graphics.html">Graphics</a></li>
<li><a href="../classes/GreyFilter.html">GreyFilter</a></li>
<li><a href="../classes/ImageLoader.html">ImageLoader</a></li>
<li><a href="../classes/InvertFilter.html">InvertFilter</a></li>
<li><a href="../classes/JsonLoader.html">JsonLoader</a></li>
<li><a href="../classes/MovieClip.html">MovieClip</a></li>
<li><a href="../classes/PixelateFilter.html">PixelateFilter</a></li>
<li><a href="../classes/Point.html">Point</a></li>
<li><a href="../classes/Polygon.html">Polygon</a></li>
<li><a href="../classes/PolyK._convex.html">PolyK._convex</a></li>
<li><a href="../classes/PolyK._PointInTriangle.html">PolyK._PointInTriangle</a></li>
<li><a href="../classes/PolyK.AjaxRequest.html">PolyK.AjaxRequest</a></li>
<li><a href="../classes/PolyK.InteractionData.html">PolyK.InteractionData</a></li>
<li><a href="../classes/PolyK.InteractionManager.html">PolyK.InteractionManager</a></li>
<li><a href="../classes/Rectangle.html">Rectangle</a></li>
<li><a href="../classes/RenderTexture.html">RenderTexture</a></li>
<li><a href="../classes/SepiaFilter.html">SepiaFilter</a></li>
<li><a href="../classes/Spine.html">Spine</a></li>
<li><a href="../classes/Sprite.html">Sprite</a></li>
<li><a href="../classes/SpriteSheetLoader.html">SpriteSheetLoader</a></li>
<li><a href="../classes/Stage.html">Stage</a></li>
<li><a href="../classes/Text.html">Text</a></li>
<li><a href="../classes/Texture.html">Texture</a></li>
<li><a href="../classes/TilingSprite.html">TilingSprite</a></li>
<li><a href="../classes/WebGLBatch.html">WebGLBatch</a></li>
<li><a href="../classes/WebGLRenderer.html">WebGLRenderer</a></li>
</ul>
<ul id="api-modules" class="apis modules">
<li><a href="../modules/PIXI.html">PIXI</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="yui3-u-3-4">
<div id="api-options">
Show:
<label for="api-show-inherited">
<input type="checkbox" id="api-show-inherited" checked>
Inherited
</label>
<label for="api-show-protected">
<input type="checkbox" id="api-show-protected">
Protected
</label>
<label for="api-show-private">
<input type="checkbox" id="api-show-private">
Private
</label>
<label for="api-show-deprecated">
<input type="checkbox" id="api-show-deprecated">
Deprecated
</label>
</div>
<div class="apidocs">
<div id="docs-main">
<div class="content">
<h1>SpriteSheetLoader Class</h1>
<div class="box meta">
<div class="uses">
Uses
<ul class="inline commas">
<li><a href="EventTarget.html">EventTarget</a></li>
</ul>
</div>
<div class="foundat">
Defined in: <a href="../files/src_pixi_loaders_SpriteSheetLoader.js.html#l5"><code>src/pixi/loaders/SpriteSheetLoader.js:5</code></a>
</div>
Module: <a href="../modules/PIXI.html">PIXI</a>
</div>
<div class="box intro">
<p>The sprite sheet loader is used to load in JSON sprite sheet data
To generate the data you can use <a href="http://www.codeandweb.com/texturepacker">http://www.codeandweb.com/texturepacker</a> and publish the "JSON" format
There is a free version so thats nice, although the paid version is great value for money.
It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed.
Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()
This loader will also load the image file that the Spritesheet points to as well as the data.
When loaded this class will dispatch a "loaded" event</p>
</div>
<div class="constructor">
<h2>Constructor</h2>
<div id="method_SpriteSheetLoader" class="method item">
<h3 class="name"><code>SpriteSheetLoader</code></h3>
<div class="args">
<span class="paren">(</span><ul class="args-list inline commas">
<li class="arg">
<code>url</code>
</li>
<li class="arg">
<code>crossorigin</code>
</li>
</ul><span class="paren">)</span>
</div>
<div class="meta">
<p>
Defined in
<a href="../files/src_pixi_loaders_SpriteSheetLoader.js.html#l5"><code>src/pixi/loaders/SpriteSheetLoader.js:5</code></a>
</p>
</div>
<div class="description">
</div>
<div class="params">
<h4>Parameters:</h4>
<ul class="params-list">
<li class="param">
<code class="param-name">url</code>
<span class="type">String</span>
<div class="param-description">
<p>The url of the sprite sheet JSON file</p>
</div>
</li>
<li class="param">
<code class="param-name">crossorigin</code>
<span class="type">Boolean</span>
<div class="param-description">
<p>Whether requests should be treated as crossorigin</p>
</div>
</li>
</ul>
</div>
</div>
</div>
<div id="classdocs" class="tabview">
<ul class="api-class-tabs">
<li class="api-class-tab index"><a href="#index">Index</a></li>
<li class="api-class-tab methods"><a href="#methods">Methods</a></li>
<li class="api-class-tab properties"><a href="#properties">Properties</a></li>
</ul>
<div>
<div id="index" class="api-class-tabpanel index">
<h2 class="off-left">Item Index</h2>
<div class="index-section methods">
<h3>Methods</h3>
<ul class="index-list methods">
<li class="index-item method">
<a href="#method_load">load</a>
</li>
<li class="index-item method private">
<a href="#method_onJSONLoaded">onJSONLoaded</a>
</li>
<li class="index-item method private">
<a href="#method_onLoaded">onLoaded</a>
</li>
</ul>
</div>
<div class="index-section properties">
<h3>Properties</h3>
<ul class="index-list properties">
<li class="index-item property">
<a href="#property_baseUrl">baseUrl</a>
</li>
<li class="index-item property">
<a href="#property_crossorigin">crossorigin</a>
</li>
<li class="index-item property">
<a href="#property_frames">frames</a>
</li>
<li class="index-item property">
<a href="#property_texture">texture</a>
</li>
<li class="index-item property">
<a href="#property_url">url</a>
</li>
</ul>
</div>
</div>
<div id="methods" class="api-class-tabpanel">
<h2 class="off-left">Methods</h2>
<div id="method_load" class="method item">
<h3 class="name"><code>load</code></h3>
<span class="paren">()</span>
<div class="meta">
<p>
Defined in
<a href="../files/src_pixi_loaders_SpriteSheetLoader.js.html#l74"><code>src/pixi/loaders/SpriteSheetLoader.js:74</code></a>
</p>
</div>
<div class="description">
<p>This will begin loading the JSON file</p>
</div>
</div>
<div id="method_onJSONLoaded" class="method item private">
<h3 class="name"><code>onJSONLoaded</code></h3>
<span class="paren">()</span>
<span class="flag private">private</span>
<div class="meta">
<p>
Defined in
<a href="../files/src_pixi_loaders_SpriteSheetLoader.js.html#l89"><code>src/pixi/loaders/SpriteSheetLoader.js:89</code></a>
</p>
</div>
<div class="description">
<p>Invoke when JSON file is loaded</p>
</div>
</div>
<div id="method_onLoaded" class="method item private">
<h3 class="name"><code>onLoaded</code></h3>
<span class="paren">()</span>
<span class="flag private">private</span>
<div class="meta">
<p>
Defined in
<a href="../files/src_pixi_loaders_SpriteSheetLoader.js.html#l126"><code>src/pixi/loaders/SpriteSheetLoader.js:126</code></a>
</p>
</div>
<div class="description">
<p>Invoke when all files are loaded (json and texture)</p>
</div>
</div>
</div>
<div id="properties" class="api-class-tabpanel">
<h2 class="off-left">Properties</h2>
<div id="property_baseUrl" class="property item">
<h3 class="name"><code>baseUrl</code></h3>
<span class="type">String</span>
<div class="meta">
<p>
Defined in
<a href="../files/src_pixi_loaders_SpriteSheetLoader.js.html#l45"><code>src/pixi/loaders/SpriteSheetLoader.js:45</code></a>
</p>
</div>
<div class="description">
<p>[read-only] The base url of the bitmap font data</p>
</div>
</div>
<div id="property_crossorigin" class="property item">
<h3 class="name"><code>crossorigin</code></h3>
<span class="type">Boolean</span>
<div class="meta">
<p>
Defined in
<a href="../files/src_pixi_loaders_SpriteSheetLoader.js.html#l37"><code>src/pixi/loaders/SpriteSheetLoader.js:37</code></a>
</p>
</div>
<div class="description">
<p>Whether the requests should be treated as cross origin</p>
</div>
</div>
<div id="property_frames" class="property item">
<h3 class="name"><code>frames</code></h3>
<span class="type">Object</span>
<div class="meta">
<p>
Defined in
<a href="../files/src_pixi_loaders_SpriteSheetLoader.js.html#l62"><code>src/pixi/loaders/SpriteSheetLoader.js:62</code></a>
</p>
</div>
<div class="description">
<p>The frames of the sprite sheet</p>
</div>
</div>
<div id="property_texture" class="property item">
<h3 class="name"><code>texture</code></h3>
<span class="type"><a href="../classes/Texture.html" class="crosslink">Texture</a></span>
<div class="meta">
<p>
Defined in
<a href="../files/src_pixi_loaders_SpriteSheetLoader.js.html#l54"><code>src/pixi/loaders/SpriteSheetLoader.js:54</code></a>
</p>
</div>
<div class="description">
<p>The texture being loaded</p>
</div>
</div>
<div id="property_url" class="property item">
<h3 class="name"><code>url</code></h3>
<span class="type">String</span>
<div class="meta">
<p>
Defined in
<a href="../files/src_pixi_loaders_SpriteSheetLoader.js.html#l29"><code>src/pixi/loaders/SpriteSheetLoader.js:29</code></a>
</p>
</div>
<div class="description">
<p>The url of the bitmap font data</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="../assets/vendor/prettify/prettify-min.js"></script>
<script>prettyPrint();</script>
<script src="../assets/js/yui-prettify.js"></script>
<script src="../assets/../api.js"></script>
<script src="../assets/js/api-filter.js"></script>
<script src="../assets/js/api-list.js"></script>
<script src="../assets/js/api-search.js"></script>
<script src="../assets/js/apidocs.js"></script>
</body>
</html>
