β

GameMaker: Studio 中文教程 #2: 2D人物行走

编者按

indienova 会员青铜的幻想为希望了解学习 GameMaker: Studio 的中文读者专门撰写了本系列教程,本文为第二期,主要对这款引擎的界面功能进行了简单介绍,并结合实例讲解如何制作一个 2D 游戏人物行走图。欢迎读者朋友在文章后留言,以便作者能够针对性地安排接下来的教程内容。

说明

各位好~之前的一篇教程简单介绍了 GameMaker: Studio 这款引擎,并讲解了从官网免费下载并注册使用 GMS 的过程。如果还没有看过或者觉得有些生疏了,可以前往 这里 复习一遍。

从本篇开始,我迫不及待地要进入具体的开发教程了,我将结合实例,详细为大家展示使用 GMS 开发游戏需要掌握的知识与技巧。

教程素材来自目前与胡桃工作室合作的独立游戏《冰杖秘闻》(The Tale of the Ice Staff)(中文站点见 这里 )。

目前该游戏已通过 Steam 的 Greeelight,大家有兴趣可以关注:

我将开发内容整理成教材,是希望能够对有兴趣开发独立游戏的朋友们有所帮助,后续教程也会陆续发表在 indienova 上。

本期概述

教程目标

完成本教程,可以学会在 GMS 中加入一个能够四方向行走的 2D 游戏人物。

所需素材

所需要的美术资源是《冰杖秘闻》女主角之一伊瑟拉的正面、背面和侧面的行走动画以及站立动画(本文所用到的全部美术资源可在文章后面的链接下载,也可以访问本教程项目的 github 库 ):

image18
image23
image08
image03

值得一提的是虽然人物的行走是四个方向,但往左右方向行走的时候通常可以用同一个侧面行走动画来表现。这样做的问题在于细心的玩家会发现为什么有时主角的武器拿在左手,有时又拿在右手呢?不过没关系啦,因为自古以来 2D 游戏业界通常都是这么做的,好像没有发生过玩家因此而不满的事件。

新建项目

如果这是你第一次打开 GMS,你需要新建一个项目,我把这个项目叫做 Tutorial01:

image01

而之后 GMS 会在欢迎页面记住这个项目,所以当你下一次继续你的项目时,只需要在欢迎页面点选你的项目即可:

image22

GMS 界面功能简介

image16

如图中标注,在进入 GMS 后,其大概的模块分为三个部分:

  1. 菜单及工具栏 (红色区域):所有命令或操作都集中在这里,例如保存游戏、创建新的资源等;
  2. 资源导航栏 (黄色区域):游戏中所有用到的资源都放在这里,例如 Sprites 动画、Objects、Rooms 等,以类似 Windows 资源管理器的方式存放和管理;
  3. 工作区 (蓝色区域):所打开的窗口编辑器所在的位置,例如 Sprite 编辑器、Objects 属性编辑器或者脚本编辑器等。

术语解释

  • Sprite:Sprite(精灵) 一词首次作为计算机图形术语出现,是在德州仪器的 9918(A)视频显示处理器上。之所以采用这个词作为术语,是由于在古早时期,这类资源并不会放入图形处理器的帧缓存区中,而是在显示时再与背景图层组合,就好似悬浮在空中一样。目前,这个术语的使用范围已经脱离了这层含义,用来泛指包含于场景中的各种 2D 图像或动画。简单地理解,Sprite 可以是一组多帧的 2D 图像,我们可以在游戏中控制它的显示位置,大小,角度,动画播放的速度和当前播放哪一帧动画。在本教程中,2D 人物的行走动画就是通过 Sprite 来表现的。
  • Object:Object(对象)的概念来自面向对象编程(OOP)。将数据和对其进行的相关操作封装起来,就得到了 Object(对象)。面向对象编程,就是将程序分解为互相通信的 Object 模块的编程范式。对象有机地将数据和数据的行为组织了起来,非常便于模拟一类事物,在游戏编程中这种特点能够发挥巨大的威力。GMS 中的 Object (对象),可以用来表示游戏中的一类事物以及与它们相关的行为,是我们创造游戏世界最基础的单元。
  • Room:GMS 以 Room (房间)为单位来管理游戏,类似其他游戏引擎中的场景(Scene)。所有的 Object (对象)都是会加载到某个 Room (房间)中来执行。如果把游戏比作戏剧,Room 就是演出的舞台。

这一点也与 Windows 操作系统类似,通常 GMS 中的同一操作可以通过菜单、工具栏和资源导航栏的右键菜单以及快捷键等多种方式来完成。

