这是一款“特效升级版的炉石”。

《炉石传说》盛行之后,TCG游戏在手游领域的市场也逐渐被打开。而长久以来,却迟迟没有一款成功产品占据日本TCG手游市场。事实上TCG的玩法在日本非常受欢迎,早年便已经推出《游戏王》《战斗之魂》等成功作品,同一类型的小众作品、同人作品也不在少数。

虽然《炉石传说》在2015年进入日本市场,也曾冲到比较高的位置,但由于风格和表现难以满足当地用户,现在它的成绩也不温不火,长期徘徊在日本畅销榜120名前后。

随后,日本Cygames研发了一款更加风格化的TCG游戏《暗影之诗》,尽管玩法方面的创新不多,但美术品质和特效表现等方面,做了大幅度的强化,甚至被玩家称为“特效升级版的日本炉石”。

日区畅销第三,网易代理,号称“日本炉石”的《暗影之诗》是如何制作的?日区畅销第三,网易代理,号称“日本炉石”的《暗影之诗》是如何制作的?

《暗影之诗》的美术风格相较炉石而言,的确更加的日式,但由于Cygames过去在卡牌美术方面的积累和定调,使得这种风格即便放在日本也属于独树一帜的种类。既带有日式线条和形体上的柔美,也融入了欧美暗黑风格的硬朗和恢宏,可以理解为它是将传统暗黑风格,结合日式甚至二次元式的技巧,形成的一种更年轻的表达方式。

日区畅销第三,网易代理,号称“日本炉石”的《暗影之诗》是如何制作的?

这种处理不仅让《暗影之诗》成功的超过了之前已经上架的日版炉石,也让这款产品在日本占据了TCG手游的领先地位。现在这款产品也借助网易代理、Steam版,开始向全球市场辐射。

日区畅销第三,网易代理,号称“日本炉石”的《暗影之诗》是如何制作的?

在此前举办的Unite 2017东京开发者大会上,Cygames的客户端主程大道賢人、3DCG美术设计师島村亜空进行了干货分享,详细阐述了他们是如何高效制作卡牌,并在保证高品质美术设计的同时,最大化展现TCG对局中卡牌特效的经验和总结(以下内容编译自SGI)。

日区畅销第三,网易代理,号称“日本炉石”的《暗影之诗》是如何制作的?

大道賢人(右)与島村亜空(左)

截至目前,《暗影之诗》已经上架一年整,其中卡牌部分使用的是Cygames之前的作品,《神击的巴哈姆特》中超过1万张的卡牌资源,来进行制作的。截至目前,游戏已经获得900万次下载,DAU已经超过1000万。并登陆了App Store、Google Play、DMM.com、Steam这四个游戏平台。

制作流程:让策划设计有临场感的卡牌

《暗影之诗》的开发团队主要分为五个部分,策划、程序、音效、特效美术、TCG策划。策划负责架构游戏的整体框架和核心数据;特效美术主要负责制作高阶卡牌的特效和演出;TCG策划则是负责设计所有的卡牌。

制作时,项目组并没有直接使用Unity来设计卡牌,而是特意在现实的模拟对战环境下进行设计,这样做的理由有两方面。

第一,他们希望《暗影之诗》带来的游戏体验能更加接近桌游的感觉;第二,项目组里负责TCG策划的员工有很多资深桌游玩家,这样的工作模式更能发挥他们的制作实力。

所以TCG策划会使用印刷好的卡片来进行游戏,并在这个体验的过程中,去思考和挖掘新的卡片。

日区畅销第三,网易代理,号称“日本炉石”的《暗影之诗》是如何制作的?

在制作流程方面,首先,TCG策划会设计好卡牌,并由美术来完成高阶卡面和特效的制作;其次,卡牌设计好后会由策划继续完成卡牌的后续制作,并进入音效制作和程序实现的环节。同时,程序还需要实现由美术设计好的高阶卡牌特效。

日区畅销第三,网易代理,号称“日本炉石”的《暗影之诗》是如何制作的?

单个版本的内容制作流程

需要注意的是,TCG策划和美术设计都是《暗影之诗》制作中非常重要的职位,再加上卡牌设计和制作非常耗时,所以在这两个环节,上一个版本的内容刚做好,就需要立刻进入下一个版本的制作流程中。

