Designing and building an interface

Hi guys,

Today I'm going to show you some tips and tricks on how we design and build our interfaces here at Xform.
Always start with a good game and interface design document before starting the interface design in Photoshop. You need to have a good idea of all the elements that need to be displayed on screen and also when an interface element is displayed.

When I setup a file I always start by creating layer folders and sub folders in Photoshop. As you can see in the right column in the image below, I've created an Interface folder which contains all the elements of the interface in sub folders. This makes it easy to turn separate or unique interface elements on and off. This also prevents me from cloning a lot of graphic elements which are used in multiple screens, like the speedometer.

When all screens are done I setup layer compositions (left column of the image below) to make it even easier to switch between all the possible interface screens. Setting a layer compositions doesn't actually change anything in your Photoshop file, it only remembers which layers have to be turned on or off when it's selected. Don't forget to use this tool, it can save you a lot of time!

Interface mock-up in Photoshop 

When the mock-up is approved it's time to turn the interface elements into a compact texture. Here I've chosen to work with an 512x512px texture. All the elements I need are placed in a grid of 16x16 pixels. It's very important for me to work inside this grid since we'll use the same mesh grid in 3ds Max.

512x512 px texture. Photoshop grid size 16x16px

 

The final textures will be imported in 3ds Max and placed on a plane of the same dimensions: 512x512 units. To "recreate" the Photoshop grid we set the length and width segments to 32x32, which creates squares of 16x16 units. This makes it easy for me to cut-up the plane into separate interface elements.

512x512 px texture on a 512x512 units 3D plane divided in 32x32 segments

The elements are set into place in an orthographic view using the original Photoshop image as a template. Although the interface is created in a 3D software program it'll still be displayed as an 2D interface. Therefore we use an orthographic view instead of an perspective view.
As you can see in the lower part of the image below the elements are ordered in 3D space, but will be rendered in game as seen in the top area of the image below. The white boxes on top of the interface are used to display dynamic text, like weapon and enemy names.

Interface in 3ds Max. Top orthographic view. Bottom Perspective view.

 

When the max file is done our programmers will have to make the interface work in game. And there you have it... a working interface!

 

Final in-game interface

Cheers,
Matt