2016-04-09 54 views
2

TextButton yazı için Özel shader: https://github.com/libgdx/libgdx/wiki/Distance-field-fontslibGDX - Bu maddede açıklandığı gibi mesafe alan yazı deneme oldum

Her şey sadece yazı render olduğumda çalışıyor ama gölgelendiricisini kullanmaya çalıştığınızda TextButton üzerinde, düğme sadece beyaz olur, çünkü gölgelendiriciyi sadece metne değil, tüm düğmeye uygular. Etrafa baktım ama sadece bir TextButton metni için gölgelendiricinin nasıl değiştirileceğine dair herhangi bir bilgi bulamıyorum. Sadece bir TextButton'un metin oluşturulmasına nasıl bir cutom shader uygularım?

Init Kodu:

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... 

Render kodu:

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

render background/other stuff... 

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

Fragment shader:

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

Vertex Shader:

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

Kodunuzu görebilir miyiz lütfen? –

+0

Bazı kodları ekledim. Ayrıca, TextButtons'daki metnin iyi olduğunu da unutmamalıyım, sadece bulanıklaşan düğmelerin arka planı. – Charanor

cevap

3

Uzak alan gölgelendiricisi normal olarak başka şeyler yapamaz. Bunu sahne2D'de kullanabilmek için, yalnızca Etiketleri çizerken geçici olarak bu gölgelendiriciye geçmeniz gerekir, böylece gölgelendiriciyi değiştirebilen bir Etiket alt sınıfı oluşturmanız gerekir. Böyle Belki bir şey:

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

birçok etiketlerle karmaşık bir hiyerarşi varsa bir sorun haline gelebilir etiketler, bulunduğu her yerde bu ekstra toplu basması neden olacağını unutmayın.

TextButton, özel Etiket türünü kullanmayı bilmediğinden, standart bir Düğme kullanıp ona bir Etiket eklemeniz veya belki de kendi sürümünüzü oluşturmak için TextButton sınıfının çoğunu kopyala yapıştırmanız gerekir (Bu yüzden Etiketinizi düğme içinde şekillendirmek için TextButton.TextButtonStyles'ı kullanabilirsiniz).

+0

Bu çalışır, ancak şimdi etiketlerimın eylemlerimi kullanmama sorunu var (fadeIn/fadeOut/alfalarını değiştirmiyorlar). Herhangi bir çözüm? – Charanor

+0

Gölgeyi bu linkten kullanıyorsanız, alpha * v_color.a ile son satırdaki alfa değiştirin. – Tenfour04

+1

Aynı shader kullanmıyorum, fakat kodumda genelAlpha * v_color.a yaptım ve işe yaradı. Teşekkürler! – Charanor