phaser/docs/Phaser.Animation.html
photonstorm 5d5c64d22f Tilemap.createCollisionObjects will parse Tiled data for objectgroups and convert polyline instances into physics objects you can collide with in the world.
After defining tiles that collide on a Tilemap, you need to call Tilemap.generateCollisionData(layer) to populate the physics world with the data required.
Debug.renderPhysicsBody updated to take camera location and body rotation into account.
Body movement functions put back to velocity :)
Updated to latest dev version of pixi and latest p2.js
Updated docs
2014-02-18 03:01:51 +00:00

3001 lines
No EOL
44 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Phaser Class: Animation</title>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link type="text/css" rel="stylesheet" href="styles/sunlight.default.css">
<link type="text/css" rel="stylesheet" href="styles/site.cerulean.css">
</head>
<body>
<div class="container-fluid">
<div class="navbar navbar-fixed-top navbar-inverse">
<div class="navbar-inner">
<a class="brand" href="index.html">Phaser</a>
<ul class="nav">
<li class="dropdown">
<a href="namespaces.list.html" class="dropdown-toggle" data-toggle="dropdown">Namespaces<b
class="caret"></b></a>
<ul class="dropdown-menu ">
<li>
<a href="Phaser.html">Phaser</a>
</li>
</ul>
</li>
<li class="dropdown">
<a href="classes.list.html" class="dropdown-toggle" data-toggle="dropdown">Classes<b
class="caret"></b></a>
<ul class="dropdown-menu ">
<li>
<a href="Phaser.Animation.html">Animation</a>
</li>
<li>
<a href="Phaser.AnimationManager.html">AnimationManager</a>
</li>
<li>
<a href="Phaser.AnimationParser.html">AnimationParser</a>
</li>
<li>
<a href="Phaser.BitmapData.html">BitmapData</a>
</li>
<li>
<a href="Phaser.BitmapFont.html">BitmapFont</a>
</li>
<li>
<a href="Phaser.BitmapText.html">BitmapText</a>
</li>
<li>
<a href="Phaser.Button.html">Button</a>
</li>
<li>
<a href="Phaser.Cache.html">Cache</a>
</li>
<li>
<a href="Phaser.Camera.html">Camera</a>
</li>
<li>
<a href="Phaser.Canvas.html">Canvas</a>
</li>
<li>
<a href="Phaser.Circle.html">Circle</a>
</li>
<li>
<a href="Phaser.Color.html">Color</a>
</li>
<li>
<a href="Phaser.Device.html">Device</a>
</li>
<li>
<a href="Phaser.Easing.html">Easing</a>
</li>
<li>
<a href="Phaser.Easing.Back.html">Back</a>
</li>
<li>
<a href="Phaser.Easing.Bounce.html">Bounce</a>
</li>
<li>
<a href="Phaser.Easing.Circular.html">Circular</a>
</li>
<li>
<a href="Phaser.Easing.Cubic.html">Cubic</a>
</li>
<li>
<a href="Phaser.Easing.Elastic.html">Elastic</a>
</li>
<li>
<a href="Phaser.Easing.Exponential.html">Exponential</a>
</li>
<li>
<a href="Phaser.Easing.Linear.html">Linear</a>
</li>
<li>
<a href="Phaser.Easing.Quadratic.html">Quadratic</a>
</li>
<li>
<a href="Phaser.Easing.Quartic.html">Quartic</a>
</li>
<li>
<a href="Phaser.Easing.Quintic.html">Quintic</a>
</li>
<li>
<a href="Phaser.Easing.Sinusoidal.html">Sinusoidal</a>
</li>
<li>
<a href="Phaser.Ellipse.html">Ellipse</a>
</li>
<li>
<a href="Phaser.Events.html">Events</a>
</li>
<li>
<a href="Phaser.Filter.html">Filter</a>
</li>
<li>
<a href="Phaser.Frame.html">Frame</a>
</li>
<li>
<a href="Phaser.FrameData.html">FrameData</a>
</li>
<li>
<a href="Phaser.Game.html">Game</a>
</li>
<li>
<a href="Phaser.GameObjectFactory.html">GameObjectFactory</a>
</li>
<li>
<a href="Phaser.Gamepad.html">Gamepad</a>
</li>
<li>
<a href="Phaser.GamepadButton.html">GamepadButton</a>
</li>
<li>
<a href="Phaser.Graphics.html">Graphics</a>
</li>
<li>
<a href="Phaser.Group.html">Group</a>
</li>
<li>
<a href="Phaser.Image.html">Image</a>
</li>
<li>
<a href="Phaser.Input.html">Input</a>
</li>
<li>
<a href="Phaser.InputHandler.html">InputHandler</a>
</li>
<li>
<a href="Phaser.Key.html">Key</a>
</li>
<li>
<a href="Phaser.Keyboard.html">Keyboard</a>
</li>
<li>
<a href="Phaser.Line.html">Line</a>
</li>
<li>
<a href="Phaser.LinkedList.html">LinkedList</a>
</li>
<li>
<a href="Phaser.Loader.html">Loader</a>
</li>
<li>
<a href="Phaser.LoaderParser.html">LoaderParser</a>
</li>
<li>
<a href="Phaser.Math.html">Math</a>
</li>
<li>
<a href="Phaser.Mouse.html">Mouse</a>
</li>
<li>
<a href="Phaser.MSPointer.html">MSPointer</a>
</li>
<li>
<a href="Phaser.Net.html">Net</a>
</li>
<li>
<a href="Phaser.Particles.html">Particles</a>
</li>
<li>
<a href="Phaser.Particles.Arcade.Emitter.html">Emitter</a>
</li>
<li>
<a href="Phaser.Physics.html">Physics</a>
</li>
<li>
<a href="Phaser.Physics.Arcade.html">Arcade</a>
</li>
<li>
<a href="Phaser.Plugin.html">Plugin</a>
</li>
<li>
<a href="Phaser.PluginManager.html">PluginManager</a>
</li>
<li>
<a href="Phaser.Point.html">Point</a>
</li>
<li>
<a href="Phaser.Pointer.html">Pointer</a>
</li>
<li>
<a href="Phaser.Polygon.html">Polygon</a>
</li>
<li>
<a href="Phaser.QuadTree.html">QuadTree</a>
</li>
<li>
<a href="Phaser.RandomDataGenerator.html">RandomDataGenerator</a>
</li>
<li>
<a href="Phaser.Rectangle.html">Rectangle</a>
</li>
<li>
<a href="Phaser.RenderTexture.html">RenderTexture</a>
</li>
<li>
<a href="Phaser.RequestAnimationFrame.html">RequestAnimationFrame</a>
</li>
<li>
<a href="Phaser.Signal.html">Signal</a>
</li>
<li>
<a href="Phaser.SinglePad.html">SinglePad</a>
</li>
<li>
<a href="Phaser.Sound.html">Sound</a>
</li>
<li>
<a href="Phaser.SoundManager.html">SoundManager</a>
</li>
<li>
<a href="Phaser.Sprite.html">Sprite</a>
</li>
<li>
<a href="Phaser.SpriteBatch.html">SpriteBatch</a>
</li>
<li>
<a href="Phaser.Stage.html">Stage</a>
</li>
<li>
<a href="Phaser.StageScaleMode.html">StageScaleMode</a>
</li>
<li>
<a href="Phaser.State.html">State</a>
</li>
<li>
<a href="Phaser.StateManager.html">StateManager</a>
</li>
<li>
<a href="Phaser.Text.html">Text</a>
</li>
<li>
<a href="Phaser.Tile.html">Tile</a>
</li>
<li>
<a href="Phaser.Tilemap.html">Tilemap</a>
</li>
<li>
<a href="Phaser.TilemapLayer.html">TilemapLayer</a>
</li>
<li>
<a href="Phaser.TilemapParser.html">TilemapParser</a>
</li>
<li>
<a href="Phaser.Tileset.html">Tileset</a>
</li>
<li>
<a href="Phaser.TileSprite.html">TileSprite</a>
</li>
<li>
<a href="Phaser.Time.html">Time</a>
</li>
<li>
<a href="Phaser.Timer.html">Timer</a>
</li>
<li>
<a href="Phaser.TimerEvent.html">TimerEvent</a>
</li>
<li>
<a href="Phaser.Touch.html">Touch</a>
</li>
<li>
<a href="Phaser.Tween.html">Tween</a>
</li>
<li>
<a href="Phaser.TweenManager.html">TweenManager</a>
</li>
<li>
<a href="Phaser.Utils.html">Utils</a>
</li>
<li>
<a href="Phaser.Utils.Debug.html">Debug</a>
</li>
<li>
<a href="Phaser.World.html">World</a>
</li>
<li>
<a href="SignalBinding.html">SignalBinding</a>
</li>
</ul>
</li>
<li class="dropdown">
<a href="global.html" class="dropdown-toggle" data-toggle="dropdown">Global<b
class="caret"></b></a>
<ul class="dropdown-menu ">
<li>
<a href="global.html#canUseNewCanvasBlendModes">canUseNewCanvasBlendModes</a>
</li>
<li>
<a href="global.html#getBounds">getBounds</a>
</li>
<li>
<a href="global.html#getNextPowerOfTwo">getNextPowerOfTwo</a>
</li>
<li>
<a href="global.html#hex2rgb">hex2rgb</a>
</li>
<li>
<a href="global.html#hitTest">hitTest</a>
</li>
<li>
<a href="global.html#rgb2hex">rgb2hex</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="row-fluid">
<div class="span8">
<div id="main">
<h1 class="page-title">Class: Animation</h1>
<section>
<header>
<h2>
<span class="ancestors"><a href="Phaser.html">Phaser</a>.</span>
Animation
</h2>
<div class="class-description"><p>Phaser.Animation</p></div>
</header>
<article>
<div class="container-overview">
<dt>
<h4 class="name" id="Animation"><span class="type-signature"></span>new Animation<span class="signature">(game, parent, name, frameData, frames, delay, looped)</span><span class="type-signature"></span></h4>
</dt>
<dd>
<div class="description">
<p>An Animation instance contains a single animation and the controls to play it.
It is created by the AnimationManager, consists of Animation.Frame objects and belongs to a single Game Object such as a Sprite.</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>game</code></td>
<td class="type">
<span class="param-type"><a href="Phaser.Game.html">Phaser.Game</a></span>
</td>
<td class="description last"><p>A reference to the currently running game.</p></td>
</tr>
<tr>
<td class="name"><code>parent</code></td>
<td class="type">
<span class="param-type"><a href="Phaser.Sprite.html">Phaser.Sprite</a></span>
</td>
<td class="description last"><p>A reference to the owner of this Animation.</p></td>
</tr>
<tr>
<td class="name"><code>name</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last"><p>The unique name for this animation, used in playback commands.</p></td>
</tr>
<tr>
<td class="name"><code>frameData</code></td>
<td class="type">
<span class="param-type"><a href="Phaser.FrameData.html">Phaser.FrameData</a></span>
</td>
<td class="description last"><p>The FrameData object that contains all frames used by this Animation.</p></td>
</tr>
<tr>
<td class="name"><code>frames</code></td>
<td class="type">
<span class="param-type"><a href="Array.html">Array</a>.&lt;number></span>
|
<span class="param-type"><a href="Array.html">Array</a>.&lt;string></span>
</td>
<td class="description last"><p>An array of numbers or strings indicating which frames to play in which order.</p></td>
</tr>
<tr>
<td class="name"><code>delay</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="description last"><p>The time between each frame of the animation, given in ms.</p></td>
</tr>
<tr>
<td class="name"><code>looped</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="description last"><p>Should this animation loop or play through once.</p></td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Animation.js.html">animation/Animation.js</a>, <a href="Animation.js.html#sunlight-1-line-21">line 21</a>
</li></ul></dd>
</dl>
</dd>
</div>
<h3 class="subsection-title">Members</h3>
<dl>
<dt>
<h4 class="name" id="currentFrame"><span class="type-signature"></span>currentFrame<span class="type-signature"></span></h4>
</dt>
<dd>
<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>currentFrame</code></td>
<td class="type">
<span class="param-type"><a href="Phaser.Frame.html">Phaser.Frame</a></span>
</td>
<td class="description last"><p>The currently displayed frame of the Animation.</p></td>
</tr>
</tbody>
</table>
</dl>
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Animation.js.html">animation/Animation.js</a>, <a href="Animation.js.html#sunlight-1-line-117">line 117</a>
</li></ul></dd>
</dl>
</dd>
<dt>
<h4 class="name" id="delay"><span class="type-signature"></span>delay<span class="type-signature"></span></h4>
</dt>
<dd>
<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>delay</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="description last"><p>The delay in ms between each frame of the Animation.</p></td>
</tr>
</tbody>
</table>
</dl>
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Animation.js.html">animation/Animation.js</a>, <a href="Animation.js.html#sunlight-1-line-55">line 55</a>
</li></ul></dd>
</dl>
</dd>
<dt>
<h4 class="name" id="frame"><span class="type-signature"></span>frame<span class="type-signature"></span></h4>
</dt>
<dd>
<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>frame</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="description last"><p>Gets or sets the current frame index and updates the Texture Cache for display.</p></td>
</tr>
</tbody>
</table>
</dl>
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Animation.js.html">animation/Animation.js</a>, <a href="Animation.js.html#sunlight-1-line-398">line 398</a>
</li></ul></dd>
</dl>
</dd>
<dt>
<h4 class="name" id="frameTotal"><span class="type-signature">&lt;readonly> </span>frameTotal<span class="type-signature"></span></h4>
</dt>
<dd>
<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>frameTotal</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="description last"><p>The total number of frames in the currently loaded FrameData, or -1 if no FrameData is loaded.</p></td>
</tr>
</tbody>
</table>
</dl>
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Animation.js.html">animation/Animation.js</a>, <a href="Animation.js.html#sunlight-1-line-385">line 385</a>
</li></ul></dd>
</dl>
</dd>
<dt>
<h4 class="name" id="game"><span class="type-signature"></span>game<span class="type-signature"></span></h4>
</dt>
<dd>
<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>game</code></td>
<td class="type">
<span class="param-type"><a href="Phaser.Game.html">Phaser.Game</a></span>
</td>
<td class="description last"><p>A reference to the currently running Game.</p></td>
</tr>
</tbody>
</table>
</dl>
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Animation.js.html">animation/Animation.js</a>, <a href="Animation.js.html#sunlight-1-line-26">line 26</a>
</li></ul></dd>
</dl>
</dd>
<dt>
<h4 class="name" id="isFinished"><span class="type-signature"></span>isFinished<span class="type-signature"></span></h4>
</dt>
<dd>
<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>isFinished</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="description last"><p>The finished state of the Animation. Set to true once playback completes, false during playback.</p></td>
</tr>
</tbody>
</table>
</dl>
<dt class="tag-default">Default Value:</dt>
<dd class="tag-default"><ul class="dummy"><li>false</li></ul></dd>
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Animation.js.html">animation/Animation.js</a>, <a href="Animation.js.html#sunlight-1-line-72">line 72</a>
</li></ul></dd>
</dl>
</dd>
<dt>
<h4 class="name" id="isPaused"><span class="type-signature"></span>isPaused<span class="type-signature"></span></h4>
</dt>
<dd>
<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>isPaused</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="description last"><p>The paused state of the Animation.</p></td>
</tr>
</tbody>
</table>
</dl>
<dt class="tag-default">Default Value:</dt>
<dd class="tag-default"><ul class="dummy"><li>false</li></ul></dd>
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Animation.js.html">animation/Animation.js</a>, <a href="Animation.js.html#sunlight-1-line-84">line 84</a>
</li></ul></dd>
</dl>
</dd>
<dt>
<h4 class="name" id="isPlaying"><span class="type-signature"></span>isPlaying<span class="type-signature"></span></h4>
</dt>
<dd>
<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>isPlaying</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="description last"><p>The playing state of the Animation. Set to false once playback completes, true during playback.</p></td>
</tr>
</tbody>
</table>
</dl>
<dt class="tag-default">Default Value:</dt>
<dd class="tag-default"><ul class="dummy"><li>false</li></ul></dd>
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Animation.js.html">animation/Animation.js</a>, <a href="Animation.js.html#sunlight-1-line-78">line 78</a>
</li></ul></dd>
</dl>
</dd>
<dt>
<h4 class="name" id="killOnComplete"><span class="type-signature"></span>killOnComplete<span class="type-signature"></span></h4>
</dt>
<dd>
<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>killOnComplete</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="description last"><p>Should the parent of this Animation be killed when the animation completes?</p></td>
</tr>
</tbody>
</table>
</dl>
<dt class="tag-default">Default Value:</dt>
<dd class="tag-default"><ul class="dummy"><li>false</li></ul></dd>
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Animation.js.html">animation/Animation.js</a>, <a href="Animation.js.html#sunlight-1-line-66">line 66</a>
</li></ul></dd>
</dl>
</dd>
<dt>
<h4 class="name" id="looped"><span class="type-signature"></span>looped<span class="type-signature"></span></h4>
</dt>
<dd>
<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>looped</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="description last"><p>The loop state of the Animation.</p></td>
</tr>
</tbody>
</table>
</dl>
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Animation.js.html">animation/Animation.js</a>, <a href="Animation.js.html#sunlight-1-line-60">line 60</a>
</li></ul></dd>
</dl>
</dd>
<dt>
<h4 class="name" id="name"><span class="type-signature"></span>name<span class="type-signature"></span></h4>
</dt>
<dd>
<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>name</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last"><p>The user defined name given to this Animation.</p></td>
</tr>
</tbody>
</table>
</dl>
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Animation.js.html">animation/Animation.js</a>, <a href="Animation.js.html#sunlight-1-line-43">line 43</a>
</li></ul></dd>
</dl>
</dd>
<dt>
<h4 class="name" id="paused"><span class="type-signature"></span>paused<span class="type-signature"></span></h4>
</dt>
<dd>
<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>paused</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="description last"><p>Gets and sets the paused state of this Animation.</p></td>
</tr>
</tbody>
</table>
</dl>
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Animation.js.html">animation/Animation.js</a>, <a href="Animation.js.html#sunlight-1-line-351">line 351</a>
</li></ul></dd>
</dl>
</dd>
</dl>
<h3 class="subsection-title">Methods</h3>
<dl>
<dt>
<h4 class="name" id="generateFrameNames"><span class="type-signature">&lt;static> </span>generateFrameNames<span class="signature">(prefix, start, stop, <span class="optional">suffix</span>, <span class="optional">zeroPad</span>)</span><span class="type-signature"></span></h4>
</dt>
<dd>
<div class="description">
<p>Really handy function for when you are creating arrays of animation data but it's using frame names and not numbers.
For example imagine you've got 30 frames named: 'explosion<em>0001-large' to 'explosion_0030-large'
You could use this function to generate those by doing: Phaser.Animation.generateFrameNames('explosion</em>', 1, 30, '-large', 4);</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>prefix</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 start of the filename. If the filename was 'explosion<em>0001-large' the prefix would be 'explosion</em>'.</p></td>
</tr>
<tr>
<td class="name"><code>start</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
</td>
<td class="default">
</td>
<td class="description last"><p>The number to start sequentially counting from. If your frames are named 'explosion_0001' to 'explosion_0034' the start is 1.</p></td>
</tr>
<tr>
<td class="name"><code>stop</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
</td>
<td class="default">
</td>
<td class="description last"><p>The number to count to. If your frames are named 'explosion_0001' to 'explosion_0034' the stop value is 34.</p></td>
</tr>
<tr>
<td class="name"><code>suffix</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="default">
''
</td>
<td class="description last"><p>The end of the filename. If the filename was 'explosion_0001-large' the prefix would be '-large'.</p></td>
</tr>
<tr>
<td class="name"><code>zeroPad</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="default">
0
</td>
<td class="description last"><p>The number of zeroes to pad the min and max values with. If your frames are named 'explosion_0001' to 'explosion_0034' then the zeroPad is 4.</p></td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Animation.js.html">animation/Animation.js</a>, <a href="Animation.js.html#sunlight-1-line-431">line 431</a>
</li></ul></dd>
</dl>
</dd>
<dt>
<h4 class="name" id="destroy"><span class="type-signature"></span>destroy<span class="signature">()</span><span class="type-signature"></span></h4>
</dt>
<dd>
<div class="description">
<p>Cleans up this animation ready for deletion. Nulls all values and references.</p>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Animation.js.html">animation/Animation.js</a>, <a href="Animation.js.html#sunlight-1-line-306">line 306</a>
</li></ul></dd>
</dl>
</dd>
<dt>
<h4 class="name" id="onComplete"><span class="type-signature"></span>onComplete<span class="signature">()</span><span class="type-signature"></span></h4>
</dt>
<dd>
<div class="description">
<p>Called internally when the animation finishes playback. Sets the isPlaying and isFinished states and dispatches the onAnimationComplete event if it exists on the parent.</p>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Animation.js.html">animation/Animation.js</a>, <a href="Animation.js.html#sunlight-1-line-323">line 323</a>
</li></ul></dd>
</dl>
</dd>
<dt>
<h4 class="name" id="play"><span class="type-signature"></span>play<span class="signature">(<span class="optional">frameRate</span>, <span class="optional">loop</span>, <span class="optional">killOnComplete</span>)</span><span class="type-signature"> &rarr; {<a href="Phaser.Animation.html">Phaser.Animation</a>}</span></h4>
</dt>
<dd>
<div class="description">
<p>Plays this animation.</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>frameRate</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="default">
null
</td>
<td class="description last"><p>The framerate to play the animation at. The speed is given in frames per second. If not provided the previously set frameRate of the Animation is used.</p></td>
</tr>
<tr>
<td class="name"><code>loop</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="default">
false
</td>
<td class="description last"><p>Should the animation be looped after playback. If not provided the previously set loop value of the Animation is used.</p></td>
</tr>
<tr>
<td class="name"><code>killOnComplete</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="default">
false
</td>
<td class="description last"><p>If set to true when the animation completes (only happens if loop=false) the parent Sprite will be killed.</p></td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Animation.js.html">animation/Animation.js</a>, <a href="Animation.js.html#sunlight-1-line-123">line 123</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
<ul>
<li>A reference to this Animation instance.</li>
</ul>
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type"><a href="Phaser.Animation.html">Phaser.Animation</a></span>
</dd>
</dl>
</dd>
<dt>
<h4 class="name" id="restart"><span class="type-signature"></span>restart<span class="signature">()</span><span class="type-signature"></span></h4>
</dt>
<dd>
<div class="description">
<p>Sets this animation back to the first frame and restarts the animation.</p>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Animation.js.html">animation/Animation.js</a>, <a href="Animation.js.html#sunlight-1-line-180">line 180</a>
</li></ul></dd>
</dl>
</dd>
<dt>
<h4 class="name" id="stop"><span class="type-signature"></span>stop<span class="signature">(<span class="optional">resetFrame</span>)</span><span class="type-signature"></span></h4>
</dt>
<dd>
<div class="description">
<p>Stops playback of this animation and set it to a finished state. If a resetFrame is provided it will stop playback and set frame to the first in the animation.</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>resetFrame</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="default">
false
</td>
<td class="description last"><p>If true after the animation stops the currentFrame value will be set to the first frame in this animation.</p></td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Animation.js.html">animation/Animation.js</a>, <a href="Animation.js.html#sunlight-1-line-201">line 201</a>
</li></ul></dd>
</dl>
</dd>
<dt>
<h4 class="name" id="update"><span class="type-signature"></span>update<span class="signature">()</span><span class="type-signature"></span></h4>
</dt>
<dd>
<div class="description">
<p>Updates this animation. Called automatically by the AnimationManager.</p>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Animation.js.html">animation/Animation.js</a>, <a href="Animation.js.html#sunlight-1-line-223">line 223</a>
</li></ul></dd>
</dl>
</dd>
</dl>
</article>
</section>
</div>
<div class="clearfix"></div>
<footer>
<span class="copyright">
Phaser Copyright © 2012-2014 Photon Storm Ltd.
</span>
<br />
<span class="jsdoc-message">
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.3.0-dev</a>
on Tue Feb 18 2014 03:01:17 GMT-0000 (GMT) using the <a href="https://github.com/terryweiss/docstrap">DocStrap template</a>.
</span>
</footer>
</div>
<div class="span3">
<div id="toc"></div>
</div>
<br clear="both">
</div>
</div>
<script src="scripts/sunlight.js"></script>
<script src="scripts/sunlight.javascript.js"></script>
<script src="scripts/sunlight-plugin.doclinks.js"></script>
<script src="scripts/sunlight-plugin.linenumbers.js"></script>
<script src="scripts/sunlight-plugin.menu.js"></script>
<script src="scripts/jquery.min.js"></script>
<script src="scripts/jquery.scrollTo.js"></script>
<script src="scripts/jquery.localScroll.js"></script>
<script src="scripts/bootstrap-dropdown.js"></script>
<script src="scripts/toc.js"></script>
<script> Sunlight.highlightAll({lineNumbers:true, showMenu: true, enableDoclinks :true}); </script>
<script>
$( function () {
$( "#toc" ).toc( {
selectors : "h1,h2,h3,h4",
showAndHide : false,
scrollTo : 60
} );
$( "#toc>ul" ).addClass( "nav nav-pills nav-stacked" );
$( "#main span[id^='toc']" ).addClass( "toc-shim" );
} );
</script>
</body>
</html>