Masks / Progress bars « cocos2d for iPhone

cocos2d for iPhone » Programming » cocos2d support (graphics engine)

Masks / Progress bars

(11 posts) (7 voices)

Started 1 year ago by Dunc
Latest reply from KingIsulgard

Tags:

Dunc
Member

Hi all,

I've only been using cocos2d for just over a week now, but I'm very impressed with it so far. Great community, and I haven't had to do too much surfing to find the answers to my problems so far. However, I've just run into my first dead end...

I am trying to work out how to implement a timer bar for a game I'm working on. The timer bar needs to be round-ended, and needs to float above the main game layer (ie, sprites can pass behind it). So I need to somehow create a mask to clip the timer bar sprite to this round-ended shape.

I have searched for solutions, but most seem to relate to rectangular progress bars. Also, I cant really afford too much in the way of framerate loss, as I have a fair amount of sprites running around.

Can anyone nudge me in the right direction? I would be eternally grateful ....

Cheers,

D.

Posted 1 year ago #
PhilM
Member

We adjust the texture rect of a CCSprite to produce a custom rounded edged bar for the 'mana power' in Forest Folk.

The left side is hidden under a button, so we only have to worry about the right. When the bar is at 100% the full rect is used. When its at 50% we nudge the x position of the texture rect along 50%, and reduce its width accordingly. That way the rounded edge is always shown, and seemingly grows/retracts from the left side.

You should be able to use a similar method in your situation, unless I've misunderstood something.

Posted 1 year ago #
bradparks
Member

@Lam created and released a round, opensource progress bar for Cocos2d that can be skinned:

http://fancyratstudios.com/2010/02/programming/progresstimer-for-cocos2d/

Posted 1 year ago #
Dunc
Member

@PhilM - my only problem with your suggestion is that I have to have it rounded at both ends :( Thanks for the suggestions though, it should help me in future.

@bradparks - sorry, I wasn't clear enough. My timer bar is a long bar with rounded ends, so the motion must be linear. That is an awesome link though. Once again, I can imagine this being very useful in the future!

Posted 1 year ago #
patrickC
Member

Hm, how small would the bar get?
Disappear completely?

If you could try and cheat somehow when the bar is very small, I would try making up a bar of 3 pieces:
- rounded start sprite (say 5pixels wide, just enough to get the rounded corner)
- custom drawn rectangle of varying size
- rounded end sprite (same as start but flipped)

then scale the rectangle and move the edges accordingly.

If you really wanted to polish it, I guess the rounded edge could be animated with different sprites that you prepared before hand (5px,4px,3px,2px,1px,gone).
A bit of a cheat, but I can envision it working well ;)

Posted 1 year ago #
PhilM
Member

I think patrickC's suggestion would work best for this. I was going to do it similar, until I realized I could cut a few corners with our single ended version ;)

Posted 1 year ago #
Dunc
Member

Thanks for the suggestions gentlemen. I shall have a play! I was thinking about going to route of just having an animation, but I'm not sure the designer would be too chuffed with having to create all those frames :)

Posted 1 year ago #
cublah
Member

Can't you split the timer bar into 2 rects and grow the rects in each direction depending on the time....if you know what I mean.

Not sure why you would need a mask though.

Posted 1 year ago #
Dunc
Member

The mask is required, as the ends of the timer bar are rounded, and the contents (ie, the timey-indicatory-movey bit) has to completely disappear. I've yet to find a solution. If I ever do, I'll be sure to post it up.

Cheers

D.

Posted 1 year ago #
maklaus
Member
I had a problem with progress bar rounded ends too.
When I used scaleX it looks really bad.
My solution is setTextureRect method:
```
CGRect barRect = [progressBar textureRect];
barRect.size.width *= progressYouNeed;
[progressBar setTextureRect: barRect];
```
Posted 10 months ago #
KingIsulgard
Member

You can use masking in Cocos2D. Here is an example
http://www.cocos2d-iphone.org/forum/topic/15890?replies=1#post-89757

Posted 9 months ago #

RSS feed for this topic

Reply

You must log in to post.