Working With XSI ModTool

Setting Up ModTool

Make sure you’ve downloaded and installed XSI ModTool, along with both the latest patch as well as the CROSSWALK import/export system. If this has been done, start up ModTool. If you’ve never used ModTool before, you may want to perform some customizations. This article will assume that you’re operating in XSI Default mode (go to Modes->XSI Default). You may also find it helpful to activate the main toolbar, which you can do by clicking on View->Optional Panels->Main Shelf.

ModTool works by connecting to an existing XNA project and creating an XSI project. This XSI project contains a workspace which contains saved scenes, along with other data used by these scenes. This project is created in a subfolder of the Content folder in your project folder, which means you can include this XSI project in your source control in order to have all artists share a common workspace. To have ModTool connect to your project, click on XNA Game Studio->Connect To XNA Project. In the dialog that appears, browse for the main folder that contains your project. The dialog should say that a project has not been detected at this location, and that one will be created for you. Close this dialog to let ModTool create the project.

Making A Model

Now we’re ready to make a model that will test out our new content authoring system. First, click on XNA Game Studio->New XNA Scene to create a new scene. Save it in the scenes folder of the new XSI project that was created in your Content folder.

Now that we have a scene, we can add a model to it. We do this by going to XNA Game Studio->Create Model. You should get a cube mesh added to the scene when you do this. You can view this cube in several ways by switching the view mode, which you do by clicking one of the buttons in the bottom left corner of the screen.

The default is Four Views, which is the top right button. This gives you four different views at a time. The three views in the top left, bottom left and bottom right are typically configured to give you an orthographic (2D) view from a certain direction. The top right view is typically configured to give a 3D view of the scene. Switch the top-right view to “Explorer” mode (click on the bluish button that says “Camera” and select Explorer). This view presents the scene graph for your current scene. The scene graph is a hierarchal representation of everything in the scene: meshes, lights, submeshes, etc. You’ll see that you have your camera, 3 lights, and your model in the scene. If you expand the model node, you’ll see there’s a mesh in there: that’s our cube that you see in the views. We always want meshes to be part of a model, since anything that’s not part of a model won’t be exported when we publish the model to our project. Remember this if you ever add additional polygon meshes (you can add any mesh to the model by dragging it to the Model node).

In order to use normal-mapping and other effects that require a tangent basis, we need to add tangents to the mesh. To do this, first select the polygon mesh by expanding the Model node and selecting the “Mesh” node. Now in the toolbar on the left side of the screen, change it to “Render” mode by clicking on the purple button on top that says “Model” and then click on “Render”. Then click on the “Property” button, and click on “Tangent”. Just leave the settings at default in the dialog that pops up. After you do this, there should be a new “Tangent” node under the Mesh node.

Now we want to set up the lighting for our scene. We designed our material effect to work with one single directional. This means we can’t use those point lights; go ahead and delete them from your scene. Now add an Infinite Light to the scene: you can do this by clicking on the “Primitive” button on the left side of the screen and then going to Light->Infinite. In the dialog that pops up, don’t worry about anything except for the “RGB” and Intensity” values in the “Color” area.

Once the light is added, we can position it and rotate it. Position of course doesn’t matter for an Infinite Light, since they’re global light sources. Direction is what matters, and you can see the direction indicated by the arrow that points away from the light when you select it (you can select the light by clicking on it in the scene graph). To position it, go to translate mode by hitting “V”, or by clicking on it in the main toolbar, or by clicking on the “T” in the transform toolbar on the right side of the screen. Then you can drag it around in any of the views. To rotate it, go to rotation mode by hitting “C”, by clicking on it in the main toolbar, or by clicking on the “R” in the transform toolbar. You can then rotate it by dragging the mouse on one of the circles, which represent the 3 transform axes. If you need to get a better view of things, go to zoom and pan mode by hitting “Z” on the keyboard. You can then drag the mouse to move the view, zoom in by clicking the middle mouse button, or zoom out by clicking the right mouse button. If you have the top-right view set to Camera mode, you can also rotate the view by going to orbit mode (hit “O” on the keyboard) and dragging the mouse.

