Shrink/mask an image

Hello, I’m trying to create a “Time bar” for a game, I found some example code to shrink a rectangle. If possible, I would like to keep the effect that the image also moves to the left, which makes it look animated.

My problem however, is that when I press the add time button the entire thing jumps to the right, I have a general idea of what is wrong but not how to fix it. I reckon that every time the button is pressed, it adds extra width to the original size. Not sure why it moves the rectangle to the right (There might be some conflicts with the increased width and performWithDelay).

Here’s the code (Cheers for paul07’s code!):

[lua]local timeBar = display.newImageRect( “images/bar.png”, 260, 40 )
timeBar:setReferencePoint(display.TopLeftReferencePoint)
timeBar.x = _W*0.2
timeBar.y = _H*0.3

function loseTime(event)
addTimeBtn = display.newImageRect(“images/addtime.png”, 50, 31)
addTimeBtn.x = _W*0.9
addTimeBtn.y = _H*0.9
addTimeBtn:addEventListener(“tap”, addTime)

timeBar.width = timeBar.width - 2
timeBar:setReferencePoint(display.TopLeftReferencePoint)
timeBar.x = _W*0.2
– timeBar.x = 20

checkTime()

end

gameTimer = timer.performWithDelay(5, loseTime, 0)

function addTime(event)
timeBar.width = timeBar.width + 2
–print(“More Time!”)
end

function checkTime()
if(timeBar.width <= 2) then
textObject = display.newText( “Times Up!”, 50, 50, nil, 24 )
print(“Can’t have enough prints!”)
textObject:setTextColor( 255, 50, 50 )
timer.cancel(gameTimer)
gameTimer = nil
end
end[/lua] [import]uid: 87569 topic_id: 17802 reply_id: 317802[/import]

Hi!
You can try somthing like this (I hope it’ll be useful for you :slight_smile:

display.setStatusBar( display.HiddenStatusBar )

local halfW = display.contentCenterX
local halfH = display.contentCenterY

local res = {width=100, height=7}
local bar = display.newRect(halfW-res.width, halfH-res.height, res.width, res.height)
bar.xScaleOffset = 1
bar:setReferencePoint(display.TopLeftReferencePoint)

local add = {value=0}
local function main_loop()
– decrease 0.1% every 1/30 second
bar.xScaleOffset = bar.xScaleOffset - 0.001
bar.xScale = bar.xScaleOffset + add.value
if bar.xScale<=0.001 then bar.xScale = 0.001 end
end

Runtime:addEventListener(“enterFrame”, main_loop)

local lbl = display.newRect(100,100, 10,10)
lbl:addEventListener(“touch”, function(event)
if event.phase==“ended” then
transition.to(add, {value=0.2, time=1000, onComplete=function() bar.xScaleOffset=bar.xScale add.value=0 end})
end
end) [import]uid: 65903 topic_id: 17802 reply_id: 67995[/import]