cocos 四角搓牌效果（shader版本）

游戏搓牌效果是一种很常见的扑克游戏的特效。先上效果图

unity poker effect

 

 

 

 特效动画用shader实现 只需要制作 扑克正面和背面图片就可以轻松实现动画

代码如下:

1 扑克背面shader

  void main () {
    vec4 o = vec4(1, 1, 1, 1);

    #if USE_TEXTURE
      CCTexture(texture, v_uv0, o);
    #endif

    
    bool hidden = false;
    //隐藏右上
    if(type == 1)
    {
      if(v_uv0.x+v_uv0.y < 1.0 - val)
      {
        hidden  = true;
      }
    }
    //隐藏左上
    if(type == 2)
    {
      if((v_uv0.x +v_uv0.y) > 1.0&&(v_uv0.y + val) < v_uv0.x)
      {
        hidden  = true;
      }
      if((v_uv0.x +v_uv0.y) < 1.0&&(v_uv0.y + val) < v_uv0.x)
      {
          hidden  = true;
      }
    }
    //隐藏左下
    if(type == 3)
    {
      if((v_uv0.x +v_uv0.y) < 1.0&&(v_uv0.x + val)< v_uv0.y)
      {
        hidden  = true;
      }
      if((v_uv0.x +v_uv0.y) > 1.0&&(v_uv0.x + val) < v_uv0.y)
      {
          hidden  = true;
      }
    }
    //隐藏右下
    if(type == 4)
    {
      if( v_uv0.x+v_uv0.y > 1.0 + val) 
      {
        hidden  = true;
      }
    }
    

    //剔除隐藏
    if(hidden)
    {
       o.a = 0.0;
    }
    
    o *= v_color;

    ALPHA_TEST(o);



    #if USE_BGRA
      gl_FragColor = o.bgra;
    #else
      gl_FragColor = o.rgba;
    #endif
  }

2.扑克正面shader

  void main () {
    vec4 o = vec4(1, 1, 1, 1);
    vec4 shadow_color = vec4(0.7,0.7,0.7,1.0);
    #if USE_TEXTURE
      CCTexture(texture, v_uv0, o);
    #endif

    
    bool hidden = false;
    bool shadow =  false;
    //显示右下
    if(type == 1)
    {
     if( v_uv0.x+v_uv0.y > 1.0 - val) 
      {
        hidden  = true;
      }
    }
    //显示左下
    if(type == 2)
    {
      if((v_uv0.x +v_uv0.y) > 1.0&&(v_uv0.y + val) > v_uv0.x)
      {
        hidden  = true;
      }
      if((v_uv0.x +v_uv0.y) < 1.0&&(v_uv0.y + val) > v_uv0.x)
      {
        hidden  = true;
      }
    }
    //显示右上
    if(type == 3)
    {
      if((v_uv0.x +v_uv0.y) < 1.0&&(v_uv0.x + val) > v_uv0.y)
      {
        hidden  = true;
      }
      if((v_uv0.x +v_uv0.y) > 1.0&&(v_uv0.x + val) > v_uv0.y)
      {
        hidden  = true;
      }
        
      if((v_uv0.x +v_uv0.y) < 1.0&&(v_uv0.x + val) > v_uv0.y - 0.02)
      {
          shadow = true;
      }
      if((v_uv0.x +v_uv0.y) > 1.0&&(v_uv0.x + val) > v_uv0.y - 0.02)
      {
          shadow  = true;
      }
    }
    //显示左上
    if(type == 4)
    {
      if(v_uv0.x + v_uv0.y < 1.0 + val)
      {
        hidden  = true;
      }
    }
    

    //剔除隐藏像素
    if(hidden)
    {
       o.a = 0.0;
    }
    //增加阴影
    if(shadow)
    {
      // o *= shadow_color;
    }

    ALPHA_TEST(o);



    #if USE_BGRA
      gl_FragColor = o.bgra;
    #else
      gl_FragColor = o.rgba;
    #endif
  }

商城源码地址:扑克搓牌特效 | Cocos Store