天美游戏人硬核分享：如何只花5天做一款手绘风游戏？

文：江西恐龙（Dino）

TiMi Club请到了有着丰富游戏从业经验的师兄Dino。他制作的独立游戏《东东不死传说》，2017年曾被美国EVO格斗大赛选为参赛作品。

Dino将给TiMi Club的同学们演示，仅用五一假期时间，手绘做出一个游戏Demo的绝活儿！

以下为分享原文：

PGMMV全称为“Pixel Game Maker MV”（像素游戏开发大师）。虽然名叫像素游戏，实际上这款软件可以制作2D ACT或ARPG高清游戏（例如《胧村正》）。

PGMMV由日本角川公司开发，Steam上售价为221元人民币。做出来的游戏可以打包输出Windows exe格式，就是可以在Steam上售卖。

好吧，先把思绪拉回来。别做什么独立游戏发售的春秋大梦了。趁着五一小假期的机会，试着用PGMMV做一款Demo试试？

既然要制作Demo，那么美术资源就必不可少了。我在之前有提到过，获得美术资源通常有两种手段：1.从资源 站下载。2.独立绘制。

分享一个好站，基本上2D像素游戏的素材都可以找到。

https://www.spriters-resource.com/

在琢磨美术资源的时候，我突然想到了《合金弹头》。这款游戏俘获了很多80后玩家的心，何不利用五一假期做一个简单的《合金弹头》Demo？

五一的时间有限，如果只是手绘黑白线稿应该来得及。就如同1928年迪士尼的第一部黑白动画片一样。

（说不定这个设计一炮打响，从此我就走向了制作人的道路呢？）

说干就干，我立刻在Steam上下单购买了PGMMV，然后开始筹备Demo的制作方案：

1. Demo主要通过PGMMV制作。其他辅助软件有Photoshop，龙骨，GoldWave。
2. Demo的制作周期只有5天。学习引擎的时间建议放在五一前，我下载了几个官方Demo，看一下人家是怎么做的，这可以加快学习进度。

附PGMMV官方视频教程：

DAY01·关卡设计

《合金弹头》1代由日本NAZCA公司开发，2-7代由SNK本部接手开发。

大部分人对《合金弹头》的印象都停留在第一代，因此我在Photoshop上针对初代的雨林关卡进行了二次创作。

设计点1

在原作里，玩家走过一片热带雨林区域，最终抵达瀑布悬崖。

设计点2

游戏到达末尾时，我在瀑布悬崖的下方设计了纵版射击的玩法——玩家此时需要将屏幕竖起来玩。这是一种非常适合在手机或Switch上展现的趣味玩法。

但由于PGMMV目前不提供Switch的功能接口，因此这个设计只能算是纸上谈兵，目前阶段无法实现。

设计点3

在所有人都认为打完关底BOSS就要结束关卡的时候，隐藏BOSS就正式登场了。

它的造型是我们生活中熟悉的扫地机器人的造型，而三根触手伸出来之后便可以行走自如。配合火星的促销海 ，给人一种忍俊不禁的幽默感。

光有奇思妙想还不够，还需要确定游戏的3C标准。通过街机模拟器WinKawaks可以看出原作的分辨率为304X224。

这里进行一个简单的数学换算，假如想做一款1080P的Demo，角色分辨率需要放大4.8倍变为135X175。

在原作中场景是静态不动的。这次得益于强大的PGMMV引擎，用户可以做出多重卷轴功能。并且近景、中景、远景的相机移动速度都可以微调。我将场景分为了8层，分别为：

8层：天空层，移动速率30

7层：远景灌木丛层移动速率50

6层：中景灌木丛层，移动速率60

5层：中景树木层，移动速率70

4层：近景建筑层，移动速率80

3层：近景树木层，移动速率90

2层：地面层，移动速率100

1层：前景遮罩层，移动速率110

移动速率指的是和角色之间的相对位移，100就表示和角色保持同步。110表示移动得比角色快，90表示移动得比角色慢。这种技术在过去年代叫做多重卷轴场景。2D游戏用场景分层的方法来营造立体感。

五一假期的第一天，我从早上7点画到凌晨3点，终于把场景部分全部完成。

潜水艇废墟

热带雨林

地牢监狱

DAY02·场景动画

场景完成后，接下来可以考虑加入动的元素。我们来试试给场景加一些下雨的动态效果：下的雨滴、滴在镜头上的雨滴。

雨滴效果

前者用PGMMV自带的粒子系统制作，后者采用传统的2D画法来绘制——从 上下载雨滴的视频，然后逐帧截图。

观察雨滴的动态走势，一帧一帧的把球面扭曲的效果画出来。连贯播放就变成了一滴雨的动画。

其他元素例如潜水艇的旗子、大树、杂草等，更适合2D骨骼动画。现在市面上2D骨骼软件主要有Spine、2D Live、龙骨等。

其中龙骨是国内公司制作的一款全免费软件，主要操作流程是：将旗子或其他元素图片导入龙骨——绑定骨骼——绑定蒙皮——调试动画——导出序列帧图素。

以下是龙骨的官方视频教程：

到目前为止，场景部分的美术资源已经绘制得差不多。在Photoshop里可以完整的拼接成一个大场景。并且大部分图素都是二方连续型图素。

什么叫二方连续？它是指在X轴左右方向可以无限拼接的绘制手法。例如围巾的花纹。上面的一小节花纹就属于二方连续。

