2013-10-02 00:16:40 +00:00
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "utf-8" >
< title > Phaser Source: animation/Animation.js< / 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 = "modules.list.html" class = "dropdown-toggle" data-toggle = "dropdown" > Modules< b
class="caret">< / b > < / a >
< ul class = "dropdown-menu " >
< li >
< a href = "module-Phaser.html" > Phaser< / a >
< / li >
2013-10-02 11:11:22 +00:00
< li >
< a href = "PluginManager.html" > PluginManager< / a >
< / li >
2013-10-02 00:16:40 +00:00
< / 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.Animation.Frame.html" > Frame< / a >
< / li >
< li >
< a href = "Phaser.Animation.FrameData.html" > FrameData< / a >
< / li >
< li >
< a href = "Phaser.Animation.Parser.html" > Parser< / a >
< / li >
< li >
< a href = "Phaser.AnimationManager.html" > AnimationManager< / a >
< / li >
< li >
< a href = "Phaser.Camera.html" > Camera< / a >
< / li >
2013-10-02 11:11:22 +00:00
< li >
< a href = "Phaser.Circle.html" > Circle< / a >
< / li >
2013-10-02 00:16:40 +00:00
< li >
< a href = "Phaser.Game.html" > Game< / a >
< / li >
< li >
< a href = "Phaser.Group.html" > Group< / a >
< / li >
2013-10-02 11:11:22 +00:00
< li >
< a href = "Phaser.LinkedList.html" > LinkedList< / a >
< / li >
< li >
< a href = "PluginManager-Phaser.PluginManager.html" > PluginManager< / a >
< / li >
< li >
< a href = "Phaser.Plugin.html" > Plugin< / a >
< / li >
< li >
< a href = "Phaser.Point.html" > Point< / a >
< / li >
< li >
< a href = "Phaser.Rectangle.html" > Rectangle< / a >
< / li >
< li >
< a href = "Phaser.Signal.html" > Signal< / a >
< / li >
< li >
< a href = "Phaser.Stage.html" > Stage< / a >
< / li >
< li >
< a href = "Phaser.State.html" > State< / a >
< / li >
< li >
< a href = "Phaser.StateManager.html" > StateManager< / a >
< / li >
< li >
< a href = "Phaser.World.html" > World< / a >
< / li >
< li >
< a href = "SignalBinding.html" > SignalBinding< / a >
< / li >
2013-10-02 00:16:40 +00:00
< / ul >
< / li >
< / ul >
< / div >
< / div >
< div class = "row-fluid" >
< div class = "span12" >
< div id = "main" >
< h1 class = "page-title" > Source: animation/Animation.js< / h1 >
< section >
< article >
< pre class = "sunlight-highlight-javascript linenums" > /**
* @author Richard Davey < rich@photonstorm.com>
* @copyright 2013 Photon Storm Ltd.
* @license {@link https://github.com/photonstorm/phaser/blob/master/license.txt|MIT License}
*/
/**
* 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.
*
* @class Phaser.Animation
* @constructor
* @param {Phaser.Game} game - A reference to the currently running game.
* @param {Phaser.Sprite} parent - A reference to the owner of this Animation.
* @param {string} name - The unique name for this animation, used in playback commands.
* @param {Phaser.Animation.FrameData} frameData - The FrameData object that contains all frames used by this Animation.
* @param {(Array.< number>|Array.< string>)} frames - An array of numbers or strings indicating which frames to play in which order.
* @param {number} delay - The time between each frame of the animation, given in ms.
* @param {boolean} looped - Should this animation loop or play through once.
*/
Phaser.Animation = function (game, parent, name, frameData, frames, delay, looped) {
/**
* @property {Phaser.Game} game - A reference to the currently running Game.
*/
this.game = game;
/**
* @property {Phaser.Sprite} _parent - A reference to the parent Sprite that owns this Animation.
* @private
*/
this._parent = parent;
/**
* @property {Phaser.FrameData} _frameData - The FrameData the Animation uses.
* @private
*/
this._frameData = frameData;
/**
* @property {string} name - The user defined name given to this Animation.
*/
this.name = name;
/**
* @property {object} _frames
* @private
*/
this._frames = [];
this._frames = this._frames.concat(frames);
/**
* @property {number} delay - The delay in ms between each frame of the Animation.
*/
this.delay = 1000 / delay;
/**
* @property {boolean} looped - The loop state of the Animation.
*/
this.looped = looped;
/**
* @property {boolean} isFinished - The finished state of the Animation. Set to true once playback completes, false during playback.
* @default
*/
this.isFinished = false;
/**
* @property {boolean} isPlaying - The playing state of the Animation. Set to false once playback completes, true during playback.
* @default
*/
this.isPlaying = false;
/**
* @property {boolean} isPaused - The paused state of the Animation.
* @default
*/
this.isPaused = false;
/**
* @property {boolean} _pauseStartTime - The time the animation paused.
* @private
* @default
*/
this._pauseStartTime = 0;
/**
* @property {number} _frameIndex
* @private
* @default
*/
this._frameIndex = 0;
/**
* @property {number} _frameDiff
* @private
* @default
*/
this._frameDiff = 0;
/**
* @property {number} _frameSkip
* @private
* @default
*/
this._frameSkip = 1;
/**
* @property {Phaser.Animation.Frame} currentFrame - The currently displayed frame of the Animation.
*/
this.currentFrame = this._frameData.getFrame(this._frames[this._frameIndex]);
};
Phaser.Animation.prototype = {
/**
* Plays this animation.
*
* @method Phaser.Animation#play
* @memberof Phaser.Animation
* @param {number} [frameRate=null] - 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.
* @param {boolean} [loop=null] - Should the animation be looped after playback. If not provided the previously set loop value of the Animation is used.
* @return {Phaser.Animation} - A reference to this Animation instance.
*/
play: function (frameRate, loop) {
if (typeof frameRate === 'number')
{
// If they set a new frame rate then use it, otherwise use the one set on creation
this.delay = 1000 / frameRate;
}
if (typeof loop === 'boolean')
{
// If they set a new loop value then use it, otherwise use the one set on creation
this.looped = loop;
}
this.isPlaying = true;
this.isFinished = false;
this._timeLastFrame = this.game.time.now;
this._timeNextFrame = this.game.time.now + this.delay;
this._frameIndex = 0;
this.currentFrame = this._frameData.getFrame(this._frames[this._frameIndex]);
this._parent.setTexture(PIXI.TextureCache[this.currentFrame.uuid]);
if (this._parent.events)
{
this._parent.events.onAnimationStart.dispatch(this._parent, this);
}
return this;
},
/**
* Sets this animation back to the first frame and restarts the animation.
*
* @method Phaser.Animation#restart
* @memberof Phaser.Animation
*/
restart: function () {
this.isPlaying = true;
this.isFinished = false;
this._timeLastFrame = this.game.time.now;
this._timeNextFrame = this.game.time.now + this.delay;
this._frameIndex = 0;
this.currentFrame = this._frameData.getFrame(this._frames[this._frameIndex]);
},
/**
* 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.
*
* @method Phaser.Animation#stop
* @memberof Phaser.Animation
* @param {boolean} [resetFrame=false] - If true after the animation stops the currentFrame value will be set to the first frame in this animation.
*/
stop: function (resetFrame) {
if (typeof resetFrame === 'undefined') { resetFrame = false; }
this.isPlaying = false;
this.isFinished = true;
if (resetFrame)
{
this.currentFrame = this._frameData.getFrame(this._frames[0]);
}
},
/**
* Updates this animation. Called automatically by the AnimationManager.
*
* @method Phaser.Animation#update
* @memberof Phaser.Animation
*/
update: function () {
if (this.isPaused)
{
return false;
}
if (this.isPlaying == true & & this.game.time.now >= this._timeNextFrame)
{
this._frameSkip = 1;
// Lagging?
this._frameDiff = this.game.time.now - this._timeNextFrame;
this._timeLastFrame = this.game.time.now;
if (this._frameDiff > this.delay)
{
// We need to skip a frame, work out how many
this._frameSkip = Math.floor(this._frameDiff / this.delay);
this._frameDiff -= (this._frameSkip * this.delay);
}
// And what's left now?
this._timeNextFrame = this.game.time.now + (this.delay - this._frameDiff);
this._frameIndex += this._frameSkip;
if (this._frameIndex >= this._frames.length)
{
if (this.looped)
{
this._frameIndex %= this._frames.length;
this.currentFrame = this._frameData.getFrame(this._frames[this._frameIndex]);
if (this.currentFrame)
{
this._parent.setTexture(PIXI.TextureCache[this.currentFrame.uuid]);
}
this._parent.events.onAnimationLoop.dispatch(this._parent, this);
}
else
{
this.onComplete();
}
}
else
{
this.currentFrame = this._frameData.getFrame(this._frames[this._frameIndex]);
this._parent.setTexture(PIXI.TextureCache[this.currentFrame.uuid]);
}
return true;
}
return false;
},
/**
* Cleans up this animation ready for deletion. Nulls all values and references.
*
* @method Phaser.Animation#destroy
* @memberof Phaser.Animation
*/
destroy: function () {
this.game = null;
this._parent = null;
this._frames = null;
this._frameData = null;
this.currentFrame = null;
this.isPlaying = false;
},
/**
* Called internally when the animation finishes playback. Sets the isPlaying and isFinished states and dispatches the onAnimationComplete event if it exists on the parent.
*
* @method Phaser.Animation#onComplete
* @memberof Phaser.Animation
*/
onComplete: function () {
this.isPlaying = false;
this.isFinished = true;
if (this._parent.events)
{
this._parent.events.onAnimationComplete.dispatch(this._parent, this);
}
}
};
/**
* @name Phaser.Animation#paused
* @property {boolean} paused - Gets and sets the paused state of this Animation.
*/
Object.defineProperty(Phaser.Animation.prototype, "paused", {
get: function () {
return this.isPaused;
},
set: function (value) {
this.isPaused = value;
if (value)
{
// Paused
this._pauseStartTime = this.game.time.now;
}
else
{
// Un-paused
if (this.isPlaying)
{
this._timeNextFrame = this.game.time.now + this.delay;
}
}
}
});
/**
* @name Phaser.Animation#frameTotal
* @property {number} frameTotal - The total number of frames in the currently loaded FrameData, or -1 if no FrameData is loaded.
2013-10-02 11:11:22 +00:00
* @readonly
2013-10-02 00:16:40 +00:00
*/
Object.defineProperty(Phaser.Animation.prototype, "frameTotal", {
get: function () {
return this._frames.length;
}
});
/**
* @name Phaser.Animation#frame
* @property {number} frame - Gets or sets the current frame index and updates the Texture Cache for display.
*/
Object.defineProperty(Phaser.Animation.prototype, "frame", {
get: function () {
if (this.currentFrame !== null)
{
return this.currentFrame.index;
}
else
{
return this._frameIndex;
}
},
set: function (value) {
this.currentFrame = this._frameData.getFrame(value);
if (this.currentFrame !== null)
{
this._frameIndex = value;
this._parent.setTexture(PIXI.TextureCache[this.currentFrame.uuid]);
}
}
});
/**
* 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_0001-large' to 'explosion_0030-large'
* You could use this function to generate those by doing: Phaser.Animation.generateFrameNames('explosion_', 1, 30, '-large', 4);
*
* @method Phaser.Animation.generateFrameNames
* @param {string} prefix - The start of the filename. If the filename was 'explosion_0001-large' the prefix would be 'explosion_'.
* @param {number} min - The number to start sequentially counting from. If your frames are named 'explosion_0001' to 'explosion_0034' the min is 1.
* @param {number} max - The number to count up to. If your frames are named 'explosion_0001' to 'explosion_0034' the max is 34.
* @param {string} [suffix=''] - The end of the filename. If the filename was 'explosion_0001-large' the prefix would be '-large'.
* @param {number} [zeroPad=0] - 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.
*/
Phaser.Animation.generateFrameNames = function (prefix, min, max, suffix, zeroPad) {
if (typeof suffix == 'undefined') { suffix = ''; }
var output = [];
var frame = '';
for (var i = min; i < = max; i++)
{
if (typeof zeroPad == 'number')
{
// str, len, pad, dir
frame = Phaser.Utils.pad(i.toString(), zeroPad, '0', 1);
}
else
{
frame = i.toString();
}
frame = prefix + frame + suffix;
output.push(frame);
}
return output;
}
< / pre >
< / article >
< / section >
< / div >
< div class = "clearfix" > < / div >
< footer >
< span class = "copyright" >
Phaser Copyright © 2012-2013 Photon Storm Ltd.
< / span >
< br / >
< span class = "jsdoc-message" >
Documentation generated by < a href = "https://github.com/jsdoc3/jsdoc" > JSDoc 3.2.0-dev< / a >
2013-10-02 11:11:22 +00:00
on Wed Oct 02 2013 12:09:54 GMT+0100 (BST) using the < a href = "https://github.com/terryweiss/docstrap" > DocStrap template< / a > .
2013-10-02 00:16:40 +00:00
< / span >
< / footer >
< / 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 >
