LibGDX: immagini di tinta per un ImageButton che utilizza una skin

Question

Ciao mi piacerebbe creare un ImageButton e l'immagine disabilitata dovrebbe essere colorata di grigio. Io uso una skin e un file .json per definirlo. C'è un modo migliore per ottenere un'immagine grigia che duplicare tutte le immagini e aggiungerle a texturepacker?

Answer 1

Penso che il modo migliore (o anche l'unico modo) per realizzare questo è utilizzando shaders. Notare che shaders è un argomento intero a sé stante, ma una volta acquisito padronanza, o persino conoscenza, può dare al tuo gioco molte funzionalità interessanti, come l'ingrigimento delle immagini.

Come per la tua domanda: le prime cose che sono necessarie sono shader che influenzeranno le tue immagini (o, nel nostro caso, ImageButton) in un modo che le tingerà di grigio. Fortunatamente, questi shader sono stati implementati da qualcun altro, come risposta a uno similar question. Quindi, se si estrae gli shaders richiesti da quanto sopra, abbiamo la seguente:

grey.vsh:

attribute vec4 a_position; 
attribute vec4 a_color; 
attribute vec2 a_texCoord0; 
uniform mat4 u_projTrans; 

varying vec4 vColor; 
varying vec2 vTexCoord; 
void main() { 
     vColor = a_color; 
     vTexCoord = a_texCoord0; 
     gl_Position = u_projTrans * a_position; 
} 

grey.fsh:

#ifdef GL_ES 
#define LOWP lowp 
precision mediump float; 
#else 
#define LOWP 
#endif 
varying LOWP vec4 vColor; 
varying vec2 vTexCoord; 
uniform sampler2D u_texture; 
uniform float grayscale; 
void main() { 
    vec4 texColor = texture2D(u_texture, vTexCoord); 

    float gray = dot(texColor.rgb, vec3(0.96, 0.96, 0.96)); 
    texColor.rgb = mix(vec3(gray), texColor.rgb, grayscale); 

    gl_FragColor = texColor * vColor; 
} 

Assumendo questi file sono nella tua cartella assets, possiamo creare un ShaderProgram che compilerà e userà questi shader:

ShaderProgram shader = new ShaderProgram(Gdx.files.internal("grey.vsh"), Gdx.files.internal("grey.fsh")); 

Ora possiamo estendere ImageButton in modo che utilizzi shader quando vogliamo che sia grigio. In questo esempio, ImageButton è grigio (o colorato in), quando viene cliccato:

public class GreyedOutImageBtn extends ImageButton { 
    private boolean isGreyedOut; // A flag that determines whther or not this should be greyed out 
    public GreyedOutImageBtn(ImageButtonStyle style) { 
     super(style); 
     addListener(new ClickListener() { 
      @Override 
      public void clicked(InputEvent event, float x, float y) { 
       // When clicked, toggle the grey effect 
       Gdx.app.log("ClickListener", "Click"); 
       setIsGreyedOut(!getIsGreyedOut()); 
      } 
     }); 
     isGreyedOut = false; 
    } 

    public boolean getIsGreyedOut() { 
     return isGreyedOut; 
    } 

    public void setIsGreyedOut(boolean isGreyedOut) { 
     this.isGreyedOut = isGreyedOut; 
    } 

    @Override 
    public void draw(Batch batch, float parentAlpha) { 
     if (getIsGreyedOut()) { 
      batch.end(); 
      batch.setShader(shader); // Set our grey-out shader to the batch 
      batch.begin(); 
      super.draw(batch, parentAlpha); // Draw the image with the greyed out affect 
      batch.setShader(null); // Remove shader from batch so that other images using the same batch won't be affected 
     } 
     else { 
      // If not required to be grey-out, do normal drawing 
      super.draw(batch, parentAlpha); 
     } 
    } 
} 

Questo danno i seguenti risultati. Prima:

Dopo:

Dopo aver capito meglio shaders, si può costruire il proprio per essere specifici per le vostre esigenze.

Answer 2

È possibile impostare il colore della tinta sui pulsanti disabilitati, utilizzando un oggetto ImageButtonStyle e utilizzare il metodo newDrawable(Drawable drawable, Color tint) dalla classe Skin.

Nel codice potrebbe sembrare qualcosa di simile. Notare che abbiamo inizializzato l'oggetto Skin con un Atlas Texture, che contiene le nostre Textures UI. Vedere the wiki per ulteriori informazioni.

// Create the tint color. Notice we use LibGDX Color class 
Color tintColor = new Color(0.5f, 0.5f, 0.5f, 1f); 

ImageButton.ImageButtonStyle btnStyle = new ImageButton.ImageButtonStyle(); 
btnStyle.up = skin.getDrawable("my_button"); 
btnStyle.disabled = skin.newDrawable("my_button", tintColor); 

ImageButton myButton = new ImageButton(btnStyle);