搜索 Unity

最新2D示例项目《Dragon Crashers》介绍

2021年3月19日 类别 技术 | 10 分 阅读
Blog header
Blog header
涵盖的主题
分享

Unity全新的原生2D工具将这款放置类RPG的画面提升到了新的水准。

回顾Unity 2019年的发布周期,我们发布了一整套的2D工具,实现了赋能艺术家和创作者的愿望。2D系列软件包包括了反向动力学(IK)骨骼动画、块图与形状样条关卡设计,以及像素美术工具。请在访问2D页面了解项目概况。

Dragon Crashers demo image
注:你可在此处试玩网页版游戏demo。请使用兼容WebGL 2.0的浏览器(如Google Chrome),放置类游戏将自动推进进程,玩家可在技能槽满时释放特殊攻击。

自通用渲染管线中的2D渲染器发布起,我们的2D团队就开始着手优化工作流、打磨图形技术。而最好的工具测试与演示方式莫过于提供一个示例项目供大家探索,新的《Dragon Crashers》现已在Asset Store上开放免费下载。

请前往资源商店下载

《Dragon Crashers》介绍

《Dragon Crashers》是一款使用Unity 2020.2开发的官方示例项目,用于展示Unity原生的2D工具套与图形技术,这款样例式游戏属于当今移动端常见的横板放置类RPG。

此内容由第三方提供商托管,该第三方提供商不允许在未接受“Targeting Cookies”的情况下观看视频。如果想观看来自这些提供商的视频,请将“Targeting Cookies”的 Cookie 首选项设置为“是”。

角色们将自动攻击敌人,而玩家则可以点触/点击不同的角色来释放特殊攻击。

项目已在桌面、移动端和网页端经过测试。

线上教学预告

除了本文中介绍的内容外,我们还将在4月14日上午11:00(EST,北京时间晚上23:00)举办《Dragon Crashers》线上教学,由全球内容开发者Andy Touch来演示项目、分享制作技巧。请在此处注册参与。

Dragon and knights
起源与成果:艺术家Jaroslaw制作的原画与资产奠定了场景的基调。

使用准备

资源商店下载项目后,请使用Unity 2020.2或2020 LTS来运行项目。首先新建一个2D项目,在Package Manager > My Assets界面导入《Dragon Crashers》,逐个接受Project Setting的弹窗。

如若遇到任何问题,请在论坛 专题贴子中提出。

unity hub screenshot

当项目导入完毕后,菜单栏中应该会出现各场景的快捷选项,选择Load Game Menu加载菜单,按下Play开始试玩。

Image taken in Unity of selecting 'load game menu'

我们推荐使用高分辨率进行游戏,如全高清(1920x1080)或4K UHD(3840x2160)。

Screenshot of gameplay

用1个动画假人制作6种角色动画

我们的主角与敌人都有各自服饰和外观,但所有的动画都使用了相同的骨架。 

为了省去为每个角色建立2D IK约束的麻烦,我们制作了一个假人。动画师只使用这个假人制作动画,而角色美术师负责制作不同的皮肤和服饰。

 

Image of character model

假人预制件(PV_Character_Base_Bipedal.prefab)被用作制作不同的角色,角色间的不同点在于使用了不同的Sprite Library Asset,替换这个资产就能切换角色的外观。

所有的Sprite Library Assets都用同样的类别与标签,用于定义不同身体部位及其变化。比如,骑士与骷髅都有一个“mouth”类别,其包含有“mouth open”、“mouth teeth”和“mouth normal”三个带标签精灵变体,用于构成动画。

此内容由第三方提供商托管,该第三方提供商不允许在未接受“Targeting Cookies”的情况下观看视频。如果想观看来自这些提供商的视频,请将“Targeting Cookies”的 Cookie 首选项设置为“是”。

为了给所有角色制作动画,每个角色的图像资产或PSB必须使用相同的骨架,即骨骼的命名必须遵从同一规则,必须关联到同一类别、标签下的身体部位上。为了节省时间,我们可将假人的骨骼(或角色骨骼引用)复制粘贴到不同角色身上,复制选项可在Sprite Editor(精灵编辑器)的Skinning Editor(蒙皮编辑器)中找到。

