Web Techniques Magazine
January 1997
Volume 2, Issue 1

Insite

The Road to CyberTown

Marshal M. Rosenthal

CyberTown has attained a position on the Internet that many sites long for: It contains entertaining things to see and do; doesn't get bogged down in technologies; and keeps users coming back. CyberTown's 51 awards provide further evidence of its success, but the success has as much to do with the concept behind it as the visuals in the forefront. Conceived, fueled, and driven by Tony Rockliff and Pascal Baudar, CyberTown merges technology and design to create a coherent view of the Internet as a community. Launched in June of 1995, CyberTown is a family-oriented town where everyone is welcome to express themselves.

Tony's progressed from a stint as a record producer to a career in multimedia that included movie making, computer consulting, programming, marketing, and promotional design. These unique skills allow him to serve as CyberTown's conceptual designer, producer, and programmer. With experience as an art director, freelance graphic artist, and illustrator, Pascal brings art direction and design to his role as Creative Director.

Figure 1
The CyberTown home page

What makes CyberTown shine is the communities, five areas where the residents (users) can take their own apartment (space): Main Town, Old Town, Beyond CyberTown, The Campus Colony (for teachers and students), and Downtown (for businesses). There is also going to be a Cyberhood Colony. Each colony has numerous buildings full of residents. "We believe communities, especially 3D VR communities, are the future of the Net," says Tony.

Making It Work

CyberTown was originally put together using a souped-up 486/66, a Pentium 100 and a Mac Quadra 800, but is being moved to a dedicated server so that the number of hits won't slow it down. Site control these days is done using InContext's WebAnalyzer, and residents report link changes through the CyberTown Security Report page. Tony checks the site regularly, because there are so many areas to monitor: Chat rooms must be checked and reinitialized, Perl scripts need to be checked, new apartment residents must be added or updated, and so on. Pascal points out that it's crucial to keep the site integrated. With close to 700 pages, if the design were not integrated, the whole site would be a mess. To create an integrated look in both in graphics and programming, Pascal spent several weeks studying cities-their composition, their administration, and the relationship of spaces within them. He concluded that within a given set of pages, the background should be integrated, the illustration style should be similar (although difficult when working with freelancers), and the icons should remain the same.

Figure 1
Tony Rockliff, Co-Designer
of CyberTown

Figure 1
Pascal Baudar: Co-Designer
of CyberTown

Programming

Behind all this lurks the programming. Tony is quite fond of Hotdog Pro, which sped up production by 60 percent over hand coding in a text editor. Frames can be found in such areas as the Jukebox, Odo's Security Office, and one of the chat rooms. Tony believes frames are most useful when the viewer can benefit by seeing two or more different screens at once. Java is used minimally right now; one example is the timer that counts down in Odo's Security Office while residents and visitors try to decode a mutating-virus game.

CyberTown is full of graphic images, and that means a lot of image maps. Tony uses Mapedit, and the city maps with buildings on them let you go anywhere in the city. A Teleporter Pod and a Spaceport Pod also help you get around town, as well as 2D and 3D freeways and a Search page that gives instant access to most parts of town. Says Tony, "We also use navigational buttons on every page. We found that different people liked different navigational metaphors, so we included them all."

The graphics in CyberTown are created mostly with Photoshop. Pascal first spends several hours hand sketching concepts of a new section of town that he wants to create. The next stage is to scan the sketch, import it into Photoshop and add colors and details. Pascal then rescales the image and saves it as a JPEG with medium quality. If the image has some wide areas of flat color, such as a black or blue background or consists of very few colors, he usually saves the image as a gif. He then extracts a Netscape palette from a PC screen shot and applies it using DeBabelizer (on the Mac) to avoid unwanted dithering when the image is viewed on a 256-color monitor. The colors are then reduced to the minimum possible, and the image is saved as a gif file.

For VR creation, Pascal uses Home Space Builder, Virtus Walkthrough Pro, Pioneer Pro, Infini-D, and hand coding. According to Pascal:

Home Space Builder is an excellent tool for textures and simple VRML files; Virtus Walkthrough Pro and Fountain are more complex, have a higher learning curve...but allow more elaborated shapes; and hand coding allows me to correct the files and add lighting and animations. Other 3D programs such as Infini-D can be used for modeling, with the files saved as DXF files, then imported into Pioneer from Caligari and saved out as VRML files.

