粉丝8922获赞83.8万

今天呢,我们会利用十分钟的时间来制作下面这个二维卷轴游戏场景。我们会使用 unt 游戏引擎和一个叫做 twelve game kit 的开发包。如果大家计算机上还没有安装 unt 游戏引擎的话,大家可以按照我的步骤来完成安装。 首先,我们需要安装一个叫做 u t hop 的东西, u t hop 可以看作是 u t 引擎的启动器, 他是用的团队最近分离出来的一个功能,用来管理计算机上不同版本的应用体引擎以及用体项目。当然,你可以选择不安装用体啊,直接下载用体引擎的离线安装包。 不过因为我经常会在应用题的多个版本之间做切换,并且安装下载都是一键自动化的,使用它确实也帮我节省了不少的时间。应用题还不安装非常简单,大家可以直接从官网上下载安装。我将下载地址 粘贴在屏幕的下方。安装完毕后,桌面上会多出来一个 untip 的图标,我们双击启动它,并点击窗口左边的安装按钮。正如屏幕上提示,因为计算机上还没安装任何 untip 的版本,我们可以点击右上方添加按钮,并选择最上方的最新版本。 你们看到的版本可能跟我的有所不同, ut 每个月都会发布一个新版本,版本之间的区别很小,通常只是 bug 的修复和一些小功能加入。接下来,我们点击右下方的下一步按钮,屏幕上会要求你勾选需要安装的组件。在这里我们一个都不用勾选, 因为对于游戏的开发和学习来说,安装应用体引擎的主体就够用了。最后我们点击右下方的完成按钮,这时计算机会自动下载并安装应用体引擎。整个安装过程差不多五到十分钟,具体的时间呢, 取决于你电脑的配置。大家可以将安装界面最小化,喝咖啡、看视频等 unt 安装完毕后再回来。 ut 安装完毕后,不同版本的 ut 引擎会以卡片形式显示在窗口中。这时候我们可以点击项目按钮,并点击右上方的新建按钮。创建一个项目。 项目又常常称之为工程 project, 它是所有美术资源场景代码保存的地方,我们可以看作是游戏的源代码。在新弹出窗口中,我们选择 to d, 因为我们要制作游戏是一个二维卷轴游戏应用题,同时支持二维和三维游戏的开发。在这里我们只是告诉应用题,将我们可能用到的所有工具都提前准备好,方便我们的使用。接下来,我们将右边的项目名称改为 my to the game, 当然你可以改为自己喜欢 更有意义的名称。最后点击蓝色的创建按钮,新建我们的工程运体会进行短暂的配置。最后打开运体游戏引擎的主界面,这个界面又称之为编辑器艾特,因为所有场景美术资源的编辑,游戏中的各种选项都需要在这里完成。 我们知道 ut 自身提供了许多游戏开发的必要功能,但是让 ut 更加强大的原因是, ut 有着非常活跃的社区游戏开发者爱好者会在一个叫做 sdoor 的商店中上传各种游戏资源、脚本以及扩展包。 ssdoor 上的许多资源是付费的, 但也少不了许多免费的优质资源。在这里,我们需要使用一个叫做 tv game kit, 它是云体官方提供的专门用于制作二维游戏的开发方。它大大简化了 游戏的开发流程,非常适合于新手入门和学习。我们可以在这里点击 sdoor 的选项卡,并在搜索框中输入 to the game kit, 并选择搜索出来的第一个结果,然后点击蓝色的下载按钮,如果你还没有登录音乐体引擎的话,音乐体会在这里弹出登录框。 我强烈建议大家自己注册一个 ut 账号, ut 对个人的学习和开发是免费的,使用账号也可以访问出商店之外的其他功能,比如团队协作等等。下载完毕后,我们可以点击蓝色的导入按钮,将这个开发包加入我们的工程。 屏幕上会提示导入操作可能会覆盖原有的工程设置,因为我们是新创建的空工程,因此我们可以直接忽略这个警告。在星探处窗口中会列出开发包中的所有文件, 我们继续点击下方的导入按钮即可。开发包导入完毕后,在这里会多出来一个 to the gamecat 的目录。屏幕下方这个窗口会显示工程中的所有文件,这包括你创建的场景、图片、思维模型以及脚本代码。我们可以把它理解为一个文件浏览器即可。 另外,屏幕上放菜单栏中会多出来一个按钮, kittos, 与这个插件相关的功能都可以在这里访问。 我们首先点击这个菜单,并选择创建一个新场景。场景名称我们暂时不需要修改,直接点击创建即可。这时候音乐体会我们创建一个默认的场景,或者我们叫他关卡。 这里包含一个人物角色和一个简陋的地图。我们来介绍一下屏幕中间的两个窗口。左边画有网格的是一个用来编辑场景的窗 口,我们可以在这里选择场景中的物体,移动他们的位置等等。右边是游戏预览窗口,也就是游戏运行时将要在屏幕中显示的内容。可以看到应用题默认为我们选择了十六比九的长宽比。我们暂时不需要去修改它, 因为大多数手机和计算机的屏幕常关闭都是这个数字。我们可以点击屏幕上方三角形按钮运行 to the game kit 为我们创建的默认场景。 我们可以通过 ad 键作为移动, s 键下蹲空格键,跳跃, k 键进站攻击, o 键子弹攻击,这些都是 to the game kid 为我们准备好的,在视频下方官方文档中也有详细说明。 接下来我们来对这个简单的观察做一些修改。如果在屏幕的右方你没有看到一个叫做 tall palet 的窗口,可以点击菜单栏中的窗口, 然后选择 to the tail。 palette。 tail 在用中是瓷砖的意思,用在二维游戏的地图制作中。大家常常将场景划分成一个个小网格,然后利用一种铺瓷砖的方法来创建地图。这种方法的优点自然是速度快,方便。 另外,这功能是应用题自建的,并不是 to the game kit 这开发包提供的。因此即使我们没有使用其他任何开发包,也可以使用这个功能。叉 opat 窗口打开后,我们发现他默认我们显示两个砖块, 一个是光秃秃泥土,一个是绿色草坪。我们随便选择一个砖块,并在左边场景编辑窗口中按自己的喜好铺上砖块。砖块会自动和背景的网格线对齐,并且砖块之间会自动连接。我们甚至可以创建不同高度的 平台。砖块之间呢,并不会产生任何缝隙,因为这个砖块资源是 to the game kid 事先设计好的,设计人员已经事先考虑到这一点。随后我们可以点击运行按钮,测试刚我们创建的地图。 接下来我们在游戏中加入怪物角色,继续丰富我们的游戏逻辑。这时候我们首先要利用屏幕下方的 project 窗口,也就是我们之前提到的运题自建的文件管理器, 我们需要通过它找到怪物的资源。首先我们打开 to the game kit, 然后选择 prefabs。 prefab 这个词在 unity 中经常会看到,它的中文意思是预设,通常指是那些已经为你创建好的,已经有一定功能的可以直接使用的 东西,比如怪物,人物角色、场景、用户界面中的按钮等等。总之你可以直接拿来使用就对了。在 prefab 的目录下有一个叫做 enemy 的目录, 我们打开它,看到这里有两个怪物, trumper 和 speeder。 在应用题中的很多资源,我们可以通过字面意思来猜测它有什么功能。 trumper, 咀嚼者,听起来就是要吃人的怪物。 speeder, 吐口水的怪物。好吧,听起来这两个怪物区别像是,第一个怪物进展攻击, 第二个怪物远程吐口水攻击这里我们直接拖拽第一个怪物到左边的场景编辑窗口。我们点击屏幕上方三角形按钮,测试一下我们修改后场景。当我们靠近怪物时,怪物会向你攻击,屏幕左上方的小红心也会减少一格。 我们退出游戏模式,继续对怪物的属性进行一些调整。 unity 右方这个窗口, inspect 监视器会显示你选中物体的属性。比如我们可以在场景面器中用左键选择不同的物体, 可以看到这点内容也会随之改变。这里有个非常实用的技巧,通常在一个复杂场景内,不同的物体会重叠在一起,并且还有一些看不见的功能。物体,比如声音和一些后期处理的特效。 直接通过鼠标左键通常没有办法正确的选中。你想要选中物体,于是我们可以使用屏幕最左边的一个称作 hierarchy 的窗口。 hiverke 在英文中有着层次结构的意思,这窗口中会列出场景中存在所有物体,看见的,看不见的,甚至于屏幕之外的物体都会在这里显示出 出来。我们可以双击这里的 chomper, 选中并聚焦这个物体。右边的 inspect 中也会随之列举出这个物体的属性。可以看到这里显示的属性可以说是琳琅满目,异常复杂。 我们再仔细看这里,属性又可以被折叠成不同种类, transform, sprite, renderer, animator, box, clutter to the, rigid, body to the 等等等等。每一个分类都扮演着非常重要的角色, 比如 transform 代表这物体在场景中位置,我们甚至可以修改这里的数值来移动这个物体。 sprite trainer 是用来在屏幕上渲染或者显示这个物体用的。如果我们直接把这里的小勾勾去掉,这物体就会直接从屏幕上消失。另外,这里有每一个分类,在应用题中被称之为 component 部件, 我们甚至可以删掉或者加入新的 component。 现在我们只需要把目光聚焦在这个叫做 enemy behavior component 上就好了。敌人行为,从他名字上可以看出,这是一个用来设置怪物属性的部件。比如这里有一个 speed 的属性, 用来设置怪物移动的速度。我们可以拖拽这里来修改这个数字,或者直接用键盘将这个数字改为三。接下来我们点击运行按钮测试一下,可以看到怪物的移动速度确实提高了许多。 同时我们可以修改这里的 view field view 来修改怪物的可视区域。屏幕左方的绿色区域代表怪物能够侦测到范围,只有你出现在这区域中,怪物才会向你跑来并对你发动攻击。我们可以点击运行按钮测试一下我们 修改后逻辑。这时候如果我们站在怪物的身后,他是不会发现我们的,只有等怪物转身时,他才会向我们跑来并发动攻击。 在这期视频中呢,我没有使用任何一行代码就已经能够做出像模像样的二维卷轴游戏其实还有许多非常实用的功能,我们会在之后视频中向大家陆续介绍。