Image of character model with hat.
要想从另一个角色身上复制骨骼信息,必须先确保精灵类别与骨骼名称互相匹配。如有必要,也可针对新精灵调整下骨架几何形。

预制件中还包含了几种为角色增添生气的一些功能,像是反向动力学IK,以及为了融入2D受光环境而添加的法线与遮罩贴图。

Image of dragon character model

场景、精灵、块图与精灵形状的制作

在早期原型制作阶段,我们完全不必定死关卡设计。Unity带有的2D场景搭建工具不仅能让设计流程更有趣,还能让迭代更轻松:Tilemap Editor(块图编辑器)和Sprite Shape(精灵形状)可以自动化用碰撞体组成对象或地形的流程,而Scene(场景)视图则是观察游戏趣味性与美观度的窗口。

此内容由第三方提供商托管,该第三方提供商不允许在未接受“Targeting Cookies”的情况下观看视频。如果想观看来自这些提供商的视频,请将“Targeting Cookies”的 Cookie 首选项设置为“是”。

在制作中,最重要的一点是将所有的“笔刷”在Tile Palette(图块调色板)中列出,调色板中可存放平铺图块、动画图块、等距或六边形图块,甚至是渲染图块的GameObjects(带有Tilemap Renderer)。请查看Palette_GroundAndWalls图块调色板说明来了解完整的网格元素列表。

Screenshot of game in editor
调色板中的白色地面图块受到环境中的2D光照影响并不会显示为白色。

另一个经常被忽略的功能是Sprite Draw Mode(精灵绘制模式),背景中平铺的精灵可以在大片区域内生成不错的视差效果。 

Screenshot of game in editor. There are caves.
图中组成背景的四层图层仅为简单的重复精灵。

一个块图网格或样条元素可能并不是制作生动景物的最佳选择,我们推荐使用的是样条工具,如2D SpriteShape。工具的绘制方式类似于矢量绘图软件,可用于制作游戏的背景道具。SpriteShape Renderer渲染器可以高效地渲染附着在形状样条或边界上的多个精灵。预制件P_MineCartTracks_A演示了使用样条来绘制铁轨,而铁轨结构图则使用了Sprite Shape Profile中的填充纹理制作而来。

Screenshot of game in editor. There are train tracks.

预制件P_BridgeP_MineCartTracks_B是另一个展示Sprite Shape边界可塑性的例子,其并非是一条简单的线段,而是由桥和铁轨组成的复杂精灵。

Image of decorative sprites being used.
Sprite Shape被用于制作铁轨、前景木制结构等装饰性元素。

着色器、法线贴图与可动道具

2D Renderer可使用Sprite-Lit(精灵受光)着色器生成高级的光照特效,效果可作为Secondary Textures(次级纹理)添加到精灵上。

Image showing the process from basic character model to fully working character.
法线与遮罩贴图皆由原角色资产(PSB)复制而来,在艺术创作软件中重新上色。

法线贴图可在精灵编辑器中添加至角色上。这些RGB图像将表示像素在XYZ轴上的方向,划定2D光照的影响范围。遮罩贴图则由2D Renderer数据资源(即RenderData_2D.asset)控制,后者属于Light Blend Styles(光线融合风格)的一部分。项目中称为“Fresnel(菲涅尔)”的Light Blend Style被用作强化角色和精灵周围的轮廓光。为了做出这种菲涅尔效果,我们使用了遮罩贴图上的R通道信息。而由于这里只有一种光线融合效果,RGB三个通道的外观看起来完全一样(黑白色)。这也让遮罩贴图的制作简单了许多。

Screenshot of editor with game art/objects.
游戏中的美术使用了Affinity Designer制作,艺术家Jaroslaw同时制作了法线贴图和遮罩贴图(详细流程将在未来介绍)。

