2015-08-30 7 views
6

usin एक ImageButton के लिए टिंट छवियाँ हैलो मैं एक ImageButton बनाने के लिए whant और विकलांग छवि ग्रे रंगा हुआ होना चाहिए। मैं एक त्वचा और एक .json फाइल का उपयोग कर परिभाषित करने के लिए। क्या सभी छवियों को डुप्लिकेट करने और उन्हें texturepacker में जोड़ने के लिए एक ग्रे रंग की छवि प्राप्त करने का एक बेहतर तरीका है?LibGDX: एक त्वचा

+0

मुझे लगता है कि मैंने सवाल को गलत समझा। आप किसी तरह के ग्रेशेडर की तलाश में हैं? (ओवरले या ऐसा नहीं) – BennX

+0

खेद नहीं है कि मेरा लक्ष्य क्या है ग्रेसेडर मेरा लक्ष्य यह है कि अक्षम आइकन ग्रे हैं (मेरे आइकन सफेद हैं) .. और मुझे यह जानना था कि सबसे अच्छा तरीका क्या है (प्रसंस्करण के लिए सबसे तेज़)। उदाहरण के रूप में: एंड्रॉइडस्टूडियो। –

उत्तर

2

मुझे लगता है कि सबसे अच्छा तरीका है (या यहां तक ​​कि एक ही रास्ता) यह पूरा करने के shaders उपयोग करना है। ध्यान दें कि shaders अपने आप ही एक पूरे के अधीन है, लेकिन एक बार में महारत हासिल, या यहाँ तक से परिचित, अपने खेल में कई शांत क्षमताओं, छवियों बाहर पक्का हो जानेवाला की तरह दे सकते हैं।

अपने प्रश्न का रूप: पहले चीजें हैं जो की जरूरत है, shaders कि एक तरीका है कि उन्हें धूसर रंग होगा (हमारे मामले, ImageButton में या,) अपनी छवियों को प्रभावित करेगा कर रहे हैं। सौभाग्य से, इन shaders एक similar question के जवाब के रूप किसी अन्य के द्वारा लागू किया गया है,।

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

इन फ़ाइलों को मान लिया जाये तो, अगर हम ऊपर से आवश्यक shaders निकालने, हम निम्नलिखित है कर रहे हैं अपने assets फ़ोल्डर में, हम एक ShaderProgram कि संकलन होगा बना सकते हैं और इन shaders का उपयोग कर सकते हैं:

+०१२३५१६४१०
ShaderProgram shader = new ShaderProgram(Gdx.files.internal("grey.vsh"), Gdx.files.internal("grey.fsh")); 

अब हम ImageButton का विस्तार कर सकते हैं ताकि यह shader का उपयोग करेगा जब हम इसे भूरे रंग के बाहर करना चाहते हैं। इस उदाहरण में, ImageButton धूसर हो जाता है (या में रंग) जब क्लिक करते ही:

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

यह निम्न परिणाम देती है। पहले:

enter image description here

के बाद:

enter image description here

के बाद आप बेहतर समझ लिया है shaders, आप अपनी आवश्यकताओं के लिए विशिष्ट होना अपने खुद बना सकते हैं।

1

आप ImageButtonStyle ऑब्जेक्ट का उपयोग कर अक्षम बटन पर टिंट रंग सेट कर सकते हैं, और Skin कक्षा से newDrawable(Drawable drawable, Color tint) विधि का उपयोग कर सकते हैं।

कोड में यह कुछ ऐसा दिख सकता है। ध्यान दें कि हमने एक बनावट एटलस के साथ त्वचा वस्तु शुरू की है, जिसमें हमारे यूआई बनावट हैं। अधिक जानकारी के लिए the wiki देखें।

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