以创建一个 Sprite 来说,就分别可以用以下不同方式来进行:

  1. 在资源导航栏 Sprites 分类的右键菜单中选择 Create Sprite(我最常用的方式):
    image25
  2. 点击工具栏中的吃豆人图标:
    image24
  3. 选择菜单栏命令 Resources -> Create Sprite:
    image12
  4. 使用快捷键(Shift+Ctrl+S)。

导入Sprites

制作游戏内容的第一步通常从导入相关美术资源开始,对于我们所要做的2D场景中的人物伊瑟拉,其美术资源是她的 Sprites 动画。

这里值得一提的是在使用 GMS 开发时需要注意的命名规则问题。因为所有的游戏资源,不管是 Sprites、Objects 还是 Rooms 都是可以在脚本代码中直接使用名字引用的,而在 GMS 所用的脚本语言 GML(Game Maker Language)中,变量可以容乃任意类型的数据(而不是像 Unity 所用的 C# 一样需要事先定义变量的类型)。所以如果我们不对资源的命名加以规范化,就会容易在代码中陷入混乱,搞不清楚当前变量的类型了。

一种大家都在使用的命名规范就是在每个资源名称前加入一个代表该类别的前缀:例如 Sprite 前加 spr_ ,Object前加 obj_ ,Room前加 rm_ 。然后在后面加上用下划线分隔的用于标注该资源内容的单词。按照这样的规则,我们所导入的伊瑟拉的站立动画的合适的名字应该是 spr_ysera_idle ,而行走动画需要区分方向分别命名为 spr_ysera_walk_front spr_ysera_walk_back spr_ysera_walk_side

导入一个 Sprite 资源的操作如下:

image06

在这个打开的Sprite属性窗口中,目前我们需要关注的是下图两个红框中的信息。上面是该Sprite的像素宽度和高度,总帧数以及当前所显示的帧编号,点击两个指向左右的绿色箭头可以切换当前所在帧从而浏览整个动画。下面这个红框所包含的是该Sprite对应物品的原点。

image02

将该 Sprite 的原点值改为X=80、 Y=120(即人物的双脚中间的位置),然后点击 OK,即可完成第一个 Sprite 资源的导入。

image13

然后按照同样的方式导入剩下三组行走的 Sprites 动画之后,你的资源导航栏里应该是这样的:

image26

创建 Object

GMS 中的 Object 是组成游戏的基本单元,类似 Unity 中的 Prefab,可以理解成游戏中所出现物品的模板。我们为将要加入游戏中的角色伊瑟拉建立一个 Object,按照之前提到的命名规则,把这个 Object 叫做 obj_ysera 。并将该 object 的 Sprite 属性选为 spr_ysera_idle ,这样当角色被放入场景后,将会默认播放站立动画。

image20

创建 Room

Room 对应游戏的场景,我们暂且先建立一个叫做 rm_test 的测试场景用于查看我们的新加的游戏角色。

image04

在 Room 中加载角色

随后,我们将之前建立的 obj_ysera 放入测试场景 rm_test 中。

image07

首次测试运行

在建立了场景并放入角色后,我们就可以点击工具栏中的绿色播放按钮试试运行一下当前游戏看看效果如何了。

image11

如果这是你的第一次运行,GMS 可能会花数秒的时间来编译,这个时间会随着你的游戏中的资源增加而变长。之后你就可以看到 GMS 的 logo 出现,随后是我们刚刚建立的灰色测试场景与我们的游戏角色伊瑟拉。你会发现目前人物的站立动画快的如同抽风一般,没关系,这是因为我们还没有调整过动画的播放帧率。

新建控制脚本

接下来我们需要通过建立脚本来响应玩家的输入并移动 obj_ysera

脚本也属于游戏资源的一种,放置在资源导航栏的 Scripts 目录下。GMS 使用了一套 Events/Actions (事件/动作)的系统来完成脚本对 Object 的控制:简单地说,就是当这个 Object 身上发生了一件什么事情的时候(Event),来对应执行一个什么动作(Action)。举个例子,假如我们现在需要人物被攻击而受伤的游戏逻辑,我们会添加这样一组 Event/Action,即当人物与子弹碰撞时(Event),将人物的生命值减去5(Action)。而对于角色移动的逻辑来说,需要在游戏的每一帧都去做出判断玩家的按键情况,因此这里要用到一个叫做“Step”的 Event,这个 Event 所对应的 Action 会在每一帧都被执行。

GML
GMS 中的游戏逻辑围绕 Event/Action 系统来编写,它提供一套面向新手的拖拽式系统,可以做出逻辑比较简单的小游戏。但想要更加自由地发挥创造力,需要用到 GMS 内置的脚本语言 GML。通过 GML 为你想要实现的游戏逻辑编写脚本(通过拖拽系统编写的 Action(动作)和通过脚本编写的 Action(动作)可以混合使用)。一些相对底层和通用的功能都可以通过调用 GMS 提供的内置函数来完成(即所谓的应用程序开发接口 API),你也能够以此为基础编写复杂而强大的自定义函数。

GML 脚本能够在游戏的很多地方执行:

  • Events(事件):Object(对象)内置了许多事件,你能够通过脚本来控制这些事件出现时Object(对象)的行为和状态;
  • Room Creation Code(场景载入阶段):GMS 能够在场景加载阶段执行你编写的脚本来控制游戏逻辑,你可以认为 Room (房间/场景)在创建阶段会出现一个特殊的事件;
  • Instance Creation Code(实例创建阶段):将以对象为模板的游戏元素加载到场景后,就生成了实例。GMS 能够在实例生成的阶段执行你编写的脚本来控制游戏逻辑。

至于脚本的命名,我个人没有延用与 Sprite、Object 类似的命名规范。因为在这里脚本更像一个个的函数,因此我喜欢用 DoSomething() 这样的函数命名风格,即每个分词首字母大写的动宾短语,这样可读性更好,例如 FireBullet() TakeDamage() 。而这个在每个 Step 控制伊瑟拉行走的函数,就叫做 YseraStep 好了。建立一个名为 YseraStep 的脚本:

image17

控制脚本内容

在写具体的脚本内容之前,需要介绍一些 GMS 内置的 Object 的函数和属性。

这里使用常见的 WASD 键位来移动角色,具体脚本如下:

if(keyboard_check(ord('A')))
{
    x = x - 4;
}

else if(keyboard_check(ord('D')))
{
    x = x + 4;
}

else if(keyboard_check(ord('W')))
{
    y = y - 4;
}

else if(keyboard_check(ord('S')))
{
    y = y + 4;
}

关联脚本与事件

在写好 YseraStep 这个脚本后,接下来要做的是将其关联到 obj_ysera 的 Step 事件。首先第一步是打开 obj_ysera 的属性面板并添加 Step 事件:

image19

第二步是选择要做的 Action,这里简单介绍一下 GMS 的 Action 面板:

image10

这里右边竖排的标签栏对应的是 Action 的分类,例如 move-移动、score-分数等等预先设置好的分类,左边是该分类下的具体 Action。可能有些人在制作游戏的时候会大量使用这些预先设计好的功能,但这样的问题在于当游戏项目的规模增大时,将会缺乏灵活性、无法搜索并且难以管理,具体的原因估计要单独用一整篇文章来说明。这里我直接建议大家,对于所有的 Event,均使用 Execute Code(执行代码)这一 Action 来处理,这个 Action 在 control 分类下,如图:

image14

将这个 Action 拖动到 Step 对应的 Actions 内容中,将会打开一个代码编辑器用于填写这个 Action 的内容,这个 Action 的内容就是执行刚才的脚本 YseraStep:

image21

运行游戏查看角色移动

再次运行游戏,这时你已经可以使用 WASD 来控制角色的移动了:

image15

动画切换

可以注意到现在角色虽然有了移动,但没有在移动时播放对应的动画。那么下一步我们需要为 obj_ysera 添加动画和人物方向切换的代码。
回到我们刚才所添加的脚本 YseraStep,将代码修改如下:

if(keyboard_check(ord('A')))
{
    x = x - 4;
    sprite_index = spr_ysera_walk_side;
    image_xscale = 1;
}
else if(keyboard_check(ord('D')))
{
    x = x + 4;
    sprite_index = spr_ysera_walk_side;    
    image_xscale = -1;
}
else if(keyboard_check(ord('W')))
{
    y = y - 4;
    sprite_index = spr_ysera_walk_back;    
}
else if(keyboard_check(ord('S')))
{
    y = y + 4;
    sprite_index = spr_ysera_walk_front;
}
else
{
    sprite_index = spr_ysera_idle;
}

其中用到了 Object 的两个新的属性:

改好之后再次运行:

image05

现在唯一的问题就是动画播放速度太快了。

调整动画播放速度

Sprite动画的播放速度通过变量 image_speed 来控制,把以下代码加入 YseraStep 脚本中即可:

image_speed = 0.25;//使用1/4的速度播放sprite动画

image00

TADAAAA!

image09

经过漫长的劳作,你们终于用自己勤劳的双手做出了第一个 GMS 的 Demo,恭喜!

接下来的教程的内容将涉及到如何添加场景的背景和物品,我们下一期见!

附录:教程资源链接

该系列教程的项目/代码及原始美术素材已更新至 github 项目:

https://github.com/akane2002/GMS_TUT

美术素材可以点击 这里 下载。

作者:indienova 独立游戏新闻,评测,开发教学
你的独立游戏第一站
原文地址:GameMaker: Studio 中文教程 #2: 2D人物行走, 感谢原作者分享。

发表评论