Demo中使用了大量的Shader Graph来制作道具动画、节省CPU算力。这些动画元素包括蜘蛛网的风吹效果(P_SpiderWeb_Blurprefab)、水晶发光效果(P_Crystals_Cluster)以及岩浆的流动效果(P_Lava_Flowing_Vertical)。岩浆流动效果使用了流动贴图来控制主纹理UV坐标的偏移方向,贴图的纹理以红绿两色作为像素XY方向的导向物。详细的制作方法可在FlowMap次级图表中了解。

Screenshot of game in editor. Lava!
手绘的岩浆流具有粘稠、卡通的外观,非常符合游戏的美术方向。

而在与巨龙的战斗中,我们使用了另一种称作“animated alpha clipping(alpha动画片段)”的着色器技术,通过显示每帧上特定alpha范围内的像素来形成动画。类似岩浆喷溅(ParticleSystem_Splatters)、攻击命中(P_VFX_HitEffect)等动画都使用了这种技术制作。

Splatter alpha fading
上图粒子动画使用了就是用Shader Graph的alpha动画片段技术在单张纹理上完成的。

使用2D光照调整场景色彩

Demo的美术风格还考虑到了2D光照及其各种变化。在下图中可以看到,仅带有法线贴图和遮罩贴图的精灵形象相对较为扁平,而类似地面块图这类精灵则呈现为灰度图像:其使用了Tilemap Renderer的Color和环境光照组合进行上色。 

Screenshot of game - 3D lights on vs 3D lights off.
在制作游戏美术时一定要考虑2D图形可能带来的效果,利用起所有可能的效果。

实时2D光照值得我们花更多的时间来琢磨光照和对象的布置,在编辑器中直接查看效果,甚至边制作边试玩,从而营造出更符合设想的氛围。

此外,我们还可以为场景元素添加动画,进一步提高沉浸感。比如P_Lantern_HangingFromPost预制件被用于给动画对象添加发光效果,给女巫的法杖添加Sprite-Lit粒子。

使用2D光照的另一个优点是可重复使用场景元素。环境和道具在不同光照条件下可能会呈现非常不同的外观,利用好这点我们就能使用同样的精灵制作不同的关卡。

此内容由第三方提供商托管,该第三方提供商不允许在未接受“Targeting Cookies”的情况下观看视频。如果想观看来自这些提供商的视频,请将“Targeting Cookies”的 Cookie 首选项设置为“是”。

游戏架构

在游戏的制作、结构搭建、管理和迭代方面,本Demo使用了可编程对象预制件

所有七个角色,包括主角们和敌人们,其核心结构都继承自一个基本的Unit Prefab,都使用了相同的行为代码。为了设定角色各自的参数,我们使用了可编程对象为基础数值设定了不同的“区间”。硬编码的数值不仅会让非程序员难以调整平衡,还会让游戏显得很僵硬,因此我们在对象中设定了“Attack Damage Amount”、“Ability Cooldown Time in Seconds”和“Unit Health”这些数值,方便团队调整数值。这些数值随后会被游戏代码动态地计算。

Screenshot of Unity editor

每个Unit预制件都有一个核心的“UnitController”脚本充当单位的“大脑”,处理预制件内的脚本引用与行为编排。比如,当巨龙被攻击时,UnitController便会执行相关的行为事件,如换上一段吃痛的动画,播放吼叫音效并减少巨龙的血量。 这些核心行为符合模块化设计理念,仅会处理各自的用途和任务。 比如,UnitHealthBehaviour仅处理单位血量值的增减逻辑,反馈重要的事件回应,比如“HealthChanged”和“HealthIsZero”。而UnitController发送给UnitHealthBehaviour的数值会随着场景与游戏动作的不同而改变。

 

Flow chart of unit controller

在部分情况下,外部系统可能会要求Units汇报特定事件是否有发生,这里就涉及了委托(Delegates)的使用。

比如,当女巫受到了伤害,而UnitHealthBehaviour便会执行HealthChanged(int healthAmount)事件,订阅了事件的UIUnitHealthBehaviour便能根据数值更新女巫的血条。

