mirror of
https://github.com/photonstorm/phaser
synced 2024-11-27 15:12:18 +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 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;
|
||||||
}
|
}
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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;
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
|
@ -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;
|
||||||
|
|
Loading…
Reference in a new issue