2. 程式人生 > >cocos變灰圖

cocos變灰圖

阿新 • • 發佈：2019-02-03

轉載出處：http://blog.csdn.net/u010223072/article/details/49640147

本人使用cocos2dx-3.3

前言：遊戲中有很多按鈕控制元件，它們一般會有選中和未選中2種狀態。我們如果要區分這兩種狀態的表現，很多時候是直接叫美術給兩種狀態下的資源，或直接setColor設定顏色。這樣無疑增加了資源的大小或不美觀(看需求)。本節將介紹怎麼通過opengl es程式來實現圖片置灰操作。

注：這個置灰操作是基於Cocos-Lua的，具體原理分析這裡不打算介紹，主要講如何實現。

實現步驟

  • Lua端操作：

1，置灰Lua程式碼(ShaderEffect.lua)

local ShaderEffect = {

        vertDefaultSource = "\n"..
        "attribute vec4 a_position; \n" ..
        "attribute vec2 a_texCoord; \n" ..
        "attribute vec4 a_color; \n"..                                                    
        "#ifdef GL_ES  \n"..
        "varying lowp vec4 v_fragmentColor;\n"..
        "varying mediump vec2 v_texCoord;\n"..
        "#else                      \n" ..
        "varying vec4 v_fragmentColor; \n" ..
        "varying vec2 v_texCoord;  \n"..
        "#endif    \n"..
        "void main() \n"..
        "{\n" ..
        "gl_Position = CC_PMatrix * a_position; \n"..
        "v_fragmentColor = a_color;\n"..
        "v_texCoord = a_texCoord;\n"..
        "}",

        pszFragSource2 = "#ifdef GL_ES \n" ..
        "precision mediump float; \n" ..
        "#endif \n" ..
        "uniform sampler2D u_texture; \n" ..
        "varying vec2 v_texCoord; \n" ..
        "varying vec4 v_fragmentColor;\n"..
        "uniform vec2 pix_size;\n"..
        "void main(void) \n" ..
        "{ \n" ..
        "vec4 sum = vec4(0, 0, 0, 0); \n" ..
        "sum += texture2D(u_texture, v_texCoord - 4.0 * pix_size) * 0.05;\n"..
        "sum += texture2D(u_texture, v_texCoord - 3.0 * pix_size) * 0.09;\n"..
        "sum += texture2D(u_texture, v_texCoord - 2.0 * pix_size) * 0.12;\n"..
        "sum += texture2D(u_texture, v_texCoord - 1.0 * pix_size) * 0.15;\n"..
        "sum += texture2D(u_texture, v_texCoord                 ) * 0.16;\n"..
        "sum += texture2D(u_texture, v_texCoord + 1.0 * pix_size) * 0.15;\n"..
        "sum += texture2D(u_texture, v_texCoord + 2.0 * pix_size) * 0.12;\n"..
        "sum += texture2D(u_texture, v_texCoord + 3.0 * pix_size) * 0.09;\n"..
        "sum += texture2D(u_texture, v_texCoord + 4.0 * pix_size) * 0.05;\n"..
        "gl_FragColor = sum;\n"..
        "}",

        --變灰
        psGrayShader = "#ifdef GL_ES \n" ..
        "precision mediump float; \n" ..
        "#endif \n" ..
        "varying vec4 v_fragmentColor; \n" ..
        "varying vec2 v_texCoord; \n" ..
        "void main(void) \n" ..
        "{ \n" ..
        "vec4 c = texture2D(CC_Texture0, v_texCoord); \n" ..
        "gl_FragColor.xyz = vec3(0.3*c.r + 0.15*c.g +0.11*c.b); \n"..
        "gl_FragColor.w = c.w; \n"..
        "}" ,

        --移除變灰
        psRemoveGrayShader = "#ifdef GL_ES \n" ..
        "precision mediump float; \n" ..
        "#endif \n" ..
        "varying vec4 v_fragmentColor; \n" ..
        "varying vec2 v_texCoord; \n" ..
        "void main(void) \n" ..
        "{ \n" ..
        "gl_FragColor = texture2D(CC_Texture0, v_texCoord); \n" ..
        "}" ,

        pszFragSource1 = "#ifdef GL_ES \n" ..
        "precision mediump float; \n" ..
        "#endif \n" ..
        "varying vec4 v_fragmentColor; \n" ..
        "varying vec2 v_texCoord; \n" ..
        "void main(void) \n" ..
        "{ \n" ..
        "vec4 c = texture2D(CC_Texture0, v_texCoord); \n" ..
        "gl_FragColor.xyz = vec3(0.3*c.r + 0.15*c.g +0.11*c.b); \n"..
        "gl_FragColor.w = c.w; \n"..
        "}" ,

}

