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

cocos creator 扑克搓牌效果

leehong0704

1196人浏览 · 2022-11-14 14:37:24

leehong0704 · 2022-11-14 14:37:24 发布

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

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

游戏开发技术专区

这里是一个专注于游戏开发的社区，我们致力于为广大游戏爱好者提供一个良好的学习和交流平台。我们的专区包含了各大流行引擎的技术博文，涵盖了从入门到进阶的各个阶段，无论你是初学者还是资深开发者，都能在这里找到适合自己的内容。除此之外，我们还会不定期举办游戏开发相关的活动，让大家更好地交流互动。加入我们，一起探索游戏开发的奥秘吧！

更多推荐