Mirrors/phaser
2
0
Fork 0
mirror of https://github.com/photonstorm/phaser synced 2024-11-27 07:01:20 +00:00
Code Issues Projects Releases Packages Wiki Activity

Finally managed to get crop x/y/width/height working across all texture types. Needs optimising for the trim rect, but works.

Browse source
This commit is contained in:
photonstorm 2014-06-06 04:12:16 +01:00
parent 7d436a7dc3
commit 622978fa77
5 changed files with 183 additions and 79 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
src/animation/Animation.js
View file

@ -184,7 +184,10 @@ Phaser.Animation.prototype = {
this._frameIndex = 0;
this.currentFrame = this._frameData.getFrame(this._frames[this._frameIndex]);
this._parent.setTexture(PIXI.TextureCache[this.currentFrame.uuid]);
this._parent.setFrame(this.currentFrame.x, this.currentFrame.y, this.currentFrame.width, this.currentFrame.height);
// this._parent.setTexture(PIXI.TextureCache[this.currentFrame.uuid]);
// TODO: Double check if required
if (this._parent.__tilePattern)
@ -351,7 +354,7 @@ Phaser.Animation.prototype = {
return false;
}
if (this.isPlaying === true && this.game.time.now >= this._timeNextFrame)
if (this.isPlaying && this.game.time.now >= this._timeNextFrame)
{
this._frameSkip = 1;
@ -378,11 +381,12 @@ Phaser.Animation.prototype = {
if (this.loop)
{
this._frameIndex %= this._frames.length;
// this.currentFrame = this._frameData.getFrame(this._frames[this._frameIndex]);
this.currentFrame = this._frameData.getFrame(this._frames[this._frameIndex]);
// if (this.currentFrame)
// {
// this._parent.setTexture(PIXI.TextureCache[this.currentFrame.uuid]);
// this._parent.setFrame(this.currentFrame.x, this.currentFrame.y, this.currentFrame.width, this.currentFrame.height);
// if (this._parent.__tilePattern)
// {
@ -409,7 +413,9 @@ Phaser.Animation.prototype = {
if (this.currentFrame)
{
this._parent.setTexture(PIXI.TextureCache[this.currentFrame.uuid]);
// this._parent.setTexture(PIXI.TextureCache[this.currentFrame.uuid]);
// this._parent.setFrame(this.currentFrame.x, this.currentFrame.y, this.currentFrame.width, this.currentFrame.height);
this._parent.setFrame(this.currentFrame);
// console.log('a1', this._parent.texture.frame, PIXI.TextureCache[this.currentFrame.uuid].frame);
@ -550,7 +556,9 @@ Object.defineProperty(Phaser.Animation.prototype, 'frame', {
if (this.currentFrame !== null)
{
this._frameIndex = value;
this._parent.setTexture(PIXI.TextureCache[this.currentFrame.uuid]);
// this._parent.setTexture(PIXI.TextureCache[this.currentFrame.uuid]);
this._parent.setFrame(this.currentFrame);
// this._parent.setFrame(this.currentFrame.x, this.currentFrame.y, this.currentFrame.width, this.currentFrame.height);
}
}

15
src/animation/AnimationManager.js
View file

@ -138,9 +138,13 @@ Phaser.AnimationManager.prototype = {
this._frameData.getFrameIndexes(frames, useNumericIndex, this._outputFrames);
this._anims[name] = new Phaser.Animation(this.game, this.sprite, name, this._frameData, this._outputFrames, frameRate, loop);
this.currentAnim = this._anims[name];
this.currentFrame = this.currentAnim.currentFrame;
this.sprite.setTexture(PIXI.TextureCache[this.currentFrame.uuid]);
this.sprite.setFrame(this.currentFrame);
// this.sprite.setFrame(this.currentFrame.x, this.currentFrame.y, this.currentFrame.width, this.currentFrame.height);
// this.sprite.setTexture(PIXI.TextureCache[this.currentFrame.uuid]);
if (this.sprite.__tilePattern)
{
@ -424,7 +428,10 @@ Object.defineProperty(Phaser.AnimationManager.prototype, 'frame', {
if (this.currentFrame)
{
this._frameIndex = value;
this.sprite.setTexture(PIXI.TextureCache[this.currentFrame.uuid]);
this.sprite.setFrame(this.currentFrame);
// this.sprite.setFrame(this.currentFrame.x, this.currentFrame.y, this.currentFrame.width, this.currentFrame.height);
// this.sprite.setTexture(PIXI.TextureCache[this.currentFrame.uuid]);
if (this.sprite.__tilePattern)
{
@ -462,7 +469,9 @@ Object.defineProperty(Phaser.AnimationManager.prototype, 'frameName', {
if (this.currentFrame)
{
this._frameIndex = this.currentFrame.index;
this.sprite.setTexture(PIXI.TextureCache[this.currentFrame.uuid]);
this.sprite.setFrame(this.currentFrame);
// this.sprite.setFrame(this.currentFrame.x, this.currentFrame.y, this.currentFrame.width, this.currentFrame.height);
// this.sprite.setTexture(PIXI.TextureCache[this.currentFrame.uuid]);
if (this.sprite.__tilePattern)
{

40
src/animation/AnimationParser.js
View file

@ -72,14 +72,15 @@ Phaser.AnimationParser = {
{
var uuid = game.rnd.uuid();
// uuid needed?
data.addFrame(new Phaser.Frame(i, x, y, frameWidth, frameHeight, '', uuid));
PIXI.TextureCache[uuid] = new PIXI.Texture(PIXI.BaseTextureCache[key], {
x: x,
y: y,
width: frameWidth,
height: frameHeight
});
// PIXI.TextureCache[uuid] = new PIXI.Texture(PIXI.BaseTextureCache[key], {
// x: x,
// y: y,
// width: frameWidth,
// height: frameHeight
// });
x += frameWidth + spacing;
@ -134,15 +135,27 @@ Phaser.AnimationParser = {
uuid
));
PIXI.TextureCache[uuid] = new PIXI.Texture(PIXI.BaseTextureCache[cacheKey], {
x: frames[i].frame.x,
y: frames[i].frame.y,
width: frames[i].frame.w,
height: frames[i].frame.h
});
// PIXI.TextureCache[uuid] = new PIXI.Texture(PIXI.BaseTextureCache[cacheKey], {
// x: frames[i].frame.x,
// y: frames[i].frame.y,
// width: frames[i].frame.w,
// height: frames[i].frame.h
// });
/*
"filename": "octopus0000",
"frame": {"x":888,"y":1399,"w":82,"h":88},
"rotated": false,
"trimmed": true,
"spriteSourceSize": {"x":0,"y":0,"w":82,"h":95},
"sourceSize": {"w":82,"h":95}
*/
if (frames[i].trimmed)
{
// setTrim: function (trimmed, actualWidth, actualHeight, destX, destY, destWidth, destHeight) {
newFrame.setTrim(
frames[i].trimmed,
frames[i].sourceSize.w,
@ -153,7 +166,8 @@ Phaser.AnimationParser = {
frames[i].spriteSourceSize.h
);
PIXI.TextureCache[uuid].trim = new Phaser.Rectangle(frames[i].spriteSourceSize.x, frames[i].spriteSourceSize.y, frames[i].sourceSize.w, frames[i].sourceSize.h);
// PIXI.TextureCache[uuid].trim = new Phaser.Rectangle(frames[i].spriteSourceSize.x, frames[i].spriteSourceSize.y, frames[i].sourceSize.w, frames[i].sourceSize.h);
}
}

4
src/animation/Frame.js
View file

@ -143,8 +143,8 @@ Phaser.Frame.prototype = {
if (trimmed)
{
this.width = actualWidth;
this.height = actualHeight;
// this.width = actualWidth;
// this.height = actualHeight;
this.sourceSizeW = actualWidth;
this.sourceSizeH = actualHeight;
this.centerX = Math.floor(actualWidth / 2);

191
src/gameobjects/Sprite.js
View file

@ -291,27 +291,7 @@ Phaser.Sprite.prototype.preUpdate = function() {
this._cache[3] = this.game.stage.currentRenderOrderID++;
}
if (this.animations.update() && this._crop)
{
// Reset?
this.texture.frame.x = this._frame.x;
this.texture.frame.y = this._frame.y;
this.texture.frame.width = this._frame.width;
this.texture.frame.height = this._frame.height;
this._frame.x = this.texture.frame.x;
this._frame.y = this.texture.frame.y;
this._frame.width = this.texture,frame.width;
this._frame.height = this.texture,frame.height;
this.texture.frame.x += this._crop.x;
this.texture.frame.y += this._crop.y;
this.texture.frame.width = this._crop.width;
this.texture.frame.height = this._crop.height;
// console.log('a2', this.texture.frame);
}
this.animations.update();
if (this.body && this.body.enable)
{
@ -420,8 +400,11 @@ Phaser.Sprite.prototype.loadTexture = function (key, frame) {
if (this.game.cache.isSpriteSheet(key))
{
console.log('create animation', this.key);
this.key = key;
this.setTexture(new PIXI.Texture(PIXI.BaseTextureCache[key]));
this.animations.loadFrameData(this.game.cache.getFrameData(key));
this.textureChange = true;
if (typeof frame === 'string')
{
@ -435,7 +418,7 @@ Phaser.Sprite.prototype.loadTexture = function (key, frame) {
else
{
this.key = key;
this.setTexture(PIXI.TextureCache[key]);
this.setTexture(new PIXI.Texture(PIXI.BaseTextureCache[key]));
this.animations.loadFrameData(null);
return;
}
@ -443,6 +426,117 @@ Phaser.Sprite.prototype.loadTexture = function (key, frame) {
};
Phaser.Sprite.prototype.setFrame = function(frame) {
if (frame.trimmed)
{
if (this._crop)
{
// Works but doesn't take crop x/y into account
// this.texture.frame.x = frame.x;
// this.texture.frame.y = frame.y;
// this.texture.frame.width = this._crop.width - frame.spriteSourceSizeX;
// this.texture.frame.height = this._crop.height - frame.spriteSourceSizeY;
// this.texture.trim = new Phaser.Rectangle(frame.spriteSourceSizeX, frame.spriteSourceSizeY, frame.width, frame.height);
var fx = frame.x + this._crop.x - frame.spriteSourceSizeX;
if (fx < frame.x)
{
fx = frame.x;
}
var fy = frame.y + this._crop.y - frame.spriteSourceSizeY;
if (fy < frame.y)
{
fy = frame.y;
}
this.texture.frame.x = fx;
this.texture.frame.y = fy;
var tx = 0;
var ty = 0;
if (this._crop.x === 0)
{
tx = frame.spriteSourceSizeX;
}
if (this._crop.y === 0)
{
ty = frame.spriteSourceSizeY;
}
this.texture.frame.width = this._crop.width - tx;
this.texture.frame.height = this._crop.height - ty;
this.texture.trim = new Phaser.Rectangle(tx, ty, this._crop.width, this._crop.height);
}
else
{
this.texture.frame.x = frame.x;
this.texture.frame.y = frame.y;
this.texture.frame.width = frame.width;
this.texture.frame.height = frame.height;
this.texture.trim = new Phaser.Rectangle(frame.spriteSourceSizeX, frame.spriteSourceSizeY, frame.width, frame.height);
}
}
else
{
this.texture.frame.x = frame.x;
this.texture.frame.y = frame.y;
this.texture.frame.width = frame.width;
this.texture.frame.height = frame.height;
if (this._crop)
{
this.texture.frame.x += this._crop.x;
this.texture.frame.y += this._crop.y;
this.texture.frame.width = this._crop.width;
this.texture.frame.height = this._crop.height;
}
}
if (this.game.renderType === Phaser.WEBGL)
{
PIXI.WebGLRenderer.updateTextureFrame(this.texture);
}
};
Phaser.Sprite.prototype.XsetFrame = function(x, y, width, height) {
// console.log('setFrame', this.key, x, y);
this.texture.frame.x = x;
this.texture.frame.y = y;
this.texture.frame.width = width;
this.texture.frame.height = height;
// Apply crop?
if (this._crop)
{
this.texture.frame.x += this._crop.x;
this.texture.frame.y += this._crop.y;
this.texture.frame.width = this._crop.width;
this.texture.frame.height = this._crop.height;
}
// Needed?
// this.updateFrame = true;
if (this.game.renderType === Phaser.WEBGL)
{
PIXI.WebGLRenderer.updateTextureFrame(this.texture);
}
};
/**
* Crop allows you to crop the texture used to display this Sprite.
* Cropping takes place from the top-left of the Sprite and can be modified in real-time by providing an updated rectangle object.
@ -458,46 +552,25 @@ Phaser.Sprite.prototype.loadTexture = function (key, frame) {
*/
Phaser.Sprite.prototype.crop = function(rect, copy) {
this._frame = { x: 0, y: 0, width: 0, height: 0 };
if (rect)
{
if (copy)
{
this._crop = new Phaser.Rectangle(rect.x, rect.y, rect.width, rect.height);
}
else
{
this._crop = rect;
}
if (typeof rect === 'undefined' || rect === null)
// this.setFrame(this.texture.frame.x, this.texture.frame.y, this.texture.frame.width, this.texture.frame.height);
this.setFrame(this.texture);
}
else
{
this._crop = null;
// Clear any crop that may be set
if (this.texture.hasOwnProperty('sourceWidth'))
{
this.texture.setFrame(new Phaser.Rectangle(0, 0, this.texture.sourceWidth, this.texture.sourceHeight));
}
}
else
{
// Do we need to clone the PIXI.Texture object?
if (this.texture instanceof PIXI.Texture)
{
this._crop = rect;
// Yup, let's rock it ...
var local = {};
Phaser.Utils.extend(true, local, this.texture);
local.sourceWidth = local.width;
local.sourceHeight = local.height;
local.frame = rect;
local.width = rect.width;
local.height = rect.height;
this.texture = local;
this.texture.updateFrame = true;
PIXI.Texture.frameUpdates.push(this.texture);
}
else
{
this._crop = rect;
this.texture.setFrame(rect);
}
// How to reset the frame
// this.setFrame(this.texture.frame.x, this.texture.frame.y, this.texture.frame.width, this.texture.frame.height);
}
};