Go back to the normal “Selection cursor” by clicking on the big arrow in the top left corner of the screen. Set it to object mode as well. Now select the cube by dragging and making a box that includes it (don’t select the light). We can now manipulate it in the same way we manipulated the light previously. However for this tutorial, just leave it positioned and oriented where it is. You can also scale the cube: to do this, either go to scaling mode (hit “X” on the keyboard, or click on the button in the main toolbar or the transform toolbar) and drag the mouse, or set a value directly next to the “S” in the transform toolbar.

We’re now going to assign a material to the mesh. As we said earlier, a material is comprised of one of our material effects, some material parameters, and some textures. Together these all define what the surface of the mesh looks like, and how it responds to lighting. Make sure the mesh is selected, and then go to the Materials Manager by either clicking on “Materials” in the left-hand toolbar or by going to View->Rendering/Texturing->Materials Manager. In here we have one material already made for us already, but we can’t use it since it doesn’t use a DX9 effect. Now we’ll make a new one: to do this, open up an explorer window and go where you saved your mat_NormalMapping effect. With explorer on top, drag the .fx file right into the Material Manager window. You should see a new material appear with the same name as the effect. Double click on it to open up the material properties. On the first tab, we have some properties to play with. The first is the name: name it “Brick”, since we’re going to use a brick texture and normal map. In the middle is the .fx file being used; leave that alone, it’s already set up to use our effect (note that you can click on the “Reload” button if you ever make changes to the .fx file). At the bottom are the shader properties we defined, complete with the names and controls we specified. You can leave them at the default values for now.

Move over to the “Images” tab of the dialog. This is where we set textures for the effect. The dialog should be prompting for two textures: the diffuse map and the normal. Click on the “new” button to browse for a texture for each: set the diffuse map to “Brick_Diffuse.png” and the normal map to “Brick_Normal.png”. We also need to set the texture space for each texture: next to where it says “Texture Space” click on “New”, and then select “Unique UVs (polymesh)”.

Now we have to assign this new material to our mesh. To do this, first make sure the mesh is selected. Then, assign the material by pressing the button that has a purple sphere with two arrows pointing at a cone (when you hover over the button, the tooltip should say “Assign material to selected objects or clusters.”) After this you can close the Material Manager.

In order to see how our material actually looks, we need to turn on the DX9 real-time preview. First make sure the top-right view is set to “Camera” mode. Then click where it says “Wireframe” and choose Realtime Shaders->DirectX9 from the dropdown. You should see the mesh in all its normal-mapped glory now.

Publishing The Model And Importing It Into The Content Pipeline

To export a model from ModTool, go to XNA Game Studio->Publish Model. In the dialog that pops up, hit the “…” button and browse to the content folder of your project. Pick a name for your model, then hit OK. Now click on “Consolidate Images and FX Files”, and then click OK (Consolidating images and files copies all textures to Content\Textures, and effects to Content\Effects). You should now have an .xsi model in your Content folder.

Before we can add this new model to the Content Pipeline, we need to add a reference to the Crosswalk content importer. To do this, right-click on the Content project and go to the “Reference Paths” tab. Here you need to add a path to the Addons\XNAGSE\Application\References\XNA 2.0\ subfolder of your ModTool installation directory. Then add a reference to the importer assembly by right-clicking on References and adding the “XW4XNA” assembly.

Once you’ve added the importer, we can add the model to your project. Right click on the Content project and click on Add->Existing Item.... Set the dialog to browse for “all files(*.*)”, and then navigate to the Content folder add your model. Once the model is added, set it to use the Crosswalk Importer by right-clicking and going to Properties, and then selecting the correct importer in the dropdown. Then set it to use the standard Model content processor.

Now that the model is added to the Content project, we can load it in our code through the content pipeline.

protected override void LoadContent()
{
    model = Content.Load("TestModel");
}

Conclusion

By integrating our effects and rendering code with XSI ModTool, we’ve created a Content Authoring pipeline that allows the artists to control their content all the way up to the step of adding it to the game’s Content project. This allows both artists and programmers to adopt a streamlined workflow that keeps both groups focused on their main tasks, and also keeps rendering code simplified and data-driven. The techniques used can also be extended to a full material library featuring effect types for a wide variety of rendering scenarios.