1
\$\begingroup\$

As we all know, LibGDX has a TextButtonclass which has a TextButtonStyle and ButtonStyle. The style has some parameters:

  • up - an image which is shown normally as a button background
  • down - shown when the button is being 'pressed'
  • over - on hover

My question is: Is there any way to implement the 'hovering' / changing the background image IN TIME? So for example it takes 2 seconds and it's smooth?

I tried with actions and tween engine, but honestly, I really have no idea how I should implement this. Maybe some alpha operations?

If you have any ideas, I would be grateful :)

\$\endgroup\$
1
\$\begingroup\$
  1. Extend a TextButton

  2. Override a draw() method

  3. Make a 'fake actor' in this new class which you'll use to a hover action

  4. In draw() don't call super and draw the button on your own

  5. Draw the 'hover' background with the 'fake actor's' alpha

  6. Add alpha action to the fake actor on hover/click

  7. Profit

    Example:

    public class SomeTextButton extends TextButton{
    
        private Actor hoverActor;
    
        public SomeTextButton(//some code){
        // some code
        hoverActor = new Actor();
        hoverActor.getColor().a = 0f;
    }
    
    @Override
    public void draw(Batch batch, float parentalpha){
        //super.draw() // don't! you want to draw on your own
    
        hoverActor.act(Gdx.graphics.getDeltaTime());
    
        // there are two backgrounds in a textfield - normal and hover
        batch.begin();
    
    
        // we draw the hover background with the fake actor's alpha
        Color oldBatchColor = batch.getColor();
        Color newColor = new Color(batch.getColor());
        newColor.a = hoverActor.a;
    
        hoverbackground.draw(batch, this.getX(), this.getY(), this.getWidth(), this.getHeight());
    
        batch.setColor(oldBatchColor);
    
        // we draw the normalbackground normally, without any alpha magic
        normalBackground.draw(batch, this.getX(), this.getY(), this.getWidth(), this.getHeight());
    
        batch.end();
    }
    
    public Actor getHoverActor(){
        return hoverActor;
    }
    

}

To fire it:

SomeTextButton button = new SomeTextButton(// some params);
stage.add(button);

button.addListener(new HoverListener(){
    onHover(){
        button.getHoverActor().addAction(Actions.alpha(1f,1f)); // profit
    }
});
| improve this answer | |
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.