Composite UI with rounded rectangular progress bar — Unity3D

Like the way rounded rectangular UI looks like here’s how you create them.
(Reference Ketchapp — Dunk Shot UI)

UI

Steps to be done:

1. Create required shapes for your icon in Illustrator.
2. Import those shapes and convert them into sprites in Unity3D.
3. Create a UI Image element and add Mask (script) Component.
4. Add the progress bar
5. Add the other Text

Step 1: Illustrator:

Illustrator File

We need a set of curved rectangles , time text, the clock and the play button. The squares at the end of the window are to make the Illustrator keep the actual window size(1920x1080) while exporting.

Step 2: Importing to Unity.

Sprite Settings

You can drag and drop the exported png file.In unity make the sprite mode to ‘Multiple’ and under ‘Sprite Editor’ you can slice the sprites and apply.

Step 3 : Create the Mask.

Mask

Create a new UI image element and select the rounded rectangle as the Source Image and add another Component ‘Mask’ to the UI image.

The Canvas gets created as soon as you add the UI element and here set the following items:

Render Mode : ScreenSpace-Camera
Render Camera: Main Camera
UI Scale Mode : Scale with Screen Size
Reference Resolution : 1920x1080

THe UI Scale Mode will help you when you are changing resolutions, currently I am developing for Android in 1280x720 Potrait resolution.

Step 3 : Create the Progress Bar

A Progess bar is achieved by placing a simple image with the original color (Grey) and add another UI Image child with the filler Color (Yellow) once that is done you should change the properties of the child so that it can be used as actual progress bar.

Source Image :The filled color / Image(here its just an yellow square but the mask at the first parent helps in showing a rounded rectangular progress bar.
Image Type : Filled
Fill Method :Vertical
Fill Origin : Bottom
Fill Amount : any amount (to be programatically modified)

5.Add the other Text

The other text are simply UI images added to the canvas and arrage at the center with anchor points to the top and bottom Center.

Photo by Eftakher Alam on Unsplash