I Create and Animate Victory Screen UI in Unity

In my role as a UI/UX Designer at Wooga, I’m currently working on a lot of Unity animations and VFX, for victory screens and celebratory prize reveals etc. I hope to make a post about these soon, once I have cleared using the artwork and screenshots with my manager. For now I thought I would show my creation and animation of a victory screen for a fictional action-rpg for mobile devices, which I’m calling ‘Defender’.

Research

In my other posts where I’ve created mock ups/wireframes/layouts for a fictional game I would typically be covering the main menu or at least a sort of player’s HUB, which lends itself to creating a logo, setting the tone etc. This mock up, however, was going to be used simply as a victory screen for the purposes of animating it.

I began with broadly researching other titles like Mini King Golf, Dungeon Hunters Champions and CSR2 Racing.

Screen Shot 2018-10-22 at 11.29.36.png
Fig 1. Mini King Golf victory screen.

 

Wireframes

Next up I created a wireframe of how I’d like the information on-screen laid out. I wanted to keep the information front and centre, making sure the player feels excited and positive about this screen. The navigation is moved to the right, within easy reach of the player’s thumb and avoiding cramping the layout.

Victory_Screen_Wireframe.png
Fig 2. Wireframe for the layout of the Victory Screen info and navigation.

Polish

After laying out the necessary info, I began creating the art assets in Photoshop. I decided to take a colour palette of orange, gold and purple, to give a regal feel as well as using complimentary colours.

Defender_Gameplay.png
Fig 3. Final Mock Up for Defender’s Victory Screen.

Now that the mock up is complete, I can implement in Unity and begin animation it. I knew that the mock up was a guideline so I felt free to experiment with the effects in Unity’s particle systems to add more life glitter to the screen.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

A WordPress.com Website.

Up ↑

%d bloggers like this: