Sprite rotation around anchor point?

Caroline

I'm looking at the Hierarchy Example, and wondered how it is possible to rotate group2 around a specified anchor point.

I found that a bitmap has setAnchorPoint (not in docs though), but is it possible to apply this to a Sprite? I can do group2:setRotation(45), but I can't change the anchor point for that.

Edit: I just found this thread, and realise that you won't be doing it for sprites
http://www.giderosmobile.com/forum/discussion/85

Caroline

I just realised that the setAnchorPoint for a bitmap does not work how I thought it did.

What I would like is to set a pivot point, and then set the rotation in degrees, so that the bitmap/sprite rotates around that point.

Edit: I think what might be happening is a problem that I had with this in Objective C, where the Affine Transformations come into play.
I fixed it with this code:
http://stackoverflow.com/a/5666430/359578

but can't work out how to do that in Lua.

(CGAffineTransform slays me)

atilim

Hi Caroline,

For example assume that you have a sprite

local sprite = Sprite.new() -- create your whole hierarchy here

and then you want to rotate it from center point.

1. You need to put this sprite to a parent sprite:

local parent = Sprite.new() parent:addChild(sprite)

2. Center it

sprite:setPosition(-sprite:getWidth() / 2, -sprite:getHeight() / 2)

3. And finally, rotate the parent sprite

parent:setRotation(30)

Caroline

Yes, thanks, I can do that - but say I have a png of a head, I want to be able to do

parent:setRotation(45)
or
parent:setRotation(-45)

and have the pivot point at the neck point, rather than the center of the head.

I would do that with a child bitmap, I guess, which is what I'm experimenting with now.

Caroline

Actually after 3 hours of scratching head and a half hour break and subsequent reverting to original code, it does seem to be working now.

I created a pivot texture to indicate where the point of rotation is, which made it a bit clearer:

local function positionPivot(pivot, bitmap) local anchorX, anchorY = bitmap:getAnchorPoint() local width = pivot:getWidth() local height = pivot:getHeight() local newX = anchorX - (width/2) local newY = anchorY - (height/2) pivot:setPosition(newX, newY) end   function classNode:init() local bitmap = Bitmap.new(Texture.new("head.png")) bitmap:setX(140) bitmap:setY(260) bitmap:setAnchorPoint(0.5,0.9) bitmap:setRotation(45) self:addChild(bitmap) --setup a pivot texture to indicate pivot point local pivot = Bitmap.new(Texture.new("pivot.png")) bitmap:addChild(pivot) positionPivot(pivot, bitmap) end

Edit: I couldn't work out how to get my code tag looking as neat as yours

atilim

You can place you code between

<pre lang="lua">
-- my lua code
</pre>

There is one thing about your code, bitmap:setAnchorPoint works with ratios (usually between 0 and 1). Therefore it seems there is no need to get and use anchor point at function positionPivot.

Caroline

Right, pre, thanks .

That getting the anchor point was only to get a pivot png to show at the head png's pivot point, to indicate to me that it is really rotating where it should. A debugging thing, I guess.