Skip to content

Commit 622978f

Browse files
photonstormphotonstorm
committed
Finally managed to get crop x/y/width/height working across all texture types. Needs optimising for the trim rect, but works.
1 parent 7d436a7 commit 622978f

5 files changed

Lines changed: 183 additions & 79 deletions

File tree

‎src/animation/Animation.js‎

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -184,7 +184,10 @@ Phaser.Animation.prototype = {
184184
this._frameIndex = 0;
185185

186186
this.currentFrame = this._frameData.getFrame(this._frames[this._frameIndex]);
187-
this._parent.setTexture(PIXI.TextureCache[this.currentFrame.uuid]);
187+
188+
this._parent.setFrame(this.currentFrame.x, this.currentFrame.y, this.currentFrame.width, this.currentFrame.height);
189+
190+
// this._parent.setTexture(PIXI.TextureCache[this.currentFrame.uuid]);
188191

189192
// TODO: Double check if required
190193
if (this._parent.__tilePattern)
@@ -351,7 +354,7 @@ Phaser.Animation.prototype = {
351354
return false;
352355
}
353356

354-
if (this.isPlaying === true && this.game.time.now >= this._timeNextFrame)
357+
if (this.isPlaying && this.game.time.now >= this._timeNextFrame)
355358
{
356359
this._frameSkip = 1;
357360

@@ -378,11 +381,12 @@ Phaser.Animation.prototype = {
378381
if (this.loop)
379382
{
380383
this._frameIndex %= this._frames.length;
381-
// this.currentFrame = this._frameData.getFrame(this._frames[this._frameIndex]);
384+
this.currentFrame = this._frameData.getFrame(this._frames[this._frameIndex]);
382385

383386
// if (this.currentFrame)
384387
// {
385-
// this._parent.setTexture(PIXI.TextureCache[this.currentFrame.uuid]);
388+
// this._parent.setTexture(PIXI.TextureCache[this.currentFrame.uuid]);
389+
// this._parent.setFrame(this.currentFrame.x, this.currentFrame.y, this.currentFrame.width, this.currentFrame.height);
386390

387391
// if (this._parent.__tilePattern)
388392
// {
@@ -409,7 +413,9 @@ Phaser.Animation.prototype = {
409413

410414
if (this.currentFrame)
411415
{
412-
this._parent.setTexture(PIXI.TextureCache[this.currentFrame.uuid]);
416+
// this._parent.setTexture(PIXI.TextureCache[this.currentFrame.uuid]);
417+
// this._parent.setFrame(this.currentFrame.x, this.currentFrame.y, this.currentFrame.width, this.currentFrame.height);
418+
this._parent.setFrame(this.currentFrame);
413419

414420
// console.log('a1', this._parent.texture.frame, PIXI.TextureCache[this.currentFrame.uuid].frame);
415421

@@ -550,7 +556,9 @@ Object.defineProperty(Phaser.Animation.prototype, 'frame', {
550556
if (this.currentFrame !== null)
551557
{
552558
this._frameIndex = value;
553-
this._parent.setTexture(PIXI.TextureCache[this.currentFrame.uuid]);
559+
// this._parent.setTexture(PIXI.TextureCache[this.currentFrame.uuid]);
560+
this._parent.setFrame(this.currentFrame);
561+
// this._parent.setFrame(this.currentFrame.x, this.currentFrame.y, this.currentFrame.width, this.currentFrame.height);
554562
}
555563

556564
}

‎src/animation/AnimationManager.js‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -138,9 +138,13 @@ Phaser.AnimationManager.prototype = {
138138
this._frameData.getFrameIndexes(frames, useNumericIndex, this._outputFrames);
139139

140140
this._anims[name] = new Phaser.Animation(this.game, this.sprite, name, this._frameData, this._outputFrames, frameRate, loop);
141+
141142
this.currentAnim = this._anims[name];
142143
this.currentFrame = this.currentAnim.currentFrame;
143-
this.sprite.setTexture(PIXI.TextureCache[this.currentFrame.uuid]);
144+
145+
this.sprite.setFrame(this.currentFrame);
146+
// this.sprite.setFrame(this.currentFrame.x, this.currentFrame.y, this.currentFrame.width, this.currentFrame.height);
147+
// this.sprite.setTexture(PIXI.TextureCache[this.currentFrame.uuid]);
144148

145149
if (this.sprite.__tilePattern)
146150
{
@@ -424,7 +428,10 @@ Object.defineProperty(Phaser.AnimationManager.prototype, 'frame', {
424428
if (this.currentFrame)
425429
{
426430
this._frameIndex = value;
427-
this.sprite.setTexture(PIXI.TextureCache[this.currentFrame.uuid]);
431+
432+
this.sprite.setFrame(this.currentFrame);
433+
// this.sprite.setFrame(this.currentFrame.x, this.currentFrame.y, this.currentFrame.width, this.currentFrame.height);
434+
// this.sprite.setTexture(PIXI.TextureCache[this.currentFrame.uuid]);
428435

429436
if (this.sprite.__tilePattern)
430437
{
@@ -462,7 +469,9 @@ Object.defineProperty(Phaser.AnimationManager.prototype, 'frameName', {
462469
if (this.currentFrame)
463470
{
464471
this._frameIndex = this.currentFrame.index;
465-
this.sprite.setTexture(PIXI.TextureCache[this.currentFrame.uuid]);
472+
this.sprite.setFrame(this.currentFrame);
473+
// this.sprite.setFrame(this.currentFrame.x, this.currentFrame.y, this.currentFrame.width, this.currentFrame.height);
474+
// this.sprite.setTexture(PIXI.TextureCache[this.currentFrame.uuid]);
466475

467476
if (this.sprite.__tilePattern)
468477
{

‎src/animation/AnimationParser.js‎

Lines changed: 27 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -72,14 +72,15 @@ Phaser.AnimationParser = {
7272
{
7373
var uuid = game.rnd.uuid();
7474

75+
// uuid needed?
7576
data.addFrame(new Phaser.Frame(i, x, y, frameWidth, frameHeight, '', uuid));
7677

77-
PIXI.TextureCache[uuid] = new PIXI.Texture(PIXI.BaseTextureCache[key], {
78-
x: x,
79-
y: y,
80-
width: frameWidth,
81-
height: frameHeight
82-
});
78+
// PIXI.TextureCache[uuid] = new PIXI.Texture(PIXI.BaseTextureCache[key], {
79+
// x: x,
80+
// y: y,
81+
// width: frameWidth,
82+
// height: frameHeight
83+
// });
8384

8485
x += frameWidth + spacing;
8586

@@ -134,15 +135,27 @@ Phaser.AnimationParser = {
134135
uuid
135136
));
136137

137-
PIXI.TextureCache[uuid] = new PIXI.Texture(PIXI.BaseTextureCache[cacheKey], {
138-
x: frames[i].frame.x,
139-
y: frames[i].frame.y,
140-
width: frames[i].frame.w,
141-
height: frames[i].frame.h
142-
});
138+
// PIXI.TextureCache[uuid] = new PIXI.Texture(PIXI.BaseTextureCache[cacheKey], {
139+
// x: frames[i].frame.x,
140+
// y: frames[i].frame.y,
141+
// width: frames[i].frame.w,
142+
// height: frames[i].frame.h
143+
// });
144+
145+
/*
146+
"filename": "octopus0000",
147+
"frame": {"x":888,"y":1399,"w":82,"h":88},
148+
"rotated": false,
149+
"trimmed": true,
150+
"spriteSourceSize": {"x":0,"y":0,"w":82,"h":95},
151+
"sourceSize": {"w":82,"h":95}
152+
153+
*/
143154

144155
if (frames[i].trimmed)
145156
{
157+
// setTrim: function (trimmed, actualWidth, actualHeight, destX, destY, destWidth, destHeight) {
158+
146159
newFrame.setTrim(
147160
frames[i].trimmed,
148161
frames[i].sourceSize.w,
@@ -153,7 +166,8 @@ Phaser.AnimationParser = {
153166
frames[i].spriteSourceSize.h
154167
);
155168

156-
PIXI.TextureCache[uuid].trim = new Phaser.Rectangle(frames[i].spriteSourceSize.x, frames[i].spriteSourceSize.y, frames[i].sourceSize.w, frames[i].sourceSize.h);
169+
170+
// PIXI.TextureCache[uuid].trim = new Phaser.Rectangle(frames[i].spriteSourceSize.x, frames[i].spriteSourceSize.y, frames[i].sourceSize.w, frames[i].sourceSize.h);
157171
}
158172

159173
}

‎src/animation/Frame.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -143,8 +143,8 @@ Phaser.Frame.prototype = {
143143

144144
if (trimmed)
145145
{
146-
this.width = actualWidth;
147-
this.height = actualHeight;
146+
// this.width = actualWidth;
147+
// this.height = actualHeight;
148148
this.sourceSizeW = actualWidth;
149149
this.sourceSizeH = actualHeight;
150150
this.centerX = Math.floor(actualWidth / 2);

‎src/gameobjects/Sprite.js‎

Lines changed: 128 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -291,27 +291,7 @@ Phaser.Sprite.prototype.preUpdate = function() {
291291
this._cache[3] = this.game.stage.currentRenderOrderID++;
292292
}
293293

294-
if (this.animations.update() && this._crop)
295-
{
296-
// Reset?
297-
this.texture.frame.x = this._frame.x;
298-
this.texture.frame.y = this._frame.y;
299-
this.texture.frame.width = this._frame.width;
300-
this.texture.frame.height = this._frame.height;
301-
302-
303-
this._frame.x = this.texture.frame.x;
304-
this._frame.y = this.texture.frame.y;
305-
this._frame.width = this.texture,frame.width;
306-
this._frame.height = this.texture,frame.height;
307-
308-
this.texture.frame.x += this._crop.x;
309-
this.texture.frame.y += this._crop.y;
310-
this.texture.frame.width = this._crop.width;
311-
this.texture.frame.height = this._crop.height;
312-
313-
// console.log('a2', this.texture.frame);
314-
}
294+
this.animations.update();
315295

316296
if (this.body && this.body.enable)
317297
{
@@ -420,8 +400,11 @@ Phaser.Sprite.prototype.loadTexture = function (key, frame) {
420400

421401
if (this.game.cache.isSpriteSheet(key))
422402
{
403+
console.log('create animation', this.key);
423404
this.key = key;
405+
this.setTexture(new PIXI.Texture(PIXI.BaseTextureCache[key]));
424406
this.animations.loadFrameData(this.game.cache.getFrameData(key));
407+
this.textureChange = true;
425408

426409
if (typeof frame === 'string')
427410
{
@@ -435,14 +418,125 @@ Phaser.Sprite.prototype.loadTexture = function (key, frame) {
435418
else
436419
{
437420
this.key = key;
438-
this.setTexture(PIXI.TextureCache[key]);
421+
this.setTexture(new PIXI.Texture(PIXI.BaseTextureCache[key]));
439422
this.animations.loadFrameData(null);
440423
return;
441424
}
442425
}
443426

444427
};
445428

429+
430+
Phaser.Sprite.prototype.setFrame = function(frame) {
431+
432+
if (frame.trimmed)
433+
{
434+
if (this._crop)
435+
{
436+
// Works but doesn't take crop x/y into account
437+
// this.texture.frame.x = frame.x;
438+
// this.texture.frame.y = frame.y;
439+
// this.texture.frame.width = this._crop.width - frame.spriteSourceSizeX;
440+
// this.texture.frame.height = this._crop.height - frame.spriteSourceSizeY;
441+
// this.texture.trim = new Phaser.Rectangle(frame.spriteSourceSizeX, frame.spriteSourceSizeY, frame.width, frame.height);
442+
443+
var fx = frame.x + this._crop.x - frame.spriteSourceSizeX;
444+
445+
if (fx < frame.x)
446+
{
447+
fx = frame.x;
448+
}
449+
450+
var fy = frame.y + this._crop.y - frame.spriteSourceSizeY;
451+
452+
if (fy < frame.y)
453+
{
454+
fy = frame.y;
455+
}
456+
457+
this.texture.frame.x = fx;
458+
this.texture.frame.y = fy;
459+
460+
var tx = 0;
461+
var ty = 0;
462+
463+
if (this._crop.x === 0)
464+
{
465+
tx = frame.spriteSourceSizeX;
466+
}
467+
468+
if (this._crop.y === 0)
469+
{
470+
ty = frame.spriteSourceSizeY;
471+
}
472+
473+
this.texture.frame.width = this._crop.width - tx;
474+
this.texture.frame.height = this._crop.height - ty;
475+
476+
this.texture.trim = new Phaser.Rectangle(tx, ty, this._crop.width, this._crop.height);
477+
}
478+
else
479+
{
480+
this.texture.frame.x = frame.x;
481+
this.texture.frame.y = frame.y;
482+
this.texture.frame.width = frame.width;
483+
this.texture.frame.height = frame.height;
484+
this.texture.trim = new Phaser.Rectangle(frame.spriteSourceSizeX, frame.spriteSourceSizeY, frame.width, frame.height);
485+
}
486+
}
487+
else
488+
{
489+
this.texture.frame.x = frame.x;
490+
this.texture.frame.y = frame.y;
491+
this.texture.frame.width = frame.width;
492+
this.texture.frame.height = frame.height;
493+
494+
if (this._crop)
495+
{
496+
this.texture.frame.x += this._crop.x;
497+
this.texture.frame.y += this._crop.y;
498+
this.texture.frame.width = this._crop.width;
499+
this.texture.frame.height = this._crop.height;
500+
}
501+
}
502+
503+
if (this.game.renderType === Phaser.WEBGL)
504+
{
505+
PIXI.WebGLRenderer.updateTextureFrame(this.texture);
506+
}
507+
508+
};
509+
510+
511+
Phaser.Sprite.prototype.XsetFrame = function(x, y, width, height) {
512+
513+
// console.log('setFrame', this.key, x, y);
514+
515+
this.texture.frame.x = x;
516+
this.texture.frame.y = y;
517+
this.texture.frame.width = width;
518+
this.texture.frame.height = height;
519+
520+
// Apply crop?
521+
522+
if (this._crop)
523+
{
524+
this.texture.frame.x += this._crop.x;
525+
this.texture.frame.y += this._crop.y;
526+
this.texture.frame.width = this._crop.width;
527+
this.texture.frame.height = this._crop.height;
528+
}
529+
530+
// Needed?
531+
// this.updateFrame = true;
532+
533+
if (this.game.renderType === Phaser.WEBGL)
534+
{
535+
PIXI.WebGLRenderer.updateTextureFrame(this.texture);
536+
}
537+
538+
};
539+
446540
/**
447541
* Crop allows you to crop the texture used to display this Sprite.
448542
* 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) {
458552
*/
459553
Phaser.Sprite.prototype.crop = function(rect, copy) {
460554

461-
this._frame = { x: 0, y: 0, width: 0, height: 0 };
462-
463-
if (typeof rect === 'undefined' || rect === null)
555+
if (rect)
464556
{
465-
this._crop = null;
466-
467-
// Clear any crop that may be set
468-
if (this.texture.hasOwnProperty('sourceWidth'))
557+
if (copy)
469558
{
470-
this.texture.setFrame(new Phaser.Rectangle(0, 0, this.texture.sourceWidth, this.texture.sourceHeight));
471-
}
472-
}
473-
else
474-
{
475-
// Do we need to clone the PIXI.Texture object?
476-
if (this.texture instanceof PIXI.Texture)
477-
{
478-
this._crop = rect;
479-
480-
// Yup, let's rock it ...
481-
var local = {};
482-
483-
Phaser.Utils.extend(true, local, this.texture);
484-
485-
local.sourceWidth = local.width;
486-
local.sourceHeight = local.height;
487-
local.frame = rect;
488-
local.width = rect.width;
489-
local.height = rect.height;
490-
491-
this.texture = local;
492-
493-
this.texture.updateFrame = true;
494-
PIXI.Texture.frameUpdates.push(this.texture);
559+
this._crop = new Phaser.Rectangle(rect.x, rect.y, rect.width, rect.height);
495560
}
496561
else
497562
{
498563
this._crop = rect;
499-
this.texture.setFrame(rect);
500564
}
565+
566+
// this.setFrame(this.texture.frame.x, this.texture.frame.y, this.texture.frame.width, this.texture.frame.height);
567+
this.setFrame(this.texture);
568+
}
569+
else
570+
{
571+
this._crop = null;
572+
// How to reset the frame
573+
// this.setFrame(this.texture.frame.x, this.texture.frame.y, this.texture.frame.width, this.texture.frame.height);
501574
}
502575

503576
};

0 commit comments

Comments
 (0)