Skip to content

Fix bounds #922

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 4 commits into from
Closed

Fix bounds #922

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
7ea2fcd
cleanup me.Sprite
Feb 15, 2018
3522e27
undo remove this.offset
Feb 19, 2018
2f8ce2a
[#833][#793] apply anchor point and transform to me.Sprite Bounding Rect
obiot Dec 26, 2017
1da2f1d
move bounding box to me.Renderable
Feb 20, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 3 additions & 11 deletions plugins/debug/debugPanel.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -328,24 +328,16 @@
var ax = this.anchorPoint.x * bounds.width,
ay = this.anchorPoint.y * bounds.height;

renderer.save();

// translate back as the bounds position
// is already adjusted to the anchor Point
renderer.translate(ax, ay);

renderer.setColor("green");
renderer.drawShape(bounds);

renderer.translate(-ax, -ay);

if (this.body) {
renderer.translate(this.pos.x, this.pos.y);
// draw all defined shapes
renderer.setColor("red");
for (var i = this.body.shapes.length, shape; i--, (shape = this.body.shapes[i]);) {
renderer.drawShape(shape);
_this.counters.inc("shapes");
}
}
renderer.restore();
}
}
});
Expand Down
2 changes: 1 addition & 1 deletion src/input/pointerevent.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -274,7 +274,7 @@
pointer.gameLocalY = pointer.gameY - parentPos.y;
}