事实上,项目组在实现当前版本的程序功能后,TCG策划和美术就已经做好另外两个版本的内容了。比如目前《暗影之诗》已经推出了第四个卡包,但项目组已经在着手第六个卡包的制作了。

日区畅销第三,网易代理,号称“日本炉石”的《暗影之诗》是如何制作的?

高阶卡牌的制作:shader对2D动画也有奇效

在《暗影之诗》中,高阶卡牌虽然与同名通常卡牌有着相同的效果,但每张高阶卡牌都有其独特的原生动作和特效。属于游戏中的特殊卡牌,通俗来说就是闪卡。截至目前,游戏中已经推出的1000种卡牌都存在闪卡。

日区畅销第三,网易代理,号称“日本炉石”的《暗影之诗》是如何制作的?日区畅销第三,网易代理,号称“日本炉石”的《暗影之诗》是如何制作的?

在制作这类卡牌时,存在三个需要解决的难题:

制作成本、绘制时的顾虑、美术品质。

1.制作成本。由于每隔三个月,游戏就会更新200张以上的卡牌,所以需要一个能在短期内完成高阶卡牌制作的流程。

2.绘制时的顾虑。当每张卡牌在画面上做出移动、旋转等激烈动作的时候,如果使用了粒子特效来制作高阶卡牌,那么特效就可能嵌入卡牌的反面,外观就有可能崩了。必须设法让特效从在所有位置、从所有角度看上去都能正常显示。

3.画面品质。在压缩成本的同时,还需要给玩家提供从未见过的,品质优良的内容。所以必须构建一套能够展现高品质画面的技术手段。

从这几点要求出发,项目组得到的解决方案是仅利用shader来制作演出特效,于是他们开发了专门制作高阶卡牌的、具备特殊功能的shader。这样做有三点好处:

1.制作流程简单。不需要3D工具和动画工具,只用Unity和Painter就可能完成制作,可以控制成本。

2.能实现丰富的演出效果。在质量方面,功能简单但也五脏俱全,能表现出多彩的效果。通过使用shader还能让画面产生扭曲感,做出临场感更高的效果。

3.绘制顺序不会乱。因为特效演出完全在平面中进行,物件在画面上方移动、旋转,都不会影响卡面内的绘制顺序,不用担心被打乱。

日区畅销第三,网易代理,号称“日本炉石”的《暗影之诗》是如何制作的?

项目组使用的专用shader称为“卡牌shader”,是通过Unity标准的shader语言ShaderLab制作的,制作后仅有一个shader,但具备制作高阶卡牌所需要的所有功能。利用这个shader,设计师便可以直接在Material Inspector中制作演出效果。

日区畅销第三,网易代理,号称“日本炉石”的《暗影之诗》是如何制作的?

以“巴哈姆特”这张卡牌的制作为例。可以看到卡牌shader拥有三个主要功能,来将卡牌画面作为基础背景,在这之上合成特效。这三个功能分别为贴图合成、歪曲效果、划定合成与歪曲的范围。

日区畅销第三,网易代理,号称“日本炉石”的《暗影之诗》是如何制作的?

下图右侧为卡牌shader所使用的Material Inspector。

日区畅销第三,网易代理,号称“日本炉石”的《暗影之诗》是如何制作的?

1.贴图合成。

将可以捆绑的素材制作成贴图,在卡牌画面上合成。可以选择的合成方式分为“加法”、“减法”、“透明化”,移动方式分为“滚动”、“回旋”、“极坐标”等。此外,还可以通过各项数据的调试,来控制合成时的颜色和速度。

日区畅销第三,网易代理,号称“日本炉石”的《暗影之诗》是如何制作的?

上图为所有素材贴图都被合成的状态

2.歪曲效果。

能够给专门用来制作歪曲特效的素材贴图,来给卡牌画面增加相应的效果。与贴图合成相同,可以选择“滚动”、“回旋”、“极坐标”等移动方式,并能调整歪曲的强度、速度等数值。

日区畅销第三,网易代理,号称“日本炉石”的《暗影之诗》是如何制作的?

上图为整个画面都被歪曲的状态

