advanced

#31 Health Bar

Animated health bar with damage feedback

Health bars are a staple game UI element. This shader builds one entirely on the GPU using a rounded rectangle SDF for the bar shape, with a fill level that oscillates via sin(iTime). The fill color transitions from green through yellow to red as health drops. A damage flash fires white when health decreases, and a pulsing warning activates below 25%. Tick marks at each quarter provide visual reference.

Key Concepts

Try this shader live in the Shader Sandbox editor with real-time preview.
Open in Sandbox

Source Code


    


    

      
        
          ← Previous
          FBM Terrain
        
      
      
        
          Next →
          Dissolve Effect
        
      
    


    

      
All Tutorials

      

        
          
            1
            Hello World
          
        
          
            2
            UV Coordinates
          
        
          
            3
            Animation
          
        
          
            4
            Shapes: Circle
          
        
          
            5
            Shapes: Rectangles
          
        
          
            6
            Patterns & Tiling
          
        
          
            7
            Smooth Functions
          
        
          
            8
            Noise
          
        
          
            9
            2D Lighting
          
        
          
            10
            Intro to Raymarching
          
        
          
            11
            Rotation & Transforms
          
        
          
            12
            Color Spaces
          
        
          
            13
            Polar Coordinates
          
        
          
            14
            Domain Repetition
          
        
          
            15
            Smooth Blending (SDF)
          
        
          
            16
            Voronoi Noise
          
        
          
            17
            Glow & Bloom
          
        
          
            18
            Morphing Shapes
          
        
          
            19
            Texture Sampling
          
        
          
            20
            Post Processing
          
        
          
            21
            Domain Warping
          
        
          
            22
            Reflections
          
        
          
            23
            Soft Shadows
          
        
          
            24
            Fog & Atmosphere
          
        
          
            25
            Mandelbrot Fractal
          
        
          
            26
            Julia Set
          
        
          
            27
            Water & Waves
          
        
          
            28
            Fire & Smoke
          
        
          
            29
            3D Domain Repetition
          
        
          
            30
            FBM Terrain
          
        
          
            31
            Health Bar
          
        
          
            32
            Dissolve Effect
          
        
          
            33
            Sprite Outline
          
        
          
            34
            Shockwave Distortion
          
        
          
            35
            Force Field Shield
          
        
          
            36
            Retro CRT Effect
          
        
          
            37
            2D Platformer Lighting
          
        
          
            38
            Parallax Scrolling
          
        
          
            39
            Portal Vortex
          
        
          
            40
            Pixel Art Dithering