你的位置:首页 > 软件开发 > ASP.net > 【Unity3D】利用Shader以及更改Mesh实现2D游戏的动态阴影效果

【Unity3D】利用Shader以及更改Mesh实现2D游戏的动态阴影效果

发布时间:2015-09-22 14:00:11
最近看到一个非常有趣的益智小游戏,是一个盗贼进入房子偷东西的,其实这种游戏市面上已经很多了,吸引我的是那个类似手电筒的效果,主角走到哪里,光就到哪里,被挡住的地方还有阴影。有点类似策略游戏里的战争迷雾。绞尽脑汁想了一天,终于实现类似的效果,这就给大家分享下。实现这个效果用到的技术 ...

【Unity3D】利用Shader以及更改Mesh实现2D游戏的动态阴影效果

最近看到一个非常有趣的益智小游戏,是一个盗贼进入房子偷东西的,

其实这种游戏市面上已经很多了,吸引我的是那个类似手电筒的效果,

主角走到哪里,光就到哪里,被挡住的地方还有阴影。有点类似策略游戏里的战争迷雾。

绞尽脑汁想了一天,终于实现类似的效果,这就给大家分享下。

实现这个效果用到的技术:

1.Shader实现摄影机透明穿透效果(光照的实现)

2.代码里动态改变mesh(阴影形状的实现)

废话不多说,动手。

 

--------------------------------------------------------------------------------------------

 

仔细观察可以看出,没被光照到的地方是灰色的,照到的地方是彩色的,而且被光照到的地方,

不仅能显示出被光照到后的效果(彩色地面),还能显示出一些物品,比如钥匙,敌人等。

由此可推测,这场景应该是两个层组成的,一个层在下,是彩色地面以及敌人等要隐藏的物品,

另一个层在上,是没有被照亮的时候的地图,然后根据光线进行裁剪,光线能到达的地方,就把

上层该地方裁剪掉,露出底下部分,从而实现“照亮”的效果。

因此我们先按照这种思路搭载场景:

1.题目说的是2D游戏,我这里弄成3D的,其实都所谓,最终的视觉是俯视的,其实也跟2D一样,这里弄成这个角度是方便大家识别我的层次。

Up就是上层,其实什么都没有,就只有一张没被光照的时候的贴图(我这里偷懒直接用一片灰色代替了)

Down就是下层,这里把几乎所有元素都放满了,玩家,敌人,墙等

【Unity3D】利用Shader以及更改Mesh实现2D游戏的动态阴影效果

 

2.接下来将各种类型的对象放到相应的层里去,方便相机筛选(这里的层跟上面提到的层不一样,这里的层是Unity里的定义)

【Unity3D】利用Shader以及更改Mesh实现2D游戏的动态阴影效果 【Unity3D】利用Shader以及更改Mesh实现2D游戏的动态阴影效果

这里我为了方便大家识别,为一种类型的对象设置一个层,实际操作肯定不会这样繁琐的操作的,没必要。

 

3.创建两个相机,让它们分别显示对于的层。

(先无视Mask,这个待会再讲)

【Unity3D】利用Shader以及更改Mesh实现2D游戏的动态阴影效果

【Unity3D】利用Shader以及更改Mesh实现2D游戏的动态阴影效果

如果设置正确,你的显示应该跟我上图是一样的,并且把Up相机的Depth级别设置高点,让它显示在Down相机之前。

 

4.遮挡上层,显示下层。

就是这么个原理

【Unity3D】利用Shader以及更改Mesh实现2D游戏的动态阴影效果

具体至于要怎么遮挡?我一开始想到的是UGUI的Mask组件,后来想想,这个Mask是固定的一张图片,那么只能显示固定的遮挡(虽然可以动态更改,但较麻烦),

后来想,那么就通过网格遮挡,毕竟网格动态改变形状很容易,而且可以通过Shader轻易地实现遮挡效果。

具体如下,先写这么一个Shader:

Shader "Masked/Mask" {  SubShader {    // Render the mask after regular geometry, but before masked geometry and    // transparent things.    Tags {"Queue" = "Geometry+10" }    // Don't draw in the RGBA channels; just the depth buffer    ColorMask 0    ZWrite On    // Do nothing specific in the pass:    Pass {}  }}

原标题:【Unity3D】利用Shader以及更改Mesh实现2D游戏的动态阴影效果

关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

可能感兴趣文章

我的浏览记录