做编辑器真是男

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

• 请不要在回答技术问题时复制粘贴 AI 生成的内容

这是一个创建于 1525 天前的主题，其中的信息可能已经有所发展或是发生改变。

前端，目前对着 unity 的模式在撸一个基于 pixijs 的 web 2d 游戏编辑器，做着挺有意思，就是有点头秃。
另外想问一下，有什么画网格线比较好的方法？还要适应缩放和平移。感觉上应该不是创建一些 sprite 或者用 canvas 2d api 画出来的，更像是用 shader 的方式传入缩放和位移的参数画出来的。

网格线

编辑器

Unity

sprite

2 条回复 • 2020-11-05 17:50:37 +08:00

lamada

2020-11-05 17:49:21 +08:00

precision mediump float;
varying vec2 vTextureCoord;
uniform sampler2D uSampler;

void main() {
float screen_w = 100.0;
float screen_h = 100.0;
float rest_x = mod(gl_FragCoord.x + 1.0, screen_w);
float rest_y = mod(gl_FragCoord.y + 10.0, screen_h);
vec4 color = texture2D(uSampler, vTextureCoord);
bool line = (rest_x <= 0.5) || (rest_y <= 0.5);
// float alpha = line ? 0.1 : 0.0;
if (line) {
color.x = (color.x + 0.1) / 2.0;
color.y = (color.y + 0.1) / 2.0;
color.z = (color.z + 0.1) / 2.0;
}
gl_FragColor = vec4(color.xyz, color.a);
}

lamada

2020-11-05 17:50:37 +08:00

试着写了一个 demo 还行，给有同样问题的人参考参考