newRect width adjustment and placement

Games
#1

I have a rectangle image I use for a Health Bar fill, it sits inside my Health Bar image and needs to stay in place. As your health goes down, the width of the bar decreases until you get to 0. For this part of the code everything works fine, the bar’s width goes down and it stays in the same x position as its width is being changed.

My problem is when I try to add health back to my player, I need the width to go back up (increase). When this happens, the x position of the rect is getting moved around and is not in the correct spot.

The following is my code for creating the fill rect and the Bar image, also the code that works fine for decreasing the width/hp and the code that is messing up for increasing the width/hp.

[code]
– Creating the rect and the Health Bar image –
local HpSize = display.newRect(0, 0, 70, 15, 12)
HpSize:setFillColor(155, 0, 0)
HpSize:setReferencePoint(display.TopLeftReferencePoint)
HpSize.x = 133
HpSize.y = 8
guiGroup:insert(HpSize)
local HpBar = display.newImage( “HpBar.png”, true )
HpSize:setReferencePoint(display.TopLeftReferencePoint)
HpBar.x = 160
HpBar.y = 15
guiGroup:insert(HpBar)

– This is called when the player loses health –
transition.to(HpSize, { time=100, x = 130, width=HpSize.width-4.5 } )
HpSize:setReferencePoint(display.TopLeftReferencePoint)
HpSize.x = 130

– This is called when the player gains back health –
transition.to(HpSize, { time=100, x = 130, width=HpSize.width+17.5 } )
HpSize:setReferencePoint(display.TopLeftReferencePoint)
HpSize.x = 130

[/code] [import]uid: 69700 topic_id: 17084 reply_id: 317084[/import]

#2

have you seen this article look at the health bar on the armyman, the full code is present, so you can pick the bits that are relevant to you.

and there was an old one here

does that help?

cheers,

?:slight_smile: [import]uid: 3826 topic_id: 17084 reply_id: 64175[/import]

#3

I looked at both of your codes but I don’t see where it would help me with my problem. My Health bar works fine for decreasing just not when I try to increase it again later.

I tried replacing my updating codes to look more like yours (just changing the number it divides by to match my bar size) but it still moves the x position to the left when it increases the width. [import]uid: 69700 topic_id: 17084 reply_id: 64188[/import]

#4

@ertzel,

then you have missed reading/scanning the code properly.

I am not just dividing the health bar with a number, but also positioning it.

Everytime a display object is modified in Corona, the reference point changes to the center. So all you need to do is set the reference point to TopLeft and assign the x,y to that.

The end result is that the bar will shrink or expans and move to the top left as per your settings.

cheers,

?:slight_smile: [import]uid: 3826 topic_id: 17084 reply_id: 64189[/import]

#5

Thats all I’m doing in my code though, thats why I don’t get it…

I use this for my update

transition.to(HpSize, { time=100, x = 130, width=HpSize.width+17.5 } )  
 HpSize:setReferencePoint(display.TopLeftReferencePoint)  
 HpSize.x = 130

This is just using the transition.to for changing the width of the HP Bar, then it resets the reference again and the X. I also tried doing it without adding in the x = 130 again, but I still get the same problems.

I also tried just doing this, but it still moves to the left and off of its X point.

HpSize:setReferencePoint(display.TopLeftReferencePoint) HpSize.width = 55 [import]uid: 69700 topic_id: 17084 reply_id: 64190[/import]

#6

yes… here is where you are going wrong

change these lines

-- This is called when the player loses health --  
 transition.to(HpSize, { time=100, x = 130, width=HpSize.width-4.5 } )  
 HpSize:setReferencePoint(display.TopLeftReferencePoint)  
 HpSize.x = 130  
   
-- This is called when the player gains back health --  
 transition.to(HpSize, { time=100, x = 130, width=HpSize.width+17.5 } )  
 HpSize:setReferencePoint(display.TopLeftReferencePoint)  
 HpSize.x = 130

to

-- This is called when the player loses health --  
transition.to(HpSize, { time=100, x = 130, width=HpSize.width-4.5,   
onComplete = function()   
 HpSize:setReferencePoint(display.TopLeftReferencePoint)  
 HpSize.x = 130  
end  
} )  
  
-- This is called when the player gains back health --  
transition.to(HpSize, {time=100, x = 130, width=HpSize.width+17.5,   
onComplete = function()   
 HpSize:setReferencePoint(display.TopLeftReferencePoint)  
 HpSize.x = 130  
end  
} )

what is happening is that while your code is transitioning, it is changing the position and your code is executed immediately and then the transition starts (this is something that I had a tough time when I started development with iOS about 3 years ago) the way the Apple Renderer works is it queues the things to be rendered and renders them together. Where as while on Windows I could manage every frame and bit as I wanted. Each has their strengths and weaknesses.

cheers,

?:slight_smile: [import]uid: 3826 topic_id: 17084 reply_id: 64192[/import]

#7

That fixed it. Thanks Jayant! [import]uid: 69700 topic_id: 17084 reply_id: 64328[/import]