function ShaderEffect:init()
    local pGrayProgram = cc.GLProgram:createWithByteArrays(self.vertDefaultSource,self.psGrayShader)
    pGrayProgram:bindAttribLocation(cc.ATTRIBUTE_NAME_POSITION,cc.VERTEX_ATTRIB_POSITION)
    pGrayProgram:bindAttribLocation(cc.ATTRIBUTE_NAME_COLOR,cc.VERTEX_ATTRIB_COLOR)
    pGrayProgram:bindAttribLocation(cc.ATTRIBUTE_NAME_TEX_COORD,cc.VERTEX_ATTRIB_FLAG_TEX_COORDS)
    pGrayProgram:link()
    pGrayProgram:use()
    pGrayProgram:updateUniforms()
    cc.GLProgramCache:getInstance():addGLProgram(pGrayProgram,"pGrayProgram")


    local pRemoveGrayProgram = cc.GLProgram:createWithByteArrays(self.vertDefaultSource,self.psRemoveGrayShader)
    pRemoveGrayProgram:bindAttribLocation(cc.ATTRIBUTE_NAME_POSITION,cc.VERTEX_ATTRIB_POSITION)
    pRemoveGrayProgram:bindAttribLocation(cc.ATTRIBUTE_NAME_COLOR,cc.VERTEX_ATTRIB_COLOR)
    pRemoveGrayProgram:bindAttribLocation(cc.ATTRIBUTE_NAME_TEX_COORD,cc.VERTEX_ATTRIB_FLAG_TEX_COORDS)
    pRemoveGrayProgram:link()
    pRemoveGrayProgram:use()
    pRemoveGrayProgram:updateUniforms()
    cc.GLProgramCache:getInstance():addGLProgram(pRemoveGrayProgram,"pRemoveGrayProgram")
end


function ShaderEffect:addGrayNode(node)
    --變灰的
    local pProgram = cc.GLProgram:createWithByteArrays(self.vertDefaultSource,self.psGrayShader)
    pProgram:bindAttribLocation(cc.ATTRIBUTE_NAME_POSITION,cc.VERTEX_ATTRIB_POSITION)
    pProgram:bindAttribLocation(cc.ATTRIBUTE_NAME_COLOR,cc.VERTEX_ATTRIB_COLOR)
    pProgram:bindAttribLocation(cc.ATTRIBUTE_NAME_TEX_COORD,cc.VERTEX_ATTRIB_FLAG_TEX_COORDS)

    pProgram:link()
    pProgram:use()
    pProgram:updateUniforms()
    node:setGLProgram(pProgram)
end

function ShaderEffect:removeGrayNode(node)

    local pProgram = cc.GLProgram:createWithByteArrays(self.vertDefaultSource,self.psRemoveGrayShader)
    pProgram:bindAttribLocation(cc.ATTRIBUTE_NAME_POSITION,cc.VERTEX_ATTRIB_POSITION)
    pProgram:bindAttribLocation(cc.ATTRIBUTE_NAME_COLOR,cc.VERTEX_ATTRIB_COLOR)
    pProgram:bindAttribLocation(cc.ATTRIBUTE_NAME_TEX_COORD,cc.VERTEX_ATTRIB_FLAG_TEX_COORDS)

    pProgram:link()
    pProgram:use()
    pProgram:updateUniforms()
    node:setGLProgram(pProgram)
end

function ShaderEffect:AddBlur(node)
    local fileUtiles = cc.FileUtils:getInstance()
    local vertSource = self.vertDefaultSource
    local fragSource = fileUtiles:getStringFromFile("shaders/example_Blur.fsh")
    local pProgram = cc.GLProgram:createWithByteArrays(vertSource, fragSource)
    node:setGLProgram(pProgram)
    --local glprogramstate = cc.GLProgramState:getOrCreateWithGLProgram(pProgram)
    local size = node:getTexture():getContentSizeInPixels()
    node:getGLProgramState():setUniformVec2("pix_size", size)
    node:getGLProgramState():setUniformFloat("blurRadius", 20.0);
    node:getGLProgramState():setUniformFloat("sampleNum", 0.1);
