Cocos2d 使用shader创建圆角图片，以及添加投影

最新推荐文章于 2025-07-07 09:55:45 发布

白心

最新推荐文章于 2025-07-07 09:55:45 发布

阅读量5.5k

点赞数

CC 4.0 BY-SA版权

分类专栏：脚本文章标签： cocos2d 性能图片

本文链接：https://blog.youkuaiyun.com/zhaoxiaofeng44/article/details/72871043

本文介绍了在Cocos2d中如何使用shader为图片创建圆角和添加投影，以解决性能问题。传统的mask方法在特定设备上可能导致性能下降，通过shader直接渲染可以提高效率并避免粗糙边角。文章提供了代码示例，并讨论了如何通过统一变量设置圆角半径和投影边距。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近在使用cocos creater编写一个应用，算是深入了解了下cocos creater，总体评估只能说令人遗憾，性能问题很是明显，想到现在市面上还有许多团队使用cocos2d-js开发游戏，确实前景令人比较担忧。

项目中用到一个图片列表的展示框，图片本身是矩形，显示的时候需要圆角，通常使用mask遮罩直接修出圆角，但是实际项目中发现，4列2行八张圆角，直接20帧（性能感人。。。），额，可能也是TV端盒子本身性能比较差，因此，想直接使用shader，渲染图片时直接把图片绘制成圆角。

这里写图片描述

思路如下：

1.取纹理坐标的xy，按照需要的圆角大小r，划分出图片的四个角。
2.如果当前点不在四个角的区域，直接渲染该点。
3.如果当前点在四个角里，计算当前点与圆角中心的距离d，如果d<r,则绘制，反之忽略。
4.为了消除圆角的像素锯齿，可以留出一部分区域z做淡化，在r-z<d<r,绘制像素，其 alpha为 (x - (r-z))/z 。

代码块

代码里的临时变量比较怪，是从添加阴影的代码改回来的，需要的话请自行优化：

varying vec4 v_fragmentColor;
varying vec2 v_texCoord;

void main()
{   
    float edge = 0.04;
    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)) );
        }