UI Design Document for
Sun Runners Game Screen Name: Start Screen
01
Icon List: 01: Title Logo Scales and spins to full size, in the center of the screen. Appears third, after start screen graphics and the start button.
02
03
02: Start Button Appears first (after start screen graphics) Scales and spins to full size, in the center of the screen, below the title logo.
03: Option Button Appears after all the other graphic elements are in place. Drops down, centered below the start button.
Information: Three Phases to the Start Screen. Phases 1: The darkened road framed by the dashboard window. Start button scales and spins into position, head lights turn on. Phases 2: The road is illuminated by the head lights to reveal your car and the road ahead.
Phases 3: Yellow car blows pass your car on the left into the on coming title logo. Title logo spins and scales into Audio: position at the center of the screen. Then 01: Engine Roar the option button drops down. Once In phase one of the start- in position it holds for a few seconds when facing front. Then resumes a cycle up, You hear an engine of spinning to a freeze facing front, start, then a deep engine repeat and repeat until the start button roar, ending in a the much is pressed. lower rumble.
UI Design Document for
Sun Runners Game Screen Name: Option Menu Icon List: 01: Controller Options Shows you the button layout
01 02
02: Display Options Lets you change your screen settings.
03 04 05 06
03: Music Options Adjust volume, output settings and soundtrack.
Information: The Option Menu is pretty straight forward. It just flies in from the right, after you press the option button on the Start Screen.
04: Audio Options
When using a controller: The home position for option screen cursor is the first option at the top of the menu, which is the controller option. The current sellection is always highlighted with an Orange stoke around the letters. As you pull down on the control stick (or Dpad) the next option below swaps the plain white letters for white 05: Difficulty Options letters with an orange stroke. (And the previous selection just switches to plain white letters) Adjust game difficulty, time limits and NPC When using the PC: The arrow keys controls most of the action. The Intelligence. home position is the same as with a controller. Starts at the control Adjust volume, output settings.
option. Highlights with an Orange stroke, alternates between each choice with each touch of the up or down keys.
06: Credits Options Development and Studio acknowledgment.
After choosing an option: Your choice loses the stroke, highlights yellow and all of the current screen graphics (with the exception of the elements of the car window frame, the road, sky and city in the distance) whish off screen to the left. And the selected option’s graphics swish into center from the right off screen.
UI Design Document for
Sun Runners Game Screen Name: Controller Scrn Icon List: 01: Accelerate Trigger/A Button/Up Arrow
01
04
02
02: Steer Left Stick/Dpad/Left and Right Arrow keys
03
05
01 02
02 04
03: Back/Cancel Takes you back to the previous screen or cancels a previous action.
Information: The Controller Menu is also pretty straight forward. It just flies in from the right, after you press the Controller button on the Option Screen.
04: Brake/Reverse
Controller Layout: This screen show you a screen map a standard Forces the car to slow to console controller with call outs for what each buttton does. a stop, begins to move the car backwards if held PC Layout: The arrow keys controls show you a screen map a standard PC arrow keys with call outs for what each key does. after it has stopped.
05: Start/Confirm Starts (Or Pauses the game if it is already in motion) Confirms the highlighted option within one of the option menus.
After choosing an option: No other options available.
UI Design Document for
Sun Runners Game Screen Name: Game Screen Pt1 01
Icon List: 01: Turn List Tracks all of the turns you’ve taken in order.
02: Time Keepers Records your total driving time, and how much time untill sunrise.
03: Highway signs
02
04
03
05 06
Information:
Reminds you of upcoming The main screen is where you will spend the majority of your time. changes in the road The screen is framed by elements of the car enterior. From here you will navagate the different routes, interstates and byways try to discover the best route to Twilight City.
04: Exit Signs Warns of upcoming exits.
05: Compass Tracks general direction.
06: NPC Traffic General highway traffic.
Goals1: Pass the cars blocking the exits, memorize the shortcuts, cut time off your trip. Goal2: Get to Twilght City before Sunrise!
UI Design Document for
Sun Runners Game Screen Name: Game Screen Pt2 02
Icon List: 01: Pathway Reminders 01
Reminds you what road your currently on and what highway you left to get there.
03 05
02: Rear View
04
Just for show
03: Turn Counter
Information:
Tells you how many turns you’ve taken so far.
The most important elements of the main Game Screen.
04: RPM Meter Just for show
05: Speedometer Just for show
Turn List: Hopefully, players will enjoy the challenge of figuring out the best route to Twilight city. If that is the case, then the turn list will be there best friend. They will remind them of the path they’ve taken as well as what was successful and what was not. Turn Counter: The concept is to figure out how to get to Twilight City in the least amount of time using the least amount of turns.
UI Design Document for
Sun Runners Game Screen Name: Runners Screen
01
Icon List: 01: Leader Board Show leader placement by Position, drivers name, number of turns to complete the game and miles traveled.
03
02
02: Last placement Hightlighted in Orange
03: Cursor
Information:
Highlighted in white, allows you to enter your names on the leader board.
After you finally find and cross the last exit to Twilight City, the head lights goes dark and comes back up again. You are then greeted with the Runners leader boards, where you can enter your name. The place you enter in is highlighted in Orange, your cursor in white. Dirrectional keys/stick/arrow keys control which direction the letter scroll in. Hit the confirm button to lock in your choice.
UI Design Document for
Sun Runners Game Screen Name: Game Over Scrn Icon List: 01: Game Over Title logo spins and scales into position at the center of the screen.
01
Information: After you enter your name and record, the game over logo spins and scales into position at the center of the screen. Freezes once it is centered, blinks a few times, holds for a few minutes, then resets back to the start screen.