雷火学堂

雷火学堂

手把手教你做游戏 | 从0-1入门虚幻引擎5(一)

图形引擎 2023.08.02

教程开始前,我们先回答一个问题:为什么要学UE?

全球最开放,最先进的实时3D创造工具

这是UE官方的回答,但或许对于初学者而言,在享受UE开源、技术、管线等各方面的优势之前,最大的焦虑可能是,这么NB的引擎,一定很难学吧?当然,如果你想深入研究UE,必然会有很高的学习门槛。如果仅仅是想要利用UE享受创作的快乐,其实很简单。

不积跬步无以至千里,让我们跟着教程一起来实现一个小游戏吧!这也许就是你成为UE5大佬的第一步呢?

下面就可以对号入座,看看你是不是我们教程的目标用户:

  • 我完全没有任何经验,但是想要尝试自己做游戏;(教程中部分内容会与Unity对比方便理解,如果没有接触过也不影响学习)
  • 我有一定的编程\Unity基础,想要学习UE但是不知道从何入手;
  • 我会用UE做美术效果,但是不知道怎么上手蓝图\逻辑开发;
  • 我会一点UE蓝图,但是用的不太好,想要更多资料学习(可以重点关注支线部分,整合一些入门\进阶的教程)

如果你符合以上的任意一项,那恭喜你我们是志同道合的朋友,欢迎继续看下去吧!

 

零、课程概述

 

目前,在网上已经能找到各种各样优秀的UE5教程,无论是入门,理论,还是方向专精,甚至官方文档和案例,都已经有丰富的学习资料可以参考。

笔者也是站在巨人的肩膀上,学习了数月才大致对庞大的UE有一个粗浅的了解,在这样的背景下,重复造一个教程的轮子毫无意义而且浪费时间。但是,在最初的学习过程中,经常陷入:“这是什么?他跑起来了但是为什么?我为什么要这样操作?我应该干什么?我还能干什么?”

那么本教程的核心设计思想也是围绕这些问题展开:

1、主线支线分配:主线部分主要讲核心流程,碰到一些可以拓展深入的部分,或者能深入了解的理论知识点会放在支线部分,保证主线清晰,能够覆盖各个方面,支线提供更多学习内容,更有针对性。

2、理论实践结合:UE除了基础功能,也有一套自带的Gameplay框架,所以在使用的过程中需要遵循一定的设计才能用的更好。在本教程中也会尽量从不同角度去解释这些问题。

3、简洁+正反馈:简化案例,明确每一步的操作方法和操作目的,减少噪音,尽量保证每一个操作都能在引擎里看到效果。

4、授之以渔:在前半段完成基础操作教学,做出简单功能以后,逐渐减少手把手文档式教学内容,提供常见的思路与方案(Debug、测试、实现),尝试自己解决问题。

如果你想要做酷炫的渲染效果,或者已经了解UE的基本功能,想要进阶学习C++;尤想要学习AI\动画等进阶功能,本文可能不太适合同学继续阅读~

教程大纲

 

下面,让我们一起进入正式的课程吧!

 

 

 

第一篇章教学内容,共分为5大部分:

  • 基本操作
  • 模块概览
  • 蓝图基础功能
  • 测试与Debug技巧
  • 举一反三实现简单玩法

 

一、准备工作

 

主线:

1、创建账号

