Posted: 25th Dec 2015 23:58
Manipulating UV data on a sprite is a fun way to do all sorts of things, such as animating grass or in this case, animating a progress bar. This mimics the progress style you see on OSX.


+ Code Snippet
setVirtualResolution(640,480)


// Load progress bar image and set image wrap mode to repeat
// image is 12x20
pimg = loadImage("progress.png")
setImageWrapU(pimg, 1) : setImageWrapV(pimg, 1)

progress = createSprite(pimg)
setSpritePosition(progress, 100,150)
// original width of progress image, needed for UV calculations
progressBaseWidth# = getSpriteWidth(progress)



do



    // Scroll the UV texture and wrap the value for numerical safety reasons
    u# = u# - 0.03
    if u# <= 0 then u# = u# + 1
    setSpriteUVOffset(progress, u#, 1)

    // Use arrow keys to grow/shrink progress bar
    if getRawKeyState(37) = 1
        w = getSpriteWidth(progress)-4
        setSpriteSize(progress, w, 20)
        s# = progressBaseWidth# / w
        setSpriteUVScale(progress, s#, 1)
    endif
    if getRawKeyState(39) = 1
        w = getSpriteWidth(progress)+4
        setSpriteSize(progress, w, 20)
        s# = progressBaseWidth# / w
        setSpriteUVScale(progress, s#, 1)
    endif



    Sync()
loop
Posted: 4th Feb 2016 8:47
Another nice demo
Posted: 28th Apr 2020 22:59
If anyone is trying this script in 2020, you either need to modify the image to be a power of 2 or add the following to the top of the program:

+ Code Snippet
SetDefaultWrapU(1)
SetDefaultWrapV(1)
Posted: 25th Oct 2024 18:16
Not sure when this changed, but for UV scaling to work the image MUST be a power of 2. Even the trick above doesn't work anymore. This puts a huge limitation on design.