--    
--    pProgram:bindAttribLocation(cc.ATTRIBUTE_NAME_POSITION,cc.VERTEX_ATTRIB_POSITION)
--    pProgram:bindAttribLocation(cc.ATTRIBUTE_NAME_COLOR,cc.VERTEX_ATTRIB_COLOR)
--    pProgram:bindAttribLocation(cc.ATTRIBUTE_NAME_TEX_COORD,cc.VERTEX_ATTRIB_FLAG_TEX_COORDS)
    pProgram:link()
    pProgram:use()
    pProgram:updateUniforms()
end

-- 按鈕置灰
function ShaderEffect:addGrayButton(button)
    if button == nil then
        cclog("param can't be nil")
        return
    end
    -- 遍歷按鈕的子節點
    --[[local children = button:getChildren()
    if children and #children>0 then
        for _, aSprite in ipairs(children) do
            if aSprite.getVirtualRenderer then
                self:addGrayNode(aSprite:getVirtualRenderer():getSprite())        
            elseif aSprite.setGLProgram then
                self:addGrayNode(aSprite)
            end
        end
    end
    ]]
    -- 按鈕本身
    local sprite9 = button:getVirtualRenderer()     
    local sprite = sprite9:getSprite()
    self:addGrayNode(sprite)
end

-- 按鈕返回正常
function ShaderEffect:removeGrayButton(button)
    if button == nil then
        cclog("param can't be nil")
        return
    end
    -- 按鈕本身
    local sprite9 = button:getVirtualRenderer()   
    local sprite = sprite9:getSprite()
    self:removeGrayNode(sprite)
end

--遍歷變灰
function ShaderEffect:setGrayAndChild(node,isNotRecursive)
    if node == nil then
        return
    end
    local array = node:getSpriteChildren()
    for key, var in pairs(array) do

        var:setGLProgram(cc.GLProgramCache:getInstance():getGLProgram("pGrayProgram"))
    end
    if isNotRecursive ~= true then
        --children
        local array = node:getChildren()
        for key, var in pairs(array) do
            self:setGrayAndChild(var)
        end
    end
end

--遍歷取消變灰
function ShaderEffect:setRemoveGrayAndChild(node,isNotRecursive)
    if node == nil then
        return
    end
    local array = node:getSpriteChildren()
    for key, var in pairs(array) do
        var:setGLProgram(cc.GLProgramCache:getInstance():getGLProgram("pRemoveGrayProgram"))
    end
    if isNotRecursive ~= true then
        --children
        local array = node:getChildren()
        for key, var in pairs(array) do
            self:setRemoveGrayAndChild(var)
        end
    end

end

ShaderEffect:init()

return ShaderEffect

使用 
local ShaderEffect = require("ShaderEffect")  --載入

ShaderEffect:setGrayAndChild(Button)  --置灰
ShaderEffect:setRemoveGrayAndChild(Button)  --取消置灰

2c++

Lua端程式碼需要呼叫C++端擴充套件的getSpriteChildren()介面(得到控制元件的精靈物件)，下面就來看看C++端怎麼來擴充套件這個介面(這裡以Button置灰為例，其它控制元件思路一樣)：

1，首先在基類CCNode.h中新增這個介面，保證其它控制元件(沒有實現的)至少不會執行出錯。

virtual Vector<Node*> getSpriteChildren() { Vector<Node*> vec; return vec; } //@cxx

