Animating scale on display groups has odd behavior w.r.t. anchor position

Audio and Graphics
#1

I have a tile based puzzle game, and I’m currently refactoring my code to represent individual tiles as display groups instead of individual rects. This lets me do things like adorning tiles with additional visuals. Unfortunately I’m having some issues with performing animations on display groups where I can’t seem to replicate the behavior I used to have when my tiles were just rects.

Specifically, there’s an animation that I use when I destroy a tile. I animate the x and y scales up while fading the tile out, and I reanchor to 0.5 and 0.5 so that the tile “grows” from its center. The effect looks pretty good.

Here’s the code:

myTileRect.anchorX = 0.5 myTileRect.anchorY = 0.5 transition.to(myTileRect, { time = 1000, xScale = 2 \* gridGroup.scaleFactor, yScale = 2 \* gridGroup.scaleFactor, alpha = 0, transition = easing.outQuart, onComplete = removeTile })

However now that I’ve changed myTileRect to be a display group instead of a rect, the animation has different behavior. The tiles now grow from their top left corner, regardless of how I set the anchorX and anchorY properties.

I’ve tried futzing around with anchorChildren on the group, but this seems to shift the position of the children and it doesn’t actually change the origin as far as animations are concerned.

I could of course perform individual separate animations on each of the constituent children inside of the display group, but this seems to defeat the purpose of using a display group in the first place. I feel like I must be missing something.

Any ideas?

#2

Yes, place content in the center of the group.  Then place the group by it’s center.

local myTile = display.newGroup() local myVisual = display.newImageRect( myTile, "some image path", 100, 100 ) myTile.x = 150 myTile.y = 75 transition.to( myTile, { xScale = 1.5, yScale = 1.5, time 1= 2000 } )
#3

Thanks, yes, that works… But doesn’t this feel like a Corona bug? For other display objects, setting the anchor point changes the origin for the purposes of animations, but it doesn’t work for groups.

#4

Nope not a bug.  Groups are not like other objects. 

Also, the effect you mentioned has always been that way.  I’m not sure what else to tell you, but to point you at the guide:

https://docs.coronalabs.com/daily/guide/graphics/group.html

Oh, and changing anchor points on a display object doesn’t change the origin, its a bit more complicated than that.  :\

#5

Yes, place content in the center of the group.  Then place the group by it’s center.

local myTile = display.newGroup() local myVisual = display.newImageRect( myTile, "some image path", 100, 100 ) myTile.x = 150 myTile.y = 75 transition.to( myTile, { xScale = 1.5, yScale = 1.5, time 1= 2000 } )
#6

Thanks, yes, that works… But doesn’t this feel like a Corona bug? For other display objects, setting the anchor point changes the origin for the purposes of animations, but it doesn’t work for groups.

#7

Nope not a bug.  Groups are not like other objects. 

Also, the effect you mentioned has always been that way.  I’m not sure what else to tell you, but to point you at the guide:

https://docs.coronalabs.com/daily/guide/graphics/group.html

Oh, and changing anchor points on a display object doesn’t change the origin, its a bit more complicated than that.  :\