Godot-StartUP

创建于:2018-07-28

创建人: Justus

44 信息 154 成员
讨论基于Godot以及Unity引擎的游戏开发经验,理论和最佳实践。共享一些通用思路以启发另一种生产工具中的实践。独立开发群QQ: 122017359

Godot使用Light2D实现遮罩效果

logoss 2018-08-12

先来看看效果:

Image title

用鼠标拖动圆,数字和血手印只会显示在圆的范围内。

用light2D很简单能做出这个效果。

这是demo中用到的素材,如图

Image title

首先我们新建一个项目,导入素材,新建场景,新建sprite,把背景放进去

Image title

然后放入图片2333,这时候2333是正常显示的

Image title

在2333的属性面版Material这里选择新建CanvasItemMaterial

Image title

新建后点进去,设置CanvasItemMaterial,把LightMode改成Light Only

Image title

然后我们会发现2333已经看不到了,应为设置了LightOnly,2333只会在光照时显示,如图

Image title

接下来我们新建一个light2D,Texture设置为白色的圆

Image title

Image title

效果如图:

Image title

这时候还是显示白色的圆。我们更改一下光照的Mode为Mix,效果就出来了

Image title

Image title

不过仔细观察会发现,光照不只是照到了2333,也照到了背景的墙壁,和背景的墙壁混合产生了一个圆形的边缘。

如何才能让light2d只照到2333,而不照到背景呢?

答案是LightMask

选中2333,把LightMask设置成第二层,如图。

Image title

选中Light2D,把ItemCullMask设置成第二层

Image title

由于背景墙壁LightMask是默认的第一层,所以light2d只会照到2333.

如图,效果很不错

Image title

这时候我们就可以拖动light2d来观察了

现在我们来给他加上黑色边框

新建sprite,把素材黑圆边框放进去,把light2d拉到黑圆边框下面

Image title

把light2d的位置设为0,0

Image title

这样就完成了

Image title

源文件和素材我放到百度网盘了,有兴趣的可以自己做一下

https://pan.baidu.com/s/1s6AKTfCpgxiqrp4QP-oe0Q

(转发自:原日志地址

近期喜欢的会员

 

加入 indienova

  • 建立个人/工作室档案
  • 建立开发中的游戏档案
  • 关注个人/工作室动态
  • 寻找合作伙伴共同开发
  • 寻求线上发行
  • 更多服务……
登录/注册