2，既然以按鈕控制元件為例，就先找到UIButton.h中表示按鈕精靈資訊的成員，發現是這4個變量表示：
Scale9Sprite* _buttonNormalRenderer; //初始狀態圖片 
Scale9Sprite* _buttonClickedRenderer; //點選狀態圖片 
Scale9Sprite* _buttonDisableRenderer;//擡起後圖片 
Label* _titleRenderer; //按鈕裡文字
從這裡可以看出，要得到按鈕的所有精靈，還得去Scal9Sprite類和Label類中修改，先上UIButton類中getSpriteChildren()的實現： 
Vector<Node*> Button::getSpriteChildren()
{
    Vector<Node*> vec;
    if (_buttonNormalRenderer) {
        vec.pushBack(_buttonNormalRenderer->getSpriteChildren());
    }
    if (_buttonClickedRenderer) {
        vec.pushBack(_buttonClickedRenderer->getSpriteChildren());
    }
    if (_buttonDisableRenderer) {
        vec.pushBack(_buttonDisableRenderer->getSpriteChildren());
    }
    if (_titleRenderer) {
        vec.pushBack(_titleRenderer->getSpriteChildren());
    }
    return vec;
}

3，上面按鈕圖片資源資料既然是返回的Scale9Sprite物件的指標，那我們就得去這個類中得到精靈資訊，具體getSpriteChildren()的實現如下：
Vector<Node*> Scale9Sprite::getSpriteChildren()
    {
        Vector<Node*> vec;
        if (_scale9Image) {
            vec.pushBack(_scale9Image);
        }
        if (_topLeftSprite) {
            vec.pushBack(_topLeftSprite);
        }
        if (_topSprite) {
            vec.pushBack(_topSprite);
        }
        if (_topRightSprite) {
            vec.pushBack(_topRightSprite);
        }
        if (_leftSprite) {
            vec.pushBack(_leftSprite);
        }
        if (_centerSprite) {
            vec.pushBack(_centerSprite);
        }
        if (_rightSprite) {
            vec.pushBack(_rightSprite);
        }
        if (_bottomLeftSprite) {
            vec.pushBack(_bottomLeftSprite);
        }
        if (_bottomSprite) {
            vec.pushBack(_bottomSprite);
        }
        if (_bottomRightSprite) {
            vec.pushBack(_bottomRightSprite);
        }
        return vec;
    }

4，按鈕的文字資料返回的是Label物件指標，同樣，我們得去Label類中實現getSpriteChildren()得到文字的精靈，程式碼如下： 
Vector<Node*> Label::getSpriteChildren()
{
    Vector<Node*> vec;
    if (_textSprite) {
        vec.pushBack(_textSprite);
    }
    return vec;
}

5，好，這樣按鈕的4個相關精靈資料都能得到了，接下來就是tolua繫結到Lua端呼叫，如何繫結，前面章節有介紹。(Lua Shader那邊反正是要最終得到 Sprite* 精靈物件來進行處理，遇到間接的紋理物件就一層一層的剝吧…)

相關推薦

cocos變灰圖

轉載出處：http://blog.csdn.net/u010223072/article/details/49640147 本人使用cocos2dx-3.3 前言：遊戲中有很多按鈕控制元件，它們一般會有選中和未選中2種狀態。我們如果要區分這兩種狀態的表現，很多時候是

UGUI 圖片去色，變灰度圖

UGUI 圖片將其他顏色去除，顯示灰色圖片 本例適用於 UGUI 一般專案中會有一些圖示，當你擁有該圖示顯示為彩色圖示，一般專案中最佔資源的就是圖片，不允許新增一張彩色圖片，一張灰色圖片，必須通過一些方法將彩色圖示的顏色去掉，獲取圖示的灰色值。 UGUI 自帶了一個Shad

cocos按鈕變灰

           之前寫過一篇關於按鈕變灰的。就是使用著色器。我們可以再建立按鈕的時候，使用著色器建立按鈕禁用狀態（把圖片灰質）；            但在使用著色器時，不能開啟scale9Enable。因為開啟九宮格後_brightStyle = BrightSty

Unity圖片變灰的方式

灰度 約定 bar str data mod main 又一 lai http://www.tuicool.com/articles/Vruuqme NGUI中的Button差點兒是最經常使用到的控件之中的一個，而且能夠組合各種組件（比方UIButtonColor，UI

CMenu類中禁用/變灰某一項

