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

Question

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

5

我一直在尝试使用距离场字体，就像这篇文章所描述的那样：https://github.com/libgdx/libgdx/wiki/Distance-field-fonts 当我只渲染字体时，一切都正常，但是当我尝试在上使用着色器时，按钮变成了白色，因为它将着色器应用于整个按钮而不仅仅是文本。我已经查找过了，但是我找不到有关如何仅更改的文本着色器的任何信息，所以我在这里问：如何仅将自定义着色器应用于的文本呈现？

初始化代码:

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;
}

- Charanor

请问能否让我们看一下你的代码？ - ZEE

我添加了一些代码。我还应该注意到 TextButton 上的文本是正常的，只有按钮的背景出现了问题。 - Charanor

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Tenfour04 · Accepted Answer

距离场着色器不能正常渲染其他内容。为了在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不知道如何使用您的自定义Label类型，您需要使用标准按钮并添加一个Label或者复制粘贴大部分TextButton类来创建自己的版本（以便您可以使用TextButton.TextButtonStyles样式化按钮中的Label）。