这次的视频我想说一下如何用 unity 实现类似于齐鲁旅人的 h d t u d 效果。这是一种将像素化和三 d 结合的效果, 屏幕上的这个场景就是最终的效果,既具有相塑感,又是三维立体的。虽然这个演示的场景没歧路女人那么绚丽,但也包含了这种风格所需的各种元素。首先我们可以看到远处的物体和距离摄像机太近的物体都非常模糊。 远处这两个光滑的圆球因为反光产生了五边形的光斑。这个角色是一个二地面片,但也大致正确地产生了影子。这边这棵树也有影子,而且树叶 有摇曳动画。仔细观察还可以发现树的附近有随机飞动的萤火虫。左边这里有一个半透明的物体,这也是一种非常常见的元素。 我花了非常多的时间研究齐鲁里人的画面,观看他们关于画面方面的技术分享,然后做出了这个演示的场景。这个场景中肯定还有一些元素没有覆盖到这些,以后再想办法吧。 这个视频不是一个从零开始的教程,所以只是说明一些关键的方法,还有在做的过程中可能会遇到的问题。 关于素材的尺寸,可以先阅读这篇文章,我选择的是四十八乘以四十八像素的角色。这篇文章说到这是常见的大小,大部分有钱的工作室 一般会选择用这个尺寸,细节足够,绘制也不会过于困难。虽然我并不有钱,但是通过对比这些尺寸,最终还是选择四十八乘以四十八。 这个尺寸既有像素感,相对三十二乘以三十二的人物,四肢也可以比较长,又比六十四乘以六十四的容易化, 这是最终建筑和人物的比例。建筑物是从网上找到的图,因为图片被放大了,失去了像素感,所以我重新画了一个。不过因为很麻烦,我把二楼给省略了,最后做模型的时候又省略了。三楼 人物则是从 unity asset store 下载,再把高度改为四十八像素,确定素材的尺寸之后就可以建模了。以这个售货机为例,宽度二十七像素,高 度七十像素。 unity 中的精灵默认是一百像素,就等于一个 unity 中的单位长度,而一个单位长度又等于 brand 中的一米,所以这个售货机的宽度是零点二七米,高度是零点七米,厚度则根据感觉去设置。 售货机的四个角是空白的。像素化通过这种方法表现圆角,在三 d 模型中可以通过倒角来表现,虽然这会让模型和原本的设计产生差距,但有时不失为一种可以接受的妥协。 如果你想给模型描边模拟像素化的轮廓线,那么最好是这时就直接绘制在模型的纹理上。一开始我企图在 unit 中通过程序进行描边,但花了很多时间之后,发现各种描边方法都有各种各样的小缺陷,效果并不好。再来 看模型的 uv, 因为我们的纹理尺寸已经确定,必须精确控制 uv 的缩放量。这里我用的是 blender 的 tax toes 插件,设置为每米一百像素,点击应用就可以正确缩放了。 紧身方面用的是 depth of field, 后处理模式,设置为 bouquet focus distance 设置焦点的位置,焦点附近的东西就清晰,离焦点太远就会变得模糊。 focus length 可以控制模糊的程度, 刚才说到焦点附近的东西就清晰。 aperture 定义的就是离焦点多远的范围内算是附近。 blade count 控制反光的地方形成的多边形的边数。 blade curvature 控制这些多边形的圆角程度。 bread rotation 控制这些多边形的旋转角度。 紧身效果非常好,但是透明物体会因此产生问题。左边这个半透明的正方体就因为紧身后处理变得异常了。解决方法是给这个物体再加一个材质,这个材质用的是我自己写的 shader, 与其说是自己写的,不如说是复制的 这个 shader 修改自 unity 的 light shader, 将其他 pass 都删掉,剩下 depth only 和 depth normals 萤火虫使用 v f x 实现。具体可以看这个视频,但由于 v f x 用的也是透明材质,开启紧身后同样会出现异常。我的解决方法是创建一个不透明的 shader graph, 启用 alpha clip, 再让 v f x 使用这个 shader graph。 v f x 使用 shader graph 还属于实验性功能,需要先开启 experimental operator's blocks, 而 shader graph 的 active targets 需要添加 visual effect, 这样只是暂时解决了问题。如果以后要用 v f x 实现,火焰等特效可能还是无法避开 树叶的摇曳。动画也是用 shader graf 实现。具体看这个视频需要注意,按这个视频的做法,需要保证纹理是正方形的,否则会像他的视频中那样像素变成长方形。 我还让这个 shader graph 支持法线贴图,让法线贴图也有动画树叶,看起来更有立体感。最后是关于精灵的阴影,只需要给精灵添加一个材质,然 然后把 sprite renderer 中关于阴影的选项打开,精灵也可以加上法线贴图,效果会更好。 差不多就是这些内容了。如果你对这种效果有兴趣,可以自己做做看,毕竟我说的这么简略,光看视频肯定是不清楚的。