sof head 使用 窗口 contain codes mce align ide CMenu::EnableMenuItem 啟用、 禁用，或變暗的菜單項。 UINT EnableMenuItem( UINT nIDEnableItem, UINT nEna

Unity按鈕禁用和變灰

table false true class TE AR ble pre .get this.GetComponent<Button>().enabled = false;//禁用按鈕 如果需要將按鈕變灰，則需要另外處理 最近才發現一個禁用和變灰的按鈕，這幾

OCX的js按鈕變灰

<!doctype html> <html> <head> <meta charset="utf-8"> <title>按鈕啟用和禁用</title> <script type="text/javascript">

Qt點滴 QLabel Disabled時 圖片變灰

void QLabel::paintEvent(QPaintEvent *) {     ....... #endif     if (d->pixmap && !d->pixmap->isNull()

通過Nginx使全站頁面變灰

      摘要：某大神的部落格說“在Nginx負載均衡伺服器上，利用sub_filter指令在輸出的HTML中增加一行：<style type="text/css">html {filter:progid:DXImageTransform.Microsoft.Bas

Android Studio JNI (影象變灰過程）使用cmake （1）

Android Studio JNI (影象變灰過程）使用cmake （1） 1.開始建立第一個AS 工程； 2.選擇完畢後下一步 3.再下一步後直接點選完成，然後我們開始執行一下，即可看到Hello from JNI 4.下面我們看下CMakeLists.txt檔案 CMak

Opencv學習筆記（1）---------Codeblocks執行按鈕變灰

水母魚要學opencv了，決定把自己遇到的一些問題記錄下來，就當做一個勉勵吧，也幫大家少走一點彎路。 一遇見問題 今天水母魚就遇見了一個問題，發現有時候Codeblocks執行之後因為錯誤卡住了，生成和執行按鈕全部灰掉， 點執行會顯示編譯器還在執行中，直接關閉codeb

js中實現button按鈕變灰不可用，可用的方法

按鈕變灰不可用方法：document.getElementById("crop").setAttribute("disabled", true); 按鈕可用方法：document.getElementById("crop").removeAttribute("disabled"); 按

全國哀悼日 網站變灰裝 附程式碼

根據國務院檔案，全國哀悼日，在此期間，全國和各駐外機構下半旗誌哀，停止公共娛樂活動，外交部和我國駐外使領館設立弔唁簿。屆時汽車、火車、艦船鳴笛，防空警報鳴響。 中國站長站將整站換成素裝。並建議中國所有站點更換為素裝。為方便站點哀悼，特提供素裝程式碼，以表哀悼。以下為全站CSS程式碼。html { filter

idea建立maven工程專案變灰問題結局

右鍵”父專案”–>選擇”open Module Settings”–>選擇”modules”–>點選”+”號 選擇Import Module 選擇變灰專案的”pom.xml”檔案 點選”ok”–>”next”–>選擇 一路下一步搞

VS2005 wince專案 Debug按鈕不可用（變灰）

在VS2005中打開了一個別人的wince專案，想執行看看效果，發現Debug按鈕是灰色的，不可用。 思考了一會兒，找到了辦法。 Debug後面的下拉框中，選擇“配置管理器”  "活動解決方案平臺“中選擇“新建”，選中可用的平臺即可。 Debug按鈕再次可

android imageview中設定圖片變灰

原文連結 http://blog.csdn.net/chaozhidan/article/details/51482895 將ImageView變成灰色ColorMatrix matrix = new ColorMatrix();matrix.setSaturation(

android imageview中設定圖片變灰

原文連結 http://blog.csdn.net/chaozhidan/article/details/51482895   將ImageView變成灰色 ColorMatrix matrix = new ColorMatrix(); matrix.setSaturat

網站變灰方法,FLASH變灰

網站變灰方法:在樣式表裡面加一條html{filter:gray;color:gray;} FLASH變灰:在OBJECT之間還要加兩條<param value="false" name="menu"/><param value="opaque" name=

解決Android7.0下沉浸式狀態列變灰問題

1.緒論 現在基本上所有的應用都會去實現沉浸式狀態列，這個是應用的標配，如果你開發的應用沒有，那這個吐槽點就多了，“這美工有審美觀麼”“程式猿這麼菜，沉浸式都不會？”….. 咳咳….. 開個玩笑啊，各有各的設計思想，不能怪程式猿。 2.問題 那麼說到沉浸式

Idea聚合專案的module變灰、多root問題

解決Module變灰 1、右鍵父專案–>選擇open Module Settings 2、點選+號，Import Module,選擇灰色Module的pom.xml檔案匯入 解決多root