靠美术，如何将横屏地牢探险的游戏装进竖屏的手机里，《黑猫来自天空》是这么做的

近期，《黑猫来自天空》开启了首轮测试，相比较此前游戏在TapTap与好游快爆上极佳的口碑，这次游戏的测试服风评则很有争议。测试服的评分也只有6.1分那么多，与玩家开测前巨大的期待值有较大落差。


这次游戏口碑下滑的问题除了测试服开放内容过少，游戏完成度不足以及BUG问题外，玩家主要集火在地牢玩法的设计问题上。

游戏的玩法主要是以玩家操作1名角色搭配AI队友来推行地牢探险。不仅如此，游戏还提供AI一部分智能，允许队友单独行动进行战斗。因而玩家能做的交互并不多，也导致游戏在设计上出现了不少问题，有交互的问题，也有体验的毛病。


比如说交互里，AI队友的反馈与行为都不够智能，很容易硬顶敌人伤害暴毙；调度角色时还容易出现误触，角色跟随主角移动容易挤在一起无法精确选择目标。体验上，玩家的操作空间也不大，没有太多可以冒险的体验感等等。


不过，即便是遇到玩法设计上的不少问题，玩家还是对游戏的视觉呈现清一色好评。除furry风的美术很新鲜外，更重要的是，游戏配套的美术设计总算不是强硬将横版游戏改成竖屏那么简单，而是做了很多很巧妙的配套，让游戏那么和谐。

那么，《黑猫来自天空》的视觉呈现具体是怎么做的呢？


furry风的可爱感与塑造如何养成

提到《黑猫来自天空》的角色设计，furry风的人设是最吸引眼球的一环。并且，为了让这种设计能够更讨喜一些，针对人设，游戏也用了很多方式强化furry可爱的一面，比方说：

1：角色基本设计是在Q化风格的范围之下进行，先从比例上去做萌系化塑造。只不过，为了应对职业与人设的差异性设计，游戏会根据角色定位来微调角色的头身比例，比如主角黑猫，是辅助+低幼的定位，那么就以2头身为主；比如一众T型角色，则是4头身和5头身居多。


但头身的拉伸也会很容易导致画风不够统一的毛病。为了让更多多头身角色能与Q化比较多的角色形成萌系画风的统一，游戏还做了这些处理。比如，很多角色会拉大上半身的比重，压缩下半身的比例，再加上扩大化武器的加持效果，营造出一种圆润的厚重感。


之所以这么设计角色，是为了让角色的感觉更偏向球体，营造出一种圆润的可爱感。为此，游戏针对角色的服化道设计也采取了各种圆形设计，除了一些很醒目的圆型护甲外，无论是身形还是一些甲胄薄片，都会利用各种弯曲，带有弧度的设计，将角色的整体形象维持在一个偏向球体的感觉，并且尽可能让角色立绘的动作向内收缩一点，让气质突出想要的圆润。


除了将更多角色做Q化与圆润化处理来增加可爱值，游戏的色彩搭配也值得一说。

2：关于《黑猫来自天空》的色彩搭配，很多玩家也能看出味道，明白这是一种绘本画风。角色的颜色鲜亮通透，搭配角色的立绘风格，显得可爱、清纯。但色彩地雕琢还不止是这样。游戏的明暗虽然不强烈，但是角色的质感与塑造却特别丰富。这种画面的层次感，是利用更多的素描方式，用更多排线去做暗部的点缀，我们可以看到，无论是金属物体、布料还是毛发的底部与暗部，都用细细的排线组合来强调，并与亮部做了强对比。


其次，这种排线也更好凸显出毛发质感，游戏针对毛发也有更多的素描关系刻画，比如顺滑的头发用更细腻的线条排布，突出流畅感；而蓬松的毛发则需要更加稀松的排线与一些断线处理强调。


当然，利用线稿除了提升层次之外，也能让立绘与与游戏战斗画面里的像素图能够更加匹配。像素风的毛躁边缘与立绘画风的线稿点缀，在视觉上有着异曲同工之妙；再加上游戏的明暗处理不会太过复杂，分块化做的优秀，这让像素图简单的分色也能与立绘一一对应，也让这部像素风地牢冒险游戏实现了很多二次元游戏做不到的事情，那就是立绘与游戏的呈现的折损相对较少。


对于很多游戏来说，立绘画的越精致，往往不是好事，很容易导致角色在游戏呈现越不好还原，造成立绘一个样，战斗画面里是另一个样子。比如不少游戏常见的的做法是将写实比例人设Q版化处理。在这点上，《黑猫来自天空》就做的比较统一，这也是玩家对于游戏画面叫好的原因，宣传物料与实机画面并没有形成太大的落差感。

不过，比起furry风格做的出彩，游戏视觉呈现更值得一说的还是游戏针对手游竖屏的优化让人眼前一亮。

横版地牢探险游戏竖屏化如何做的那么和谐

如果将传统的单机游戏类型做成符合手机竖屏操作的设计一直是一种难题。在视觉表现上也是如此。这其中，2个问题特别重要。

1是如果将常见的16:9的横版画面和谐的做成竖状长条的画幅。

2是如何针对竖状画幅去重新改动UI与界面。

这两点《黑猫来自天空》都有一些不错的改进思路，首先，它先是改动了地图设计，把常见的矩形地牢地图斜放，具体如下图：


