• About
  • Advertise
  • Privacy & Policy
  • Contact
Tech News, Magazine & Review WordPress Theme 2017
  • Home
    • Home – Layout 1
    • Home – Layout 2
    • Home – Layout 3
    • Home – Layout 4
    • Home – Layout 5
  • Review
  • Gaming
  • Gear

    Trending Tags

    • Best iPhone 7 deals
    • Apple Watch 2
    • Nintendo Switch
    • CES 2017
    • Playstation 4 Pro
    • iOS 10
    • iPhone 7
    • Sillicon Valley
  • Computers
  • Applications
  • Security
No Result
View All Result
  • Home
    • Home – Layout 1
    • Home – Layout 2
    • Home – Layout 3
    • Home – Layout 4
    • Home – Layout 5
  • Review
  • Gaming
  • Gear

    Trending Tags

    • Best iPhone 7 deals
    • Apple Watch 2
    • Nintendo Switch
    • CES 2017
    • Playstation 4 Pro
    • iOS 10
    • iPhone 7
    • Sillicon Valley
  • Computers
  • Applications
  • Security
No Result
View All Result
Overflow Archives
No Result
View All Result

How to Create circular progress bar in Unity 3D with rounded edge

by
Home Unity
Share on FacebookShare on Twitter

Want to create circular progress bar with round edges in unity? bored on the regular radical progress bar UI? then you’re in right page. Lets discuss on how to create a circular progress bar with rounded edges in Unity 3D.

In Unity most of the users are struggling in designing UI part as there are limited custom components availability. Personally I have struggled at starting to design the UI part of my games. And started to create my own UI designs by customizing with the available basic UI elements.

Here, I would like to share my idea on creating custom circular / Radical progress bar in Unity 3D. I have not used any paid assets in this as I wanted it to be easy to use by all. Lets move to the development.

Step 1 : Preparing the images Assets needed to use on this

In this we need to create rounded edges in the normal / regular circle progress bar where no rounded edge in available. First split a circle vertically as below and export them as separate image assets, so that we can add it as start and end point of the progress bar.

Also we need a high quality circle image in PNG format. It can be create using any UI design tool such as Adobe Photoshop. Or it can be downloaded from internet such as Flaticon. If you are going to use solid color for the progress bar filling than you don’t need any other image assets, in this I’m going to use gradient circle for filling and so I’m using extra image assets as below. Prepare the circle images and save them separately in good resolution to avoid quality issue.

Note: Always use White images if you planed to use solid colors, white images support to change the color at any point of time.

Then create a regular circular progress bar. If you are familiar with creating the radical progress bar, then you can skip this step and proceed with further steps.


Also Read: Create Switch button UI in Unity 3D


Step 2: Create regular radial progress bar

Add the images in in Unity Canvas using UI elements, then convert the image type from Simple to Filled.

Upon changing the fill value the circle will look like below.

Step 3: Adding round edges to the radical / circular progress bar

And this is the next step that were we’re going to add the round edge images which created in step 1. First create a container to hold the left semi circle to move along with a radius value, and add the right semi circle as fixed. Please refer scene hierarchy in step 2. Once all done it will look like as followed.

Most importantly add UI mask to the round edges and add the duplicate filling circle as their child, so that the color will be changed accordingly with the background, if you are using solid color only there is no need of adding the UI mask.

Step 4: Create script for handling the start edge movement

And finally create a code to handle the movement of the round edge with respect to the fill value. Below is the reference of how to handle the movement of round edge.

In Unity the image fill value is ranges between 0 – 1, and based on the the radius also need to updated. If you are using the fill value 0 -100 than you have to dived the value by 100 like below.

Source code and tutorial

For better understanding please watch this following video tutorial. The Source code is given in the description.

Tags: circle progress bar c#circular progress barcircular progress bar round edgecreate progress barcreate sliderhow to create progress barhow to create slider in unityin unitylinear progress barprogress barprogress bar in unityslider in unityunity 3dunity 3d for beginnersunity 3d tutorialunity tutorialunity tutorial for beginnersunity UI

Next Post
‘Failed to load window layout’ in Unity 3d - Overflow Archives

'Failed to load window layout' Error - How to fix in Unity 3D

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Recommended.

overflowArchives - share with intent

Sharing files in Android using Intents – Share Content Using Intent – Android Tutorial

How to Create Android Custom Viewpager Adapter – Android Tutorial

How to Create Android Custom Viewpager Adapter – Android Tutorial

Trending.

Create Switch button UI in Unity 3D - overflow archives

Create Switch button UI in Unity 3D

Unity Gradient Effect UI Design Without Scripting | Simple Gradient Effects in Unity 3D

Unity Gradient Effect UI Design Without Scripting | Simple Gradient Effects in Unity 3D

How to Create circular progress bar in Unity 3D with rounded edge

Parse Color Runtime In Unity 3D - Thumbnail

Change Color in Runtime – Unity 3D Tutorial

Progress bar in Unity 3D

How to Create Progress bar in Unity 3D

Overflow Archives

© 2023 OverflowArchives.

Navigate Site

  • About
  • Advertise
  • Privacy & Policy
  • Contact

Follow Us

No Result
View All Result
  • Home
  • Review
  • Apple
  • Applications
  • Computers
  • Gaming
  • Gear
    • Audio
    • Camera
    • Smartphone
  • Microsoft
  • Photography
  • Security

© 2023 OverflowArchives.