Mobile Game progression

Creating a Credits Page

Since we last created the main menu scene, we replaced the Menu button with a Credit’s button. This credits page is going to give all the sources and assets used within this game, and also give Thanks to our play testers and Artist that took part in refining this game.

Preparing the Credits Page:

Just like how I have previously done with all the other scenes, I would do a rough layout within Adobe Illustrator before I start within Unity. While brainstorming some designs, there was several key features I wanted to implement in the Credits page:

  1. I want to have the same UI elements similar throughout the game and also the Main Menu.
  2. During the text scroll, I want more than just plain text therefore I decided to take some screen shots of the game play and make those images part of text scroll.
  3. There will be some sort of Animation happening.
The Text scroll is going to appear from the bottom right to the top taking the whole Right section.

Once I am happy with the layout design, I imported everything into Unity and completed the slicing and rearrangement of the UI elements.

In the Unity Hierarchy I divided the panels into two sections, the Graphic components and the text components. The scrolling text will be its own individual panel which contains the text and also images. This will keep the animation section easy. The graphics section is going to contain the Title, buttons and background image.

Animation:

In the animation sequence, I wanted the animated spell circle to appear again just like the Main Menu. The good thing is, we can reuse the same animation sequence. For the Credits Title and return button, they will be individually animated by fading in via Alpha channel.

As for the Scrolling Text, we will be animating the entire UI Panel instead of individual sections.

The end result should look something similar to this:

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Simon Truong

Simon Truong

A Designer, an Illustrator and a massive tech geek aspiring to become a professional Unity Developer.