制作"按"对带阴影的TextButton的效果

时间:2015-09-13 20:09:59

标签: java libgdx scene2d

我目前使用FreeType为带有阴影的TextButton生成字体。我想做一些事情,以便当我点击文本按钮时,文本向下移动一点,向右移动,模拟按下。阴影不应移动。这是我的意思和例子:

Example

注意阴影是如何移动的。我怎样才能完成这样的事情?我怀疑它与drawables有关,但我不确定。非常感谢帮助!

1 个答案:

答案 0 :(得分:1)

我想我明白了。我的想法是使用将处理touchDown和touchUp本身的类来覆盖 TextButton 类。

该类正在创建两种类型的字体(您将需要.ttf文件,但当然您可以更改它并传递BitmapFont对象或其他东西) - 通常好的想法是选择细和粗体字体(因为阴影)

以下是代码 - 我用描述来说明它是如何工作的以及我在做什么,因为我发现它更方便:

    package put.here.your.package;


    import com.badlogic.gdx.Gdx;
    import com.badlogic.gdx.graphics.Texture.TextureFilter;
    import com.badlogic.gdx.graphics.g2d.BitmapFont;
    import com.badlogic.gdx.graphics.g2d.freetype.FreeTypeFontGenerator;
    import com.badlogic.gdx.graphics.g2d.freetype.FreeTypeFontGenerator.FreeTypeFontParameter;
    import com.badlogic.gdx.scenes.scene2d.InputEvent;
    import com.badlogic.gdx.scenes.scene2d.ui.Label.LabelStyle;
    import com.badlogic.gdx.scenes.scene2d.ui.Skin;
    import com.badlogic.gdx.scenes.scene2d.ui.TextButton;
    import com.badlogic.gdx.scenes.scene2d.utils.ClickListener;

    public class MyTextButton extends TextButton
    {
        BitmapFont upFont, downFont;
        LabelStyle upStyle, downStyle;
        float upLeftPad, upTopPad, downLeftPad, downTopPad;

        public MyTextButton(String text, Skin skin, String styleName) //you can create more constructors just call in them super then init!
        {
            super(text, skin, styleName);

            init();
        }

        private void init()
        {   
            //see the comments near the method below
            this.createFonts();

            //this is important! it will cleared effect of skin up/down settings what is good for me but should not be for you - then remove the following line
            this.clearListeners();

            //creating styles basing on current style and fonts we have generated
            upStyle = new LabelStyle( this.getLabel().getStyle() );
            upStyle.font = upFont;

            downStyle = new LabelStyle( this.getLabel().getStyle() );
            downStyle.font = downFont;

            //setting upStyle for a start - on a start the button is not pushed
            this.getLabel().setStyle(upStyle);

            //setting the listener that will change the style due to is button clicked or not right now - see its definition on the bottom of class
            this.addListener(clickListener);

            //this is calculating current 
            this.upLeftPad = getLabelCell().getPadLeft();
            this.upTopPad = getLabelCell().getPadTop();

            this.downLeftPad = getLabelCell().getPadLeft() + 4; //the value (4) should be changed if you will change shadowOffset of fonts
            this.downTopPad = getLabelCell().getPadTop() + 4; //because we want to make shadow small and move label which make us an illusion of pushing font

            //here one note! the funny thing is that imho above value should be shadowOffsetY of upFont - shadowOffsetY of downFont
            //but it is not actually - I mean it is not ok, right bottom corner is not at the same position which is weird so just choose your value
        }

        //this method create two fonts - up version and pushed version - the pushed version should have smaller shadow
        private void createFonts()
        {
            //firstly we need a generator (integrated with LibGDX) to generate from .ttf file - so you will need .ttf!
            FreeTypeFontGenerator generator = new FreeTypeFontGenerator(Gdx.files.internal("font.ttf")); //path to yout .ttf file
            FreeTypeFontParameter parameter = new FreeTypeFontParameter();

            parameter.size = 42;

            parameter.magFilter = TextureFilter.Linear; //it will make
            parameter.minFilter = TextureFilter.Linear; //the font render better

            //generating font for nonclicked (up) button version
            parameter.shadowOffsetX = 6; //defining of 
            parameter.shadowOffsetY = 6; //shadow offset ~= size

            upFont = generator.generateFont(parameter);

            //generating font for nonclicked (up) button version
            parameter.shadowOffsetX = 3; //as above
            parameter.shadowOffsetY = 3; //it should be smaller!

            downFont = generator.generateFont(parameter);

            //fonts are generated

            generator.dispose();
        }

        //setting style and label offset for pushed button
        private void setDown()
        {
            getLabel().setStyle(downStyle);

            getLabelCell().padTop( downTopPad );
            getLabelCell().padLeft( downLeftPad );
        }

        //setting style and label offset for non pushed button
        private void setUp()
        {
            getLabel().setStyle(upStyle);

            getLabelCell().padTop( upTopPad );
            getLabelCell().padLeft( upLeftPad );
        }

        //the listener that will change style due to what action is actually being performed on the button
        ClickListener clickListener = new ClickListener() 
        {
            @Override
            public boolean touchDown (InputEvent event, float x, float y, int pointer, int button)
            {
                setDown();
                return true;
            }

            @Override
            public void touchDragged (InputEvent event, float x, float y, int pointer)
            {
                setUp();
            }

            @Override
            public void touchUp (InputEvent event, float x, float y, int pointer, int button)
            {
                setUp();
            }
        };

    }

你正在使用它:

    MyTextButton start = new MyTextButton("START", game.skin, "button");
    stage.addActor(start);

注意:

  • 您应该将包从第一行更改为您的
  • 您可以操作MyTextButton设置更改阴影偏移和字体偏移,您将不得不更改字体大小 - 现在它是42
  • 您可以将类名更改为TextButton并将其用作简单的TextButton(只需导入正确的一个)
  • 您正在创建正常皮肤,向上的属性将被保留,而向下的属性将被忽略(但您可以取消忽略向下删除clearListeners()行)
  • 该类处理 touchUp touchDrag 情况(因此,如果您点击按钮然后移动鼠标,则其行为与touchUp相同)
  • 您当然可以添加自己的听众来使用按钮来更改屏幕,例如

效果:

enter image description here