Flashmech

Objective

• Learn about the properties that can be used in the generic object that you pass in to the MaterialsList constructor.
• Learn how to use a movieclip as a material through its linkage id using MovieAssetMaterial.

Prerequisite

• Creating A PV3D Cube

Files Required

• PV3D 2.0 Alpha: Great White Framework (learn how to get it)
• Tutorial Files (see folder structure)

Let’s Get Started!

This is a pretty simple tutorial, which basically elaborates more on the MaterialsList class, and in combination with the MovieAssetMaterial, creates a custom skinned cube.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

private function init3D ():void
{
	// VIEWPORT
	viewport = new Viewport3D( 0, 0, true, false );
	addChild( viewport );
	//
	// RENDERER
	renderer = new BasicRenderEngine();
	//
	// SCENE
	scene = new Scene3D();
	//
	// CAMERA
	camera = new Camera3D();
	camera.zoom = 11;
	camera.focus = 100;
}

This function is generally similar with what we had in the previous tutorial, except for lines 15-16. What they do makes the cube in the scene look the same size as the movieclips that we have in the library.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

private function createCube():void
{
	var materials:MaterialsList = new MaterialsList(
	{
		front: new MovieAssetMaterial( "front" ),
		back: new MovieAssetMaterial( "back" ),
		right: new MovieAssetMaterial( "right" ),
		left: new MovieAssetMaterial( "left" ),
		top: new MovieAssetMaterial( "top" ),
		bottom: new MovieAssetMaterial( "bottom" )
	} );
	//
	cube = new Cube( materials, 100, 100, 100, 10, 10, 10 );
	//
	scene.addChild( cube );
}

The first thing that you might notice that’s different will be the other properties of the generic object that we are passing into the MaterialsList constructor. Instead of the all property, we now describe each side of the cube using front, back, right, left, top and bottom properties.

With the ability to describe each side of the cube, we can now assign different materials to them, which is exactly what we have done. Each side is now an instance of the MovieAssetMaterial class, and pulls the movieclip that is residing in our library via their linkage id.

In line 13 where we create the cube, we are also inputting several additional parameters than before. We pass in "100" for the three subsequent parameters after "materials" to describe the width, depth and height of the cube respectively. Just in case you haven’t notice, the reason why we pass in "100", and not some other number, is because the movieclips that we are going to use as materials are 100×100.

To increase the rendering quality of our cube, we pass in "10" for the next three subsequent parameters, rather than taking the default value of "1".

Final Note

If you want your materials to be animated, simply change this:

new MovieAssetMaterial( "bottom" )

to this:

new MovieAssetMaterial( "bottom", false, true )

The third parameter allows animated movieclips to play. You can check out this example that I whipped up.