Help with character animation

[NigelNoscopes]

I have these two images:




They're supposed to go together and the arms should point towards the mouse pointer. I'm not sure how to; 1. Move both the arms and body as one entity; 2. Pivot the arms so they look like they're attached.

Anyone have any idea how to do so?

[MadByte]

Hi there.

1. Move both the arms and body as one entity

That's not that hard You need to create different variables for each body part you want to create. Here is how I would do it:

Code: Select all

  self.body = {image = love.graphics.newImage("body.png"), x = self.x, y = self.y, ox = 0, oy = 0}
  self.arms = {image = love.graphics.newImage("arms.png"), x = self.x, y = self.y, ox = 3, oy = 25}

self is the player object. the ox and oy is the offset from the base player position.
Then you need to update the positions for each body part:

Code: Select all

function Player:updateBody(dt)
  -- Body --
  self.body.x = self.x + self.body.ox
  self.body.y = self.y + self.body.oy
  
  -- Arms --
  self.arms.x = self.x + self.arms.ox
  self.arms.y = self.y + self.arms.oy
end

This is to keep the parts fixed to the player position all the time.

2. Pivot the arms so they look like they're attached

Here you can use math.atan2. This can be added to the updateBody function :

Code: Select all

  local mx, my = love.mouse.getPosition()
  self.arms.rotation = math.atan2(self.arms.y - my, self.arms.x - mx)

And draw that stuff:

Code: Select all

  love.graphics.draw(self.body.image, self.body.x, self.body.y)
  love.graphics.draw(self.arms.image, self.arms.x, self.arms.y, self.arms.rotation, -1, -1, 0, self.arms.height/2)

Now the angle should match. You may need to flip the arm image to the right direction by setting the x and y scale to a negative value.

Here is a test application for you to look how I set this up. You can ignore the other methods and variables(this is just a template).

EntityLimb.love

Hope that helps.

[NigelNoscopes]

Wow, you're an amazing help! I noticed the arms are a bit weird so I'll probably split them up into two different images. This clears everything up. Bonus points for the example!