在Unity中模仿游戏《江南百景图》中物体的出现效果

1. 效果
- 1.1. 游戏中的效果
- 1.2. 在Unity中模仿的效果
2. 思路
3. 实现
- 3.1. 图片
- 3.2. shader
- 3.3. 代码
4. 旧的效果
5. 缺点

这两天玩了下《江南百景图》，发现里面物体出现的效果很有意思，想了想有大概的实现思路，于是打算在Unity中尝试实现一下。

1. 效果

1.1. 游戏中的效果

江南百景图录屏

仔细看可以观察到，当一些物体进入摄像机视角之后，并不是直接看到这个物体的。二十先看到绘制出轮廓，然后物品的背景色（黑白），再然后才是完整的物品。并且绘制轮廓和背景色出现的时候是类似于消融的效果。如下图顺序的效果。

1.2. 在Unity中模仿的效果

2. 思路

一开始还在想这个轮廓会不会是用描边做的，但是仔细想想应该不是。一方面这种图片的描边应该做不了在图片内部描边，另一方面，放大之后看到轮廓也是不够清晰，估计就是两层图片。

那么整个思路大概分为两部分：

物体的双层消融效果实现
消融效果的调用

消融效果实现必然是用到shader。而且这里是2D图像，按道理一般应该用sprite，但是sprite的渲染和平时mesh的有些许不太一样，对此我不太了解。所以我还是用3dMesh的形式，用一个quad显示图片。
首先需要两张图片，一张是轮廓，一张是颜色。分别容噪声去消融。以及顺便控制图片的颜色和透明度。然后用以0-1的值对应整个流程，通过控制这一个值来控制图片的显示。

大体思路如下图：

如何去调用的话，目前有几个想法。

通过OnBecameVisible和OnBecameInvisible函数让物体在被摄像机看到之后，开始将value值从0到1变化，物体离开摄像机之后从1到0。
用一张灰度图代表整个地图，在摄像机内的部分缓慢变为1，摄像机外的部分缓慢变成0，然后直接从shader中读取这个灰度图对应坐标的数字用来控制消融。

方法1对于我来说比较容易实现，但是这样子就意味着每一个物体上都需要挂在一个脚本来控制消融。当场景里面有非常多的物体的时候，不知道性能消耗大不大。
方法2的话，自我认为大部分工作都是GPU的，应该效率会高一些。但是我不知道怎么做…

还是用方法1简单做做就好了。

3. 实现

3.1. 图片

轮廓

颜色

整体效果

首先要有用来显示的图片，分图层画好轮廓和颜色。然后分别导出成png格式的图片。
（不会画画，瞎画的）

3.2. shader

我就直接用ShaderGraph连连看了，比较方便。

有一个点，当Remap节点输入值超过InMinMax范围的时候，输出值也会超出OutMinMax的范围，这不是我想要的。于是稍微封装一下搞了一个MyRemap的SubGraph，如下。

整体节点的连接如下，就不细说了。

大体就是用世界坐标（加上了一个物体坐标，免得消融的时候相邻的物体都太连贯了）作为噪声的uv。通过各种加减乘除以及Remap（即将0-1里面每部分的值重新映射到相应的值上）实现消融、透明度、黑白彩色（或者可以叫饱和度？）的变换。并且颜色和alpha分开控制。

大图不太清晰，下面拆分成几部分放图片。

3.3. 代码

代码比较简单，不多说了。不知道OnBecameVisible和OnBecameInvisible可以去查查API。

控制value值可以向下面一样线性的控制，或者用插值平滑一下。如果用上AnimationCurve也许效果会更好吧。

