Search Unity

  1. Unity 6 Preview is now available. To find out what's new, have a look at our Unity 6 Preview blog post.
    Dismiss Notice
  2. Unity is excited to announce that we will be collaborating with TheXPlace for a summer game jam from June 13 - June 19. Learn more.
    Dismiss Notice

Question Creating a custom ui slider

Discussion in 'UGUI & TextMesh Pro' started by Wickerma, Dec 21, 2023.

  1. Wickerma


    Sep 4, 2023
    Hi Folks,

    I'm trying to get a bottle to be a slider, the idea being the amount of health you have will be signified by the amount in the bottle.

    I have the slider working, but there's a few things wrong with it, the main one, is the green border around the edge of the image when you look at it in the scene view, is way bigger than the actual image itself. The problem there is that the fill is tying itself to that border and not the border of the actual image itself.

    Of note: I have achieved it by having the image representing the bottle being filled by another image which is the basic blank white square. I don't have a border component upon which everything is a child of. I am also filling bottom to top.

    Also, my custom image is spherical, as it is a bottle. I am not worried about the fill, i have another image which matches the shape of it, but the aforementioned green border is ruining everything. When i have a value of 40, it looks like the bottle is empty as it has gone past the image of the bottle, but still fills 40% (I guess) of the remaining space in the green border unity puts around all images.

    How do I get this green border in line with the image?

  2. Kurt-Dekker


    Mar 16, 2013
    Not sure what you're doing wrong but basically you want two Images, colocated as hierarchal piers (same depth of RectTransforms), and the top one set to Filled.

    Set that up, don't even write a single line of code, get all of the UI working flawlessly via slider bar hand control.

    Only then should you work on the code. If you can't get the code to do what you expect, then it is...

    Time to start debugging!

    By debugging you can find out exactly what your program is doing so you can fix it.

    Here is how you can begin your exciting new debugging adventures:

    You must find a way to get the information you need in order to reason about what the problem is.

    Once you understand what the problem is, you may begin to reason about a solution to the problem.

    What is often happening in these cases is one of the following:

    - the code you think is executing is not actually executing at all
    - the code is executing far EARLIER or LATER than you think
    - the code is executing far LESS OFTEN than you think
    - the code is executing far MORE OFTEN than you think
    - the code is executing on another GameObject than you think it is
    - you're getting an error or warning and you haven't noticed it in the console window

    To help gain more insight into your problem, I recommend liberally sprinkling
    statements through your code to display information in realtime.

    Doing this should help you answer these types of questions:

    - is this code even running? which parts are running? how often does it run? what order does it run in?
    - what are the names of the GameObjects or Components involved?
    - what are the values of the variables involved? Are they initialized? Are the values reasonable?
    - are you meeting ALL the requirements to receive callbacks such as triggers / colliders (review the documentation)

    Knowing this information will help you reason about the behavior you are seeing.

    You can also supply a second argument to Debug.Log() and when you click the message, it will highlight the object in scene, such as

    If your problem would benefit from in-scene or in-game visualization, Debug.DrawRay() or Debug.DrawLine() can help you visualize things like rays (used in raycasting) or distances.

    You can also call Debug.Break() to pause the Editor when certain interesting pieces of code run, and then study the scene manually, looking for all the parts, where they are, what scripts are on them, etc.

    You can also call GameObject.CreatePrimitive() to emplace debug-marker-ish objects in the scene at runtime.

    You could also just display various important quantities in UI Text elements to watch them change as you play the game.

    Visit Google for how to see console output from builds. If you are running a mobile device you can also view the console output. Google for how on your particular mobile target, such as this answer for iOS: or this answer for Android:

    If you are working in VR, it might be useful to make your on onscreen log output, or integrate one from the asset store, so you can see what is happening as you operate your software.

    Another useful approach is to temporarily strip out everything besides what is necessary to prove your issue. This can simplify and isolate compounding effects of other items in your scene or prefab.

    If your problem is with OnCollision-type functions, print the name of what is passed in!

    Here's an example of putting in a laser-focused Debug.Log() and how that can save you a TON of time wallowing around speculating what might be going wrong:

    If you are looking for how to attach an actual debugger to Unity:

    "When in doubt, print it out!(tm)" - Kurt Dekker (and many others)

    Note: the
    function is an alias for Debug.Log() provided by the MonoBehaviour class.
  3. MelvMay


    Unity Technologies

    May 24, 2013
    The 2D forum is not for UI questions, please use the UI forums. Presumably this is UGUI so I'll move it there but please check out all the UI forums if this isn't the case.