【剑与家园】地图势力描边实现讨论

最近公司在做一个slg项目.一开始很纠结选择什么引擎去做,鉴于自己有过cocos2dx-lua和早起cocos2dx经验,但是感觉cocos2dx在流程方面不太适合现在的开发流。还好cocos新出的引擎creator非常奈斯,所以果断尝试。版本始终是2.0+。

我们策划是那种脑洞特别开的,各种效果都要求和乱世王者,剑与家园匹配,所以很多功能很是头疼,比如剑与家园世界地图缩略后会看到势力范围的描边,苦思冥想,猜测可以用以下方式尝试,不足之处望大家一起探讨。

1.美术把不规则地块图切出,底色白色。
2.根据势力情况,染色。
3.拷贝整个地块纹理。
4.shader把颜色交界处做内描边。
5.设置透明度。

这里先写了个shader实现了颜色的内描边,为了测试描边色使用了白色,让美术出了一个类似七巧板的图。

原图:

shader描边后的图:

主要逻辑就是取每个像素上下左右临近像素的色差,在一定阈值内不改色,否则改成描边色。
放出片元着色器代码:
`
uniform sampler2D texture;
uniform vec3 outline_color;
uniform vec2 texture_size;
varying vec2 uv0;

int isNeedStroke(vec3 cur_color, float s, float c) 
{
    int w = 0;
    vec3 neighbor_color = texture2D(texture, vec2(uv0.x + s * 4.0 / texture_size.x, uv0.y + c * 4.0 / texture_size.y)).xyz;
    vec3 dis = abs(cur_color - neighbor_color);
    if (dis.r > 0.3 || dis.g > 0.3 || dis.b > 0.3) {
        w = 1;
    }
    return w;
}

void main()
{
    vec4 cur_gl_frag_color = texture2D(texture, uv0);

    int stroke_weight = 0;
    stroke_weight += isNeedStroke(cur_gl_frag_color.xyz, 1.0, 0.0);
    stroke_weight += isNeedStroke(cur_gl_frag_color.xyz, 0.0, -1.0);
    stroke_weight += isNeedStroke(cur_gl_frag_color.xyz, -1.0, 0.0);
    stroke_weight += isNeedStroke(cur_gl_frag_color.xyz, 0.0, 1.0);

    if (stroke_weight > 0)
    {
        cur_gl_frag_color.rgb = outline_color;
        cur_gl_frag_color.a = 1.0;
        gl_FragColor = cur_gl_frag_color;
        return;
    }

    gl_FragColor = cur_gl_frag_color;
}
`
7赞

支持一下

支出一下,以后可能拥得到

不错的想法!

mark

战略mark

大括号前面回车:astonished:

管理员表示mark

1234

计算邻点颜色这块没看懂,乘4是啥逻辑
uv0.x + s * 4.0 / texture_size.x

战略性mark