Sprite rotation around anchor point?

Comments

• Caroline Guru

  December 2011 edited December 2011

  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)

  +1 -1Share on Facebook
• atilim Maintainer

  December 2011

  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)

  http://en.wikipedia.org/wiki/Cytorus

  +1 -1Share on Facebook
• Caroline Guru

  December 2011 edited December 2011

  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.
  

  +1 -1Share on Facebook
• Caroline Guru

  December 2011 edited December 2011

  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

  +1 -1Share on Facebook
• atilim Maintainer

  December 2011 edited December 2011

  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.
  

  http://en.wikipedia.org/wiki/Cytorus

  +1 -1Share on Facebook
• Caroline Guru

  December 2011

  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.
  

  Likes: Abiz

  +1 -1 (+1 / -0 )Share on Facebook