All these programs range in price from $50.00 to $450.00, but Pascal has short-term plans to spend the big bucks needed to buy 3D Studio.

Graphic Interaction

CyberTown is heavy in interaction. While VR is the focus, there is graphic animation as well. One example is the Meridian 59 link, an interactive MUD (multiple user dungeon) game linked to CyberTown that features graphics. The front door explains about the game, and uses GIF animation to create the illusion of a lamp flickering in a dungeon. One of the few GIF animations on the site, the lamp was created on a Mac using Gifbuilder. The frames, consisting of four or five images with flames moving back and forth, are created in Photoshop, saved as Tiff files, and imported into DeBabelizer, where the color palette is reduced to 40 colors. Each image is then saved as a GIF. Using Gifbuilder, the images are placed in sequence and saved as an animated GIF.

The Virtual Drumkit is an effective use of Shockwave; it lets you not only play a set of drums using the mouse, but record and play back your creations as well. Tony and Pascal first created a version of the drums for a multimedia IPK for Sony: the image was rendered in Infini-D art as a pict file, the audio was processed in Cool-Edit, and the entire package was assembled in Director. For the Net, both the image size and the number of colors had to be reduced and the eight drum sounds had to be compressed, normalized, and equalized until they sounded good even at 8 bit/11K. But the audio problems didn't end there-Tony then had to decide whether to have one or many drums playable at the same time. Since the former added a slight delay to the time before the drum sounded, he chose the latter-which gave an instantaneous response. Tony recalls:

The recording capability was done in Lingo by Mark Weber in England. He just emailed me and said, "Why don't you add a recording capability?" and I said, "Why don't you? "

And he did! The code basically just makes a digital record of what you play and repeats it, until you rerecord over it. And the whole file, including the eight audio files, is under 60K-taking about 20 seconds to load on a 28.8K line. Everything is then in memory and done locally on the user's system (obviating any further calls to the Net, which would slow response times too much).

Both Tony and Pascal are concerned with file size, since the bandwidth forces them into a middle ground between speed and creativity.

3D Virtual Reality

One of the hot spots is the 3D Highway, especially when combined with Shockwave. As with just about everything in CyberTown, both Tony and Pascal leaped into the idea-which came to Tony the morning Shockwave was released.

I was lying in bed at about 8:00 a.m., and I suddenly had the idea of adding a "Shockwaved" dashboard with animation and audio, and trying to combine it with a running VRML file that we already had of a freeway. I already had a dashboard image that Pascal had previously created and decided to try and create the whole thing and have it up and running before anyone got into the office.

Tony brought the image into Director and created separate steering wheels in different positions, as well as some flashing lights, by masking parts of the original image. He then animated them in Director and added a sound effect of a running car sampled and compressed at 8:1, equalized and looped. Tony then put a brake on/off switch on the image to turn the animation and audio on and off, emptied out Director's memory, and further compressed the file. Tony had it all up and running on the Net by 9:15 a.m., surprising everyone when they arrived at work.

Pascal's recollection runs along similar lines:

We already had a freeway existing in VRML [created with Home Space Builder]-we use it so people can access places. We put the VRML file within a frame, and placed the Shockwave file with the image of the car right under it. This gave the illusion that the car was doing all the work of traveling through the VRML file (the car was changed recently into a BMW when BMW became a sponsor). Photoshop was used to do the masking steps, and DeBabelizer's super-palette function was used prior to the files going into Director.

Conclusion

Of course, staying alive on the Web requires more than just a quality product-read that as advertising and money. Tony relates that they are often approached by ad agencies and banner brokers, and that their BMW campaign was so effective that dealers ran out of the free backpacks that were being given away.

Recent surveys indicate a great interest in Virtual Reality in all its forms-and users of all ages see CyberTown as a source of information about it. Tony concludes on an upbeat note about their future:

As technology advances, CyberTown intends to be right there with new technologies as they appear. Shortly we'll be adding more multimedia (we recently added music to surf by in an interactive jukebox), as well as more 3D Virtual Reality. More and more interactivity will be added, and eventually you will be able to travel through CyberTown in full, immersive, 360-degree 3D Virtual Reality with surround sound.


Marshal is a photojournalist based in New York City and a frequent contributor to computer and Internet-related publications. He can be reached at marshalr@pipeline.com.
Copyright Web Techniques. All rights reserved.
Web Techniques Magazine
Last modified: 2/5/97