In this tutorial we will create an animation for box2d object. Actually there will be two animation. To show you the whole concept of MovieClip object, we will be switching between animations on each collision. 

And additionally, while dragging object using mouse joint, we will switch so specific frame of animation, again to show you the concept of using MovieClip object.

So let's take a simple dragging object project as a start and modify it.

First we modify method, which creates a ball object, to define and use our animations:

-- for creating objects using movieclip
function scene:ball(x, y)
	--of course it all can be done through loops or other abstractions
	--but for the sake of demonstration, I'll doo all images one by one
	--get eyses animation images
	local eyes1 ="animation/eyes1.png"))
	local eyes2 ="animation/eyes2.png"))
	local eyes3 ="animation/eyes3.png"))
	local eyes4 ="animation/eyes4.png"))
	local eyes5 ="animation/eyes5.png"))
	local eyes6 ="animation/eyes6.png"))
	--get smile animation images
	local smile0 ="animation/smile0.png"))
	local smile1 ="animation/smile1.png"))
	local smile2 ="animation/smile2.png"))
	local smile3 ="animation/smile3.png"))
	local smile4 ="animation/smile4.png"))
	--setting anchor points
	eyes1:setAnchorPoint(0.5, 0.5)
	eyes2:setAnchorPoint(0.5, 0.5)
	eyes3:setAnchorPoint(0.5, 0.5)
	eyes4:setAnchorPoint(0.5, 0.5)
	eyes5:setAnchorPoint(0.5, 0.5)
	eyes6:setAnchorPoint(0.5, 0.5)
	smile0:setAnchorPoint(0.5, 0.5)
	smile1:setAnchorPoint(0.5, 0.5)
	smile2:setAnchorPoint(0.5, 0.5)
	smile3:setAnchorPoint(0.5, 0.5)
	smile4:setAnchorPoint(0.5, 0.5)
	--creating movieclip
	local ball ={
		{1, 10, eyes1}, 
		{11, 20, eyes2}, 
		{21, 30, eyes3}, 
		{31, 40, eyes4}, 
		{41, 50, eyes5}, 
		{51, 60, eyes6}, 
		{61, 70, smile0}, 
		{71, 80, smile1}, 
		{81, 90, smile2}, 
		{91, 100, smile3}, 
		{101, 110, smile4}
	--set looping of first animation
	ball:setGotoAction(60, 1)
	--set looping of second animation
	ball:setGotoAction(110, 61)
	--goto first image and play
	--mark that first animation is playing
	ball.firstAnimation = true
	--function to switch animations
	function ball:switchAnimation()
		if self.firstAnimation then
			--play second animation
			--which starts from frame 61
			--play first animation
		--change mark of current animation
		self.firstAnimation = not self.firstAnimation
	--example of stopping animation on specific frame
	--in this case frame number 81
	function ball:stopAnimation()
	--set position
	--get radius
	local radius = ball:getWidth()/2
	--create box2d physical object
	local body ={type = b2.DYNAMIC_BODY}
	body:setPosition(ball:getX(), ball:getY())
	body:setAngle(ball:getRotation() * math.pi/180)
	local circle =, 0, radius)
	local fixture = body:createFixture{shape = circle, density = 1.0, 
	friction = 0.1, restitution = 0.8}
	--reference to movieclip object
	body.object = ball
	--reference to box2d body
	ball.body = body
	ball.body.type = "ball"
	--add to scene
	--return created object
	return ball

Then we add a collision handler function, to switch animations on collision:

--define begin collision event handler function
function scene:onBeginContact(e)
	--getting contact bodies
	local fixtureA = e.fixtureA
	local fixtureB = e.fixtureB
	local bodyA = fixtureA:getBody()
	local bodyB = fixtureB:getBody()
	--check if first colliding body is a ball
	if bodyB.type and bodyB.type == "ball" then
		--switch animation using our created function

We also need to modify our init function, just where we are starting to drag ball and releasing it to stop animation at specific frame and resume animation, and of course hook our collision handler as an event listener to our box2d world.

-- create a mouse joint on mouse down
function self:onMouseDown(event)
	if self.ball:hitTestPoint(event.x, event.y) then
		--stop our animation
		local jointDef = b2.createMouseJointDef(ground, self.ball.body, 
		event.x, event.y, 100000)
		mouseJoint =

-- destroy the mouse joint on mouse up
function self:onMouseUp(event)
	if mouseJoint ~= nil then
		--resume animation by simply switching it
		mouseJoint = nil

--add collision event listener, self.onBeginContact, self)

And as usually here is a demonstration video:

And a sample Gideros project to try it out.