我的Paper2D教程

背景图

关键字:paper2D,Flipbook,Sprite,Input

为什么有这篇文章?

这篇文章是笔者在学习了UE4官网Paper2D教程之后,以自己的意愿为主,结合学到的东西所弄出来的一个基础项目。笔者在不断的学习过程中,发现一个问题,那就是要巩固自己学到的东西非常困难,即便是学会,弄懂,也很快会忘记。于是,笔者就想出了一个方法,那就是学完之后,写一篇自己的文章,只有看的人都能看懂,那么这部分的知识才能算是掌握了。

要流畅的读懂这篇文章,需要读者对UE4编辑器有一个基本的认知(至少得知道编辑器怎么操作,界面上有哪些功能吧)。如果你从未接触过UE4,请先跟着官方视频学习,相信我,官方视频是最好的入门教材。

做哪些功能?

本文会创建一个基本的可运行的Paper2D项目,你可以在这个项目的基础上进行迭代,开发出你自己的作品。具体的内容是:

  • 创建一个背景
  • 创建一个可操作的长耳精灵角色
  • 为长耳精灵添加待机和跑步动画
  • 添加对长耳精灵的操作(向左和向右跑动)

准备工作

打开UE4(笔者用的是最新的4.20.1),创建一个空的蓝图项目(不包含初学者内容)。


在正式开始前,我们先做一些准备工作。首先,在内容浏览器中创建5个文件夹,分别是:Blueprints,Data,Flipbooks,Sprite,Textures。所有的资源都会放到相应的文件夹中去,创建完成之后,内容浏览器是这个样子的:


然后,准备要用到的图片资源。这次我们用到的资源不多,一张背景图,一组待机帧图片,一组跑动帧图片。下载图片资源,请点击这里。

接着,将图片都导入到工程中,只要把所有的文件都拖到内容浏览器的Textures文件夹里面就可以了。注意不能直接把文件复制到Textures目录下面,编辑器需要对这些资源进行一次转换。因为我们的动画文件名有冲突的地方,所以要修改一下动画的文件名,比如把待机图片文件名改成ElfIdle_1。导入成功后,我们的Textures文件夹就变成了这个样子:


注意:导入背景图的时候UE4可能会将它转换成Normal Map,这时需要把它还原回来。至于为什么会是这样子,大概是我们的背景图太蓝了......

添加背景

现在,我们要将背景图添加进去了。在此之前,我们先要修改一下场景的显示方式:将视角切换成前端,渲染模式改成带光照,然后点开显示标签,去掉Grid标记(这一步可以在加完背景之后再去掉,因为调整背景位置的时候需要用到Grid对其位置):


在内容浏览器里右击Iceland,选择Sprite操作->创建Sprite。将创建出来的Sprite移动到Sprite文件夹里去。然后,把它拖到场景中。调整图片的位置,使其位于x轴的上方(Z轴正半轴),然后在细节面板上修改其位置,将Y值改成-100,如图所示:



(改完别忘了把Grid标记去掉)

创建Flipbook

与Iceland类似,选中所有的待机和跑动的帧图片,右击选择Sprite操作->创建Sprite。将创建出来的Sprite全部移动到Sprite文件夹中去。


选中所有Idle Sprite,右击选择“创建图像序列视图”,将新创建的序列视图命名为ElfIdle,这就是我们要用到的Flipbook。把这个Flipbook移动到Flipbooks文件夹下。

Flipbook这个单词非常好的阐释了它的意义,就是连续的帧动画。这是Paper2D中的动画工具。

然后,对Run Sprite做相同的操作,将Flipbook命名为ElfRun,并且将它也以移动到Flipbooks文件夹下。

双击打开Flipbook,看看动画是快了还是慢了,调整到你觉得合适的速度:


添加角色

从这一步开始,就要进入难啃的环节了。首先我们需要创建一个Blueprint,在Blueprints文件夹下右击,选择蓝图类,选择PaperCharacter继承,将蓝图类命名为MyCharacter。



双击打开MyCharacter,选中Sprite组件,在细节面板中将Source Flipbook改成之前我们创建的ElfIdle:



改完之后,在视口标签页下,你应该能看到有一个妹子在那里不停地抖来抖去。不过有点不协调的是,那个胶囊体太大了,不适合妹子的“身材”,需要调整。

选中上方的CapsuleComponent组件,在其细节面板里修改Shape下的Capsule Half Height属性和Capsule Radius属性,将其改的适合妹子的身材大小(比如改成60和24):



