Cocos2d-x: Create simple progress bar - android

I'm newbie in Cocos2d-x.
I want to create simple progress/update bar for my game.
When this progress bar is full, we will move to next level.
How can i create that bar.
Thanks for all your helps.

See this - How to use a progress bar in cocos2d-x and C++
Basically, create two sprites one for the progress bar's border and one for the loading bar itself.
CCPointer fuelBarBorder;
fuelBarBorder =
CCSprite::createWithSpriteFrameName ("bt_progressbarborder.png" );
fuelBarBorder->setPosition(ccp(100,100));
this->addChild(fuelBarBorder,1);
// CCProgresstimer object (smart pointer)
CCPointer fuelBar;
fuelBar = CCProgressTimer::create(
CCSprite::createWithSpriteFrameName ("bt_progressbar.png" ));
Set the loading bar sprite's type to CCProgressTimerType.
// Set this progress bar object as kCCProgressTimerTypeBar (%)
fuelBar->setType(CCProgressTimerType::kCCProgressTimerTypeBar);
// Set anchor point in 0,0 and add it as a child to our border sprite
fuelBar->setAnchorPoint(ccp(0,0));
fuelBar->setBarChangeRate(ccp(1,0)); // To make width 100% always
fuelBar->setTag(1); // Tag our object for easy access
fuelBarBorder->addChild(fuelBar,50); // Add it inside the border sprite
In your update method, change its percentage to reflect loading percentage.
fuelBar->setPercentage(80); // Value between 0-100

