Added generateFrameNames method and reduced in size.

Fixed Pad bug.
Fixed Animation framerate delta speed.
This commit is contained in:
Richard Davey 2017-04-05 04:18:08 +01:00
parent 4dae85e27c
commit 3a3ad562ab
5 changed files with 113 additions and 54 deletions

View file

@ -6,6 +6,7 @@
var Animation = require('./frame/Animation'); var Animation = require('./frame/Animation');
var Map = require('../structs/Map'); 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 * Animations are managed by the global AnimationManager. This is a singleton class that is
@ -95,16 +96,56 @@ AnimationManager.prototype = {
return child; return child;
}, },
buildSpriteSheetFrames: function (key, startFrame, endFrame) generateFrameNumbers: function (key, startFrame, endFrame, firstFrame)
{ {
var out = []; var out = [];
if (firstFrame)
{
out.push({ key: key, frame: firstFrame });
}
for (var i = startFrame; i <= endFrame; i++) for (var i = startFrame; i <= endFrame; i++)
{ {
out.push({ key: key, frame: i }); out.push({ key: key, frame: i });
} }
return out; 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;
} }
}; };

View file

@ -82,11 +82,18 @@ Animation.prototype = {
return (index < this.frames.length); 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) getNextTick: function (component)
{ {
// When is the next update due? // When is the next update due?
component.accumulator -= component.nextTick; component.accumulator -= component.nextTick;
component.nextTick = (this.msPerFrame + component.currentFrame.duration) * component.timescale; component.nextTick = this.msPerFrame + component.currentFrame.duration;
}, },
nextFrame: function (component) nextFrame: function (component)
@ -95,13 +102,7 @@ Animation.prototype = {
// TODO: Add frame skip support // TODO: Add frame skip support
if (!frame.isLast) if (frame.isLast)
{
component.updateFrame(frame.nextFrame);
this.getNextTick(component);
}
else
{ {
// We're at the end of the animation // We're at the end of the animation
@ -110,7 +111,7 @@ Animation.prototype = {
{ {
component.forward = false; component.forward = false;
// Delay for the current frame? // Delay for the current frame
this.getNextTick(component); this.getNextTick(component);
} }
else if (component.repeatCounter > 0) else if (component.repeatCounter > 0)
@ -124,6 +125,41 @@ Animation.prototype = {
component.stop(); 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) repeatAnimation: function (component)
@ -132,7 +168,7 @@ Animation.prototype = {
{ {
component.pendingRepeat = true; component.pendingRepeat = true;
component.accumulator -= component.nextTick; component.accumulator -= component.nextTick;
component.nextTick += (this.repeatDelay * 1000) * component.timescale; component.nextTick += (this.repeatDelay * 1000);
} }
else 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) setFrame: function (component)
{ {
// Work out which frame should be set next on the child, and set it // Work out which frame should be set next on the child, and set it

View file

@ -1,4 +1,4 @@
var CHECKSUM = { var CHECKSUM = {
build: '78a4a0d0-19a6-11e7-94be-9b4d3e4cd847' build: '1c28cf90-19ae-11e7-ada8-a93dd71560f8'
}; };
module.exports = CHECKSUM; module.exports = CHECKSUM;

View file

@ -29,6 +29,7 @@ var Animation = function (parent)
this.accumulator = 0; this.accumulator = 0;
this.prevTick = 0;
this.nextTick = 0; this.nextTick = 0;
this.repeatCounter = 0; this.repeatCounter = 0;
@ -66,34 +67,43 @@ Animation.prototype = {
this.animationManager.load(this, key, startFrame); 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) play: function (key, startFrame)
{ {
if (startFrame === undefined) { startFrame = 0; } if (startFrame === undefined) { startFrame = 0; }
this.load(key, startFrame); this.load(key, startFrame);
// Move to reset?
this.accumulator = 0;
this.nextTick = 0;
// Should give us 9,007,199,254,740,991 safe repeats // 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.repeatCounter = (this.currentAnim.repeat === -1) ? Number.MAX_SAFE_INTEGER : this.currentAnim.repeat;
this.currentAnim.getNextTick(this); this.currentAnim.getFirstTick(this);
this.forward = true; this.forward = true;
this.isPlaying = true; this.isPlaying = true;
this.pendingRepeat = false; this.pendingRepeat = false;
return this.parent;
}, },
// Example data: // Example data:
// timestamp = 2356.534000020474 // timestamp = 2356.534000020474
// frameDelta = 17.632333353807383 (diff since last timestamp) // frameDelta = 17.632333353807383 (diff since last timestamp?)
update: function (timestamp, frameDelta) update: function (timestamp)
{ {
if (this.isPlaying) if (this.isPlaying)
{ {
this.accumulator += frameDelta; this.accumulator += (timestamp - this.prevTick) * this.timescale;
this.prevTick = timestamp;
if (this.accumulator >= this.nextTick) if (this.accumulator >= this.nextTick)
{ {
@ -107,6 +117,8 @@ Animation.prototype = {
this.isPlaying = false; this.isPlaying = false;
console.log('Animation Stopped'); console.log('Animation Stopped');
return this.parent;
} }
}; };

View file

@ -27,9 +27,9 @@
*/ */
var Pad = function (str, len, pad, dir) var Pad = function (str, len, pad, dir)
{ {
if (len === undefined) { var len = 0; } if (len === undefined) { len = 0; }
if (pad === undefined) { var pad = ' '; } if (pad === undefined) { pad = ' '; }
if (dir === undefined) { var dir = 3; } if (dir === undefined) { dir = 3; }
str = str.toString(); str = str.toString();
@ -46,7 +46,7 @@ var Pad = function (str, len, pad, dir)
case 3: case 3:
var right = Math.ceil((padlen = len - str.length) / 2); var right = Math.ceil((padlen = len - str.length) / 2);
var left = padlen - right; 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; break;
default: default:
@ -56,7 +56,6 @@ var Pad = function (str, len, pad, dir)
} }
return str; return str;
}; };
module.exports = Pad; module.exports = Pad;