libGDX

Question

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

当我只是渲染字体时一切正常，但是当我尝试在 TextButton 上使用着色器时，按钮变成白色，因为它将着色器应用于整个按钮并且不只是文字。我环顾四周，但找不到任何有关如何仅针对 TextButton 的文本更改着色器的信息，所以我在这里问；如何将自定义着色器仅应用于 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中使用它，你只需要在绘制Labels时临时切换到这个shader，所以你需要创建一个可以交换shader的Label的subclass。也许是这样的：

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 class 复制粘贴到创建您自己的版本（因此您可以使用 TextButton.TextButtonStyles 在按钮内设置标签样式）。

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

libGDX - Custom shader for TextButton font

java

opengl

shader

glsl