A fast, easy to use, free, and community supported 2D game engine
ypyean
Member
Hi all,
I would like to implement a progress bar in my game, however, I have no idea how to change a Sprite's width in cocos2d? Is it possible that I can change a Sprite's width or is there a better way to implement a progress bar? Thank you for your help in advance.
Alex
Member
I've never implemented this, but I thought about it a few times. I see 3 easy ways of doing it:
1. if your bar sprite is, let's say, a plain colored rectangle(like the life bar in street fighter games), you could change the scaleX to make it grow on the horizontal only.
2. if your sprite was not easily scalable (gets distorted when scaled), you could make a series of animation frames, one for each distinct step of the progress; you would then change the animation frame number to match the progress tick.
3. you could have a long progress bar sprite, covered on the left side by some other sprite(mask). when you increase the progress, the bar sprite gets pushed to the left(by increasing position.x), thus appearing from below the left mask sprite
maxp
Member
I implemented it as a single square sprite (an atlas sprite in 0.82) of which multiple copies were positioned next to each other to make up a bar. When needing to add or remove time from the bar, the last sprite's position i.e. [barElements objectAtIndex:numElements-1] was used as reference.
my method was pretty straightforward and looks really good - except that while it is really easy to implement left->right bar (and possibly top->bottom), it is trickier for other orientations (but absolutely possible)
goes like that:
1) Create a CCSprite and save its CGRect (as someRect)
2) Set its anchorPoint to CGPointZero or ccp(0,0) (same thing)
3) Update with a float between 0 and 1, say a floatVal:
CGRect tempRect = someRect;
tempRect.size.width = floatVal * someRect.size.width;
[mySprite setTextureRect:tempRect];that's all
works really good for sprites (both from img and from spritesheet), and doesnt clash with any kidn of background you might have for the bar. Additionally - it is "scale-proof"
I actually wrote up an article all about this yesterday!
The class will create radial, and bar form progress timers.
The majority of the post is about the radial progress implementation since that was more fun to implement than the vertical/horizontal bar progress but you can use either.
The main classes to look at are
ProgressTimer : the implementation of a progress timer
ProgressTimer+Actions : the actions you can run on the class with cocos2d runAction
Example ProgressTimer usage
ProgressTimer *timer =[ProgressTimer progressWithTexture:[[CCTextureCache sharedTextureCache]addImage:@"an_image.png"]];
// set the type to a standard 'Horizontal' progress bar going from 'Left to Right'
timer.type = kProgressTimerTypeHorizontalBarLR;
[timer runAction:[CCRepeatForever actionWithAction:[ProgressFromTo actionWithDuration:5.f from:100 to:0]]];The demo is below the post. If you want an explanation of how I created the progress in bar form then I could write up a post about that tomorrow.
check it out:
http://fancyratstudios.com/2010/02/programming/progresstimer-for-cocos2d/
PS:
Oh and there's no need to credit me for using any of that source. You can freely use anything I put up. I would love feedback or suggestions though to fix up the classes I create.
@riq
Wow thanks for the post! That is really awesome of you. :D
@MikeSz
Unfortunately I haven't made any performance tests =/
I will cook up some performance statistics for it though. Especially if everyone really likes it and are using it their own code. Wouldn't want ProgressTimer to be slow for everyone else.
Wow... only 90.
Well I was thinking about the way I create the timers and there's quite a lot of areas to improve it.
1. Stop it with the free'ing and alloc'ing of memory every update!! What was I thinking? haha
2. There are points that never change positions on the timer. I could have check the percentage to determine when to update points and when to leave them alone.
If anyone ever uses this class and wants it improved just message me and I'll make the changes.
@Lam: What would be cool is to have a Transition that uses the radial effect.
One possible implementation is:
1. save the outgoing scene in a texture (like the CrossFadeTransition)
2. the incoming scene should be below the outgoing scene
3. apply the radial effect on the outgoing scene.
What do you think about it ?
@jd
You are right about that. The progress timer doesn't actually measure progress of any specific thing (preloading images, loading game data files, etc).
I couldn't really think of a way to have it measure any of those since everyone has different practices for progression from 0 percent to 100 percent completion so I let users have control of the 'percentage' property instead.
So let's say we load data from file and want the progress timer as a feedback for that load we could do this:
-(void)loadGameDataFromFile:(NSString*)dataFile
{
[self loadWorld:dataFile];
//...
// ok i'm loading stuff right here. I kinda know I've completed 25% of the data
// so let's set that percentage.
//...
progressTimer.percentage = 25.f;
[self loadCharacters:dataFile];
//...
// Characters are now loaded
// so let's set that percentage again.
//...
progressTimer.percentage = 66.f;
[self loadSomeMore:dataFile];
//...
// We've finished loading everything but let's have a more animated loading to 100%
//...
[progressTimer runAction:[CCProgressTo actionWithDuration:25.f percent:100.f]
}Or maybe we don't know how much we can actually load. So let's just let the timer loop forever and stop it when we are actually done. Following cocos2d's convention of looping actions we do this:
-(void) loadSomeUnknownAmountOfData
{
CCAction *progressLoop = [CCRepeatForever actionWithAction:[ProgressFromTo actionWithDuration:5.f from:0 to:100]];
progressLoop.tag = kProgressLoopTag;
[progressTimer runAction:progressLoop];
// Load async, which will call a function to stop the action when finished.
[self loadAsynchronously];
}
-(void)loadDidFinish
{
[progressTimer stopActionByTag:kProgressLoop];
}@Lam: Another alternative for the Transition would be the opposite of the previous one.
1. save the incoming scene in a texture (like the CrossFadeTransition)
2. the incoming scene should be above the outgoing scene
3. apply an inverse radial effect on the incoming scene (it's empty at the beginning, it's full at the end)
Perhaps it could some sort of parameter. eg:
// this is just and idea.
id transition = [CCRadialTransition transitionWithDuration:2 scene:scene effect:radialOnIncomingScene];You must log in to post.