委托可将特定系统孤立出来进行测试。比如,在不进行战斗的前提下测试伤害数值弹出系统在另一场景中的表现。

Flow chart of packages

Timeline(时间轴)与Signal(信号)功能

Unity的Timeline功能可用于两种场景:

线性过场动画和单位技能动画。线性过场动画出现在战斗的开头与结尾,负责处理各种序列,比如摄像机运镜(Cinemachine)、角色动画(Animator)、音频片段、粒子效果和UI动画。每一条种序列轨道都绑定在了相关的场景实例上。

开场动画的结尾处嵌入了一个时间轴信号(Timeline Signal),用于触发动画结束时的Unity事件,指明战斗逻辑的开始时机。

此内容由第三方提供商托管,该第三方提供商不允许在未接受“Targeting Cookies”的情况下观看视频。如果想观看来自这些提供商的视频,请将“Targeting Cookies”的 Cookie 首选项设置为“是”。

时间轴还被用于制作包含预制件的技能序列。每个角色都会有各自的特色技能,类似MOBA游戏。

每个单位包含两种技能时间轴:一种“基础”攻击和一种手动触发的“特殊”攻击。UnitAbilitiesBehaviour脚本将负责处理当前技能、后续技能和技能前/后摇间隔(由上层游戏逻辑决定,如过场动画是否在播放中、单位是否死亡)。 技能时间轴轨道会被绑定到Unit Prefab的系统中,如角色攻击动画的动画器和VFX的粒子系统。程序员和艺术家可在Prefab Editing Mode(预制件编辑模式)下单独创建、播放和修改特定技能,然后再应用到Unit Prefab上。

 

Character slamming an axe down.

时间轴信号被用于指明技能何时将数值修改应用到目标的血量上。 比如,当骑士挥剑时,伤害应该在恰当的时机施加到目标身上,而不简单是在动画开头或结尾处。 在开发中,如果动画或VFX的生效时机需要更改,相关人员可以直接将“Ability Happened(技能发生)”信号放到新的位置,快速完成修改,无需依靠程序员来修改代码数值。

这种方法下,我们还可以为多段攻击添加多个“Ability Happened”信号,比如巨龙的喷火攻击。

Dragon Crashers characters fighting with a Dragon with the editor open at the bottom half of the screen

《Dragon Crashers》线上教学及其它资源

资深全球内容开发者Andy Touch将在4月14日上午11:00(北京时间次日23:00)举办一场线上教学,在编辑器中演示项目制作时所采用的角色制作流程。本次教学将包括:

  • 怎样将2D角色从Photoshop导入Unity
  • 怎样建立角色的精灵骨架
  • 怎样为角色的四肢设立IK
  • 怎样用Sprite Swapping替换角色图像
  • 怎样用Nested Prefab让角色抓握武器
  • 怎样用精灵法线和遮罩贴图制作2D光照风格
  • 怎样用Timeline建立技能序列

此内容由第三方提供商托管,该第三方提供商不允许在未接受“Targeting Cookies”的情况下观看视频。如果想观看来自这些提供商的视频,请将“Targeting Cookies”的 Cookie 首选项设置为“是”。

为了对大家关注《Dragon Crashers》表示感激,我们将分享一整套的壁纸、Zoom背景及其它图像资源作为礼物,希望能为你的2D开发提供灵感。请在此处下载Dragon Crasher背景。

Dragon Crashers Backgrounds on PC, Laptop and Tablet.

更多2D资源

2D开发的新手们可在博客与论坛上找到许多有用的教程指南。尚未用过2D工具的用户可找到2D工具页面2D开发技巧博文和相关Unity演讲进行学习,也可以查看这段骨骼动画系统的深入介绍,了解先前发布的《Lost Crypt》及相应的线上教学。当然,我们推荐各位详细研究下最新的说明文档,在2D Renderer部分了解功能与API的详情。

2021年3月19日 类别 技术 | 10 分 阅读
涵盖的主题
相关文章