A tutorial series about Moai Basics Today’s tutorial is going to focus on the MOAITraits class and trait inheritance between props. Occasionally you will have the need to link two props together so that what affects one will affect the other ( color change, rotations ) or perhaps the locations are linked. This way, you only need to use one line of code to affect the parent object to have the changes happen to both the parent and the child.

To get started with this tutorial go ahead and download the images we will use(or you can use any images you’d like) and let’s jump in. The majority of our code is going to be the following base code with small additions:

MOAISim.openWindow ( "Traits", 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 )

bugGfx = MOAIGfxQuad2D.new ()
bugGfx:setTexture ( "bug.png" )
bugGfx:setRect ( -64, -64, 64, 64 )

cathead = MOAIProp2D.new ()
cathead:setDeck ( catheadGfx )
cathead:setLoc ( 64, 100 )
layer:insertProp ( cathead ) 

bug = MOAIProp2D.new ()
bug:setDeck ( bugGfx )
bug:setLoc ( 0, -150 )
layer:insertProp ( bug ) 

Here we have our basic window/layer/ect. set up and we have also created two props (cathead and bug) and have placed them onto the layer. Now we can start the process of trait inheritance over from cathead to bug.

For our first trait inheritance, we’re going to go really simple and at once take several traits ( transform, location, color, visibility ) from cathead and use it with bug. There are two ways that we can do that, either by using setParent or setTraitSource. First up is setParent

bug = MOAIProp2D.new ()
bug:setDeck ( bugGfx )
bug:setLoc ( 0, -150 )
layer:insertProp ( bug ) 

bug:setParent (cathead ) 

setParent is actually an alias of setTraitSource, so you can use either one to get the same results.

bug = MOAIProp2D.new ()
bug:setDeck ( bugGfx )
bug:setLoc ( 0, -150 )
layer:insertProp ( bug ) 

bug:setTraitSource (cathead ) 

As you can see, they both look the same. What we’ve done by setting the cathead as the parent of the bug is we’ve set several of the traits of the cathead to the bug, but right now, we’re only dealing with one trait, location. The cathead’s location has now been set as the bug's origin location, meaning that instead of the bug’s location being ( 0, -150 ) in relation to the world, it is now ( 0, -150 ) in relation to the cathead, moving its new location to ( 64, -50 ). Now we can start adding more things to the cathead and watching them affect the bug. Here, we’ll move the cathead and watch the bug with it:

 bug = MOAIProp2D.new ()
bug:setDeck ( bugGfx )
bug:setLoc ( 0, -150 )
layer:insertProp ( bug )

bug:setTraitSource ( cathead )

cathead:moveLoc ( -150, 0, 4.0 )

And here, we’ll change the color of the cathead and watch the bug’s color change:

 
bug:setTraitSource ( cathead )

cathead:moveLoc ( -150, 0, 4.0 )
cathead:seekColor ( 1, 0, 0, 1, 4.0 )

But what if we want to only share one of the traits? At that point, we would use the “setTraitMask” followed by one of the MOAITraits.INHERIT_(trait) constants.

bug:setTraitSource ( cathead )
bug:setTraitMask ( MOAITraits.INHERIT_COLOR )

cathead:moveLoc ( -150, 0, 4.0 )
cathead:seekColor ( 1, 0, 0, 1, 4.0 )

A complete list of the MOAITraits constants can be found herein the docs. A few more examples of what the setTraitMask can do. Imagine a Ferris wheel; you have the wheel itself (parent) and then you have the seats ( child ). As the Ferris wheel rotates, the seats move with it, but they themselves do not rotate, or else they’d be upside down before long! If we wanted to make an example like this, we’d simple inherit only the location, and not the entire transform, of the parent.

MOAISim.openWindow ( "Traits", 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 )

bugGfx = MOAIGfxQuad2D.new ()
bugGfx:setTexture ( "bug.png" )
bugGfx:setRect ( -64, -64, 64, 64 )

cathead = MOAIProp2D.new ()
cathead:setDeck ( catheadGfx )
cathead:setLoc ( 0, 0 )
layer:insertProp ( cathead )

function makeBug ( x, y )

	local bug = MOAIProp2D.new ()
	bug:setDeck ( bugGfx )
	bug:setTraitSource ( cathead )
	bug:setTraitMask ( MOAITraits.INHERIT_LOC ) 
	bug:setLoc ( x, y )
	layer:insertProp  ( bug )
end

makeBug ( -100, -125 )
makeBug ( 100, -125 )
makeBug ( 100, 125 )
makeBug ( -100, 125 )

cathead:seekRot ( 900, 15.0 )

Here we’ve made four bugs and had them all inherit only the location of the cathead, then we rotate the cathead. We’ll end up with:

Another trait that we can inherit is layer membership. This essentially allows you to create a group and insert all the objects at the same time, by inserting the parent, without having to manually insert each of the child objects. You are also able to remove the group in the same manner. We do this with the "MOAITraits.INHERIT_PARTITION" constant. To include this in our previous example, in addition to the INHERIT_LOC constant, we simply add the partition into the trait mask with a plus sign, like so:

function makeBug ( x, y )	 

     local bug = MOAIProp2D.new ()
     bug:setDeck ( bugGfx )
     bug:setTraitSource ( cathead )
     bug:setTraitMask ( MOAITraits.INHERIT_LOC + MOAITraits.INHERIT_PARTITION )
     bug:setLoc ( x, y )
end