Content creation for Papervision3D using XSI Mod Tool: 1/2
Video 1 correction: Please note that the addition of the “<your SVN folder>/as3/trunk/src” path to the Classpath in the Flash ActionScript 3.0 setting must be performed AFTER creating the new “Flash File (ActionScript 3.0)”.
Content creation for Papervision3D using XSI Mod Tool: 2/2
About the Softimage|XSI Mod Tool
The Softimage|XSI Mod Tool is a FREE 3D modeling and animation package, for non-commercial use, that plugs right into Microsoft XNA Game Studio Express and Valve Half- Life 2. The Mod Tool is packed with the same 3D modeling and animation tools that the pros use to create triple-A titles. One thing that's really nice about the Mod Tool is that its Crosswalk enabled. This mean you can import and export content to and from other applications using the COLLADA, dotXSI and FBX file formats. In other words, your data is not locked inside the Mod Tool and yes, it can be used to create content for Flash with the cool Papervision3D technology.
This tutorial will walk you thru the creation of the XSI Mod Tool animated 3D logo.
It covers:
Papervision3D installation and Flash CS3 project setup.
Basic modeling technique.
Basic texturing technique.
Exporting Papervision3D compatible COLLADA files.
The self documented corresponding Flash Action Script 3.0 is provided.
XSIModTool_PV3D_Tutorial.zip (The tutorial content including the Flash CS3 project, the Action Script 3.0 self documented XSIModTool.as file, the required images, the XSI Mod Tool scene, etc.)
“Edit > Preferences > ActionScript > ActionScript3.0 Settings…”. Add the “<your SVN folder>/as3/trunk/src” path to the Classpath.
Save your project, call it XSIModTool.
Copy the XSIModTool.as file in the same folder.
In the document properties, set the “Document class” to XSIModTool.
When you click on the pen icon “Edit Class Definition” the XSIModTool.as will open.
Import the background image and the material texture (XSIModTool_Texture.jpg and XSIModTool_Background.jpg) in the project library: “File > Import > Import to Library…”.
Export the XSIModTool_Texture.jpg for ActionScript: Right click on the XSIModTool_Texture.jpg and select “Linkage…”. Set the “Export for ActionScript” checkbox to true. Set the Class name to XSIModTool_Texture (remove .jpg). This is because the Class name must be the same as the material name in the COLLADA file and we use XSIModTool_Texture as the material name in the XSI Mod Tool.
Set the frame rate of your project to 20.
Set the size of your project to 485 x 347.
Drag and drop the XSIModTool_Background.jpg from the library to your stage to make it the background image. Position it to X: 0.0, Y: 0.0.
Creating the 3D objects with the XSI Mod Tool:
The XSI Mod Tool is made of two objects. One of them is a single gear and the other one contains all the other letters. The single gear object will be used three times in Papervision3D, once for each Mod Tool O's but at different locations.
Switch to the standard XSI user interface to have access to more advance features: Modes > XSI Default (Pro Mode)
We will use a background image as a guide during the modeling process, let's set this up:
Minimize the User viewport by clicking in its top right corner.
Maximize the Front viewport by clicking in its top right corner.
Enable the viewport Rotoscope mode by clicking on the display mode menu (Wireframe).
In the Camera Rotoscopy property page, set the guide image by doing "New > New From File" and browse to the XSIModTool_Rotoscopy.jpg in the XSIModTool_Papervision3D\Pictures folder.
Set both the Width and Height to 30.
Use the "Z" shortcut plus the left mouse button to pan, the middle mouse button to zoom in and the right mouse button to zoom out.
Starting with the "M" letter, use "Curve > Draw Linear" and draw lines around the letters and around top gear.
Right click "Open/Close" once you're done drawing one letter.
Use the "M" shortcut to tweak the position of the points.
Do "Curve > Draw Linear" again when starting a new letter. In XSI you can middle click on a menu button to repeat the last operation you did in this menu instead of re-opening the menu again.
To do the larger circle inside the gear do "Primitive > Curve > Circle".
Set the subdivision to 4.
Place the circles using the Translation (V) and Scaling (X) tools.
With the first circle selected: use the spacebar to go in selection mode and rectangle select.
Press Ctrl+D to duplicate it and create the second circle.
Scale it down to make it fit the smaller circle using the Scaling (X) tools.
Minimize the Front viewport by clicking in its top right corner.
You can orbit in the User viewport by using the "O" shortcut and the left mouse button.
Change the "User" viewport display mode to "Textured" via the display mode menu (top right viewport menu - Wireframe).
Create a single extruded 3D object for the letters excluding the gear:
Select all the letters curves by holding "Ctrl".
Poly. Mesh > Curves To Mesh.
In the Extrude Tab, set the Length to 1.
Do the same thing for the gear.
Select the contour and the two inner circles.
Poly. Mesh > Curves To Mesh.
In the Extrude Tab, set the Length to 1.
Change the bottom right viewport from "Right" to "Explorer" by clicking opening the viewport mode menu (Right).
You now see all the objects currently in your scene.
Select the "polymsh" object which should correspond to the M_D T__L letters.
Freeze its modeling operator so that the relations with the curves used to create it is discarded by pressing "Freeze M" in the lower right Edit pane.
Press F2 and rename it to "letters".
Select the "polymsh" object which should correspond to the gear.
Press F2 and rename it to "gear".
Freeze its modeling operator so that the relations with the curves used to create it is discarded by pressing "Freeze M" in the lower right Edit pane.
You can now delete the curves "circle, circle1, crvlist, crvlist1, crvlist2, crvlist3, crvlist4" by selecting them all by holding Ctrl or Shift and then pressing the Delete key.
Texturing the 3D objects with the XSI Mod Tool:
Assign a constant material to the objects, this will give us a shading similar to the Papervision3D one
Open the Material Manager "View > Rendering/Texturing > Material Manager"
"Create > Constant".
Press F2 and change the Name of the material to XSIModTool_Texture. It has to be the same name as the one we've exported for ActionScript in Flash since materials are matched by names by Papervision3D.
Then, assign this material to both the "letters" and "gear" objects by selecting both objects at the same time and pressing the "Assign Materials to Selected Objects or Clusters" button.
Assign the texture
In the Material Manager, double click on the "Constant" shader to open its property page.
Next to the Color property, click on the connector icon and select "Image ". The Image property page now appears.
In the "Image" section click on "New > New From File" and browse to the XSIModTool_Texture.jpg file.
In the "Texture Projection" section click on "New > Planar XY".
You can now close the property page and the Material Manager.
Refining the texture mapping on the objects
To perform texture mapping you could use the UV unwrapping PolyPackUV tool thru the Unique UVs command but since we're dealing with pretty simple geometry here we're using the texture support and subprojections method.
The front and back face of the "letters" object should currently already be mapped properly.
Mapping the "gear" front and back face texture:
Notice the rectangles around the objects, those are the respective objects texture support.
We need to get the "gear" texture support at the same size and location as the "letters" texture support since this one has the proper proportion and location that fits the actual texture image.
To do that we'll first align the "gear" texture support on the middle of the "letters" texture support:
Select the "letters" texture support first.
Hold Ctrl and add the "gear" texture support to the selection.
In the right menu "Transform > Align Objects".
Set the "Move" to "All Objects Except the First".
Turn ON "Along X" and "Along Y".
Set the "What to align to" to "Middle - of the First Selected Object and press OK.
Now the "gear" texture projection is in the middle of the "letters" texture projection.
Select only the "gear" texture projection and scale it using the Scaling (X) tool until it has the same size as the "letters" texture projection. Note that you can individually use the X and Y manipulator to scale along those axis one at the time.
The texture on the faces of the "gear" should now be mapped properly.
Mapping the contour of the objects (as you probably noticed, the texture is stretched on the contour of the objects, we need to fix this):
In the User viewport select the "letters" object.
In the "Select" pane (top right) click on the "Polygon" selection mode.
Press F10 to enable the "Raycast" selection tool.
Select a polygon part of the contour of a letter.
With "Alt" pressed, middle click on an adjacent polygon also part of the contour. The complete contour polygons should now be selected. You can hold "Ctrl" and select the missing polygons if it's not the case.
Open the Texture Editor: "View > Rendering/Texturing > Texture Editor".
Open the "Cylindrical Subprojection" menu, make sure that the "Fit to Image" option is turned ON and do "XZ Object Aligned".
The contour UVs now appears as a rectangle; place it over the bottom right white part of the image by translating and scaling it. Take the time to position your pivot wisely to ease the scaling process.
Repeat these steps for the other letters and for the gear contour.
Note that one in the Texture Editor you can also fine tune the mapping of the faces if it needs adjustment by tagging and translating, rotating or scaling UV coordinates. You can also use the move point "M" functionality.
Exporting the objects as COLLADA files with Papervision3D as a target:
Select the "letters" object.
"File > Crosswalk > Export".
Set the "Crosswalk File Type" to "COLLADA 1.4.1".
In the "Settings" tab:
Turn ON the "Export Selection Only" option.
Turn ON the "Convert Geometry To Triangles" option.
Turn OFF the "Export XSI Extra" option.
Then set the "File name" to "<your Flash project folder>\letters.dae" and hit "Export".
Before exporting the "gear" we need to perform a last little modification to this object. This step is required because we want to animate this object around its center and also because the Papervision3D object coordinates are in World space.
In the User viewport, click on the eye icon and turn ON the "Center" display. As you can see, the center is not at the center of the object but at the center of the world.
To correct this, do "Transform > Move Center to Vertices".
We also need to place this object at the center of the world so, in the Transform pane, type 0, 0, 0 as the x, y and z value of the Translation.
With this done, it will be easy to animate the gear in Flash.
You can now select the "gear" object and perform the same export steps with the "File name" equals to "<your Flash project folder>\gear.dae".
Go back to your XSIModTool project in Flash CS3 and hit F12 to publish... Voila!!!