using UnityEngine;public class Mix2D : MonoBehaviour
{private Material _material;private bool _isSeeing;private static readonly int Vector1Value = Shader.PropertyToID("Vector1_Value");private float _value;public float speed = 0.3f;private void Awake(){_material = GetComponent<MeshRenderer>().material;}private void Update(){// 计算value值_value = Mathf.Clamp01(_isSeeing ? _value + speed * Time.deltaTime : _value - speed * Time.deltaTime * 5);// 设置value值_material.SetFloat(Vector1Value, _value);}// 判断进入或离开摄像机 ==========================private void OnBecameVisible(){_isSeeing = true;}private void OnBecameInvisible(){_isSeeing = false;}
}

4. 旧的效果

在完成上面的效果之前，有一个先前的版本。是如下的形式，这样子的话消融的边太硬了。

效果如下。

5. 缺点

这个方法只是根据自己的猜想实现的一种方法，和《江南百景图》中的方法不一定相同。
（话说我都做完了才发现，原来游戏中轮廓的线条明显比显示完成之后的线条要粗，也就是说显示完成之后轮廓应该是不在了的。估计是完整的图片并不是像我这里一样只有颜色，不过算了我也懒得改了，反正就是做着玩）

而且我这个将轮廓和颜色混合（当然用透明度做了一些插值，不是直接混合，因为直接加或乘都会让结果颜色改变），效果和直接渲染两个sprite重叠是不一样的。左为两个sprite，右为用我写的shader渲染。但是无伤大雅了吧。也许用多pass渲染会好些。

在Unity中模仿游戏《江南百景图》中物体的出现效果相关推荐

《江南百景图》，解谜经营背后的逻辑
<江南百景图>是一款椰岛游戏出品的模拟经营类手游,游戏中,玩家将梦回明朝江南地区,成为城市的设计师,描绘蓝图.兴造建筑.规划布局,经营赚钱:另外还有奇遇探险等多条支线,安排居民起居工作,玩 ...
江南怎么用计算机弹,怎样在电脑上玩江南百景图
<江南百景图>是一款古风模拟经营类手游,由<超脱力医院>原班人马打造.游戏玩家需要扮演文征明,重绘明朝的江南盛景,打造专属于自己的江南百景图.很多人沉迷其中,经常一肝就是大半天 ...
如何重绘「江南百景图」？近300页 PPT 免费分享！
去年,古风模拟经营类手游<江南百景图>成功破圈,成为年度现象级爆款.如何将它搬到小游戏平台?是转换还是重写?使用哪些技术方案,能在包体大小仅为原版1/20的同时,达到与 App 版相当的游 ...
mfc 饼图绘画_每周推荐|江南百景图放置类佛系游戏，慢慢玩才是乐趣
中文名:江南百景图开发商:椰岛游戏游戏类型:模拟经营,古风建造游戏平台:IOS.Android <江南百景图>是一款由椰岛游戏自主研发的古风模拟经营建设类手游,自从2020年7月2日 ...
《江南百景图》游戏设计小思考：留边占角“小烦恼”
<江南百景图>是一款模拟经营游戏,它解锁新的地块儿并不像其他"大规格"的游戏那么整齐有序,而是"留边占角",不甚规则,这是为啥呢? 游戏是以江南水乡 ...
椰岛CEO：《江南百景图》的立项过程
在TapTap开发者沙龙现场,Wesley对外分享了<江南百景图>的具体立项过程,以下为演讲实录: 大家好,我是椰岛的CEO Wesley,我在椰岛主要负责产品,包括一部分的运营工作.&l ...
《江南百景图》为什么火了？和主创团队聊完之后，我跪了
自7月2日上线以来,<江南百景图>便一直占据着iOS免费游戏榜的冠军.作为一款备受青年人喜爱的手机游戏,<江南百景图>带来的水乡风光和市井气息,洋溢着浓浓的国风,鲜活而且稀缺. ...
从《江南百景图》厨艺大赛说起，聊聊博弈和“奶油系统”
一个俗套的活动几天前,一款新开服的移动端游戏<江南百景图>推出了第一个活动:厨艺大赛. 活动的大致规则如下:玩家需要把各种材料在客栈兑换成香料,再在地图中找到御厨,把香料提供给他们做菜, ...
鸿蒙系统图片大全,江南百景图鸿蒙版
江南百景图鸿蒙版是一款具有唯美古风风韵的运营模拟类游戏,让我们一起返回这一风景如画的江南水乡,用你的基本建设头脑来打造出一个兴旺发达的江南丽景,玩家游戏中里将饰演四大才子之一的文征明,为了更好地再次让 ...

在Unity中模仿游戏《江南百景图》中物体的出现效果

在Unity中模仿游戏《江南百景图》中物体的出现效果

1. 效果

1.1. 游戏中的效果

1.2. 在Unity中模仿的效果

2. 思路

3. 实现

3.1. 图片

3.2. shader

3.3. 代码

4. 旧的效果

5. 缺点

在Unity中模仿游戏《江南百景图》中物体的出现效果相关推荐

最新文章

热门文章