A tutorial series about Moai basics.

Props TutorialFor today’s tutorial, we’re going to touch on a few of the types of animations that you can apply towards a prop; move/seek Loc, Rot, Scl, and Color. For consistency throughout this tutorial, we will just use the same base chunk of code while only editing the last line. Talk about this tutorial in the forums!

You can download the required files here.

MOAISim.openWindow ( "Props", 320, 480 )

viewport = MOAIViewport.new ()
viewport:setSize ( 320, 480 )
viewport:setScale ( 320, 480 )

layer = MOAILayer2D.new ()
layer:setViewport ( viewport )
MOAISim.pushRenderPass ( layer )

catheadGfx = MOAIGfxQuad2D.new ()
catheadGfx:setTexture ( "cathead.png" )
catheadGfx:setRect ( -64, -64, 64, 64 )

prop = MOAIProp2D.new ()
prop:setDeck ( catheadGfx )
prop:setLoc ( -32, -32 )
layer:insertProp ( prop )

-- This is where our new code will go --

So now that we have our game window set up and our prop inserted onto the layer, it’s time to start messing with it. One important thing to learn about these animations is the difference between a move and a seek. Essentially, a move will simply add the amount of an animation to the current prop, while a seek will animate it to exactly what is specified. It's way easier to show than to tell, though, so here we go.

prop:moveLoc ( 0, 100, 3.0 ) 

This will move our prop 0 units along the X-axis, 100 along the Y axis, and it will be done over 3.0 seconds.

Now if we do a seekLoc, we’ll get a bit of a different outcome.

prop:seekLoc ( 0, 100, 3.0 ) 

This command will send the prop to the location of ( 0, 100 ) instead of simply moving along that axis.

So in short, a move will affect the object by an exact amount, while a seek will get the object to the exact point it was given. You can think of a seek as “move to.” We can also add an ease type, which will determine the rate that the object goes through the animation. You can find a list of Moai Ease Types here

. Now that the difference between move and seek has been established, we can continue our cathead transformation spree. This time, we’re going to be rotating the little guy.

prop:moveRot ( 270, 3.0 ) 

This will rotate the cathead 270 degrees over a period of 3.0 seconds.

Now we’ll make the cathead grow to immense proportions.

prop:moveScl ( 2, 2, 3.0 ) 

This will add to the scale of the prop.

Now that we’ve made our prop move, rotate, and scale up, it’s time to change its color. Easy enough.

prop:seekColor ( 1, 0, 0, 0, 3.0) 

Running this, our cathead is going to turn a deep red. The seekColor takes in the following parameters: seekColor ( redGoal, greenGoal, blueGoal, alphaGoal, time) with a max on the goals of 1 meaning 100% saturation.

And that's it for our brief tutorial on prop animations. Next time we'll get into textboxes and fonts.