调整完成后

角色弄好了,接下来就是视角的工作。我们需要一个以角色为中心的摄像机,能够拍到当前场景的那种。这就需要在角色上添加两个组件:Spring Arm和Camera。Camera组件以Spring Arm为父组件,如图所示(CameraBoom是组件名):



CameraBoom的Z旋转量需要设置成-90,因为要正对着角色。去掉Do Collision Test和Inherit Yaw,因为我们的摄像机不需要碰撞和旋转。



Camera组件也需要进行设置。将Project Mode设置为正交(Orthographic),Ortho Width设置一个大一点的数,比如1600,这样就能看到一个比较广的场景。

好了,大功告成,下一步就是把它放到场景中去测试一下。把一个玩家起始节点拖入到背景图上,放到合适位置。然后,新建一个Blueprint,继承自GameModeBase,命名成PaperGameMode。双击打开PaperGameMode,将Default Pawn Class改成MyCharacter,然后编译,保存:



回到编辑器主界面,选择左上角的编辑->项目设置,打开项目设置对话框。在左侧列表中点击“地图&模式”。将Default GameMode,Editor Startup Map,Game Default Map改的和下图一致:


MyGameLevel就是当前的关卡名

完成之后,运行测试一下,嗯?妹子怎么掉下去了?这肯定不对啊,这场景中我们不需要重力。于是乎,在“世界大纲视图”中双击关卡打开世界设置,在Physics一节中选上“Override World Gravity”,将“Global Gravity Z”设置成0.0:


再次运行,我们可爱的妹子就在场景里啦:


操作响应

最后一步,也是最繁琐的一步。

要想让关卡响应操作,首先必须要设置工程的输入状态。这一步同样是要到编辑->项目设置中去操作。选中引擎一节下的输入标签,添加Axis Mappings,将其命名成MoveRight。


双击打开MyCharacter。我们要实现的功能很简单,当我们按下向右方向键时,角色向右跑动;当按下向左键时,角色向左跑动。要做好这些功能,我们就要做到以下两点:

  • 1、角色的朝向必须正确,向左或者向右跑的时候其朝向必须一致。
  • 2、按键按下的时候切换到移动状态,动画也必须切换到跑步动画。

移动

移动的功能比较容易,当我们按下向左或者向右键的时候,记录当前的移动方向,然后根据这个移动方向,确定角色的位置是沿着X轴正半轴还是负半轴的方向增加。

这里我们要用到之前添加的MoveRight事件和蓝图自带的MoveUpdatedComponent方法。下面是实现的原理:



对于每次的输入事件,判断当前的移动方向(MovingDirection),设置当前的方向值(Direction)。然后更新Character的位置,使用的数据是一个已经设置好的速度(Velocity)和方向的乘积。

移动方向(MovingDirection)是一个枚举类型,这个对象在Data文件夹中创建。里面包含了3个字段:Left、Right和Origin,用来表示三种不同的方向。

动画

动画的功能稍稍复杂一些。首先我们需要根据按键来设置移动的方向,按下按键的时候设置成指定方向,释放按键的时候将方向复原。


然后,当按下按键的时候,我们也需要设置角色的朝向,这就需要用到Set Control Rotation函数。因为我们角色的初始状态是朝右,所以当我们按下左方向键的时候,角色就需要绕着Z轴转180度。


最后,按下方向键也需要将Flipbook切换一下,这就要用到Set Flipbook函数,跑步的时候设置成Run,释放的时候设置成Idle。


将这一切都综合起来,我们的动画设置脚本就浮出水面了:


好,一切都准备就绪,编译运行,你就拥有了一个可以操作的2D场景:


哈哈,很有成就感吧!当然,如果你遇到了问题也不要紧,请随意在下面留言提问。同时,笔者的项目地址也会给出,你可以到笔者的码云上找到这个项目。

总结

本文的移动实现和官方教程中的实现完全不一样,其原因是在我们的场景中不需要重力。这样,移动的时候就没有了阻力,即便是释放了按钮角色也会继续移动。所以,笔者就自己弄了一套逻辑。

不过,笔者真正想说的是:学习一定要做一些和教程中不一样的东西,这样,你就会发现有可能一个不起眼的小东西就会困扰你很久,当你把它实现了的时候,你就能获得巨大的进步和成就感,这对我们来说是弥足珍贵的。

参考资料:

UE4官方视频教程
UE4官方文档
Unreal Engine 2D Tutorial Part Three

你可能感兴趣的:(我的Paper2D教程)