做编辑器真是男

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

This topic created in 2017 days ago, the information mentioned may be changed or developed.

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

网格线

编辑器

Unity

sprite

2 replies • 2020-11-05 17:50:37 +08:00

lamada

Nov 5, 2020

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

Nov 5, 2020

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