if (region instanceof me.Sprite) {
if (region instanceof me.Renderable) {
var gameX = pointer.gameX;
var gameY = pointer.gameY;
if (!region.currentTransform.isIdentity()) {
Expand Down
14 changes: 11 additions & 3 deletions src/renderable/renderable.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -399,7 +399,11 @@
*/
updateBoundsPos : function (newX, newY) {
var bounds = this.getBounds();
bounds.pos.set(newX, newY, bounds.pos.z);

bounds.pos.set(
newX - (this.anchorPoint.x * bounds.width),
newY - (this.anchorPoint.y * bounds.height)
);
// XXX: This is called from the constructor, before it gets an ancestor
if (this.ancestor) {
bounds.pos.add(this.ancestor._absPos);
Expand All @@ -414,8 +418,12 @@
* @memberOf me.Renderable
* @function
*/
onAnchorUpdate : function () {
; // to be extended
onAnchorUpdate : function (newX, newY) {
// since the callback is called before setting the new value
// manually update the anchor point (required for updateBoundsPos)
this.anchorPoint.setMuted(newX, newY);
// then call updateBouds
this.updateBoundsPos(this.pos.x, this.pos.y);
},

/**
Expand Down
109 changes: 66 additions & 43 deletions src/renderable/sprite.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,17 +69,20 @@
// a flag to reset animation
this.resetAnim = null;

// name of current frame
this.currentAnimName = null;

// current frame information
// (reusing current, any better/cleaner place?)
this.current = {
//current frame texture offset
offset : new me.Vector2d(),
// current frame size
width : 0,
height : 0,
// Source rotation angle for pre-rotating the source image
angle : 0
};
// this.current = {
// //current frame texture offset
// offset : new me.Vector2d(),
// // current frame size
// width : 0,
// height : 0,
// // Source rotation angle for pre-rotating the source image
// angle : 0
// };

// animation frame delta
this.dt = 0;
Expand All @@ -94,7 +97,7 @@

// Used by the game engine to adjust visibility as the
// sprite moves in and out of the viewport
this.isSprite = true;
// this.isSprite = true;

// set the proper image/texture to use
if (settings.image instanceof me.CanvasRenderer.prototype.Texture) {
Expand Down Expand Up @@ -123,10 +126,10 @@
this.textureAtlas = me.video.renderer.cache.get(this.image, settings).getAtlas();
}
// update the default "current" size
this.current.width = settings.framewidth;
this.current.height = settings.frameheight;

// this.current.width = settings.framewidth;
// this.current.height = settings.frameheight;
// store/reset the current atlas information if specified

if (typeof(settings.atlas) !== "undefined") {
this.textureAtlas = settings.atlas;
this.atlasIndices = settings.atlasIndices;
Expand All @@ -137,8 +140,8 @@
// call the super constructor
this._super(me.Renderable, "init", [
x, y,
this.current.width,
this.current.height
settings.framewidth,
settings.frameheight
]);

// apply flip flags if specified
Expand Down Expand Up @@ -244,7 +247,11 @@
name : name,
frames : [],
idx : 0,
length : 0
length : 0,
width : 0,
height : 0,
angle : 0,
offset : new me.Vector2d()
};

// # of frames
Expand Down Expand Up @@ -348,11 +355,12 @@
**/
setCurrentAnimation : function (name, resetAnim, _preserve_dt) {
if (this.anim[name]) {
this.current = this.anim[name];
this.currentAnimName = name;
this.resetAnim = resetAnim || null;
this.setAnimationFrame(this.current.idx);
this.setAnimationFrame(this.anim[name].idx);
// XXX this should not be overwritten
this.current.name = name;
// this.current = this.anim[name];
// this.current.name = name;
if (!_preserve_dt) {
this.dt = 0;
}
Expand All @@ -374,7 +382,8 @@
* }
*/
isCurrentAnimation : function (name) {
return this.current.name === name;
return this.currentAnimName === name;
// return this.current.name === name;
},

/**
Expand All @@ -389,13 +398,23 @@
* mySprite.setRegion(game.texture.getRegion("shadedDark13.png"));
*/
setRegion : function (region) {
// set the sprite offset within the texture
this.current.offset.setV(region.offset);
// set angle if defined
this.current.angle = region.angle;
// update the default "current" size
this.current.width = region.width;
this.current.height = region.height;
// // set the sprite offset within the texture
// this.current.offset.setV(region.offset);
// // set angle if defined
// this.current.angle = region.angle;
// // update the default "current" size
// this.current.width = region.width;
// this.current.height = region.height;



var elem = this.anim[this.currentAnimName];

elem.offset.setV(region.offset)
elem.angle = region.angle
elem.width = region.width
elem.height = region.height

},

/**
Expand All @@ -409,14 +428,16 @@
* this.setAnimationFrame();
*/
setAnimationFrame : function (idx) {
this.current.idx = (idx || 0) % this.current.length;

var current = this.anim[this.currentAnimName]
current.idx = (idx || 0) % current.length;
// XXX this should not be overwritten
var name = this.current.name;
var frame = this.getAnimationFrameObjectByIndex(this.current.idx);

var frame = this.getAnimationFrameObjectByIndex(current.idx);
// copy all properties of the current frame into current
Object.assign(this.current, frame);
Object.assign(current, frame);
// XXX this should not be overwritten
this.current.name = name;
// this.current.name = name;
this.width = frame.width;
this.height = frame.height;
// set global anchortPoint if defined
Expand All @@ -433,7 +454,7 @@
* @return {Number} current animation frame index
*/
getCurrentAnimationFrame : function () {
return this.current.idx;
return this.anim[this.currentAnimName].idx;
},

/**
Expand All @@ -445,7 +466,7 @@
* @return {Number} if using number indices. Returns {Object} containing frame data if using texture atlas
*/
getAnimationFrameObjectByIndex : function (id) {
return this.current.frames[id];
return this.anim[this.currentAnimName].frames[id];
},

/**
Expand All @@ -454,34 +475,37 @@
update : function (dt) {
var result = false;
// Update animation if necessary
if (!this.animationpause && this.current && this.current.length > 0) {
var duration = this.getAnimationFrameObjectByIndex(this.current.idx).delay;

var current = this.currentAnimName ? this.anim[this.currentAnimName]: null;

if (!this.animationpause && current && current.length > 0) {
var duration = this.getAnimationFrameObjectByIndex(current.idx).delay;
this.dt += dt;
while (this.dt >= duration) {
result = true;
this.dt -= duration;

var nextFrame = (this.current.length > 1? this.current.idx+1: this.current.idx);
var nextFrame = (current.length > 1? current.idx+1: current.idx);
this.setAnimationFrame(nextFrame);

// Switch animation if we reach the end of the strip and a callback is defined
if (this.current.idx === 0 && this.resetAnim) {
if (current.idx === 0 && this.resetAnim) {
// If string, change to the corresponding animation
if (typeof this.resetAnim === "string") {
this.setCurrentAnimation(this.resetAnim, null, true);
}
// Otherwise is must be callable
else if (this.resetAnim() === false) {
// Reset to last frame
this.setAnimationFrame(this.current.length - 1);
this.setAnimationFrame(current.length - 1);

// Bail early without skipping any more frames.
this.dt %= duration;
break;
}
}
// Get next frame duration
duration = this.getAnimationFrameObjectByIndex(this.current.idx).delay;
duration = this.getAnimationFrameObjectByIndex(current.idx).delay;
}
}

Expand Down Expand Up @@ -549,7 +573,7 @@
}

// the frame to draw
var frame = this.current;
var frame = this.anim[this.currentAnimName]

// cache the current position and size
var xpos = this.pos.x,
Expand All @@ -560,8 +584,7 @@

// frame offset in the texture/atlas
var frame_offset = frame.offset;
var g_offset = this.offset;

var g_offset = this.offset

// remove image's TexturePacker/ShoeBox rotation
if (frame.angle !== 0) {
Expand Down
5 changes: 3 additions & 2 deletions tests/spec/container-spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,8 +38,9 @@ describe("me.Container", function () {
// update the child bounds
container.updateChildBounds();
var bounds = container.childBounds;
expect(bounds.pos.x).toEqual(50);
expect(bounds.pos.y).toEqual(50);

expect(bounds.pos.x).toEqual(0);
expect(bounds.pos.y).toEqual(0);
expect(bounds.width).toEqual(150);
expect(bounds.height).toEqual(150);
});
Expand Down
Loading