简易2d光照 [免费]

相关链接

• 简易2d光照-商城链接

• 简易2d光照-预览视频

• 简易2d光照-预览地址

• 简易2d光照-代码仓库

2025/09/29 更新

效果预览

手机测试FPS可达120。商店审核中，可看代码仓库

基础原理

为每一个光源生成对应的光照区域mesh，使用RenderTexture记录全部光照区域mesh。之后就可以对应修改顶层图片的透明度以达到想要的效果了。

实现过程遇到的问题

• 计算光照区域mesh所需要顶点数据的射线检测，就算已经360采样也依旧出现异常区域。

  • 

  • 解决方案. 将光源位置到光照区域内遮挡物顶点的角度加入射线检测中。

• 仅用1张RenderTexture记录光照区域，某些区域的被遮挡关系会丢失。

  • 

  • 解决方案: 让光照区域mesh直接带透明度数据，利用加法混合即可模拟多光源的叠加效果

题外话

这玩意有人用到项目的吗？

参考链接

视线和光线：如何创建 2D 视觉范围效果
Cocos Creator 2D可视化光照插件技术分享

2025/08/28

效果图

1040×587

实现基础

• 1.顶层盖了一张图片
• 2.光源位置挖孔
• 3.线段相交检测实现遮挡

注意事项

• 目前仅在 编辑器预览、网页预览、android测试过
• 障碍物线段有一定限制，没过多测试
• 推荐使用 @soida 的Light2D光照系统，功能完善，效果更佳，性能优

被@收到通知了,赶紧过来支持一波.

免费？遥遥领先

感谢大佬支持

markk

2025/09/29 更新 坐等国庆放假了

很强很强！

2d光照.rar (359.2 KB)

for (int c_i = 0; c_i < light_max_num; c_i++) {

if (lights[c_i].x <= -1.0) {

   break;

}

应该改为
for (int c_i = 0; c_i < light_max_num; c_i++) {

if (lights[c_i].x <= -1.0) {

    continue;;

}

markk

因为移动，灯1屏幕坐标 <= -1，灯2应该还显示的。shader中这里不应该用-1标记结束。 改continue会出现隐藏或者删除某些灯后还在（自己改传入材质列表后面都是-1也行）。

遥遥领先