Max Did It
Graphics
,Fri
2 Comments
Tagged ,

Designing the Race Tracks for Rubberband Racing

As mentioned on the project’s page, one of the inspirations for Rubberband Racing is Micro Machines. Just like the videogame classic, Rubberband Racing features toy cars that drive through oversized everyday scenes.

Rubberband Racing Screenshot

While designing and modelling cars for the game is a rewarding experience, the thought of having to create and texture the 3D assets for an entire level was pretty daunting.

I was looking for a way to create appealing level graphics in short time.

My Solution

I tried to take advantage of the scenario of the game. Basically all objects that the player would encounter and drive around in the game were accessible to me in real life. Why should I recreate a race track in a kitchen setting if I can actually build a little race track in my kitchen?

I could then simply make a photo of that scene and use it for several purposes. Not only could I use it as the basis for the 3D objects in the track, but I could even project it on them and save the time I would have spent on making textures.

That way, I could have realistic, high quality level graphics in which the car could drive around, being occluded by objects that are in front of it.

Realization

Building the Track

The first track I’ve created this way is the aforementioned kitchen table level.

The first step was a trip to the grocery store and get all the “prefabs”.

Rubberband Racing Race Track Preparations

Back at home I set up the race track on my kitchen table. It’s actually really fun to do your level design in real life on a table.

It’s a very direct way of implementing your ideas and seeing first hand how they fit together. Even if you don’t make an actual photo of the level to use in your game, creating prototypes and planning levels this way could be useful either way.

Rubberband Racing Kitchen Table

I then made the photos of the scene I had set up this way.

Transfer the Track into the Game

After doing that, I took the photo and recreated the scene in Blender.

The first step was to place the 3D camera at the same position in relation to the table that I took the photo from.

Here’s the first lesson I learned while doing that: Next time I really have to measure the position of the real camera when I take the photo. Failing to do so makes finding the right spot for the 3D camera later on a real pain.

Even though you have the photo as a reference, there are many variables like focal length, zoom, tilt etc. that might make positioning the camera really tricky. And if the 3D camera is not positioned properly, then the recreated scene based on the photo will be off as well.

When I had finally managed to solve this, I made the photo the background image of the scene and then modelled the objects in the scene.

Rubberband Racing Track 3D Scene

I only approximated the shapes of the 3D objects. The function of the 3D scene is only to occlude the dynamic objects when they move behind the static objects and to throw shadows. The lighting and the visual details are already present in the photo.

Proper Silhouette Rendering in Rubberband Racing

When I was done with that step, I simply projected the photo on the 3D scene.

Rubberband Racing Race Track Projection

The GIF above depicts the 3D scene with the photo projected on it. Note how the objects throw themselves as “shadows” when you move the camera to look behind them.

And this is what I use as race track in the game.

Results

This method has a couple of advantages and disadvantages.

Advantages

  • The method is rather quick. You don’t need to create very detailed 3D geometry and you can skip texturing altogether.
  • Designing and setting up the level or race track itself is very straightforward.
  • Depending on your motive, you will get a high quality and consistent look for the level itself.

Disadvantages

  • It can be difficult to make the look of the static and the dynamic objects consistent. Some people have commented on how the cars don’t really seem to fit into the level graphics.
  • It’s difficult to make retroactive changes to the level design.
  • If you use one single texture for the race track, then the texture quality can become blurry if you get very close with the camera. If you use several texture tiles, then the memory will have to hold a lot of data.
  • You can zoom and rotate the camera, but not move it. If you do, you will get the “shadow” effect as shown in the animation above.

All in all, this has been a very interesting experiment.

It might be interesting to try this method not with photos but with hand painted concept artworks. That way, dynamic and static objects might have a more consistent look. Due to using layers in the artwork you also might have better control over the 3D objects later on.

Comments

2 Comments have been posted so far - Leave a Comment

Matze
Matze
,Sat

Clever approach ^^.
Have you tried editing the photo texture to make it fit more into the game's aesthetics? Maybe that way you could also increase the resolution or at least avoid the blur a little.

Reply

Max Knoblich
Max Knoblich
,Fri

That has been suggested to me, and I have thought about it. However, I suspect that I would have to invest a considerable amount of time to make the effects on the photo look decent and not cheap.


Leave A Comment

Your email address will not be published. Required fields are marked *

Connect with Facebook

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>