Accessibility

Director Article

 

Creating a Shockwave 3D Game Level in 30 Minutes

Mal Duffin

CanDo Interactive

During the course of reading this article and carrying out the various exercises, you and your 3D artist colleagues will get a practical, hands-on idea of the workflow required to create and export Shockwave 3D content using any of the major 3D applications. You will create a 3D environment, export it as Shockwave 3D, and drive around it in a virtual vehicle using the keyboard's arrow keys.

You are not required to use Macromedia Director. However, I do hope that after you get an idea of the power of the real-3D features of Director, you or your programming colleagues will be encouraged to download the trial version of Director and start working on some new and exciting Shockwave 3D content.

It will take approximately 30 minutes to finish the exercises presented in this article.

Requirements

To complete this tutorial you will need to install the following software and files:

Macromedia Shockwave Player

CanDo 3D Modeling Training Tool

  • edit_car_level.zip (ZIP, 7.1 MB)

    Download and unzip the free, fully functional evaluation of the CanDo 3D Modeling Training Tool. You can use this application for free on your own personal website. For training or academic purposes, a licensing program is available.


Applications for Shockwave 3D Export

Make sure you have one of these supported applications installed. These applications all support Shockwave 3D export. The CanDo 3D Modeling Training Tool linked to above contains a sample 3D scene for each of these packages:

The downloaded training application directly supports the Shockwave 3D export of all of these applications.

Figure 1 shows examples of content created by 3D modeling students.

Examples of content created by 3D modeling students

Figure 1. Examples of content created by 3D modeling students

Why Create Shockwave 3D Content?

Shockwave 3D is extremely powerful and flexible technology. While there are a number of different technologies that allow for interactive 3D content to be deployed over the Internet—and they all support the same basic functionality required for many applications, such as displaying interactive products—only a few allow for more advanced applications, such as an interactive game, to be implemented.