四方连续顾名思义指的就是X+Y轴上下左右方向无限复制。例如宫殿的地砖就属于四方连续。

合金弹头的场景全长有六屏左右，如果全部手工绘制成本太大，也不利于引擎执行效率。因此用许多二方连续图素来拼接大场景是2D游戏通用的做法。

例如画一段二方连续的地面，那么在Photoshop里可以拼接成一个无限长的地面，自然也可以在PGMMV里拼接出同样的效果。

DAY03·角色动画

角色资源的绘制是以序列帧的形式。前面已经确定了角色需要放大4.8倍。所以找到官方的序列帧素材后，统一拉大4.8倍，再用线稿的形式逐帧描绘即可。

*请各位同学注意，出于学习的目的，这样借鉴官方素材是没有任何问题的。但是如果要自己制作独立游戏（不管是否商业盈利），又或者公司项目需要用到素材。则绝对不可以用到这类素材。

可以试着画一帧图，然后放到场景里感受一下效果。如果效果觉得不错，再继续画其他动作帧。

这个时候也可以确定角色动画的底版尺寸。例如将175像素的主角放在了一张256X256像素的底版内。把角色肢体伸展最远的一帧画出来，再来判断画板的尺寸采用256还是512。

开枪动画

在Photoshop里画好一个动作后，可以利用软件自带的动画功能来验证动画是否连贯（主菜单——窗口——时间轴）。

每一张图片的停留时间可以临时设置0.05秒。播放动画检查是否连贯，再根据效果进行动画的调整。

此外，过去的2D游戏为了制作角色边走路边射击的效果，是需要将角色的上半身和下半身分开绘制的，只有这样设计才可以让双腿一直循环播放动画。这次分拆动作考虑到了这一点。我最终还是打算绘制完整的动作，放弃上下分离的方案。

出于时间的考虑，只绘制了主角、敌兵的部分动作。

该怎么做呢？给每一张单帧图设置一个单色全图。鼠标拖拽的时候连角色和单色图一直移动，移动到合适的位置后，再隐藏单色图即可。

最终角色的完整序列帧大图输出之后，准备工作到此基本结束了。下一阶段就可以正式到PGMMV里面操作了。

接下来，开始实际用PGMMV制作游戏了。打开PGMMV后，选择创建新项目。官方提供了“横板行动“和”竖版行动“两种模板。如果要举例的话，前者就是《魂斗罗》，后者就是《塞尔达传说》。

我们点击”横板行动“，然后选下一步。

接着，是很关键的两点：

（1）图块的大小：这里的图块指的是行走层的碰撞格子大小。假如是画幅比较大的游戏推荐64，假如是画幅比较小的游戏则推荐32或更低。

图块越小，碰撞就可以画得越细致，但是会增加性能消耗。假如想制作一款720P的游戏，碰撞格子设置为64是比较合适的。

（2）游戏分辨率：现今大部分2D动作游戏也朝着高清化的方向发展。建议至少都设置成1280X720。

创建好游戏项目后，它的界面布局是这样的：

（1）功能页签

（2）子页签A

（3）子页签B

（4）操作区

（5）属性区

首先是顶部的【功能页签】：这个区域从游戏开发的角度。把功能选项拆分成了：场景、图块、动画、对象、资源、流程、插件。

任何一个页签都是重要的模块。

图片

【子页签A】：当用户点中了功能页签的任意选项时。这里会显示子选项。这个结构应该很容易理解。

【子页签B】：这是第二层子页签，理解成另一个页签就好了。

【操作区】：这里是用户进行资源搭建的场所，属于核心页面。

如果用户点击场景，这里顶部会出现场景分层栏。它是用来区分前后层的。用户需要在这里把场景图素资源整合到位，搭建出符合自己预期的一个游戏场所。接下来还需要把制作好的主角、怪物扔到场景里待命。

【属性区】：这个“属性面板“就是“子页签A、B”的子选项。当用户点击页签的任意目标时，“属性区”都会显示该目标对应的属性参数。

介绍完了面板，接下来会说明如何将美术资源制作成可操作的Demo。只要记住是这样的操作流程就可以了：资源——图块——场景——动画——对象——流程。

PGMMV知识点-资源

在PGMMV官方的理念中，资源是一款游戏的源泉。在资源模块里，还分有图像、字体、文本、视频、音乐等子页签。每一个子页签都是一种资源。

点击图像页签右键建立好文件夹，并导入资源。PGMMV支持中文显示，因此可以创建类似角色、怪物、场景这样的文件夹。接下来就把之前绘制好的所有PNG图都导入进去。

PGMMV知识点-图块

功能模块叫做图块，实际上就是场景专用图块，和角色没有任何关系。前面有在资源模块里导入所有PNG图。接下来就要在图块模块里进一步处理场景相关的图。

点击图像页签右键建立好文件夹，并导入图块。（导入，是从资源里面调用的意思。）

我把所有和场景相关的png图都导入了进来，命名和之前保持一致。

例如之前资源里有一颗树的图素叫做tree01.png，那么现在就可以创建这颗树的图块，名称可以和素材不一样，不过为了便于管理还是建议保持一致。

这个步骤可以看到，框选的红色格子是有固定尺寸的。这个就是之前讲过的最小图素格。例如设置的是32X32，那么每一个红色格子都是这个尺寸。

有需要用到行走属性的图，就需要在图上面绘制行走格子。方法是点击图片，然后框选区域，再确定碰撞朝向即可。这里我选择的是四方形都有碰撞属性。