how to implement a progress bar

edited November 2010 in Help request
hey everyone,
how would you implement a progess bar in orx?

I was thinking of having a rectangle texture that is overlaid with a square texture. then I will change the scale of the square texture according to the progress in the x direction.

but well it looks ugly to stretch a texture only x direction.

is there any more elegant way?


  • edited November 2010

    Well, if you want a plain old school progress bar, simply use the internal orx texture called pixel (it's a simple 1x1 white pixel), and as you said you'd scale it on X.

    Something like:
    Texture = pixel
    Pivot = top left
    Graphic = GraphicPixel
    Color = (0, 0, 0)
    Scale = (102, 12, 0)
    Position = (100, 100, 0)
    Graphic = GraphicPixel
    Color = (0, 255, 0)
    Position = (101, 101, -0.001)

    Here we assume the progress bar will be at max 100x10 and we have an extra pixel for the background on every side.
    Just update the scale of ProgressBarFG according to your progress and makes sure its position remains the same one than the background + (1, 1, -0.001).
    You can look at how I display health bar in Mushroom Stew, it's very similar.

    Now if you want to use a texture that either progressively: unravels, stretch or even scroll, you can do all of that very easily by playing with some properties of the orxGRAPHIC.
    The origin of a graphic is its top left corner in texture space. You can play with that, its size and its repeat to do many different effects.
    If you want a simple unravel texture, you can look at Mushroom Stew (again ;)) on how I display the enemy's health as partial sprites in the top right corner. Look for orxGraphic_SetOrigin in the code.

    Now if you want to go wild and fancy, and have things like animated fluid or bubbles in your progress bar, you can still use pixel shaders. Just attach one to your progress bar foreground object and do whatever you want in it: multitexturing, perlin noise, up to you! ;)

    Hope this helps!
  • edited November 2010
    Btw, if needs be, you can also create textures on the fly, and either filling them with code or by attaching them to a viewport/camera if you want to capture some rendering/processing.
  • edited November 2010
    yeah, I think that will help alot, thank you!

    just out of curiosity: how would you fill a texture from code?
  • edited November 2010
    From pure code you need to:
    - create an empty texture with orxTexture_Create()
    - create a bitmap of the wanted size with orxDisplay_CreateBitmap()
    - sets its content with orxDisplay_SetBitmapData(), using RGBA order
    - links the bitmap to the texture, naming the texture in the process (this name can then be used in config files for Texture properties) with orxTexture_LinkBitmap()

    When you're done using it you can do the reverse (unlink + delete) or just let orx deal with it when it exits. :)
Sign In or Register to comment.