Hard time anchoring image within container for a health status bar

Solar2D Advanced Graphics
#1

Hi,

Im trying to  make a nice status bar by anchoring an image within a container and then resizing the container as your health decreases / increases.

I’ve anchored everything to the left, but my status bar image keeps getting clipped on both sides when I resize the container down.  Its like its re-centering the container even though I have it anchored at zero.

Any ideas?  Thanks, Greg

energycontainer = display.newContainer(380, 15 )
        energycontainer.anchorX = 0
        energycontainer:translate( _W /2-145,  _H-57 ) – center the container
        energycontainer.anchorChildren =true

        statusenergy = display.newImageRect(GuiGroup, “images/statusled.png”, 380,15)
        energycontainer:insert( statusenergy, true)
        statusenergy.anchorX=0
        statusenergy:translate (-195,0)
        statusenergy:toFront()

        shieldcontainer = display.newContainer(250, 15 )
        shieldcontainer.anchorX = 0
        shieldcontainer:translate( _W /2-145,  _H-26 ) – center the container
        shieldcontainer.anchorChildren =true
        
        statusshields = display.newImageRect(GuiGroup, “images/statusled.png”, 380,15)
        shieldcontainer:insert( statusshields, true)
        statusshields.anchorX=0
        statusshields:translate (-125,0)
        statusshields:toFront()

and here is my gameloop code to resize:

local healthScale = energy/maxenergy * 350
            energycontainer.width = healthScale
            local healthScale = shields/maxshields * 250
            shieldcontainer.width = healthScale

#2

Hi,

I usually would use scaleX with an upper-left reference point for the “active” bar and then normalize your values to 100% or 1 in this case for the scaleX property.

Cheers,

Chris

#3

Hi Chris,

That’s ok for a solid fill but I want to use a ‘LED’ style, which means I need to use an image as the bar.  It’s close to working, I just need to get the left side anchored solidly.

Thanks, Greg

#4

Greg,

Not sure I can be of much help or if I totally understand your objective, but here is a quick and simple (but crude) status bar type code using a container.  But instead of changing the width of the ‘container’, just take advantage of the masking the container handles for you.

Of course I use simple '1’increment here, and you will likely want to change the math, but my code example here allows you to use an image for the bar… if that is what you were looking to do.

W = display.contentWidth H = display.contentHeight MID\_W = display.contentWidth \* .5 MID\_H = display.contentHeight \* .5 local energy = 0 local maxEnergy = 200 local energyContainer = display.newContainer(maxEnergy, 15 ) local barFrame = display.newImageRect("barFrameWhite.png",maxEnergy,15) local bar = display.newImageRect("bar.png",maxEnergy,15) energyContainer.x = MID\_W energyContainer.y = MID\_H energyContainer:insert(bar) energyContainer:insert(barFrame) local function resetBar() bar.x = -bar.width energy = 0 end local function gameLoop(e) if energy \< maxEnergy then energy = energy + 1 bar.x = bar.x + 1 end end resetBar() Runtime:addEventListener("enterFrame", gameLoop) &nbsp;
#5

So you put the background and the bar into the container and then move the bar and it gets masked by the container?  I’ll give it a go.

Still it would be nice just to anchor the left side of the container and the bar on the x axis and then just resize the container as needed. 

Thanks, Greg

#6

Hi,

I usually would use scaleX with an upper-left reference point for the “active” bar and then normalize your values to 100% or 1 in this case for the scaleX property.

Cheers,

Chris

#7

Hi Chris,

That’s ok for a solid fill but I want to use a ‘LED’ style, which means I need to use an image as the bar.  It’s close to working, I just need to get the left side anchored solidly.

Thanks, Greg

#8

Greg,

Not sure I can be of much help or if I totally understand your objective, but here is a quick and simple (but crude) status bar type code using a container.  But instead of changing the width of the ‘container’, just take advantage of the masking the container handles for you.

Of course I use simple '1’increment here, and you will likely want to change the math, but my code example here allows you to use an image for the bar… if that is what you were looking to do.

W = display.contentWidth H = display.contentHeight MID\_W = display.contentWidth \* .5 MID\_H = display.contentHeight \* .5 local energy = 0 local maxEnergy = 200 local energyContainer = display.newContainer(maxEnergy, 15 ) local barFrame = display.newImageRect("barFrameWhite.png",maxEnergy,15) local bar = display.newImageRect("bar.png",maxEnergy,15) energyContainer.x = MID\_W energyContainer.y = MID\_H energyContainer:insert(bar) energyContainer:insert(barFrame) local function resetBar() bar.x = -bar.width energy = 0 end local function gameLoop(e) if energy \< maxEnergy then energy = energy + 1 bar.x = bar.x + 1 end end resetBar() Runtime:addEventListener("enterFrame", gameLoop) &nbsp;
#9

So you put the background and the bar into the container and then move the bar and it gets masked by the container?  I’ll give it a go.

Still it would be nice just to anchor the left side of the container and the bar on the x axis and then just resize the container as needed. 

Thanks, Greg