quick中使用JPG+mask文件制作刀塔传奇中的遮罩效果

最新推荐文章于 2021-03-18 04:40:58 发布

被逼叫小乱

最新推荐文章于 2021-03-18 04:40:58 发布

阅读量1k

点赞数

分类专栏： cocos quick-cocos

cocos 同时被 2 个专栏收录

62 篇文章 0 订阅

订阅专栏

quick-cocos

38 篇文章 0 订阅

订阅专栏

大家都知道，刀塔传奇中使用了大量的jpg图片加mask遮罩来达到图片透明的效果。
这样做最大的好处就是包小，因为jpg格式比png格式小太多，尤其是大图，即便加上mask文件也小很多，因为mask文件的特殊性，其大小真的小的可怜！
首先，我们需要一张jpg图片和一个mask文件，mask文件如何制作呢？请参考下面的文章，看了文章之后，你也就知道为啥我说mask文件的真的很小了！
http://www.cnblogs.com/U-tansuo/p/JPG-Mask.html?ADUIN=25584762&ADSESSION=1422190686&ADTAG=CLIENT.QQ.5389_.0&ADPUBNO=26441
现在，我们就有两个文件了，我的两个文件是这个样子滴：
发现传上来的图很容就挂了啊，大家自行去一楼下载附件，所用资源都再里面

有了这两文件之后，我们还需要一个shader文件，内容如下：
#ifdef GL_ES
precision mediump float;
#endif
varying vec4 v_fragmentColor;
varying vec2 v_texCoord;
uniform sampler2D u_mask_texture;

void main() {
vec4 mask_FragColor = texture2D(u_mask_texture, v_texCoord);
gl_FragColor = v_fragmentColor*texture2D(CC_Texture0, v_texCoord);
gl_FragColor.a = mask_FragColor.r;
}

三个后面会传个附件。

default.vsh:

attribute vec4 a_position;
attribute vec2 a_texCoord;
attribute vec4 a_color;

#ifdef GL_ES
varying lowp vec4 v_fragmentColor;
varying mediump vec2 v_texCoord;
#else
varying vec4 v_fragmentColor;
varying vec2 v_texCoord;
#endif

void main()
{
gl_Position = CC_PMatrix * a_position;
v_fragmentColor = a_color;
v_texCoord = a_texCoord;
}

有了这三个文件后在你的MainScene中添加如下代码：

 
        self.shipBody = display.newSprite( 
        "b1302.jpg" 
        ):addTo(self) 
       
        self.shipBody:setPosition(display.cx, display.cy) 
       
        local 
         fileUtiles = cc.FileUtils:getInstance() 
       
        local 
         defaultVert = fileUtiles:getStringFromFile( 
        "default.vsh" 
        ) 
       
        local 
         maskFrag = fileUtiles:getStringFromFile( 
        "mask.fsh" 
        ) 
       
        local 
         glprogram  = cc.GLProgram:createWithByteArrays(defaultVert, maskFrag) 
       
        local 
         glprogramstate = cc.GLProgramState:getOrCreateWithGLProgram(glprogram) 
       
        cc.Texture2D:setDefaultAlphaPixelFormat(cc.TEXTURE2_D_PIXEL_FORMAT_I8) 
       
        local 
         texture = cc.Director:getInstance():getTextureCache():addImage( 
        "b1302_mask.png" 
        ) 
       
        cc.Texture2D:setDefaultAlphaPixelFormat(cc.TEXTURE2_D_PIXEL_FORMAT_RGB_A8888) 
       
        glprogramstate:setUniformTexture( 
        "u_mask_texture" 
        , texture) 
       
        self.shipBody:setGLProgramState(glprogramstate)

代码很简单，就是加载shader然后设置mask文件，再赋给精灵

需要注意的是加载mask的时候设置下加载的格式，因为mask只是一个位图，所以用I8格式加载就好。关于如何使用指定格式加载图片，参考我前面的帖子
http://www.cocoachina.com/bbs/read.php?tid-283098.html
总的来说代码很简单，没啥特别的地方。
另外推荐一篇文章，可以阅读以下，其中提到了如何在C++中直接做处理。

http://www.hippyless.com/blog/?p=245

http://www.cocoachina.com/bbs/read.php?tid-284720.html