CSE 333 Game UI Assignment

Your task is to mock-up a start screen, one game level, and one other screen for a 3d game (preferred over 2d). The type of game, FPS, RPG, flight sim, puzzle, etc. is up to you. You should consider the target audience demographic (eg. kids vs adults) and design the look and feel of the UI accordingly. The UI should have a pervasive theme throughout, from typography to navigation to user controls, that adds to the game narrative.

The nominal size would be 1024 X 768 px (for tablet-based games)

It’s recommended you use the graphic and 3d capabilities of Photoshop to create your mock-up, but it is not required. It’s OK to use free geometries available on the web to mock-up the game world and game characters, but the UI elements should be original. The file formats that Photoshop CS6 can read are 3ds and obj. Downloaded files may be archived using zip or rar, so you might need a utility to unarchive the files.

Here is a good place to search for free 3d models:
https://www.turbosquid.com

There is also a free application to generate and pose human characters for export as geometry or rendered png files:
http://www.makehumancommunity.org

Here are the links to my lecture notes about game design:
https://www3.cs.stonybrook.edu/~tony/ui/lectures/game_design/gameUI.pdf
https://www3.cs.stonybrook.edu/~tony/ui/lectures/game_design/leveldes.pdf

In Photoshop, as demonstrated in class, you can combine 2d layers, such as photo backgrounds, with 3d objects. You can also extrude 2d layers, such as text, into 3d layers. 3d objects can be scaled, rotated, and moved in all dimensions. With the Move tool selected, the 3D manipulators appear along the top of the workspace. You can also apply materials and texture maps to parts of the model, as well as paint directly on the mesh. To create a new 3d layer by importing a 3ds or obj file, choose 3D > New 3D Layer from File. To merge 3d objects into a single scene and coordinate system, choose 3D > Merge 3D Layers.

A new tab will appear alongside the Layers palette, called 3D. In that tab you can select meshes, faces, camera, lights, and scene properties. Properties for any of these can be set in the properties panel above. In the Layers palette, the 3d object shares all the same properties as 2d layers, such as opacity and layer effects.

You can export your Photoshop file as a 3d object by choosing 3D > Export 3D Layer. You can render your file using 3D > Render, and then save the file as a png.

Here’s a pretty comprehensive tutorial about 3D in CS6:
https://design.tutsplus.com/tutorials/a-basic-guide-to-photoshops-3d-tools--psd-6042

When you have updated your documentation, email the URL to uidev@cs.stonybrook.edu, with "Game UI" in the subject line.


Rubric

1. Start screen, level screen, and one other screen presented - min. 1024 X 768.

2. Graphical style is appropriate for target audience (young, old, male, female…)

3. Theme is appropriate for game content (sci-fi, Wild West, mediaeval…)

4. Typography conveys theme of game, and is legible.

5. UI elements match theme of game.

6. Ui elements are recognizable and comprehensible (health meter, minimap, tokens)

7. Level and character design match game theme.

8. World and camera views are appropriate for game mechanics.

9. Game concept and design are compelling.

10. Good technical execution.