All Categories :
VRML
Chapter 12
Creating a MYST-like Adventure on the Web
-by Kelly Murdock
CONTENTS
It's time to put the skills you've gained in this part of the
book to practical use. To conclude Part III, "Advanced 3D
Graphics on the Web," you'll apply the techniques you've
learned to create an interactive Web adventure. This is what you'll
need to do to pull it off:
- Build a storyboard to get an organized look at how the adventure
will progress.
- Use the 3D package techniques you've learned throughout this
part of the book to create the images for the adventure.
- Create Web pages with the necessary links.
- Enhance the adventure with embedded animations and other 3D
elements.
Because there's no new techniques to present, you can move pretty
swiftly through this example. The real test is to actually experience
the adventure, which can be found on the book's CD-ROM. Forward
all-adventure awaits!
Because of its popularity, you have no doubt seen and probably
played the game MYST. Robin and Rand Miller, the creators of MYST,
didn't just throw together a bunch of cool-looking pictures to
produce a major hit. They started with a detailed plan and story.
It was the story that pulled you in and made the game so popular.
For this adventure, too, you need to start with a plan. When the
plan for unfolding the adventure scene-by-scene is illustrated,
it's called a storyboard, a tool often used by directors
of movies and commercials. Storyboards often end up resembling
complicated flowcharts.
I created the storyboard for this adventure by sketching the images,
then connecting them with lines showing which images were attached
to each other through links. Part of the finished storyboard is
shown in Figure 12.1.
Figure 12.1: Part of the Volcano Treasure Adventure storyboard.
The buttons at the bottom of each scene are the links that move
you through the adventure. By making the correct decisions, you
move through the adventure until you finally enjoy the spoils
of the treasure.
The Miller brothers used Strata's StudioPro for their breathtaking
images. A demo of StudioPro can be found on the book's CD-ROM,
but you'll use several different tools that you've worked with
already in this book. You'll also get some help from other supporting
products.
The bulk of the work is in setting up the scene. Because the scene
would be too big to handle as only one scene, I broke the adventure
down into several scenes:
- Island scene This is the largest scene,
where all the island shots are taken.
- Volcano Interior scene This is a simple
scene showing the volcano's origin; an elevator provides access
to the interior of the volcano.
- Undersea scene Being underwater introduces
some interesting challenges with lights.
- Treasure Cave scene A closed environment
where lots of lights are needed to give the treasure a glow.
- Hut Interior scene A simple mapped image
shows the landscape outside the window.
Once the scenes looked right, I started capturing the individual
images by moving a camera around the scene and rendering the images
to file as JPG images. A few of the images can be seen in Figure
12.2.
Figure 12.2: Rendered 3D images taken from the Volcano Treasure Adventure.
Once you have all the images, you need to build the Web pages
to display them on. The Web pages should use an unobtrusive interface
that doesn't detract from the adventure's look and feel. Also,
you don't want to increase your file size with unnecessary elements.
The first element to consider is the background image. Since the
images are quite detailed, you don't want the background to steal
any of the thunder. That's why I opted for a simple colored background,
but I changed the color depending on the location in the adventure.
Therefore, a light blue background is used for the undersea portion,
tan for the island images, and fiery red for the volcano section,
as Figure 12.3 shows.
Figure 12.3: Descending into the volcano pit during the volcano Treasure Adventure.
The next elements to consider are the user interface buttons.
The navigation buttons underneath the image represent choices
you can make based on the image. They are clearly marked and,
coupled with the image, make it clear where each choice leads
you.
The images tell the main story, but some text pages are used occasionally
to fill in the gaps. The story text isn't really necessary and
is added just to enhance the adventure. I designed the interface
so that a text page can fit on one 800 ¥
600 resolution screen without any scrolling required.
Another way to navigate through the adventure is to use image
maps. Within the adventure is a scroll item you can use to hyperjump
to different parts of the island. This shows another navigation
method, as shown in Figure 12.4.
Figure 12.4: Use the overview image map to navigate in the adventure.
With the interface fixed, you can work on enhancing the page with
additional elements, such as a title page and animations.
The tough work is done, but there are subtle ways to enhance the
experience. The home page should have a unique look with a 3D
title. After that, you can spice up the adventure with some 3D
animations, but place the animations out of the normal Web path
so that viewers who don't have the correct plug-ins won't get
frustrated.
The Title Page
Title creation is easier than creating the images you just finished.
I used some 2D tools to touch up the title page, shown in Figure
12.5. You'll notice that since this figure is reproduced in black
and white, the effects used for the letters don't show up that
well. For example, to see the "lava" texture map used
on the word Volcano and the swirled jungle leaves on the
background, check out the Adventure on the CD-ROM to see the title
screen in all its glory. Notice how a thumbnail image shows a
scene from the introductory animation.
Figure 12.5: Title page for the Volcano Treasure Adventure.
Animations can add a great deal to your adventure. They can give
visitors a sense of how the entire island fits together. I can
see two logical places where animations would help. One is at
the start to introduce the adventure and convince visitors to
take the time to participate. The second one is a final animation
at the end of the adventure, where an animation can be a reward
for finishing the adventure. Creating the animations is really
quite easy once the scene is set up. All you have to do is to
plan the motions.
Make sure your visitors know what they're getting before they
go through the download process. Thumbnails are a good peek at
the animation. I used the Shockwave plug-in to handle the animation
sequence because it's widely available and provides probably the
best playback quality. GIF animations and streaming animations
can be choppy because their playback quality is influenced by
Internet traffic. Shockwave, on the other hand, downloads the
entire sequence before playing the animation. Frames from the
introductory animation are shown in Figure 12.6.
Figure 12.6: This animation is located at the begining of the adventure and gives visitors a look at the island from above.
The concluding animation is more of a reward for having completed
the adventure. It also uses the Shockwave plug-in.
Be sure to check out the adventure on the book's CD-ROM. The example
in this chapter is really meant to give you a glimpse of what's
possible.
Sneaky Inline Animations
On some of the pages, you'll notice a simple animation within
the scene. These "sneaky" animations would take a lot
of bandwidth if they were made up of different images. However,
most of the images for one of these inline animations don't move,
so you can get away with overlaying GIF animations. The trick
is to make the unchanging portion of the image a non-tiled background
and to center the animated portion, like a bird flying in the
sky, on top of the background as a transparent GIF image. (See
Figure 12.7.)
Figure 12.7: In this scene, the image was made part of the background so that the small bird in the sky could be included as a GIF animation.
Caution |
The problem with this technique is that images line up only if the screen is exactly 800 × 600. If the screen is any other size, the background becomes tiled and the GIF animations don't line up.
|
This is more than the workshop wrap-up; it's also the part wrap-up.
You've covered a lot of ground in these short chapters. You can
use your 2D graphics packages to create interesting 3D graphics;
you've learned the basic concepts of 3D rendering, modeling, and
animation; and you've learned how to use this content to enliven
and enhance your Web pages. I hope you take the lessons learned
in this book and develop wonderful, rich games, such as MYST,
for the Web.
Next Steps
Before you say ciao to this chapter, take a look at what's up
ahead:
- If you're eager to learn about VRML, the wait is over. The
next chapter moves into real-time 3D for the Web. See Chapter 13,
"Exploring VRML Browsers and Development Tools."
- In Chapter 14, "Starting with
Models," you get back into the modeling scene, but this time
it's modeling for VRML.
- If you liked this workshop, be sure to check out Chapter 17,
"Real-Life Example: The VRML Art Gallery: A VRML World by
Hand."
Q&A
Q: | What kind of machine did you use to create the images in this adventure?
|
A: | 3D packages usually require the fastest machines available. I used a 133 MHz Pentium with 16MB of RAM. My Matrox Millenium video card with 3D acceleration also helped.
The place I was really hurting was in my PC's memory. For large-scale scenes like this one, you really should consider 48MB or more. With prices for RAM dropping, this is becoming more reasonable.
|
Q: | In the game MYST, you navigate around the scene by simply clicking on the image. Why didn't you just make all your images into image maps and do away with the buttons?
|
A: | The honest reason is that I was lazy. There are several simple programs that automate the task of creating image maps, but since this example usually had only two choices per scene, the button interface was easier. The buttons also made it clear what the choices were without having to include a lot of text.
For more complex and detailed scenes, images maps would be a good option. I leave it to you to include them in your next adventure.
|