3.划定合成与歪曲的范围。

每张卡牌都有专用的遮罩贴图,每个通道都能指定贴图的合成和歪曲范围。这样一来,前文中覆盖整个画面的合成与歪曲效果,就能被应用在卡牌内任意一个位置。

日区畅销第三,网易代理,号称“日本炉石”的《暗影之诗》是如何制作的?

接下来再看高阶卡牌中使用的数据,这些数据分为以下4种,通过组合来构成卡牌:

1.卡面。卡牌的基础内容,不仅能供高阶卡牌使用,还是通常卡牌的通用内容。

日区畅销第三,网易代理,号称“日本炉石”的《暗影之诗》是如何制作的?

2.遮罩。可以划分RGB各个通道的用途,以1张彩色贴图的数据形式输出。红绿两个通道都分别指定了合成文件,蓝色的通道则是划定了歪曲效果的范围。每张卡面,都需要一个遮罩。

日区畅销第三,网易代理,号称“日本炉石”的《暗影之诗》是如何制作的?

3.合成贴图。准备好可以捆绑的贴图,供合成使用。

日区畅销第三,网易代理,号称“日本炉石”的《暗影之诗》是如何制作的?

4.材质。卡牌shader所用的材质,跟其他三种数据相搭配便可制作演出效果。

日区畅销第三,网易代理,号称“日本炉石”的《暗影之诗》是如何制作的?

高阶卡牌的制作案例

实际来看三张卡牌的制作效果。“夜之魔术师”这张卡牌的特效中,法杖前端会发光,角色也会被它发出的光芒照亮。这里使用了红色的遮罩,来表现反光的效果,遮罩写入后,卡面会随之散发出被光芒照射的效果,给人非常幻想的视觉感。绿色的遮罩则用于表现法杖散发出的环状光效。蓝色的遮罩则用于表现服装和头发的摇动效果。活用歪曲的效果,能够让头发的飘动特效变得更加柔和。

日区畅销第三,网易代理,号称“日本炉石”的《暗影之诗》是如何制作的?

在“天轮的石魔”这张卡牌中,描绘了石魔敲击地面的状态。高阶卡牌的特效,便是突出地面裂开后溢出的光线,以及石魔手边的士兵被光线照射的反射效果。绿色的遮罩用来表现石魔身体沟壑部分的能量光。蓝色的遮罩则用来表现敲击地面的摇动效果。

日区畅销第三,网易代理,号称“日本炉石”的《暗影之诗》是如何制作的?

第三个例子是“千年妖狐·尤爱尔”的高阶卡牌。卡牌整体都飘散着的火焰,是用红色的遮罩来实现的。圆圈部分表现的,是飘动的粒子闪烁的特效,并且通过浓度的变化,来实现深度差的特效。绿色的遮罩用于表现角色两侧的火玉,如果能活用遮罩的绘制方式与合成贴图的组合方式,便能表现出流体的视觉效果。大范围绘制的蓝色遮罩,用于表现服装和头发的飘动,以及热气的视觉效果。通过分离遮罩的浓度和模糊度,就能在歪曲表现中,突出某一部分特殊的摇动效果。

日区畅销第三,网易代理,号称“日本炉石”的《暗影之诗》是如何制作的?

可以看到,即便使用同一个卡牌shader,使用的方法不同,就能做出截然不同的演出特效。事实上,利用shader能实现的效果非常多,潜力也非常大,通常来看shader多用于3D游戏当中,但对2D动画效果而言,从《暗影之诗》的实际运用来看,它也非常有用。不仅如此,对shader定制化的处理,还能够灵活运用到更多的领域。

日区畅销第三,网易代理,号称“日本炉石”的《暗影之诗》是如何制作的?

优化与开发效率的提升:共享贴图资源

《暗影之诗》内,每张卡牌最多可以使用4个特效。对于高阶卡牌来说,使用这么多的贴图来表现特效,很可能遇到瓶颈。通常来说,项目组会压缩shader的容量,来解决这个问题,但这会降低高阶卡牌的整体质量,所以需要寻找别的解决方法。《暗影之诗》找到的答案,便是利用资源打包功能来优化。

随着卡牌的增加,效果的种类也会增加。