I wrote the original post (link above).
Thanks to this post, I found out that WordPress played me ... when saving the code:(.
There is some corrections to be made:
CCPointer <CCSprite> fuelBarBorder;
fuelBarBorder =
CCSprite::createWithSpriteFrameName ("bt_progressbarborder.png" );
fuelBarBorder->setPosition(ccp(100,100));
this->addChild(fuelBarBorder,1);
This for the first set, as you can see the only change is at the first line:
CCPointer <CCSprite> fuelBarBorder;
If you don't have this cocos2d-x extension, just use the following:
CCSprite * fuelBarBorder;
Same on the second set of code, the correct one is:
CCPointer <CCProgressTimer> fuelBar;
fuelBar = CCProgressTimer::create(
CCSprite::createWithSpriteFrameName ("bt_progressbar.png" ));
// Set this progress bar object as kCCProgressTimerTypeBar (%)
fuelBar->setType(CCProgressTimerType::kCCProgressTimerTypeBar);
// Set anchor point in 0,0 and add it as a child to our border sprite
fuelBar->setAnchorPoint(ccp(0,0));
fuelBar->setBarChangeRate(ccp(1,0)); // To make width 100% always
fuelBar->setTag(1); // Tag our object for easy access
fuelBarBorder->addChild(fuelBar,50); // Add it inside the border sprite
Same thing is using an CCPointer (smart pointer implementation), if you don't have it in your project, just change the following line:
CCPointer <CCProgressTimer> fuelBar;
by this one:
CCProgressTimer fuelBar;
An this should make the code works, I hope this helps !!!!

Related

Sequence Action only first action is working in LIBGDX

I am trying to add a sequence action. The problem is that only the first added action taken effect. For example in below code if i add mta first, I can only see mta action (the second action doesn't work). If I reverse then I see only the mtabite take effect.
Please help
MoveToAction mta = new MoveToAction();
mta.setPosition(x, y);
mta.setDuration(4f);
MoveToAction mtaBite = new MoveToAction();
mtaBite.setPosition(xFinal, yFinal);
mtaBite.setDuration(4f);
SequenceAction sequence = new SequenceAction();
sequence.addAction(mta);
sequence.addAction(mtaBite);
this.addAction(sequence);
Try something like this instead see if it works better:
actor.addAction(Actions.sequence(mta, mtaBite));
Also make sure your Actions are setup correctly.
mta.reset();
mta.setTime(0);
mta.setPosition(x, y);
mta.setInterpolation(Interpolation.fade);
mta.setDuration(4f);
It is best to use Tween Engine in order to animate in he libgdx.
Tween.to(myobject, Type.POSITION, 1.0f)
.targetRelative(10, -20) // the target can be relative to the current values
.delay(2.5f) // a delay can be specified
.ease(Quad.OUT) // the easing function can be modified
.repeat(2, 0.5f) // repetitions are possible
.repeatYoyo(2, 0.5f) // yoyo repetitions too (one play forward, the other backward, etc)
.setUserData(obj) // custom objects can be attached
.setCallback(cb) // callbacks can be specified to get notified of the completion
.setCallbackTriggers(...) // callbacks can be launched on many events, not just completion
.start(myManager);
http://www.aurelienribon.com/blog/projects/universal-tween-engine/

Trying to make a progress bar that animates between two ints that change frequently

I have a little guess-the-hex-value game that I'm making for my first Android app that I am trying to display the percentage correct your guess is with a progress bar. I have the progress bar working fine, but I'm having trouble getting the animation to work.
Here is my animation:
protected ObjectAnimator progressAnimator;
then on OnCreate..
progressAnimator = ObjectAnimator.ofInt(percentageBar, "progress", percentageCorrectOld, percentageCorrectNew);
progressAnimator.setDuration(5000);
//i'm not sure where I should be starting this animation?
progressAnimator.start();
And here I have a textChanged Listener that detects when the hex guess is updated where I set the int percentageCorrect
#Override
public void afterTextChanged(Editable s) {
//sets the old percentage correct, which is set to 0 on onCreate
percentageCorrectOld = percentageCorrect;
//calculates the percentageCorrect using color comparison deltaE equation (irrelevant)
percentageCorrect = 100 - (int) ((deltaE / 375.5955) * 100);
//sets the newly calculated percentageCorrect to the new value
percentageCorrectNew = percentageCorrect;
//sets the text of the progress bar to the new value
percentageBarText.setText(""+percentageCorrect);
//sets the progress of the bar
percentageBar.setProgress(percentageCorrect);
}
Basically I am not sure where I should be starting the animation? Starting it in the afterTextChanged listener seems wrong as it would just restart the animation over and over.. (also it doesn't work, tested it). Starting it on onCreate doesn't work, either. I am getting the correct percentageCorrectOld and percentageCorrectNew values in the afterTextChanged listener, but the animation just won't play when I need it to.
Any help? I am really unsure of the best way to use this animation. Thanks!

Detach child, update, and attach? AndEngine, Android

engine.registerUpdateHandler(new TimerHandler(0.2f,
new ITimerCallback() {
public void onTimePassed(final TimerHandler pTimerHandler) {
pTimerHandler.reset();
Rectangle xpRect = new Rectangle(30, 200,
(float) (((player.getXp()) / (player
.getNextLevelxp())) * 800), 40, vbom);
HUD.attachChild(xpRect);
}
}));
I have this so far in my createHUD method. It's pretty simple, it creates a rectangle showing the player's xp in relation to the xp needed for the next level and attaches it to the HUD. The only problem is that the old rectangle is never deleted. How can I have a rectangle like that one that updates itself and removes old ones?
If you use the detachChild() or any other detach method too regularly, you might run into problems sooner or later. Especially because the detaching can only be made on an update thread. You'll never know when exactly your rectangle will be detached again. So, to save you a lot of attaching and detaching, reuse the rectangle:
i) Save a reference of the Rectangle somewhere (as a global variable for example in your Playerclass).
ii) At the beginning when you load your stuff also initialize the rectangle:
Rectangle xpRect = new Rectangle(30, 200, 0, 40, vbom); // initialize it
HUD.attachChild(xpRect); // attach it where it belongs
xpRect.setVisible(false); // hide it from the player
xpRect.setIgnoreUpdate(true); // hide it from the update thread, because you don't use it.
At this point it doesn't matter where you put your rectangle or how big it is. It's only important that it is there.
iii) Now when you want to show the player his XP you only have to make it visible
public void showXP(int playerXP, int nextXP){
float width= (float) ((playerXP / nextXP) * 800); // calculate your new width
xpRect.setIgnoreUpdate(false); // make the update thread aware of your rectangle
xpRect.setWidth(width); // now change the width of your rectangle
xpRect.setVisible(true); // make the rectangle visible again
}
iv) When you no longer need it: In order to make it invisible again just call
xpRect.setVisible(false); // hide it from the player
xpRect.setIgnoreUpdate(true); // hide it from the update thread, because you don't
Of course you can now use the showXP() method in anyway you like and use it in your TimerHandler. If you want a more effect full appearance you do something like this instead:
public void showXP(int playerXP, int nextXP){
float width= (float) ((playerXP / nextXP) * 800); // calculate your new width
xpRect.setIgnoreUpdate(false); // make the update thread aware of your rectangle
xpRect.setWidth(width); // now change the width of your rectangle
xpRect.setVisible(true);
xpRect.registerEntityModifier(new FadeInModifier(1f)); // only this line is new
}
It's actually the same as the above method with just a little change in the last line, that makes the rectangle appear a little more smoothly...
To detach a child from a HUD ,you can write
aHUD.detachChild(rectangle);
To clear all children from HUD
aHUD.detachChildren();
To to clear all HUD from camera , you can write
cCamera.getHUD().setCamera(null);
After using one of above, You can create a HUD & also attach as usual.

