I am having trouble figuring out how I can scale a circle overlapping another circle of the same size, such that when it scales down it is in the center of the bigger circle. Currently, what is happening is that the circle scales more from the the top resulting in the smaller circle to be at below the center of the bigger circle. I have attached visuals to make it easier to understand what I am trying to say.
function displayCircles() outerCircle = display.newImageRect(mainGroup,circleObjectSheet,1,size,size) outerCircle.x=display.contentCenterX outerCircle.y=display.contentCenterY innerCircle = display.newImageRect(mainGroup,circleObjectSheet,2,196,196) innerCircle.x=display.contentCenterX innerCircle.y=display.contentCenterY transition.to(innerCircle,{time=1000,xScale=0.2,yScale=0.2}) end
Can you share your code where you’re making the circles? Please use code formatting (the blue <> button in the row with Bold, Italic, etc.) and paste your code in the popup window.
My first thoughts would be that the images are anchored at the bottom of the image instead of centre of the image, but the unevenness of the images themselves can also be the likely culprit, as @roaminggamer suggested.
It looks like the inner and outer circles are not at the same coordinates to begin with. Try making sure that both circles’ coordinates match at the end.
[lua]
transition.to(innerCircle,{time=1000, x = outerCircle.x, y = outerCircle.y, xScale=0.2, yScale=0.2})
[/lua]
This will also reveal if your scaling size is not correct
Thank you everyone for the help, really appreciate. Roamingamer was right the images were not centered. I just had to make the contentWidth and contentHeight equal to the size of the actual image rather than the size of the Sprite sheet in the Sprite sheet options.