Celebrating the release of Spiderman 2, the latest online 3D game for Kellogg’s Frosties sees Tony the Tiger swinging through the city.

Lancashire animation and games studio, Catalyst Pictures has created a dozen or so online games for Kellogg’s and its Frosties brand in the last two years. The latest game to go live is part of a promotional tie-in to celebrate the cinematic release of Spiderman 2. Entitled Hang Time, it sees Tony the Tiger performing Spiderman-like swings and jumps though a cityscape in search of booty in the shape of packets of Frosties, with the chance for players to win some top prizes.

Catalyst was brought onboard by interactive agency Magnetic North, which was responsible for the latest incarnation of the Kellogg’s interactive and Frosties Web sites. The original brief for all the Frosties games was to make them the best on the Web and to have them use 3D for a more console-like gameplay, explains Nik Lever, managing director of Catalyst Pictures. For Hang Time in particular, Magnetic North was keen that the game was action-packed, lots of fun to play, and would support the brand.

Although Hang Time was initially mooted to be a Flash game, Catalyst suggested switching the target platform to Shockwave to make the scrolling gameplay more feasible. “Action games need a good frame rate. If the entire screen is going to change from one screen update to the next, in other words a scroller, then Flash is stuffed,” says Lever. “Shockwave gives you the option to scroll using Lingo Imaging or using the 3D Xtra.

Hang Time took the Catalyst team two months to complete, says Lever. “It was quite a small job in comparison to others we’ve produced,” he says. “Working on it certainly improved my playing of platformers… I can survive in Tomb Raider longer now!”

According to Lever, online 3D games have progressed to such a point that they are now real competition to retail console offerings, although online developers are still hindered by a lack of financial reward for their work.

“Hopefully the future will bring a sensible micropayment scheme where the developer can get a sensible return for their effort. We’re working with a number of third parties to this end, including paid-to-play tournaments, demo versions of pay-to-own games, and micropayment sites,” he says.

3D animation

“Having decided to create a Shockwave game, the next step was to decide whether to use multiple sprites in essentially a 2D environment or the 3D Xtra,” explains Lever. “However, there are so many benefits in using the 3D Xtra, that this decision was in essence a no brainer. Using the 3D Xtra makes programming easier. The characters are moving around an environment that’s easily queried – is the character supported by a platform, is the character at a ladder, and so on. Also, the 3D Xtra can sustain a frame rate of around 50fps with animation interpolated, so the faster the frame rate, the smoother the action.”

Catalyst’s standard online games production starts with the level design and modelling, after which the studio produces a walkthrough of the level as an overall image, along with a description document and frame grabs of how the game will look to the player. Once the client has approved this or suggested changes, the team can move onto working out how the central character moves in the gameplay.

In the case of Hang Time, explains Lever, level design involved using a big sheet of graph paper and simply deciding where to put the platforms, swingbars, ladders and prizes points.

NewTek LightWave – the studio’s favoured 3D tool – was used to model and animate the game assets, and PaintShop Pro was used for texturing. To create the central character of Tony the Tiger, the team worked to model sheets that had been provided by Magnetic North when the studio first began working on online games for Frosties.

The game assets were then exported to a format that could be used in Director MX 2004. Finding a suitable format, however, proved problematic. “All the principal 3D applications have a Shockwave 3D exporter but we’ve been disappointed with them as they don’t support all of the intricacies of the file format,” says Lever. For this reason, Catalyst created its own exporter from LightWave so that file complexities such as light mapping and advanced file compression could be supported.

According to Lever, one of the drawbacks of using Shockwave 3D is a lack of decent development tools, which Catalyst solved by creating their own. Having producing a dozen of so Shockwave 3D games previously, Catalyst’s coders were able to set up the game quickly and with minimum fuss using object- oriented programming. Indeed, the hardest part of the game, says Lever, was in ensuring the game would work on low-spec computers.

“The target platforms display the content differently depending on the speed of the CPU, the graphics card and whether the most appropriate versions of OpenGL or DirectX are available,” explains Lever. “This can often cause problems running the game. In this instance, we had to alter the motion of the central character for each screen update based on elapsed time rather than just a frame tick.”

Creating 3D environments

“The backgrounds’ depth is an artificial illusion rather like a stage set,” says Nik Lever. “If you rotate the camera the illusion is destroyed. As the camera only moves in the x and y axes, we can cheat the perspective making objects deliberately small to appear further away.” Catalyst used LightWave 3D for modelling and Paint Shop Pro for adding textures, yet to handle lighting, it needed to create its own exporter to Director MX.

“This let us manipulate things like normals (the direction that a side appears to face). By tweaking these, you can get little pools of light into a scene without having to have hundreds of lights,” says Lever.