Max Did It
Graphics
,Thu
2 Comments
Tagged ,

Rubberband Racing Select Screens

Finally, another update for Rubberband Racing, the 3D Flash game I am currently developing. The menus, in which you select the car and the track you want to play, are pretty much finished. Have a look at them:

The Car Select Screen

Car Select Screen

The Car Select Screen (Click to enlarge)

This is where you will choose a car from those already available, select a color and view the stats for each vehicle.

The thumbnails on the left side will fill up with more cars over time, as I plan to add more content depending on how often the game is played. The two additional Lilliput thumbnails in the menu are only dummys for testing purposes.

Right after choosing a car, you will be sent to the next screen which is…

The Track Select Screen

Track Select Screen

The Track Select Screen (Click to enlarge)

Similar to the car select screen, I plan to have this screen offer more selectable tracks over time.

On this screen, you will be able to see your currenty highscore and best time. I might add even more track specific options depending on how the gameplay develops over time.

Note: “RR Karting Namibia” is only a temporary track for testing purposes and won’t be available in the final game. In the final game, the cars will be toy cars and will drive around on kitchen tables and similar locations.

I am using this track right now to test gameplay and physics. The reason I chose this kart track in namibia is that I found a high quality satellite shot of it on Google.

Technological Details

The UI in Rubberband Racing will be displayed entirely with Away3D, thus using only hardware accelerated graphics for the select screens. This stands in contrast to Satellite, which UI was created using classic Flex 4 components.

Car Select Screen Mesh

The mesh of the car select screen in Blender. (Click to enlarge)

Away3D does not offer a dedicated UI framework out of the box, but has 3D mouse events already implemented. Since the screens and menus in Rubberband Racing are pretty simple and don’t use advanced components like lists, drop down menus or scrollers, building a basic button component is enough to cover the functionality of the UIs.

I could have used Starling or even Feathers to build a hardware accelerated UI, but I wanted to use colored polygons, since they perform better when it comes to fillrate and scaling. Both these properties might be important if I decide to port the game to other platforms, especially mobile.

Advantages

  • Better rendering performance than classic display list UIs, i.e. Flex
  • Flash Player doesn’t need to layer the 2D display list over the Stage3D content. This saves it the effort of rendering another screen filling quad.
  • Better fillrate and scaleability than using textured planes, i.e. Starling or Feathers
  • Arguably smaller file sizes (Depending on the type of UI)

Disadvantages

  • Complicated asset pipeline. Currently, I
    • create the UI elements in Inkscape,
    • export them to the SVG format,
    • import them in Blender,
    • make any necessary changes to scale, UV coordinates and materials,
    • export them to the COLLADA (dae) format and
    • import then in Prefab3D to finally convert them to Away3D’s AWD format.

    This pipeline would not be viable with a more complicated and dynamic UI.

  • Less flexible. Since I don’t use a sophisticated framework but static meshes, changes in the UI mostly mean that I have to go through the entire pipeline again.
  • Dynamic text still has to be drawn an planes, unless I convert entire fonts into 3D objects and write a typography library.

All in all, having something like Scaleform for Flash would be really neat once you are trying to make more complex UIs.

Design Process

Arriving at the current version of the menu screens took quite some time and a couple of drafts.

In the first version of the menu, I wanted to put all elements that you need to go through before the game into one screen. That way, you wouldn’t have to click through several screens and could get into the game faster.

I have to admit though, that I wasn’t very successful with that attempt.

Rubberband Racing Select Screen Draft 1

The first draft of the Rubberband Racing select screen

The menu was very busy and not very clear.

I had several elements like the arrows and the font that harken back to the logo design, but there were many other elements that didn’t really fit.

The dots, with which you were supposed to select a color for your car or jump to other cars or tracks, were a weird contrast to the angular design. The angles of the italic car and track name font didn’t fit very well either.

Second Iteration

One decision I made for the next major draft of the UI was to separate the car and the track selection into two separate screens. I also tried to incorporate the angles from the logo more consistently without introducing other superflous shapes.

Rubberband Racing Select Screen Draft 2

The second draft of the Rubberband Racing select screen. The two selections of cars and tracks have been separated.

Another addition were the speedlines, which were even animated. While I really liked the dynamic effect they gave off, they made the otherwise very clean and simple screen hard to read.

Working with this angle was generally tricky and I had a hard time finding space for the car stats that I wanted to display in the screen as well.

After receiving more feedback, I rotated the elements to make them easier to read…

Almost There

Concerning the layout, this already came pretty close to the final screens.

Rubberband Racing Select Screen Draft 3

The modified second draft of the Rubberband Racing select screen. This one already shows the final layout.

The final draft that resulted in the current design lost the speedlines and incorporated even more cues from the logo, namely the colors and the multiple outlines around the main shapes.

Comments

2 Comments have been posted so far - Leave a Comment

Matze
Matze
,Sat

Very nice!

I like the 70s aesthetics of the menu. Since Satellite brought the 80s to mind, I can't wait to see what happens, when you get to the the first half of the 20th century ^^.

Maybe you already thought of that: I'd like to see the car selection screen slide north-east when "next" is clicked, so that the track selection would effectively be the lower half of the same screen. I think, that way it would fell less like a whole new screen and thus be a nice compromise with the intention behind your first approach.

Reply

Max Knoblich
Max Knoblich
,Sun

Thanks! Yes, the menus will be animated at some point and I think a transition like the one you suggested would be making sense.


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>