pokon548's 博客

探索微创新,为发烧而生

用 Arcade 学习写一款 RPG 游戏 —— 让主角动起来

pokon548's Avatar 2019-08-08

  1. 1. 进入 Arcade 并创建游戏项目
  2. 2. 游戏主人公 —— 精灵
    1. 2.1. 创建精灵
    2. 2.2. 给精灵皮肤
      1. 2.2.1. Arcade 目前只支持 16 位色的显示!
  3. 3. 让主人公动起来
    1. 3.1. 一般游戏的运行逻辑
    2. 3.2. 进行“初始化”操作
    3. 3.3. 让主人公能够运动起来
      1. 3.3.1. 小心!别张冠李戴
  4. 4. 示例代码
  5. 5. 小结
  6. 6. 开始下一节

前一篇文章已经提到了如何使用 Arcade 这一十分方便的在线游戏编程学习平台。那么这次我们就来正式开始写游戏吧!

进入 Arcade 并创建游戏项目

首先,请戳这里进入 Arcade 平台。在页面加载完毕后,找到“我的项目”,并点击大大的紫色按钮“新建项目”。
深度截图20190808162305.png

新建项目可能需要一点时间,请耐心等待进度条停止显示。
深度截图20190808162503.png

当界面变成下图模样时,即代表项目已经创建完成。可以开始了!
深度截图20190808162633.png

游戏主人公 —— 精灵

在 Arcade 中,游戏主人公以及其它各种各样的 RPG 都有一个统称,叫做“精灵”(不要问我为什么叫这个)。
深度截图选择区域20190808162821.png
通过创建精灵,你可以为游戏添加主人公、NPC、怪兽、云(对,就是每天在我们天上飘的那个)、子弹(对,你没有看错,它真的可以干这个)等等… 可以说,这个是游戏里面相当重要的一环了。

创建精灵

那么,该怎么创建一个精灵呢?很简单。点击左侧的“精灵”分区,把这个方块拖出来即可。
深度录屏选择区域20190808165056.gif

给精灵皮肤

你一定不会想要你的主角在屏幕上是透明的存在吧(当然如果你要五毛钱特效当我没说)?为了让主人公富有活力,同时让玩家有玩这款游戏的欲望,我们需要给精灵一层皮肤。
当然了,手动绘制一个精灵的皮肤不是我们这篇博文的重点。故我们就使用 Arcade 自带的主角皮肤就好(相信我,其实自带的皮肤还挺帅的)。

要给精灵加上皮肤,请找到你刚刚拖出来的方块,点击这个灰色的地方。
深度录屏选择区域20190808171751.gif

接下来,你应该会看到这样的一个弹出框。这个就是皮肤的编辑框了。
深度截图选择区域20190808163900.png

然后,我们切换到“Gallery”分栏里,选择 Arcade 自带的主角皮肤。选择完后,点击“完成”。
深度录屏选择区域20190808164110.gif

这样,我们的主角就有皮肤了。

Arcade 目前只支持 16 位色的显示!

如果你是一个特别喜欢各种颜色搭配的 Geek,那么 Arcade 也许会让你小小的失望一番 —— 其(不包括透明色)只支持 16 种颜色的显示。
这也是为什么皮肤编辑器里没有“RGB调色板“一类东西的原因。不过相信我,16 位色在学习游戏开发的过程中完全够用,因此不需要太过于担心。

让主人公动起来

你也许注意到了一点:我们现在拖出来的那个方块“失去了颜色”。这是不是在提醒着我们什么?如果你敏锐的感受到了这一点,那么 pokon548 向你表示小小的祝贺!的确!这提醒我们:这个方块目前不会产生实际的效果。
什么意思呢?让我们先点击左侧的“播放按钮”看看目前这个项目运行的结果。
深度截图择区域20190808165919.png

你会发现:左侧模拟器的“屏幕”上最终什么都没有。没有显示出我们刚刚创建出来的主角。怎么回事呢?

一般游戏的运行逻辑

这就要谈到目前常见游戏的运转逻辑了。在现代的常见游戏中,无论是选关、得到道具、NPC 的交流、主人公的行走等,都是在一个循环里面进行的。
而要让这一切发生,我们首先要进行“初始化”操作。如果你不明白这个词的含义,举个例子:要让主角在后面的循环中动起来,我们必须要先有一个主角才行(不然主角是幽灵吗滑稽)。不然后面的循环里我们要操作什么呢?

进行“初始化”操作

回到项目上。我们刚刚创建“主人公”这一动作其实就是“初始化”操作的一部分。而为了让这个方块发挥其初始化主角的作用,我们要把这个方块拖动到绿色的“当开机时”的方块内。
下面是操作方法的动态示意图:
深度录屏选择区域20190808170740.gif

你看,方块是不是恢复到正常颜色了?我们现在再试试点击”播放“按钮,看看项目的运行情况。
深度截图选择区域20190808170958.png

我们的主角出现了哦!真棒!

让主人公能够运动起来

也许你之前曾试过点击左侧模拟器的方向键。如果没有的话,pokon548 推荐你现在就点点看。
深度截图选择区域20190808173851.png

没有任何效果?那就对了。因为我们还没做好这个功能呢!唔…接下来我们要做的,就是让主角能够在我们按下方向键的时候动起来!
听起来似乎很复杂的样子。但是在 Arcade 里面,我们只需要另外一个方块就可以搞定啦!

要让主角跟随方向键的律动指引动起来,我们要在“控制器”分区里找到这个方块,并将其放置在“主角初始化”方块的下方。

深度录屏选择区域20190808180326.gif

小心!别张冠李戴

如果你先前不小心多创建了一些精灵,那么变量名可能会混乱起来。如果要保证“控制器”方块能够起作用,必须要保证主角的“名字”(这里是指变量名)前后一致。比如上面的示意图中,两个方块指向的“名字”是不一样的,要将其改成一样的才可以。
要将其改成一样的,请按下图方式操作。
深度录屏选择区域20190808174506.gif

好了,现在主角应该就可以动起来了。试试点击左侧的方向键(记得要先点击“播放”按钮运行项目!以后不再提示),主角是否运动起来了?

示例代码

小结

通过本次文章的学习,你应该知道:

  • 如何使用 Arcade 创建项目。
  • 如何创建主角。
  • 如何给主角换皮肤。
  • 如何让主角能够成功的跟随方向键的节奏动起来。

学习任何一件事情都不是那么容易,故 pokon548 建议你“每天只学一章”本教程。每天只学习一章,看似进度缓慢,但却为你后续的学习打下了坚实的基础。通过这样的学习方式,你的学习难度将“不升反降”,后面越学越轻松。
心急吃不了热豆腐!请一定要慢下学习的节奏,以期慢工出细活。

开始下一节

当你能够对这张的内容游刃有余后,就可以开始下一章的学习了。如果是这样,请点这里

本作品采用知识共享署名 3.0 中国大陆许可协议进行许可。您可以在遵守此协定的前提下对本文进行再发布、分享、修改等。

本文最后更新于 天前,文中所描述的信息可能已发生改变