工欲利其事,必先利其器:第一步我们先把账号注册好

  1. 安装Epic Game Launcher(Download Unreal Engine
  2. 注册+登录账号(注册 Epic Games 账户 | Epic Games (unrealengine.com
  3. 安装引擎详细文档(安装虚幻引擎 | 虚幻引擎5.2文档 (unrealengine.com)

 

 

2、创建工程

 

3、调整布局

如果一不小心窗口搞乱了,可以参考如下图操作恢复:

引擎默认布局如下图:

如果不希望内容浏览器悬浮,可以点击上图中的锁定内容浏览器选项

主页面注释:

参考教程:UE5入门教程-4.基本操作(移动、旋转、缩放)_哔哩哔哩_bilibili

支线:为Unity开发者准备的虚幻引擎指南 | 虚幻引擎5.2文档 (unrealengine.com)

 

4、新建关卡

在内容文件夹 - 右键 - 新建文件夹 - 双击打开

在Demo文件夹 - 右键 - 新建关卡 - 双击打开

 

二、光照

 

主线:

1、创建

窗口 — 环境光照混合器 — 全部创建出来

下一步:

支线:

感兴趣具体功能的可以看一下

虚幻引擎中的环境光源混合器 | 虚幻引擎5.1文档 (unrealengine.com)
UE5入门教程-16.点亮场景_哔哩哔哩_bilibili

或者玩一玩这个插件:

UE5 超动态天空 Dynamic Sky | 自制教程 |难点解析 +使用心得|虚幻引擎_哔哩哔哩_bilibili
其他光源教学:s06-光照系统介绍_哔哩哔哩_bilibili

 

2、整理场景结构

在大纲窗口 - 右键 - 新建文件夹 - 整理一下场景结构

 

三、地面

 

主线:

1、打开放置Actor面板,切换到形状

下一步:

支线:

现在已经可以放置简单的白模地形了,如果有兴趣可以了解一下UE的地编/建模:

UE5地编教程-1.课程简介_哔哩哔哩_bilibili
UE5 Modeling 01: 造型工具 Shapes_哔哩哔哩_bilibili

 

四、初识角色

 

主线:

1、第一步:现在已经能在UE里面搭建基础的地形和光照了,运行游戏之后会发现角色出生在场景相机位置

2、在场景里放置一个玩家出生点,可以控制玩家的出生位置,再次运行可以看到角色出生在平面上了

(WASD + SPACE 控制)

 

现在在游戏里已经有能控制的角色了,但是还有一些问题没有解释:

  1. 为什么初始化的是这个角色?
  2. 玩家的输入怎么处理,角色怎么动起来的?
  3. 角色的动画是怎么做的?

我们先搁置这些问题,做一个简单的金币,如果你很感兴趣这些问题可以看一下支线。

支线:UE5自定义角色教程-1.课程简介_哔哩哔哩_bilibili

 

五、蓝图

 

之前通过这个面板,我们可以拖一些简单的物体到场景里面,但是会有几个问题:

  1. 物体没办法定义自己的逻辑(运动、碰撞等等)
  2. 复杂的组合物体没法复用,每次都要重新组件蓝图类类似于 Unity 的 Prefab,能够将带有逻辑的复杂物体打包成模板,方便直接复用

1、创建

右键新建蓝图类:

(2)选择Actor

支线:蓝图接口、继承与多态 - 哔哩哔哩 (bilibili.com
不建议现在看,第二章还会出现

(3)修改命名

支线:虚幻引擎项目中推荐的资产命名规范。 | 虚幻引擎5.2文档 (unrealengine.com)

 

2、模型

创建 金币模型(改名),并调整旋转、大小。

 

3、使用

尝试着拖进关卡,就能看到模型!

 

4、Hello World

再次打开蓝图,点击事件图表,这是蓝图类的逻辑部分:

那么,如何创建我们第一个Hello World:

 

 

  • 红色 的节点代表事件:当xx发生时
  • 蓝色 的节点代表函数:执行某一操作
  • 白色 的线代表逻辑执行顺序
  • 绿色 的节点代表纯函数(计算):获取计算结果
  • 其他颜色 的线代表数据传递

比较常用的事件有 Tick 和 Begin,Tick 在每一帧运行,Begin 在开始时运行;

删除Tick部分的逻辑,尝试打印自己的命名:

快捷键

  • Alt+鼠标左键 = 删除连线
  • Ctrl+鼠标左键 = 重新连线
  • 双击鼠标左键 = 改变连线路径
  • C = 添加注释

 

支线:蓝图 – 节点这么多怎么办?

 

Q:节点这么多我咋知道用哪个?
A:用多了就知道了
A:看你想做什么,Google/GPT/文档/直接搜,基本上都能有答案
Q:搜索的时候有什么技巧吗?
A:用多了就知道习惯性的命名,就能大概找到对应的节点
A:按住Alt能看见英文名,直接搜英文缩写就ok
A:不同单词之间不用输入完整,用空格隔开也能搜到

 

5、转起来

接下来,我们要让金币转起来!

添加本地旋转

修改旋转X轴值

运行一下,金币开始转了!

受到设备性能等因素影响,每次运行帧率可能不同,所以每一帧Tick的间隔有可能不同。如果每一帧都旋转固定的角度,可能会出现速度不均,所以一般我们都会把速度*每一帧的间隔时间,保证匀速旋转。

定时器

Time秒之后,调用一次Event函数,Looping决定是否每过Time秒都会触发。所以要新建一个Event承载需要运行的逻辑,然后在初始化的时候,让定时器周期调用。

如果你想要每秒触发一次的事件,应该像这样去配置:

支线:UE4基础教程系列-P3 时间管理大师(Base)_哔哩哔哩_bilibili

 

6、参数

现在我们已经会让金币转起来了,但是旋转速度是固定的,如果我们想让场景中的不同金币不同转速呢?

首先新建一个浮点变量,下一步公开给外部可编辑(眼睛图标),然后用变量控制速度-在场景的实例中修改速度(需要先保存编译),最后实现不同转速

 

7、材质

现在金币已经能旋转了,接下来我们让他更像金币一点吧

新建材质 - 设置基础数值 - 按住数字键(1/2/3) - 点击鼠标左键 - 可以快速创建常量 - 配置金币的材质:

动图
 

8、一点装饰

增加文本渲染组件,修改文字、大小,修改视图和吸附\移动到合适位置

 

 

添加点光源组件,调整参数,增加光照:

 

支线:

UE5入门教程-13.点光源_哔哩哔哩_bilibili
UE5入门教程-14.聚光源_哔哩哔哩_bilibili
UE5入门教程-15.矩形光源_哔哩哔哩_bilibili

 

9、组件层级

再运行一下,你会发现坏了,装饰和灯光没有跟着转(当然如果你没坏先接着往下看,试试看怎么搞坏)

动图
原因是我们蓝图只旋转了Coin

我知道你很急,但你先别急。

方案1:把其他物体拖入Coin的子物体

方案2:直接旋转Actor本身

问题和方案都很简单,但是牵涉到UE的组件层级问题,这里有一些门槛,结合自己做的这个Coin理解一下

支线:《InsideUE4》GamePlay架构(一)Actor和Component - 知乎 (zhihu.com)

怎么知道是不是 SceneComponent?

 

10、移动

解决了旋转的问题,那么移动呢?可以试着首先可以理解一下本地坐标 和 世界坐标的概念

 

 

 

如果感觉不好理解,可以关闭金币旋转速度,在场景里初始旋转一个角度试试看

那么,如果我想要沿复杂的路径移动呢?

听上去就是个很复杂的需求,所以接下来的蓝图会复杂亿点,准备好!

既然要复杂路径移动,我们先画一条线吧,然后添加Spline组件,按住Alt+鼠标左键拖动,可以新增点(注意拖动的箭头保证路径在同一平面),勾选闭合循环形成环线。

 

有了线我们应该要怎么用呢?

如果不知道函数有什么用?返回值是什么?可以尝试Print或者Draw Debug把结果可视化,多多尝试,通过尝试可以发现,我们可以通过Distance获得曲线的坐标

如果试着让Distance随时间增加呢?

这里用了一个Distance变量,用于累计之前走过的距离。注意!这个Distance是没有公开的,对比之前公开的旋转速度,理解一下什么情况下需要公开变量。

这里遗留了一个问题,走完一圈就停下来了,那我们接着来看下一步怎么操作~

问题看上去解决了,但是好像又没有

这里用到了if分支,Distance大于曲线长度时清零

整理一下现在的蓝图,现在只要让金币跟着曲线运动就好了

但是又发现了个问题,金币到地下去了。

解决方案很简单,可以直接修改曲线位置,也可以给金币再套一个SceneComponent父物体(记得更换蓝图节点),自己试一下吧!

 

支线:蓝图 – 组件移动

金币移动的问题解决了,但是如果我要做升降平台,之前那些蓝图还要再复制一遍吗?反思一下,是不是如果确定了曲线、速度、移动的物体这应该是一个通用功能?

这里创建了一个ActorComponent,可以复习一下之前的概念,主要是为了复用这一段移动逻辑,可以直接跳过这个视频看下一页的蓝图(注意变量命名一致)

 

Tick 的逻辑有了,现在还需要一个初始化

告诉组件:让哪个物体,按哪条曲线,以什么速度运动,这里用到了自定义函数,就跟其他自带的蓝图函数一样,会传入参数,执行逻辑,返回参数,Sequence节点会按顺序执行(可以用来把从左到右很长的一段逻辑拆分)

MoveSpline的初始化函数:

MoveSpline组件挂上后会自动执行,Coin这里需要调用MoveSpline初始化设置运动路线与物体

可以尝试一下:

  1. 扩展组件,提供开始、暂停、反向运动的功能?
  2. 用这个组件做一个升降梯?(复用AC_MoveSpline)

我们回到主线,回顾组件层级,再来理解一下这个概念

 

11、物理

先试着玩一下,会发现这个金币是会阻挡玩家的

动图
在细节面板看到的这些参数,都是像刚才我们制作的组件参数一样,用来调整功能的,不妨动手试试看物理相关的参数有什么用?
 
动图

支线:

ue5教程20:一节课了解碰撞预设_哔哩哔哩_bilibili
为项目添加自定义物体类型 | 虚幻引擎5.2文档 (unrealengine.com)
为项目添加自定义物体类型 | 虚幻引擎5.2文档 (unrealengine.com)

 

12、Trigger

终于开始做吃金币了!我们预期金币应该不会阻挡玩家,玩家吃到金币后就会消失,先修改碰撞,让玩家穿过。

再增加一个碰撞盒,当然,你也可以使用金币自身的碰撞,但是推荐渲染与逻辑分离。注意:碰撞盒也是一个SceneComponent,可以关注一下碰撞盒的物理配置。

支线:

ue5教程20:一节课了解碰撞预设_哔哩哔哩_bilibili
为项目添加自定义物体类型 | 虚幻引擎5.2文档 (unrealengine.com)
虚幻引擎中的碰撞响应参考 | 虚幻引擎5.2文档 (unrealengine.com)

 

增加碰撞时的响应事件的监听,打印Log尝试一下,删除自己大功告成!

由于直接Destroy Actor似乎不保证时序(还没有研究底层原理,测试结果是这样的,即:销毁物体时,还有物体相关的逻辑在运行,所以如果发生报错,可以通过这样的方式保证 销毁时所有当前帧的逻辑已经运行完成

 

13、粒子特效

吃金币当然需要一个明确的反馈,增加一个粒子特效看看!第一次运行需要等Shader编译

支线:

01_Niagara粒子系统准备工作_哔哩哔哩_bilibili

 

六、结语

 

经过上面的一系列操作,我们做了一个金币的Actor,能够修改他的模型、材质,可以自定义他的旋转、移动,在角色碰撞时做出反馈。看上去金币已经很完善了,但是现在我们的角色还没有办法记录收集的金币,以及之前提到的关于角色的三个问题

  1. 为什么初始化的是这个角色?
  2. 玩家的输入怎么处理,角色怎么动起来的?
  3. 角色的动画是怎么做的?

这些问题,我们将在《手把手教你做游戏 | 从0-1入门虚幻引擎5(二)》第二章来和大家一起研究!