日区畅销第三,网易代理,号称“日本炉石”的《暗影之诗》是如何制作的?

效果A和效果B当中,分别包含了贴图A和贴图B等资源,重复的资源必然会造成资源浪费。

日区畅销第三,网易代理,号称“日本炉石”的《暗影之诗》是如何制作的?

所以处理方法就是共享贴图。打包资源A、打包资源B里的特效,都分别对照打包资源C~F当中的贴图,以避免贴图的重复。

日区畅销第三,网易代理,号称“日本炉石”的《暗影之诗》是如何制作的?

接下来还会遇到一个问题“单独构建时对照出错”,这一问题可以通过共享命名规则来避免。通过统一Shuriken、材质、贴图、资源打包的命名规则,来针对性调用必要的资源。

日区畅销第三,网易代理,号称“日本炉石”的《暗影之诗》是如何制作的?

结果上看,一次构建中,以每个贴图128KB的大小,每个打包资源节省3个贴图来计算,那么对战双方总共40张卡组的加载过程中,总共能优化30MB的数据量。按照100万DAU的量级,放大到全服务器的范围来看,相当于能够节省30TB的数据量。这样一来,数据量变少玩家需要下载的内容也就较少了,等待的时间也就变少了。

日区畅销第三,网易代理,号称“日本炉石”的《暗影之诗》是如何制作的?

最后,开发效率的提升涉及卡牌制作的每个环节。《暗影之诗》现在已经推出了1000多张卡牌,卡牌的技能由以下的6重元素互相组合而成。

技能:技能的描述。给予伤害,回复血量等。

设置:细节的设置。造成多少的伤害,抽到什么样的卡牌。

发动条件:展示特定的状态和技能发动条件的信息。比如Cost为5,对手场上使用了卡牌。

目标:技能适用的对象。比如场上的卡牌、自己的手牌、卡组内的卡牌等。

时机:什么时候发动技能。从手牌中使用时,卡牌被破坏的时候等。

发动前处理:技能发动前需要的消耗信息。比如死灵法师需要使用墓地中的卡牌来发动效果。

日区畅销第三,网易代理,号称“日本炉石”的《暗影之诗》是如何制作的?

值得一提的是,《暗影之诗》中,通过对职业的细分,可以将技能内容、发动条件组合成不同的技能,并且达到量产的效果。

日区畅销第三,网易代理,号称“日本炉石”的《暗影之诗》是如何制作的?

下面是实际的制作案例。

技能“Blazing Bless”

技能:造成伤害

设置:2点伤害2ダメージ

发动条件:对方场上存在卡牌时

目标:对方场上的卡牌

时机:使用时

发动前处理:无

日区畅销第三,网易代理,号称“日本炉石”的《暗影之诗》是如何制作的?

“毁坏森林的恶果”也能给对手的前排造成2点伤害,但追加了能够抽取一张妖精的效果。

日区畅销第三,网易代理,号称“日本炉石”的《暗影之诗》是如何制作的?

当设定了多个技能内容或者设置选项后,技能就可以表现出更丰富多彩的效果。基本所有技能都由这6个要素构成,但根据组合和数值的变化,就能给玩家呈现出全新的卡牌。比如下面的两张卡牌“任性的公主”和“奈芙缇斯”。

使用“任性的公主”可以在场上再召唤一只前锋。

日区畅销第三,网易代理,号称“日本炉石”的《暗影之诗》是如何制作的?

“奈芙缇斯”则能在使用后尽可能多的召唤出前锋,但还融入了很快就会被破坏的复杂设定。

日区畅销第三,网易代理,号称“日本炉石”的《暗影之诗》是如何制作的?

根据这些设计,除了能更好地提高开发效率,还能同时实现“追加新卡牌的时候不需要再添加功能”、“防止重新开发某项功能”、“减小修改成本”、“高效调整平衡性”等好处。遇到了Bug的时候,也能更好的辨别问题发生的原因。

日区畅销第三,网易代理,号称“日本炉石”的《暗影之诗》是如何制作的?可以看到,只有不断追求品质,并且从程序上尽可能采用最好的优化和稳定的方式,然后提高设计师和程序员的工作效率,这样才能做出“具有高品质内容的”的作品
暗影之诗相关攻略