wassname/phaser
1
0
Fork 0
mirror of https://github.com/wassname/phaser.git synced 2026-09-11 12:31:29 +08:00
Code Issues Packages Projects Releases Wiki Activity

Added loop and yoyo properties to Tweens

Browse Source
This commit is contained in:
Richard Davey
2013-05-29 15:45:34 +01:00
parent b1d836dfaf
commit 7b4374cabf
30 changed files with 1624 additions and 703 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Phaser/components/animation/AnimationManager.ts
+3 -3
View File
@@ -12,7 +12,7 @@
* sprite specific animations.
*/
module Phaser {
module Phaser.Components {
export class AnimationManager {
@@ -22,10 +22,10 @@ module Phaser {
*
* @param parent {Sprite} Owner sprite of this manager.
*/
constructor(game: Game, parent: Sprite) {
constructor(parent: Sprite) {
this._game = game;
this._parent = parent;
this._game = parent.game;
this._anims = {};
}
Phaser/components/sprite/Texture.ts
+12 -16
View File
@@ -12,13 +12,13 @@ module Phaser.Components {
export class Texture {
constructor(parent: Sprite, key?: string = '', canvas?: HTMLCanvasElement = null, context?: CanvasRenderingContext2D = null) {
constructor(parent: Sprite, key?: string = '') {
this._game = parent.game;
this._sprite = parent;
this.canvas = canvas;
this.context = context;
this.canvas = parent.game.stage.canvas;
this.context = parent.game.stage.context;
this.alpha = 1;
this.flippedX = false;
this.flippedY = false;
@@ -137,10 +137,10 @@ module Phaser.Components {
*/
public loadImage(key: string, clearAnimations: bool = true) {
//if (clearAnimations && sprite.animations.frameData !== null)
//{
// sprite.animations.destroy();
//}
if (clearAnimations && this._sprite.animations.frameData !== null)
{
this._sprite.animations.destroy();
}
if (this._game.cache.getImage(key) !== null)
{
@@ -148,16 +148,12 @@ module Phaser.Components {
if (this._game.cache.isSpriteSheet(key))
{
//sprite.animations.loadFrameData(sprite._game.cache.getFrameData(key));
//sprite.collisionMask.width = sprite.animations.currentFrame.width;
//sprite.collisionMask.height = sprite.animations.currentFrame.height;
this._sprite.animations.loadFrameData(this._sprite.game.cache.getFrameData(key));
}
else
{
this._sprite.frameBounds.width = this.width;
this._sprite.frameBounds.height = this.height;
//sprite.collisionMask.width = sprite._texture.width;
//sprite.collisionMask.height = sprite._texture.height;
}
}
@@ -170,10 +166,10 @@ module Phaser.Components {
*/
public loadDynamicTexture(texture: DynamicTexture) {
//if (sprite.animations.frameData !== null)
//{
// sprite.animations.destroy();
//}
if (this._sprite.animations.frameData !== null)
{
this._sprite.animations.destroy();
}
this.setTo(null, texture);
this._sprite.frameBounds.width = this.width;
Phaser/core/Vec2.ts
+9
View File
@@ -230,6 +230,15 @@ module Phaser {
}
/**
* Check if both the x and y of this vector equal the given value.
*
* @return {Boolean}
*/
public equals(value): bool {
return (this.x == value && this.y == value);
}
/**
* Returns a string representation of this object.
* @method toString
Phaser/gameobjects/Sprite.ts
+64 -5
View File
@@ -1,4 +1,5 @@
/// <reference path="../Game.ts" />
/// <reference path="../core/Vec2.ts" />
/// <reference path="../core/Rectangle.ts" />
/// <reference path="../components/animation/AnimationManager.ts" />
/// <reference path="../components/sprite/Texture.ts" />
@@ -34,19 +35,23 @@ module Phaser {
this.alive = true;
this.frameBounds = new Rectangle(x, y, width, height);
this.origin = new Phaser.Vec2(0, 0);
this.scrollFactor = new Phaser.Vec2(1, 1);
this.scale = new Phaser.Vec2(1, 1);
this.x = x;
this.y = y;
this.z = 0;
this.z = 0; // not used yet
this.texture = new Phaser.Components.Texture(this, key, game.stage.canvas, game.stage.context);
this.animations = new Phaser.Components.AnimationManager(this);
this.texture = new Phaser.Components.Texture(this, key);
this.width = this.frameBounds.width;
this.height = this.frameBounds.height;
// Transform related (if we add any more then move to a component)
this.origin = new Phaser.Vec2(this.width / 2, this.height / 2);
this.scale = new Phaser.Vec2(1, 1);
this.skew = new Phaser.Vec2(0, 0);
}
/**
@@ -99,6 +104,12 @@ module Phaser {
*/
public texture: Phaser.Components.Texture;
/**
* This manages animations of the sprite. You can modify animations though it. (see AnimationManager)
* @type AnimationManager
*/
public animations: Phaser.Components.AnimationManager;
/**
* The frame boundary around this Sprite.
* For non-animated sprites this matches the loaded texture dimensions.
@@ -111,6 +122,16 @@ module Phaser {
*/
public scale: Phaser.Vec2;
/**
* Skew the Sprite along the x and y axis. A skew value of 0 is no skew.
*/
public skew: Phaser.Vec2;
/**
* A boolean representing if the Sprite has been modified in any way via a scale, rotate, flip or skew.
*/
public modified: bool = false;
/**
* The influence of camera movement upon the Sprite.
*/
@@ -159,6 +180,34 @@ module Phaser {
this._rotation = this.game.math.wrap(value, 360, 0);
}
/**
* Set the animation frame by frame number.
*/
public set frame(value: number) {
this.animations.frame = value;
}
/**
* Get the animation frame number.
*/
public get frame(): number {
return this.animations.frame;
}
/**
* Set the animation frame by frame name.
*/
public set frameName(value: string) {
this.animations.frameName = value;
}
/**
* Get the animation frame name.
*/
public get frameName(): string {
return this.animations.frameName;
}
/**
* Pre-update is called right before update() on each object in the game loop.
*/
@@ -169,6 +218,11 @@ module Phaser {
//this.collisionMask.preUpdate();
if (this.modified == false && (!this.scale.equals(1) || !this.skew.equals(0) || this.rotation != 0 || this.rotationOffset != 0 || this.texture.flippedX || this.texture.flippedY))
{
this.modified = true;
}
}
/**
@@ -182,9 +236,9 @@ module Phaser {
*/
public postUpdate() {
/*
this.animations.update();
/*
if (this.moves)
{
this.updateMotion();
@@ -232,6 +286,11 @@ module Phaser {
this.touching = Collision.NONE;
*/
if (this.modified == true && this.scale.equals(1) && this.skew.equals(0) && this.rotation == 0 && this.rotationOffset == 0 && this.texture.flippedX == false && this.texture.flippedY == false)
{
this.modified = false;
}
}
/**
Phaser/renderers/CanvasRenderer.ts
+14 -12
View File
@@ -103,20 +103,20 @@ module Phaser {
this._dw = sprite.frameBounds.width;
this._dh = sprite.frameBounds.height;
/*
if (this._dynamicTexture == false && this.animations.currentFrame !== null)
if (sprite.animations.currentFrame !== null)
{
this._sx = this.animations.currentFrame.x;
this._sy = this.animations.currentFrame.y;
this._sx = sprite.animations.currentFrame.x;
this._sy = sprite.animations.currentFrame.y;
if (this.animations.currentFrame.trimmed)
if (sprite.animations.currentFrame.trimmed)
{
this._dx += this.animations.currentFrame.spriteSourceSizeX;
this._dy += this.animations.currentFrame.spriteSourceSizeY;
this._dx += sprite.animations.currentFrame.spriteSourceSizeX;
this._dy += sprite.animations.currentFrame.spriteSourceSizeY;
}
}
// Apply camera difference - looks like this is already applied?
/*
if (sprite.scrollFactor.x !== 1 || sprite.scrollFactor.y !== 1)
{
//this._dx -= (camera.worldView.x * this.scrollFactor.x);
@@ -125,7 +125,7 @@ module Phaser {
*/
// Rotation and Flipped
if (sprite.scale.x != 1 || sprite.scale.y != 1 || sprite.rotation != 0 || sprite.rotationOffset != 0 || sprite.texture.flippedX || sprite.texture.flippedY)
if (sprite.modified)
{
if (sprite.texture.renderRotation == true && (sprite.rotation !== 0 || sprite.rotationOffset !== 0))
{
@@ -142,15 +142,17 @@ module Phaser {
// f = translate y
sprite.texture.context.save();
sprite.texture.context.setTransform(this._cos * this._fx, this._sin * this._fx, -this._sin * this._fy, this._cos * this._fy, this._dx, this._dy);
sprite.texture.context.setTransform(this._cos * this._fx, (this._sin * this._fx) + sprite.skew.x, -(this._sin * this._fy) + sprite.skew.y, this._cos * this._fy, this._dx, this._dy);
this._dx = -sprite.origin.x;
this._dy = -sprite.origin.y;
}
else
{
this._dw = sprite.frameBounds.width * sprite.scale.x;
this._dh = sprite.frameBounds.height * sprite.scale.y;
this._dx -= sprite.origin.x;
this._dy -= sprite.origin.y;
//this._dw = sprite.frameBounds.width * sprite.scale.x;
//this._dh = sprite.frameBounds.height * sprite.scale.y;
}
this._sx = Math.round(this._sx);
@@ -183,7 +185,7 @@ module Phaser {
sprite.texture.context.fillRect(this._dx, this._dy, this._dw, this._dh);
}
if (sprite.scale.x != 1 || sprite.scale.y != 1 || sprite.rotation != 0 || sprite.rotationOffset != 0 || sprite.texture.flippedX || sprite.texture.flippedY)
if (sprite.modified)
{
sprite.texture.context.restore();
}
Phaser/tweens/Tween.ts
+128 -25
View File
@@ -82,6 +82,23 @@ module Phaser {
private _delayTime = 0;
private _startTime = null;
// Temp vars to avoid gc spikes
private _tempElapsed: number;
private _tempValue;
/**
* Will this tween automatically restart when it completes?
* @type {boolean}
*/
private _loop: bool = false;
/**
* A yoyo tween is one that plays once fully, then reverses back to the original tween values before completing.
* @type {boolean}
*/
private _yoyo: bool = false;
private _yoyoCount: number = 0;
/**
* Easing function which actually updating this tween.
* @type {function}
@@ -120,9 +137,10 @@ module Phaser {
* @param [ease] {any} Easing function.
* @param [autoStart] {boolean} Whether this tween will start automatically or not.
* @param [delay] {number} delay before this tween will start, defaults to 0 (no delay)
* @param [loop] {boolean} Should the tween automatically restart once complete? (ignores any chained tweens)
* @return {Tween} Itself.
*/
public to(properties, duration?: number = 1000, ease?: any = null, autoStart?: bool = false, delay?:number = 0) {
public to(properties, duration?: number = 1000, ease?: any = null, autoStart?: bool = false, delay?:number = 0, loop?:bool = false, yoyo?:bool = false): Tween {
this._duration = duration;
@@ -139,6 +157,10 @@ module Phaser {
this._delayTime = delay;
}
this._loop = loop;
this._yoyo = yoyo;
this._yoyoCount = 0;
if (autoStart === true)
{
return this.start();
@@ -150,19 +172,37 @@ module Phaser {
}
public loop(value: bool): Tween {
this._loop = value;
return this;
}
public yoyo(value: bool): Tween {
this._yoyo = value;
this._yoyoCount = 0;
return this;
}
/**
* Start to tween.
*/
public start() {
public start(looped: bool = false): Tween {
if (this._game === null || this._object === null)
{
return;
}
this._manager.add(this);
if (looped == false)
{
this._manager.add(this);
this.onStart.dispatch(this._object);
this.onStart.dispatch(this._object);
}
this._startTime = this._game.time.now + this._delayTime;
@@ -187,7 +227,10 @@ module Phaser {
this._valuesEnd[property] = [this._object[property]].concat(this._valuesEnd[property]);
}
this._valuesStart[property] = this._object[property];
if (looped == false)
{
this._valuesStart[property] = this._object[property];
}
}
@@ -195,7 +238,36 @@ module Phaser {
}
public clear() {
public reverse() {
var tempObj = {};
for (var property in this._valuesStart)
{
tempObj[property] = this._valuesStart[property];
this._valuesStart[property] = this._valuesEnd[property];
this._valuesEnd[property] = tempObj[property];
}
this._yoyoCount++;
return this.start(true);
}
public reset(): Tween {
// Reset the properties back to what they were before
for (var property in this._valuesStart)
{
this._object[property] = this._valuesStart[property];
}
return this.start(true);
}
public clear(): Tween {
this._chainedTweens = [];
@@ -210,7 +282,7 @@ module Phaser {
/**
* Stop tweening.
*/
public stop() {
public stop(): Tween {
if (this._manager !== null)
{
@@ -259,7 +331,7 @@ module Phaser {
* @param tween {Phaser.Tween} Tween object you want to chain with this.
* @return {Phaser.Tween} Itselfe.
*/
public chain(tween:Phaser.Tween) {
public chain(tween:Phaser.Tween): Tween {
this._chainedTweens.push(tween);
@@ -267,11 +339,6 @@ module Phaser {
}
/**
* Debug value?
*/
public debugValue;
/**
* Update tweening.
* @param time {number} Current time from game clock.
@@ -301,36 +368,72 @@ module Phaser {
return true;
}
var elapsed = (time - this._startTime) / this._duration;
elapsed = elapsed > 1 ? 1 : elapsed;
this._tempElapsed = (time - this._startTime) / this._duration;
this._tempElapsed = this._tempElapsed > 1 ? 1 : this._tempElapsed;
var value = this._easingFunction(elapsed);
this._tempValue = this._easingFunction(this._tempElapsed);
for (var property in this._valuesStart)
{
// Add checks for object, array, numeric up front
if (this._valuesEnd[property] instanceof Array)
{
this._object[property] = this._interpolationFunction(this._valuesEnd[property], value);
this._object[property] = this._interpolationFunction(this._valuesEnd[property], this._tempValue);
}
else
{
this._object[property] = this._valuesStart[property] + (this._valuesEnd[property] - this._valuesStart[property]) * value;
this._object[property] = this._valuesStart[property] + (this._valuesEnd[property] - this._valuesStart[property]) * this._tempValue;
}
}
this.onUpdate.dispatch(this._object, value);
this.onUpdate.dispatch(this._object, this._tempValue);
if (elapsed == 1)
if (this._tempElapsed == 1)
{
this.onComplete.dispatch(this._object);
for (var i = 0; i < this._chainedTweens.length; i++)
// Yoyo?
if (this._yoyo)
{
this._chainedTweens[i].start();
if (this._yoyoCount == 0)
{
// Reverse the tween
this.reverse();
return true;
}
else
{
// We've yoyo'd once already, quit?
if (this._loop == false)
{
this.onComplete.dispatch(this._object);
for (var i = 0; i < this._chainedTweens.length; i++)
{
this._chainedTweens[i].start();
}
return false;
}
}
}
return false;
// Loop?
if (this._loop)
{
this._yoyoCount = 0;
this.reset();
return true;
}
else
{
this.onComplete.dispatch(this._object);
for (var i = 0; i < this._chainedTweens.length; i++)
{
this._chainedTweens[i].start();
}
return false;
}
}