As with any rich online media, the popularity and installed base of the plug-in is a very important factor. Since 1999, the Shockwave plug-in has incorporated interactive 3D technology (developed by some of Intel's top software engineers) as part of its standard installation. This has ensured that approximately two out of three computers connected to the Internet already have Shockwave installed on them.

Shockwave 3D supports many features, such as reflection mapping, multitexturing, particle systems, subdivisional surfaces, toon rendering, and progressive level of detail. Skinning and bones can be exported from certain 3D applications.

A key feature of Shockwave technology is that it allows for the integration of all forms of media, including the use of 3D content and 2D content (images, video, Flash, and so on) within the same interface. Some 3D-only solutions can be quite restrictive in allowing developers to implement a user interface to their content.

Shockwave 3D currently does not support advanced features such as pixel and vertex shaders. These are available only on newer computer systems and are therefore not viewable on many computers. However, this is more than made up for by ensuring that content can be viewed on every single computer running Windows or Mac OS, regardless of whether or not an OpenGL or Direct 3D graphics card is even available (thanks to a built-in software renderer).

A recent update to the Shockwave plug-in has slimmed the size of the installater from over 4 MB to a very compact 2.5 MB. This makes it even more appealing to many computer users who want to view interactive content online and who still have dial-up modem connections.

Creating a Shockwave 3D Scene from Scratch

The application you downloaded with this article allows you to export your 3D scene into an interactive Shockwave 3D environment using a very simple export process. For many of the applications, this will be as straightforward as exporting a single file.

The process goes something like this:

  1. Create or load your 3D scene.

  2. Ensure that a model exists, called carStart.

    Note: This is the only requirement of the application. The model is used to position and size the vehicle within the scene.

  3. Export the scene as Shockwave 3D (overwrite the gamelevel.w3d scene).
  4. Run the application.

That's it! In most cases, the export process takes a matter of seconds. This allows 3D artists to try out a number of different ideas in a very short period of time.

To create a basic scene, follow these steps:

  1. Open your 3D application, create a box in the middle of the ground object, and call it carStart. The size of the box determines the size of the resulting vehicle within the Shockwave 3D environment (see Figure 2).

    Creating a box in the middle of the ground object

    Figure 2. Creating a box in the middle of the ground object

  2. Create a ground area for the vehicle to start on. This can be as simple as a plane object, or as a textured object—for example, with a tiled grass texture (see Figure 3).

    Creating a ground area for the vehicle to start on

    Figure 3. Creating a ground area for the vehicle to start on

  3. Export the scene as Shockwave 3D and save it over the gamelevel.w3d file.

    Note: If you read the Instructions.doc file contained in the sample files download, you'll see detailed instructions on how to export Shockwave 3D content from the various different 3D applications.

  4. Run the application (see Figure 4). For Windows, run the file "Play Car Game Level.exe"; Mac users currently have to run index.htm.

    Running the application

    Figure 4. Running the application

You will now be able to drive the vehicle around the ground object, using the keyboard's arrow keys. In the next section, you will add new models to the scene.

Adding Models to the Scene

You are now going to add some objects to the environment:

  1. Add a second ground area with a concrete type texture applied to it (see Figure 5).

    Second ground area

    Figure 5. Second ground area

  2. Add a jump ramp to allow access to the second ground area. In order to do this, first create a box (see Figure 6).

    Box for the ramp

    Figure 6. Box for the ramp

  3. Drag two of the vertices of the box down to form a ramp (see Figure 7).

    Dragging two of the vertices

    Figure 7. Dragging two of the vertices

  4. Apply different materials to the top and side of the ramp (see Figure 8).

    Different materials on the ramp's side and top

    Figure 8. Different materials on the ramp's side and top

  5. Admire your new ramp (see Figure 9).

    Completed ramp

    Figure 9. Completed ramp

Feel free to create and place additional models in the scene. In the next section, you will add some interactive elements to the scene.

Adding Interactive Elements to the Scene

You are now going to add some interactive elements to the scene. Place special characters in the name of the object within the 3D modeling application to allow interactions to be built up.

You can find more information on the various tags in the included Instructions.doc file included in the sample files download linked to at the beginning of the article.

In Figure 10 you can see that I've added a water texture to a plane under the ground objects, and I've named this object gameLose. As soon as the vehicle touches this water model, the game ends. There is a gameWin box at the far side of the wall. As soon as the car connects with this object, the game is won.

Water texture, box, two objects, and wall interactive elements added to the level

Figure 10. Water texture, box, two objects, and wall interactive elements added to the level

In order to get to the gameWin box, however, the player must trigger off the wall, called triggerOffExit, in the middle of the platform. This occurs when the player collects the two pickups, called pickupExit01 and pickupExit02 (see Figure 11).

Game scene with additional interactive elements

Figure 11. Game scene with additional interactive elements

In Figure 11, I have replaced the wall with a box with a tiled brick texture, and replaced the pickupExit objects with coins (cylinders).

In the next section, I will review changing the non-3D elements of the scene.

Changing the Non-3D Elements of the Scene

There are a number of external texture files, used by the game, that you can edit to help change the look and feel of the game. This helps to incorporate your Photoshop or Fireworks skills easily into the project.

Here are some of the main files, along with how they are used:

You can also alter the music and sound effects (all of these are optional):

Various elements of the game, such as the vehicle dynamics, can be altered using the gamelevel.xml file. See Instructions.doc for more information.

In the next section, you will export and load the sample scene.

Exporting and Loading the Sample Scene

When you download the application, you'll see a folder called "Sample 3D Scene." This contains a sample scene in the native format for all supported 3D applications. You can load this scene into your application and get a feel for how some of the interactions can be set up. You'll see some examples of other game-related features, such as sky boxes and physical moving objects.

If you have an existing 3D scene that you would like to drive around, simply follow these steps:

  1. Load your 3D scene.

  2. Create a new object (for example, a box) in the scene:

    1. Position it over some sort of ground model.
    2. Scale it to about the size of the required vehicle.
  3. Name this object carStart.
  4. Export the level, like before, as gamelevel.w3d.
  5. Run the executable file.

You should now be able to drive around your 3D scene.

Some Advanced Techniques

Consider undertaking these special projects to become more familiar with what I've covered in this article.

Creating a Sky Box

A sky box is a special game-related technique used to surround an environment with six prerendered images, mapped on to each side of a box object. By naming the object skybox, the game will automatically process the object and use it in the correct way.

Creating Physical, Movable Objects

When you create an object in the level, such as a crate or barrel, you can easily turn it into a movable object within the Havok physics system. To do this, place the tag moving before the object's name. The next time you export the scene, you will be able to collide with the object and it will behave in a physically correct manner.

You can discover more advanced techniques by reading Instructions.doc and Advanced Instructions.doc contained within the sample download file.

Viewing Existing Levels

You can see existing levels created using the training application in the CanDo Interactive Showcase.

Where to Go from Here

You now have experience creating and exporting Shockwave 3D content. You have seen how easy it is to export your environment, and you have an idea of the type of models that are suitable for use within that environment. Hopefully you have been inspired to create more Shockwave 3D content using the latest version of Director.

Competition (Ends March 31, 2006)

If you create a fun level using the training application, you can enter it into a competition. There are various prizes for levels created using the different 3D applications. Learn more about the competition and how to enter.

About the author

As one of the directors of CanDo Interactive, Mal Duffin has extensive experience creating interactive Shockwave 3D content. He previously worked on video games and virtual reality projects for companies like Sony, Shiny Entertainment, and IBM.