把常见的横版地图斜着放上去的核心目的，是为了解决竖屏与横屏的视觉逻辑差异性，也就是游戏观测画面的视点方向不一样。

常见的单机游戏，在横版的画幅中，我们的视角往往会从左右作为起点向另一侧看去；这是因为横版图上下高度窄，宽度大的原因。


而手机的竖屏则不能照搬这样的地图设计，因为宽度很小，却有较长的上下视角空余，所以竖屏的设计则要将左右横移视角转向上下的设计，而将矩形地图斜放上去则解决了视角改动的问题，。首先，玩家操控角色走动的2点不再是左右方向，而是上下的两个矩形的顶点。


这样做，除了能对视角产生影响，同时还解决了2个问题。

1是竖屏下屏幕的素材堆积情况。因为地图的倾斜，下屏幕有很大一块成了落差区域，遮住了玩家向下运作、敌方单位从这里暴兵的可能，将活动的范围切割掉下屏的这部分，这让下面的界面与战斗画面不会出现常见的互相干扰的情况。


2，这样修改地图，还让地图自带阴影区域。斜放的矩形地图的顶角部分由于超出画幅，所以不仅天然未可知，还自带有吸引玩家向上探索的引导，同时，因为斜放的方式，地图也因此有了落差和向外延伸的空间，做出了一定的落差与体积感。


所以，虽然在测试服的设计上，很多玩家吐槽了游戏最核心的玩法设计问题。却鲜有吐槽游戏竖屏化所带来的不和谐感，因为在地图的改动中，游戏下了一定的功夫。

并且，在UI界面的设计与特效设计上，游戏还做了很好的设计让人印象深刻。

首先要从游戏的技能特效说起。贴合探索地牢地图的上下视角，游戏的技能呈现也以突出高度的特效为主。比方说：


最后看似扩散发射，像似浮游炮横向冲击的弓箭技能，走势其实也是倾斜向上向下的路径，而不是纯左右横向发射。


可以看出，战斗技能特效的设计上，游戏也是秉持着竖屏化要的上下视角逻辑。

但竖屏化带来的还不止是视角的问题。游戏还需要针对UI界面解决2个问题：

1：是占空间的问题，竖屏由于没有宽度，所以容易把操作界面挤在一起

2：UI界面的设计问题，竖屏容易界面出现设计上的倾斜，比较常见的情况是UI界面挤在下半屏幕，导致下面显得臃肿，上半块区域显得很空的情况。

先从大的界面谈起，游戏的主界面的美术基调是以以高峰和高天际线的建筑为主。这种景观布局就是高度贴合缩窄宽度，贴合高度的设计。


在这个背景图的基础上，游戏还做了一些统一的改动思维：

1：扁平化+叠加设计，让部分UI的突兀感降低

这主要针对的是一些UI的边角料，以透明度50——75%的单色长条组成；用最简单的方式，低调处理，不至于对画面其他重要的视觉内容抢戏。


2：将UI设计融入到画幅的主题之中，将UI界面变成主体景观。

这种做法最成功的地方，就是游戏主界面下面的界面设计。迎合背景图下半区域城市的画面，游戏设计了一整套以以灰色石块组成的建筑界面，为了让整个界面不显得突兀，游戏还在在上面画上了风车等景观，再加上一堆小兔子NPC作为点缀，而高塔探险的进入端口也变成了小兔子的台词气泡，看起来违和感相当小。


这么做的目的除了让突兀感降低之外，也是为了改动UI界面堆积的问题。事实上《黑猫来自天空》并没有把UI界面容易堆积下屏的情况改变，但透过将界面与主视觉图融为一体的设计，让堆积感没有那么强烈。整个界面也就如图一幅画版，显得特别和谐。

而关于UI最后值得一提的便是游戏针对触屏摇杆与虚拟按键做了一点自己的思考改动

事实上，触屏摇杆常见的问题是虚拟摇杆太大，往往要占去屏幕很大的一块，不仅影响战斗视野也影响其他美术UI界面的排放。

这个问题，首先因为游戏地图的斜放设计，让下屏幕有了比其他游戏更大的空余部分，所以不至于臃肿，甚至技能界面也设计的比较大，让操作更加舒服。


但即便如此，游戏还是针对虚拟摇杆做了一点优化。

在常态下，游戏的虚拟摇杆跟很多同类游戏一样，做的醒目，体量偏大；但当玩家按住时，会缩小成一个很小的光球，在战斗中进一步减少对画面的影响。


同时，也进一步解放空间，一些远比《黑猫来自天空》操作性好复杂的游戏类型，则可以依靠这些改进而投放更多的键位设计。

结语

从视觉设计来说，《黑猫来自天空》是让人十分惊喜的。除了出彩的furry风美术外，针对竖屏游戏体验的各种美术设计，也突出制作团队对于相关游戏手机竖屏化的理解，营造出这种体验一流，视觉非常和谐的产品。

这也是游戏过往高评分的秘诀，一款充满卖相的游戏。对于它来说，现在的问题只剩下如何去把demo游玩体验不佳的地方做好，让游戏对得起这份美术设计的投入。

从测试服最后的回馈来看，相信还是充满希望的。



原文：https://mp.weixin.qq.com/s/n9Q7ezjbIPLxNdX4YZ3wlQ