Question

我一直在尝试使用本文所述的距离字段字体：https://github.com/libgdx/libgdx/wiki/Distance-field-fonts

当我只是渲染字体时，一切正常，但是当我尝试在TextButton上使用着色器时，按钮才变为白色，因为它将着色器应用于整个按钮而不仅仅是文本。我环顾四周但是我找不到任何关于如何更改着色器的信息仅仅是TextButton的文字所以我在这里问;如何将cutom着色器应用于TextButton的文本呈现？

初始代码：

textShader = new ShaderProgram(Gdx.files.internal("graphics/shaders/font/font.vert"),
             Gdx.files.internal("graphics/shaders/font/font.frag")); 
//exact same shaders as linked article
stage = new Stage();
stage.getBatch().setShader(textShader);
//Setting the shader for the stage will set the shader for everything in the stage,
//like my labels/buttons etc. This works fine for my labels as they are plain text,
//but my buttons become completely white.

init the rest of my labels, buttons, batches etc...

渲染代码：

Gdx.gl.glClearColor(0, 0, 0, 1);
Gdx.gl.glClear(GL_COLOR_BUFFER_BIT);

render background/other stuff...

stage.act(delta);
stage.draw();

片段着色器：

#ifdef GL_ES
precision mediump float;
#endif

uniform sampler2D u_texture;

varying vec4 v_color;
varying vec2 v_texCoord;

const float c_width = 0.5;
const float c_edge = 0.1;

const vec2 c_offset = vec2(0);

const float c_borderWidth = 0.5;
const float c_borderEdge = 0.5;

const vec3 c_color = vec3(0.7, 0.3, 0.1);
const vec3 c_outlineColor = vec3(0.3);

void main() {
    float distance = 1.0 - texture(u_texture, v_texCoord).a;
    float alpha = 1.0 - smoothstep(c_width, c_width + c_edge, distance);

    float distance2 = 1.0 - texture(u_texture, v_texCoord + c_offset).a;
    float outlineAlpha = 1.0 - smoothstep(c_borderWidth, c_borderWidth + c_borderEdge, distance2);

    float overallAlpha = alpha + (1.0 - alpha) * outlineAlpha;
    vec3 overallColour = mix(c_outlineColor, c_color, alpha/overallAlpha);

    gl_FragColor = vec4(overallColour, overallAlpha);
}

顶点着色器：

uniform mat4 u_projTrans;

attribute vec4 a_position;
attribute vec2 a_texCoord0;
attribute vec4 a_color;

varying vec4 v_color;
varying vec2 v_texCoord;

void main() {
    gl_Position = u_projTrans * a_position;
    v_texCoord = a_texCoord0;
    v_color = a_color;
}

Answer 1

距离场着色器无法正常渲染其他内容。为了在scene2D中使用它，您只需在绘制标签时临时切换到此着色器，因此您需要创建可以交换着色器的Label子类。也许是这样的：

public class CustomShaderLabel extends Label {
    private ShaderProgram shader;
    public CustomShaderLabel(CharSequence text, Skin skin) {
        super(text, skin);
    }

    public CustomShaderLabel(CharSequence text, Skin skin, String styleName) {
        super(text, skin, styleName);
    }

    public CustomShaderLabel(CharSequence text, Skin skin, String fontName, Color color) {
        super(text, skin, fontName, color);
    }

    public CustomShaderLabel(CharSequence text, Skin skin, String fontName, String colorName) {
        super(text, skin, fontName, colorName);
    }

    public CustomShaderLabel(CharSequence text, LabelStyle style) {
        super(text, style);
    }

    public ShaderProgram getShader() {
        return shader;
    }

    public void setShader(ShaderProgram shader) {
        this.shader = shader;
    }

    public void draw (Batch batch, float parentAlpha) {
        if (shader != null) batch.setShader(shader);
        super.draw(batch, parentAlpha);
        if (shader != null) batch.setShader(null);
    }
}

请记住，只要有标签，这就会导致额外的批量刷新，如果您的复杂层次结构包含许多标签，这可能会成为一个问题。

由于TextButton不知道使用您的自定义标签类型，您需要使用标准按钮并为其添加标签，或者复制粘贴大部分TextButton类以创建您的自己的版本（因此您可以使用TextButton.TextButtonStyles在按钮内设置标签样式。）

libGDX - TextButton字体的自定义着色器

1 个答案: