mirror of
https://github.com/photonstorm/phaser
synced 2024-11-23 21:24:09 +00:00
Added generateFrameNames method and reduced in size.
Fixed Pad bug. Fixed Animation framerate delta speed.
This commit is contained in:
parent
4dae85e27c
commit
3a3ad562ab
5 changed files with 113 additions and 54 deletions
|
@ -6,6 +6,7 @@
|
|||
|
||||
var Animation = require('./frame/Animation');
|
||||
var Map = require('../structs/Map');
|
||||
var Pad = require('../utils/string/Pad');
|
||||
|
||||
/**
|
||||
* Animations are managed by the global AnimationManager. This is a singleton class that is
|
||||
|
@ -95,16 +96,56 @@ AnimationManager.prototype = {
|
|||
return child;
|
||||
},
|
||||
|
||||
buildSpriteSheetFrames: function (key, startFrame, endFrame)
|
||||
generateFrameNumbers: function (key, startFrame, endFrame, firstFrame)
|
||||
{
|
||||
var out = [];
|
||||
|
||||
if (firstFrame)
|
||||
{
|
||||
out.push({ key: key, frame: firstFrame });
|
||||
}
|
||||
|
||||
for (var i = startFrame; i <= endFrame; i++)
|
||||
{
|
||||
out.push({ key: key, frame: i });
|
||||
}
|
||||
|
||||
return out;
|
||||
},
|
||||
|
||||
/**
|
||||
* 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
|
||||
* @static
|
||||
* @param {string} prefix - The start of the filename. If the filename was 'explosion_0001-large' the prefix would be 'explosion_'.
|
||||
* @param {number} start - The number to start sequentially counting from. If your frames are named 'explosion_0001' to 'explosion_0034' the start is 1.
|
||||
* @param {number} stop - The number to count to. If your frames are named 'explosion_0001' to 'explosion_0034' the stop value 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 zeros to pad the min and max values with. If your frames are named 'explosion_0001' to 'explosion_0034' then the zeroPad is 4.
|
||||
* @return {string[]} An array of framenames.
|
||||
*/
|
||||
generateFrameNames: function (key, prefix, start, stop, suffix, zeroPad)
|
||||
{
|
||||
if (suffix === undefined) { suffix = ''; }
|
||||
if (zeroPad === undefined) { zeroPad = 0; }
|
||||
|
||||
var output = [];
|
||||
var diff = (start < stop) ? 1 : -1;
|
||||
|
||||
// Adjust because we use i !== stop in the for loop
|
||||
stop += diff;
|
||||
|
||||
for (var i = start; i !== stop; i += diff)
|
||||
{
|
||||
var frame = prefix + Pad(i, zeroPad, '0', 1) + suffix;
|
||||
|
||||
output.push({ key: key, frame: frame });
|
||||
}
|
||||
|
||||
return output;
|
||||
}
|
||||
|
||||
};
|
||||
|
|
|
@ -82,11 +82,18 @@ Animation.prototype = {
|
|||
return (index < this.frames.length);
|
||||
},
|
||||
|
||||
getFirstTick: function (component)
|
||||
{
|
||||
// When is the first update due?
|
||||
component.accumulator = 0;
|
||||
component.nextTick = this.msPerFrame + component.currentFrame.duration + (this.delay * 1000);
|
||||
},
|
||||
|
||||
getNextTick: function (component)
|
||||
{
|
||||
// When is the next update due?
|
||||
component.accumulator -= component.nextTick;
|
||||
component.nextTick = (this.msPerFrame + component.currentFrame.duration) * component.timescale;
|
||||
component.nextTick = this.msPerFrame + component.currentFrame.duration;
|
||||
},
|
||||
|
||||
nextFrame: function (component)
|
||||
|
@ -95,13 +102,7 @@ Animation.prototype = {
|
|||
|
||||
// TODO: Add frame skip support
|
||||
|
||||
if (!frame.isLast)
|
||||
{
|
||||
component.updateFrame(frame.nextFrame);
|
||||
|
||||
this.getNextTick(component);
|
||||
}
|
||||
else
|
||||
if (frame.isLast)
|
||||
{
|
||||
// We're at the end of the animation
|
||||
|
||||
|
@ -110,7 +111,7 @@ Animation.prototype = {
|
|||
{
|
||||
component.forward = false;
|
||||
|
||||
// Delay for the current frame?
|
||||
// Delay for the current frame
|
||||
this.getNextTick(component);
|
||||
}
|
||||
else if (component.repeatCounter > 0)
|
||||
|
@ -124,6 +125,41 @@ Animation.prototype = {
|
|||
component.stop();
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
component.updateFrame(frame.nextFrame);
|
||||
|
||||
this.getNextTick(component);
|
||||
}
|
||||
},
|
||||
|
||||
previousFrame: function (component)
|
||||
{
|
||||
var frame = component.currentFrame;
|
||||
|
||||
// TODO: Add frame skip support
|
||||
|
||||
if (frame.isFirst)
|
||||
{
|
||||
// We're at the start of the animation
|
||||
|
||||
if (component.repeatCounter > 0)
|
||||
{
|
||||
// Repeat (happens before complete)
|
||||
this.repeatAnimation(component);
|
||||
}
|
||||
else
|
||||
{
|
||||
// OnComplete
|
||||
component.stop();
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
component.updateFrame(frame.prevFrame);
|
||||
|
||||
this.getNextTick(component);
|
||||
}
|
||||
},
|
||||
|
||||
repeatAnimation: function (component)
|
||||
|
@ -132,7 +168,7 @@ Animation.prototype = {
|
|||
{
|
||||
component.pendingRepeat = true;
|
||||
component.accumulator -= component.nextTick;
|
||||
component.nextTick += (this.repeatDelay * 1000) * component.timescale;
|
||||
component.nextTick += (this.repeatDelay * 1000);
|
||||
}
|
||||
else
|
||||
{
|
||||
|
@ -150,35 +186,6 @@ Animation.prototype = {
|
|||
}
|
||||
},
|
||||
|
||||
previousFrame: function (component)
|
||||
{
|
||||
var frame = component.currentFrame;
|
||||
|
||||
// TODO: Add frame skip support
|
||||
|
||||
if (!frame.isFirst)
|
||||
{
|
||||
component.updateFrame(frame.prevFrame);
|
||||
|
||||
this.getNextTick(component);
|
||||
}
|
||||
else
|
||||
{
|
||||
// We're at the start of the animation
|
||||
|
||||
if (component.repeatCounter > 0)
|
||||
{
|
||||
// Repeat (happens before complete)
|
||||
this.repeatAnimation(component);
|
||||
}
|
||||
else
|
||||
{
|
||||
// OnComplete
|
||||
component.stop();
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
setFrame: function (component)
|
||||
{
|
||||
// Work out which frame should be set next on the child, and set it
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
var CHECKSUM = {
|
||||
build: '78a4a0d0-19a6-11e7-94be-9b4d3e4cd847'
|
||||
build: '1c28cf90-19ae-11e7-ada8-a93dd71560f8'
|
||||
};
|
||||
module.exports = CHECKSUM;
|
|
@ -29,6 +29,7 @@ var Animation = function (parent)
|
|||
|
||||
this.accumulator = 0;
|
||||
|
||||
this.prevTick = 0;
|
||||
this.nextTick = 0;
|
||||
|
||||
this.repeatCounter = 0;
|
||||
|
@ -66,34 +67,43 @@ Animation.prototype = {
|
|||
this.animationManager.load(this, key, startFrame);
|
||||
},
|
||||
|
||||
delayedPlay: function (delay, key, startFrame)
|
||||
{
|
||||
this.play(key, startFrame);
|
||||
|
||||
this.nextTick += (delay * 1000);
|
||||
|
||||
return this.parent;
|
||||
},
|
||||
|
||||
play: function (key, startFrame)
|
||||
{
|
||||
if (startFrame === undefined) { startFrame = 0; }
|
||||
|
||||
this.load(key, startFrame);
|
||||
|
||||
// Move to reset?
|
||||
this.accumulator = 0;
|
||||
this.nextTick = 0;
|
||||
|
||||
// Should give us 9,007,199,254,740,991 safe repeats
|
||||
this.repeatCounter = (this.currentAnim.repeat === -1) ? Number.MAX_SAFE_INTEGER : this.currentAnim.repeat;
|
||||
|
||||
this.currentAnim.getNextTick(this);
|
||||
this.currentAnim.getFirstTick(this);
|
||||
|
||||
this.forward = true;
|
||||
this.isPlaying = true;
|
||||
this.pendingRepeat = false;
|
||||
|
||||
return this.parent;
|
||||
},
|
||||
|
||||
// Example data:
|
||||
// timestamp = 2356.534000020474
|
||||
// frameDelta = 17.632333353807383 (diff since last timestamp)
|
||||
update: function (timestamp, frameDelta)
|
||||
// frameDelta = 17.632333353807383 (diff since last timestamp?)
|
||||
update: function (timestamp)
|
||||
{
|
||||
if (this.isPlaying)
|
||||
{
|
||||
this.accumulator += frameDelta;
|
||||
this.accumulator += (timestamp - this.prevTick) * this.timescale;
|
||||
|
||||
this.prevTick = timestamp;
|
||||
|
||||
if (this.accumulator >= this.nextTick)
|
||||
{
|
||||
|
@ -107,6 +117,8 @@ Animation.prototype = {
|
|||
this.isPlaying = false;
|
||||
|
||||
console.log('Animation Stopped');
|
||||
|
||||
return this.parent;
|
||||
}
|
||||
|
||||
};
|
||||
|
|
|
@ -27,9 +27,9 @@
|
|||
*/
|
||||
var Pad = function (str, len, pad, dir)
|
||||
{
|
||||
if (len === undefined) { var len = 0; }
|
||||
if (pad === undefined) { var pad = ' '; }
|
||||
if (dir === undefined) { var dir = 3; }
|
||||
if (len === undefined) { len = 0; }
|
||||
if (pad === undefined) { pad = ' '; }
|
||||
if (dir === undefined) { dir = 3; }
|
||||
|
||||
str = str.toString();
|
||||
|
||||
|
@ -46,7 +46,7 @@ var Pad = function (str, len, pad, dir)
|
|||
case 3:
|
||||
var right = Math.ceil((padlen = len - str.length) / 2);
|
||||
var left = padlen - right;
|
||||
str = new Array(left+1).join(pad) + str + new Array(right+1).join(pad);
|
||||
str = new Array(left + 1).join(pad) + str + new Array(right + 1).join(pad);
|
||||
break;
|
||||
|
||||
default:
|
||||
|
@ -56,7 +56,6 @@ var Pad = function (str, len, pad, dir)
|
|||
}
|
||||
|
||||
return str;
|
||||
|
||||
};
|
||||
|
||||
module.exports = Pad;
|
||||
|
|
Loading…
Reference in a new issue