How to add a CClayer on top of another CCLayer in android

I am building a game in which i need to add a common topLayer as a common menu to other Layers. I am using AndEngineCocos2dExtension.
Current code :
public class LobbyLayer extends CCLayer {
CPButton low, medium, high, friends, vip;
CCSprite low_selected, medium_selected, high_selected, friends_selected,
vip_selected;
CCNode tables[];
public LobbyLayer() throws IOException {
CCSprite background = new CCSprite("gfx/bg.jpg");
background.setPosition(400, 240);
attachChild(background);
CPTopLayer topLayer = new CPTopLayer();
topLayer.setPosition(0,240);
attachChild(topLayer);
This is my second layer , I have a welcomeLayer ,which has a button for this(LobbyLayer), topLayer is the layer which i want on the top of the lobbyLayer.
But Instead I get a black Screen on the emulator, it is working fine without the topLayer.Please Help.
I'm not sure what branch you're on but GLES2 doesn't use layers anymore. When I searched andengine.org/forums for Cocos2dExtension, this is what I found:
http://www.andengine.org/forums/tools/porting-to-ios-t8450.html
I believe the cocos2d extension is so we can use cocos builder to build menu's and stuff so we have a graphical interface.
Does this help you?
You can specify the z value for the layers. I have used while adding child layer in parent layer as :
addChild(background,1);//z value 0
addChild(topLayer,5);//z value 5 so appear above background layer

AndroidPlot: How to render a chart in an AppWidget?

I'm trying to use AndroidPlot to draw a chart in a homescreen widget.
I know that in a normal app, it uses a custom view and from what I've seen (Android: AppWidget with custom view not working), the workaround is to render this as a bitmap in an imageView.
Now I've taken the quickstart code for AndroidPlot and put it into the provider class but it doesn't seem to render anything when I drop it on the homescreen.
The difference between this code and the original quickstart code is that in the quickstart, it leverages the Activity.findViewById but obviously it can't be used here.
Can anyone see something here that I'm doing wrong that may be causing the empty rendering?
Appreciate any help you could provide!
private Bitmap getChartImage(Context context)
{
// initialize our XYPlot reference:
mySimpleXYPlot = new XYPlot(context, "My Simple XYPlot");
mySimpleXYPlot.setDrawingCacheEnabled(true);
// add a new series
mySimpleXYPlot.addSeries(new SimpleXYSeries(), LineAndPointRenderer.class, new LineAndPointFormatter(Color.rgb(0, 200, 0), Color.rgb(200, 0, 0)));
// reduce the number of range labels
mySimpleXYPlot.getGraphWidget().setRangeTicksPerLabel(4);
// reposition the domain label to look a little cleaner:
Widget domainLabelWidget = mySimpleXYPlot.getDomainLabelWidget();
mySimpleXYPlot.position(domainLabelWidget, // the widget to position
45, // x position value, in this case 45 pixels
XLayoutStyle.ABSOLUTE_FROM_LEFT, // how the x position value is applied, in this case from the left
0, // y position value
YLayoutStyle.ABSOLUTE_FROM_BOTTOM, // how the y position is applied, in this case from the bottom
AnchorPosition.LEFT_BOTTOM); // point to use as the origin of the widget being positioned
// get rid of the visual aids for positioning:
mySimpleXYPlot.disableAllMarkup();
//mySimpleXYPlot.measure(150, 150);
//mySimpleXYPlot.layout(0, 0, 150, 150);
Bitmap bmp = mySimpleXYPlot.getDrawingCache();
return bmp;
}
Have you stepped through to see if the bitmap is actually empty? My guess is that the Bitmap is fine and the problem exists outside of this chunk of code. Take a look at this example usage of a widget with AndroidPlot - it's super minimal and it definitely works. Hopefully there's a solution in there for you :)
Nick

Categories

Resources