• Products
  • Solutions
  • Made with Unity
  • Learning
  • Support & Services
  • Community
  • Asset Store
  • Get Unity

UNITY ACCOUNT

You need a Unity Account to shop in the Online and Asset Stores, participate in the Unity Community and manage your license portfolio. Login Create account
  • Blog
  • Forums
  • Answers
  • Evangelists
  • User Groups
  • Beta Program
  • Advisory Panel

Navigation

  • Home
  • Products
  • Solutions
  • Made with Unity
  • Learning
  • Support & Services
  • Community
    • Blog
    • Forums
    • Answers
    • Evangelists
    • User Groups
    • Beta Program
    • Advisory Panel

Unity account

You need a Unity Account to shop in the Online and Asset Stores, participate in the Unity Community and manage your license portfolio. Login Create account

Language

  • Chinese
  • Spanish
  • Japanese
  • Korean
  • Portuguese
  • Ask a question
  • Spaces
    • Default
    • Help Room
    • META
    • Moderators
    • Topics
    • Questions
    • Users
    • Badges
  • Home /
avatar image
0
Question by moondance02 · Dec 18, 2013 at 05:56 AM · 2dsprite

How to make circle progress bar using sprite renderer ?

I try using scale on object but it isn't work great with circle shape. Does anyone know how to do circle progress bar using sprite renderer?

Comment
Add comment · Show 4
10 |3000 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users
avatar image gjf · Dec 18, 2013 at 02:44 PM 1
Share

not specifically with the sprite rendered, but did you see this?

avatar image robertbu · Dec 18, 2013 at 04:59 PM 0
Share

It would take multiple sprites, but it can be done "physically."

http://answers.unity3d.com/questions/394850/make-a-circular-progress-bar-that-changes-state-up.html

avatar image Jessy · Dec 18, 2013 at 05:21 PM 0
Share

It won't work because Unity doesn't currently support multiple textures in sprites. Ins$$anonymous$$d,discard programmatically. It won't be complicated for anything circular; it might be as simple as checking if a pixel has a 2D "cross product" greater than or less than zero with two other vectors (at least one is rotated in the vertex shader).

If this sprite is going to batch, you're going to have to encode the vertex positions in the color because Unity's batching system doesn't provide a way to retrieve the original position of a vertex. I recommend just making sure it doesn't batch, unless you actually need a bunch of circle bars. Do you even need a sprite for this?

avatar image moondance02 · Dec 19, 2013 at 05:14 AM 0
Share

Thx for help :)

5 Replies

· Add your reply
  • Sort: 
avatar image
2

Answer by idofsyedbooali · Apr 02, 2021 at 05:29 AM

https://github.com/Nrjwolf/unity-shader-sprite-radial-fill

Best Way to make a radial fill in unity (Sprite Renderer)

Comment
Add comment · Share
10 |3000 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users
avatar image
1

Answer by ThomasKang · Oct 08, 2020 at 09:18 PM

Sprite masks were added in Unity 5 which makes doing this much simpler, still using the alpha cutoff but with the "Sprite Mask" component. https://docs.unity3d.com/Manual/class-SpriteMask.html

Comment
Add comment · Share
10 |3000 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users
avatar image
-1

Answer by PRABHBIR123 · Jan 27, 2019 at 05:47 AM

@moondance02 Check out this video it explains the same thing what you want. Link to the video is https://youtu.be/5i5YF4J5zEA

Comment
Add comment · Show 1 · Share
10 |3000 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users
avatar image BouncingFrog · Feb 12, 2020 at 01:41 PM 0
Share

A suggestion is to never use links, as you can't control whether the content changes or in the worst case is removed. In this case, the video has been removed and therefore your answer is useless. It'd be better to quote and add the source, or in the case of a video, write down the instructions, then add the video link. It's more future proof.

avatar image
1

Answer by hersheys72 · Jan 06, 2016 at 05:17 AM

