美文网首页
cocos2d-lua shader 高效率做圆角图标

cocos2d-lua shader 高效率做圆角图标

作者: 自由快挂 | 来源:发表于2017-11-09 12:18 被阅读142次

注意事项,必须应用在一个 sprite 节点上:

function shaders.roundNode( head,edge )

  local type = tolua.type(head)
  if type ~= 'cc.Sprite' then
    print('**WARNING**: [shaders.roundNode] node should be cc.Sprite, but', type)
    return
  end

  local strVertSource = [[
    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;
    }
  ]]

  local strFragSource = [[
  #ifdef GL_ES
  varying lowp vec4 v_fragmentColor;
  varying mediump vec2 v_texCoord;
  #else
  varying vec4 v_fragmentColor;
  varying vec2 v_texCoord;
  #endif

  uniform float u_edge; // 0.1

  void main()
  {
      float edge = u_edge;
      float dis = 0.0;
      vec2 texCoord = v_texCoord;
      if ( texCoord.x < edge )
      {
          if ( texCoord.y < edge )
          {
              dis = distance( texCoord, vec2(edge, edge) );
          }
          if ( texCoord.y > (1.0 - edge) )
          {
              dis = distance( texCoord, vec2(edge, (1.0 - edge)) );
          }
      }
      else if ( texCoord.x > (1.0 - edge) )
      {
          if ( texCoord.y < edge )
          {
              dis = distance( texCoord, vec2((1.0 - edge), edge ) );
          }
          if ( texCoord.y > (1.0 - edge) )
          {
              dis = distance( texCoord, vec2((1.0 - edge), (1.0 - edge) ) );
          }
      }

      if(dis > 0.001)
      {
          float gap = edge * 0.1;
          if(dis <= edge - gap)
          {
              gl_FragColor = texture2D( CC_Texture0,texCoord);
          }
          else if(dis <= edge)
          {
              //gl_FragColor = texture2D( CC_Texture0,texCoord) * (gap - (dis - edge + gap))/gap;  // iOS 上四个角会闪烁
              gl_FragColor = vec4(0,0,0,0);// 直接设置透明
          }
      }
      else
      {
          gl_FragColor = texture2D( CC_Texture0,texCoord);
      }
  }
  ]]

  local shaderKey = 'shaderRound'
  local glCache = cc.GLProgramCache:getInstance()
  local glProgram = glCache:getGLProgram(shaderKey)
  if not glProgram then
    glProgram = cc.GLProgram:createWithByteArrays(strVertSource, strFragSource)
    glProgram:link()
    glProgram:updateUniforms()
    glCache:addGLProgram(glProgram, shaderKey)
  end
  if not glProgram then print('glProgram is nil') return end

  local glProgramState = cc.GLProgramState:getOrCreateWithGLProgram(glProgram)
  if not glProgramState then print('glProgramState is nil') return end

  edge = edge or 0.1
  glProgramState:setUniformFloat('u_edge', 0.1)
  head:setGLProgramState(glProgramState)
end

实例:
icon 类型是 ImageView
shaders.roundNode(icon:getVirtualRenderer():getSprite())

已放到仓库中:
https://github.com/c0i/cocos2dx-lite/blob/dev/src/packages/shaders.lua

参考:
http://blog.csdn.net/zhaoxiaofeng44/article/details/72871043
http://forum.cocos.com/t/lua-opengl-shader-scale9sprite/14556
http://www.voidcn.com/article/p-amjyuvbh-ta.html
http://www.voidcn.com/article/p-tlstkqdp-cs.html
http://blog.csdn.net/Register_man/article/details/77980497

相关文章

  • cocos2d-lua shader 高效率做圆角图标

    注意事项,必须应用在一个 sprite 节点上: 实例:icon 类型是 ImageViewshaders.rou...

  • 一些总结

    1. 当工程的 2. 应用图标有白边.应用图标 AppIcon 不用做圆角处理,苹果会自动做圆角处理。如果自己做圆...

  • APP 图标和尺寸

    图标尺寸 注意: iOS所有图标的圆角效果都是由系统生成的,给的图标本身不能是圆角的。 桌面图标app icon...

  • iOS App图标和启动画面尺寸

    注意:iOS所有图标的圆角效果由系统生成,给到的图标本身不能是圆角的。 1. 桌面图标 (app icon)###...

  • 学习笔记:iOS App图标和启动画面尺寸

    注意:iOS所有图标的圆角效果由系统生成,给到的图标本身不能是圆角的。 桌面图标 (app icon)for iP...

  • iOS App图标和启动画面尺寸

    注意:iOS所有图标的圆角效果由系统生成,给到的图标本身不能是圆角的。 1. 桌面图标 (app icon) fo...

  • iOS App图标和启动画面尺寸

    注意:iOS所有图标的圆角效果由系统生成,给到的图标本身不能是圆角的。 1. 桌面图标 (app icon) fo...

  • IOS APP图标和启动尺寸

    注意:iOS所有图标的圆角效果由系统生成,给到的图标本身不能是圆角的。 1. 桌面图标 (app icon) fo...

  • iOS App图标和启动画面尺寸无标题文章

    注意:iOS所有图标的圆角效果由系统生成,给到的图标本身不能是圆角的。 1. 桌面图标 (app icon) fo...

  • ios启动图标规范

    注意:iOS所有图标的圆角效果由系统生成,给到的图标本身不能是圆角的。 1. 桌面图标 (app icon) fo...

网友评论

      本文标题:cocos2d-lua shader 高效率做圆角图标

      本文链接:https://www.haomeiwen.com/subject/izypmxtx.html