Hi there,
I’m trying to make a progress bar.
A simple rectangle that grows and shrinks based on a number would be fine.
What’s the best type of toneGod element to do this?
1 Like
@BigBob said: Hi there,I’m trying to make a progress bar.
A simple rectangle that grows and shrinks based on a number would be fine.
What’s the best type of toneGod element to do this?
Indicator - it’s what this was designed for.
[java]
ColorRGBA fin = ColorRGBA.White.clone();
Indicator ind1 = new Indicator(
screen, // Screen reference
UIDUtil.getUID(), // UID
new Vector2f(250, 150), // position
new Vector2f(140,25), // dimenaions
new Vector4f(0,0,0,0), // resize borders
screen.getStyle(“Common”).getString(“blankImg”), // default image
Indicator.Orientation.HORIZONTAL // orientation
) {
@Override
public void onChange(float currentValue, float currentPercentage) {
// change the color depending on the current value
fin.interpolate(ColorRGBA.Red, ColorRGBA.Green, (currentPercentage/100f));
setIndicatorColor(fin);
}
};
ind1.setMaxValue(100);
ind1.setCurrentValue(100);
ind1.getIndicatorElement().setAlphaMap(“Some image path or texture atlas coords”); // used to reshape the indicator (i.e. to a circle, squigglie, etc)
ind1.setIndicatorColor(ColorRGBA.Green);
ind1.setIsMovable(false);
ind1.setIsResizable(false);
ind1.setScaling(true, true);
ind1.setDisplayValues(); // displays overlay text like 52/100 etc
// ind1.setDisplayPercentage(); // display overlay text as percentage
// ind1.setHideText(); // removes the display text
[/java]
You can also add a base image (behind the indicator) and an overlay image (above the indicator)
O:
Amazing!
This has made my game 100000% better
My game is almost ready for submission to the blendswap competition!
I’m just adding some finishing touches and will probably submit it within the hour!
1 Like
@BigBob said: O:Amazing!
This has made my game 100000% better
My game is almost ready for submission to the blendswap competition!
I’m just adding some finishing touches and will probably submit it within the hour!
That is awesome! I have gotten bombarded with library issues (actual issues… not questions about it… those are easy as I have a ton of test code to pull examples from), so I haven’t even been able to start on anything. I also have my surgery on Friday, so I may not get to participate after all… however, I’m hoping that everyone gets to try out the different submissions, as I’m super interested in seeing what everyone does if nothing else.
Last question!
Where would I find the Effects for the hideWithEffect() method for elements?
D: gonna do somethin fancy
@BigBob said: @t0neg0dLast question!
Where would I find the Effects for the hideWithEffect() method for elements?
D: gonna do somethin fancy
You can create them and just add the to the Element directly. If one exists for the event, it will replace it.
Um… something like:
[java]
Effect he = new Effect(
Effect.EffectType.ImageFadeIn, // The type of effect
Effect.EffectEvent.Hover, // The event to fire off the effect on
0.5f // the total duration of the effect
);
he.setBlendImage(ba.getButtonHoverImg()); // Depending on the effect there are setters that need to be called
ba.addEffect(he); // add the effect to the button or whatever
// Another example that uses a method to get the effect
public Effect getBounceEffect(Element el, Effect.EffectType type, Effect.EffectEvent event, Effect.EffectDirection dir) {
Effect fx = new Effect(type, event, 0.5f);
fx.setInterpolation(Interpolation.bounceOut); // You can use different interpolations to create all sorts of effects
fx.setEffectDirection(dir);
fx.setElement(el);
return fx;
}
// This adds the effect to the element for hideWithEffect, showWithEffect
Effect slideIn1 = getBounceEffect(button, EffectType.SlideIn, EffectEvent.Show, EffectDirection.Top);
Effect slideOut1 = getBounceEffect(button, EffectType.SlideOut, EffectEvent.Hide, EffectDirection.Left);
button.addEffect(EffectEvent.Show, slideIn1); // since the event is defined in the Effect, you could just use button.addEffect(slideIn1)
button.addEffect(EffectEvent.Hide, slideOut1);
[/java]
Okay, I seem to have added the Effects Properly, but it seems that it won’t remember the proper positions of the TextElements.
I have the effect properly added to the button as it slides in and out into the proper position, but the text elements will only slide in and out to the top left corner completely ignoring the positions they should be in.
Any ideas on why this could be happening?
Heres an example of the culprit
[java] Effect slideIn2 = new Effect(EffectType.SlideIn, EffectEvent.Show, 1f);
Effect slideOut2 = new Effect(EffectType.SlideOut, EffectEvent.Hide, 1f);
insText.addEffect(EffectEvent.Hide, slideOut2);
insText.addEffect(EffectEvent.Show, slideIn2);[/java]
Oh… I think all you have to do is set the element to the actually position you want it to end at.
Then create the effect and set the EffectDirection (where you want it to slide in from… or slide out to)
When you run the effect, the element will be moved off-screen relative to the direction you selected and then slide to the position you want.
If you are already doing this… then ignore what I posted here. I’m going to go try this with a TextElement now and see if I can determine the issue. I’ve never tried this, as I just assumed the effects would work properly with them.
EDIT: I lied… I’ve tried FadeIn and FadeOut only. Testing the others now.
Ok… I just tested the following and it all seemed to work fine:
[java]
// el = a TextElement
Effect fx = new Effect(
Effect.EffectType.SlideIn,
Effect.EffectEvent.Show,
0.5f
);
fx.setEffectDirection(Effect.EffectDirection.Top);
fx.setInterpolation(Interpolation.bounceOut);
el.addEffect( fx );
fx = new Effect(
Effect.EffectType.SlideOut,
Effect.EffectEvent.Hide,
0.5f
);
fx.setEffectDirection(Effect.EffectDirection.Top);
fx.setInterpolation(Interpolation.bounceOut);
el.addEffect( fx );
[/java]