I hope this helps, as I had a similar issue and got it to work by doing the following instead of playing around with masks:

Have an "Image" component Drag your first sprite of the animation into the "source image " slot change the image type to "Filled", with radial 360 origin and clockwise optional

To change from a sprite to an animation you have to follow the steps found at http://answers.unity3d.com/questions/931917/animate-image-ui-with-sprite-sheet.html

which is essentially to add an "Animator" component with new animation, then in the "animation " window add the image.sprite property if you drag in the remaining sprites from the sprite sheet it will automatically create a key for each sprite

in the inspector with the animation selected you can change the speed of the animation instead of playing around with the spacing in the animation window

Comment
Add comment · Share
10 |3000 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users
avatar image
2

Answer by oPless_ · Feb 17, 2014 at 01:13 AM

Here's one way for you.

  1. Create your circular progress bar image with an alpha gradient (N.B. it can be ANY shape)

  2. Set the import to be a texture (not a sprite) and DO NOT USE COMPRESSION.

  3. Create a material with the shader being "Transparent Cutout Vertex Lit"

  4. Use texture (made in [1])

  5. Use the following code in a script as a starting point;

                  float revealOffset = (float)(Time.timeSinceLevelLoad % 10) / 10.1F; 
             
                     gameObject.renderer.material.SetFloat ("_Cutoff", revealOffset);
    
    

See http://wiki.unity3d.com/index.php/ProgressBar

Enjoy, and remember to mark this as the answer if you like it!

Comment
Add comment · Share
10 |3000 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users

Your answer

Hint: You can notify a user about this post by typing @username

Up to 2 attachments (including images) can be used with a maximum of 524.3 kB each and 1.0 MB total.

Welcome to Unity Answers

If you’re new to Unity Answers, please check our User Guide to help you navigate through our website and refer to our FAQ for more information.

Before posting, make sure to check out our Knowledge Base for commonly asked Unity questions.

Check our Moderator Guidelines if you’re a new moderator and want to work together in an effort to improve Unity Answers and support our users.

Follow this Question

Answers Answers and Comments

24 People are following this question.

avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image

Related Questions

Prevent a collider from affecting the rotation of a sprite,Prevent a collider from affecting players's rotation 1 Answer

Sprite Packer Causes Unity to Hang on 5.5.0f3 0 Answers

2D Animation does not start 1 Answer

Inverting Position on One Axis 0 Answers

Unity 2D Shader Graph Sprite transparent when in shadow 0 Answers


Enterprise
Social Q&A

Social
Subscribe on YouTube social-youtube Follow on LinkedIn social-linkedin Follow on Twitter social-twitter Follow on Facebook social-facebook Follow on Instagram social-instagram

Footer

  • Purchase
    • Products
    • Subscription
    • Asset Store
    • Unity Gear
    • Resellers
  • Education
    • Students
    • Educators
    • Certification
    • Learn
    • Center of Excellence
  • Download
    • Unity
    • Beta Program
  • Unity Labs
    • Labs
    • Publications
  • Resources
    • Learn platform
    • Community
    • Documentation
    • Unity QA
    • FAQ
    • Services Status
    • Connect
  • About Unity
    • About Us
    • Blog
    • Events
    • Careers
    • Contact
    • Press
    • Partners
    • Affiliates
    • Security
Copyright © 2020 Unity Technologies
  • Legal
  • Privacy Policy
  • Cookies
  • Do Not Sell My Personal Information
  • Cookies Settings
"Unity", Unity logos, and other Unity trademarks are trademarks or registered trademarks of Unity Technologies or its affiliates in the U.S. and elsewhere (more info here). Other names or brands are trademarks of their respective owners.
  • Anonymous
  • Sign in
  • Create
  • Ask a question
  • Spaces
  • Default
  • Help Room
  • META
  • Moderators
  • Explore
  • Topics
  • Questions
  • Users
  • Badges