How to scale a group around the ReferencePoint defined by the group's contents center?

Solar2D General Questions/Discussion
#1

Let’s say I have a card in my game, that consists of a background image, a foreground image, and a text. And I put them all in one group.

I want now to scale the group with transition.to, xScale and yScale, with the ReferencePoint of the group at the CENTER of the group contents. It can be seen in the image below.

I want to have the effect that the group zooms in/out. If I leave my ReferencePoint at default, it doesn’t scale evenly according to groups childs.

What’s the best tactic to achieve that. One solution I thought, is to build the graphics and text around (0,0) Origin of the group, even with negative values, and then move the origin in my stage to the apropriate place. But, is there a smarter way to do it?

#2

 Try this:

  1. Place all your content in the group as per normal.

  2. Set the reference point for the group to the center: 

    group:setReferencePoint( display.CenterReferencePoint ) 

  3. Measure the content width and height of the group and choose the largest value.  Then, make a transparent rectangle with 4+ times the largest dimension at <0, 0>

  4. Now you can move the group around by the center point, rotate it, scale it, etc. and it will stay centered.

    local cw = group.contentWidth local ch = group.contentHeight local tmp if(ch > cw) then    tmp = display.newRect( group, 0, 0, ch*4, ch*4) else    tmp = display.newRect( group, 0, 0, cw*4, cw*4) end tmp.x = 0 tmp.y = 0 tmp:setFillColor(0,0,0,0) – Now try scaling or rotating and see what happens: group.rotation = 45 group.xScale = 0.5 group.yScale = 0.5 

Note: This solution is untested, but as memory serves, this should work.

#3

Note: The large transparent rectangle makes it possible to place content later and not affect the size of the group and the position of <0,0>.  As long as the content is within the bounds of the group rect you’re fine.  Also, if you run into troubles at some later time you can simply make the rectangle huge.  I’ve made 10K x 10K rectangles in some cases.

-Ed

#4

 Try this:

  1. Place all your content in the group as per normal.

  2. Set the reference point for the group to the center: 

    group:setReferencePoint( display.CenterReferencePoint ) 

  3. Measure the content width and height of the group and choose the largest value.  Then, make a transparent rectangle with 4+ times the largest dimension at <0, 0>

  4. Now you can move the group around by the center point, rotate it, scale it, etc. and it will stay centered.

    local cw = group.contentWidth local ch = group.contentHeight local tmp if(ch > cw) then    tmp = display.newRect( group, 0, 0, ch*4, ch*4) else    tmp = display.newRect( group, 0, 0, cw*4, cw*4) end tmp.x = 0 tmp.y = 0 tmp:setFillColor(0,0,0,0) – Now try scaling or rotating and see what happens: group.rotation = 45 group.xScale = 0.5 group.yScale = 0.5 

Note: This solution is untested, but as memory serves, this should work.

#5

Note: The large transparent rectangle makes it possible to place content later and not affect the size of the group and the position of <0,0>.  As long as the content is within the bounds of the group rect you’re fine.  Also, if you run into troubles at some later time you can simply make the rectangle huge.  I’ve made 10K x 10K rectangles in some cases.

-Ed