分享

以Construct 2制作平台游戏的新手指南(1)

 看见就非常 2014-08-20

我们能够使用Construct 2创造任何类型的2D游戏。我们将在本篇文章中阐述如何使用Construct 2制作一款平台游戏。如果你从未使用过Construct 2并希望能够创造一款自上而下的射击游戏,那就更应该好好阅读这篇新手指南。让我们开始吧!(请点击此处阅读第2部分

当你购买了Construct 2你便能够获得Jungle Platformer精灵,而我们也将在这篇教程中使用这一精灵进行阐述。如果你使用的是免费版本,那你便可以用自己的图像取代或尝试着从新手指南中找到任何你所需要的精灵。

jungle-pack(from scirra.com)

jungle-pack(from scirra.com)

安装Construct 2

如果你还没准备好,请马上获取一份最新的Construct 2。尽管Construct 2编辑器只适用于Windows,但是你制作的游戏却可以运行于任何平台上,如Mac,Linus或者iPad。我们也可以将Construct 2安装在限制性的用户账号上。这是一种非常便利的工具,就像你可以将其放在USB记忆卡中随身携带。

开始

现在你便拥有Construct 2,打开它并点击文件按钮,然后选择“新建”。

file new(from scirra.com)

file new(from scirra.com)

在“新项目”对话框中你不需要改变任何选项,只需要点击“创造”项目便可。Construct 2将始终保持项目作为一个单一的.capx文件。而现在我们需要着眼于空白的布局——这是你所创造的设计视图以及目标位置。布局就像是一个游戏关卡或屏幕上的菜单。而如果你使用的是其它工具,这一布局就是空间,场景或框架一样的存在。

明确布局的规格

首先,我们需要创造一个比系统默认值更大的布局(关卡)。在布局中的空白位置左击鼠标,“属性栏”将呈现出“布局属性”。将布局的规格改为“4000 x 2048”。

layout size(from scirra)

layout size(from scirra)

让我们在布局中平铺背景图像。双击布局中的一个空白位置,这时候将出现一个“插入对象”对话框,双击“背景图层”对象以插入对象。

tiled background(from scirra)

tiled background(from scirra)

这时候鼠标将变成一个十字光标。不管你最初将鼠标置于何处,这时候的你只要左击布局中的任何位置便可。随后图像编辑器便会打开,然后你便能够选择图像进行平铺。让我们从精灵包中输入Background ImageBackground.png文件。点击“打开”图标而输入图像。

load image from file(from scirra)

load image from file(from scirra)

选择Background ImageBackground.png文件,然后关闭图像编辑器。这时候你将会看到布局中出现了某一部分的背景图像。

我们需要设置背景的大小以覆盖整个布局。所以这时候我们需要左击布局中的空白位置,并确保背景的属性能够呈现在属性栏中。将它的属性设置为“0,0”以及它的规格为“4000,2048”(游戏邦注:与布局一样的规格),从而让背景能够完全覆盖布局。

tiled bg size(from scirra)

tiled bg size(from scirra)

背景的图像非常大,所以我们很难在当前的缩放模式下看到全局。所以我们便需要进一步缩小图像才能看到更多内容。同步调整并滚动鼠标进行缩放;或者我们也能够多次按压“查看——缩放”按钮进行观看。这时候你便能够看到整个布局了,如下所示:

tiled platformer bg(from scirra)

tiled platformer bg(from scirra)

我们将发现布局的左上角有一个虚线框,它便代表着窗口的大小。同时按压Ctrl和0将布局变焦到100%或者点击“查看——变焦100%”按钮进行观看。现在你便能够将布局放大到中间位置。这时候你能够使用滚动条去操纵左上角那个虚线框。同时你也能够点击并拖曳中间的鼠标按钮去调整布局,或者如果你找不到中间鼠标按钮也可以通过控制空间进行布局调整。

添加层面

现在我们便需要添加更多的对象。然而如果我们未能锁定背景,取消它的可选择性,我们便需要继续做出各种选择。让我们使用分层系统来完成这些工作。

布局总是包含多个层面,你可以在此为对象进行分组。图像层面就像是玻璃片一样堆积在每个列表上,并且其表面也附着了各种对象。如此你便能够更轻松地思考该将哪些对象置于上方,该隐藏或锁定哪些对象,并进一步明确视差效果等。举个例子来说吧,在一款游戏中我们希望将所有内容呈现在背景图层之上,所以我们便在其它对象之上创造了另外一个层面。

为了管理层面,请点击“层面”标签(游戏邦注:通常都在“项目”标签的旁边):

layers tab(from scirra)

layers tab(from scirra)

你将在列表中看到“层面0”(Construct 2的计数是从0开始,因为在编程中这样的设置更合适)。点击铅笔图标,并将其重新命名为“背景”,因为这正是我们的背景层面。然后点击绿色的“添加”图标在我们的其它对象上添加一个新的层面。让我们将其称为“主层面”。最后,如果你点击“背景”旁边小小的挂锁图标,你就锁定了这一层面;这也就意味着你将不能够做出其它选择。这对于我们的背景图层来说非常有帮助——既容易选择也不需要我们多次进行操作。而如果你想做出改变,你也只需要点击“挂锁”图标解锁便可。

复选框允许你能够在编辑器中隐藏图层,但是现在的我们还不需要这一功能。你的层面栏应该如下:

layers bar(from scirra)

layers bar(from scirra)

现在,你需要确保在层面栏中选中“主”层面。这一点非常重要,因为只有选中层面你才能激活它。所有插入对象将被插入激活层面中,所以如果我们未选中该层面,我们可能会将对象插入一些错误的层面。我们能够在状态栏中看到被激活的层面,同时当我们放置了一个新的对象时这一激活层面也会出现在工具提示中——所以我们必须留意这点。

添加图层

Jungle Platformer在TilesTiles.png文件中拥有一个图层集。让我们将这些图层整合到精灵对象中并将其作为一个图层对象进行使用。

就像你在背景图层中所做的那样,你也需要双击布局中的空白位置然后插入一个新的对象。但是这时候你需要选择的是“精灵”。鼠标将再次变成一个十字光标。然后点击屏幕中间的任何一个位置。

这时候你将再次看到图像编辑器以及一些其它窗口,因为精灵能够以动画形式进行呈现。但是我们现在并不需要播放动画——其速度设为0。我们将在动画中的每个框架插入图层。然后我们便能够通过改变动画帧架而调整图层了。

右击最底断动画帧中的空白位置,然后选择“输入精灵条”选项。如此我们便能够将网格图像分割为动画——这对于贴图图层同样有效。

import sprite strip(from scirra)

import sprite strip(from scirra)

这时将出现一个打开文件对话框。在精灵包中选择TilesTiles.png文件。随后Construct 2将要求你明确图像中有多少图层。这时候你将注意到Tiles.png是一个12×12网格大小的图层。你只需要分别在两个输入框中输入12和12并点击“OK”便可。

importing tile map(from scirra)

importing tile map(from scirra)

Construct 2将花费一点时间去分割图层。现在你共拥有144个图层能够作为动画帧了!因为我们不再需要之前的空白帧,所以我们可以右击它并选择删除。

delete first frame(from scirra)

delete first frame(from scirra)

你必须扩大动画帧窗口的规格,让这些图层能够更加清晰地呈现出来。如果你想要呈现一个更大的缩略图,你便需要右击空白位置并选择“放大”缩略图的规格。

将动画速度默认为5也就意味着图层的图像将会不断发生改变。因为我们希望图层能够保持当前的帧,所以我们需要将动画的速度调为0。在动画窗口中选择默认动画。

default animation(from scirra)

default animation(from scirra)

现在属性栏中便会出现动画属性。让我们将其速度属性设为0。

anim speed0(from scirra)

anim speed0(from scirra)

这时候图层便不会再改变图像——也就是它们将保持相同的帧了。通过点击一个浮动窗口中的(共有三个)X而关闭图像编辑器。现在你便能够在布局中看到精灵图层了!

sprite tile(from scirra)

sprite tile(from scirra)

选中它,并在属性栏中将其名字从“精灵”改为“瓷砖”。这种方法能够帮助我们为对象明确一个合适的名字。

基于图层创造场景

我们需要注意的是精灵对象拥有一个初始帧属性,我们可以使用这一属性去调整当前的图层。选择图层对象并将其初始帧改为1:

sprite initial frame(from scirra)

sprite initial frame(from scirra)

图像的变化也就反应了图层的动画帧为1。如此我们便能够在不同关卡中设置不同的图层了。

同步调整并点击和拖动图层。这时候你将创造另一图层对象。重复这一行动你便能够在同一行中创造出3个图层。选择中间的图层并将其初始帧设置为10。然后将其右侧的图层初始帧设置为13。现在你便创造出如下的场景:

three tiles(from scirra)

three tiles(from scirra)

只要双击图层对象你便能够清楚帧数是否与图层相一致了。这时候图像编辑器和动画窗口将再次出现,而你可以在此进行检查。你一定要记住你能够拖曳图层,并且它也将影响着相同类型的图层,所以你不需要反复输入初始帧。

对齐网格

如果我们必须手动去排列这些图层那真是太可怕了!幸运的是你可以让网格去执行这一任务。在功能区中点击“查看”并选择“对齐网格”。默认网格的规格是32 x 32,而我们图层的规格是128 x 128——正是网格规格的倍数。所以我们既能够轻松地将图层组合在一起也能够更加自由地进行定位。

snap to grid(from scirra)

snap to grid(from scirra)

现在请尝试着去拖曳图层。你将会发现它们有序地与32 x 32网格对齐在一起。所以我们便能够更容易地把三个图层对应起来了。

three tiles snapped(from scirra)

three tiles snapped(from scirra)

添加玩家精灵

让我们开始添加玩家精灵。跟之前一样双击布局中的空白位置然后插入新的对象,选择“精灵”。当鼠标再次变成十字光标时点击图层上的某个位置。图像编辑器将会再次出现。

import sprite strip(from scirra)

import sprite strip(from scirra)

右击动画帧窗口并选择“输入精灵条”选项。选择PlayerIdleIdle.png文件。注意这是一个完整的精灵条,并不是任何一个动画帧。你可以选择“输入帧”选择并输入文件序列,但是此时请先使用前一种方法。

因为精灵条并不是方形的,所以Construct 2需要明确帧的数量。最终它将能准确地定义帧数为11。然后我们只需要点击“OK”便能够输入帧。

需要注意的是我们在一开始也拥有一个默认的空白帧,现在我们可以右击并删除它了。所以最终你的玩家闲置动画便拥有11个连续的动画帧。

player animation frames(from scirra)

player animation frames(from scirra)

裁剪

你也许会注意到玩家周围存在一些空白处。这种情况很常见,但是这却不是一件好事。因为留有过多空白只会浪费内存并不利于碰撞。

player empty space(from scirra)

player empty space(from scirra)

有一种方法能够帮助我们快速解决这个问题,即按住shift键并点击图像编辑器工具栏上的“裁剪”按钮。

image editor crop(from scirra)

如果你未按住shift键而直接裁剪,那你便只能够处理帧,所以请确保按住shift键你才能裁剪整个动画。现在玩家的图像便得到适当的处理了,我们也不会再看到其它多余的空间了。

player cropped(from scirra)

player cropped(from scirra)

设置起点

起点就是对象的中心点或“热点”。在平台游戏中,我们最好将起点设置在玩家的脚上。如此当玩家动画随着游戏的发展而改变高度时,我们便能确保这种改变是往上的而不是向下。

为了明确起点,我们需要点击图像编辑器中的“设置起点和图像点”选项。

origin tool(from scirra)

origin tool(from scirra)

你将会注意到玩家身上会出现一个红点,这便是起点。你可以通过点击去改变它的位置。但是你需要确保它的底端和中部相互对齐。我们可以通过点击数字区(如果数字锁定键是打开的)而快速做到这一点。如果你未拥有数字区(游戏邦注:就像很多笔记本电脑上就没有),你也可以右击图像点窗口中的“起点”并选择“快速分配”中的“底端”、

如果逐步为每一帧设置起点还真的有够呛。不过幸运的是我们拥有另外一条捷径,即在弹出来的图像点窗口中右击“起点”并点击“应用到所有动画中”。

apply to whole animation(from scirra)

apply to whole animation(from scirra)

我们应为每个动画帧设置起点。

循环动画

点击动画窗口中的默认动画,将其重命名为“闲置”。

rename animation idle(from scirra)

rename animation idle(from scirra)

在属性栏中将动画的速度改为9,并设置“循环”为“Yes”。

anim speed and loop(from scirra)

anim speed and loop(from scirra)

右击动画窗口中的闲置动画并选择预览。这时候你将能够看到玩家平缓地上下漂浮着。也就是我们完成了这项任务!关闭动画预览与图像编辑器,你将能够在布局中看到玩家。

在属性栏中将对象重命名为“玩家”。

添加行为

Construct 2中总是会伴随着各种行为,这将让你能够以一种预定义的方式去创造对象,也因此为你节省了不少时间。你当然也能够在事件系统中重新塑造行为,但是这却需要你耗费更多精力和时间。这也解释了为何行为能够帮助你更快速地创造并运行游戏。

平台行为将帮助我们更好地处理平台移动的复杂性。但是使用这种行为还有一个重要的诀窍:我们应该在一个不可见的矩形对象中使用这种行为,并将玩家置于该对象顶部。如果对象行为不够生动,平台行为便能够帮助我们更好地改善这一情况——因为如果只是改变动画帧则会混淆平台行为。这么做也能够避免一些愚蠢的碰撞情境,如你的玩家放开了他所紧握住的架子。

所以我们首先必须为平台移动创造一个不可见的方形区域。再次双击布局并添加新的精灵,并输入如下的方形。(右击并将其“另存为”。)

square1(from scirra)

square1

我们仍然需要将起点置于底端。再次点击“设置起点图像点”,并按压2(或者使用快速分配菜单)将起点设置在底端。

player box hotspot(from scirra)

player box hotspot

关闭图像编辑器,现在你便能够在布局中看到这一方形了。然后将它设置为与玩家同等大小的规格(如下图)——53 x 107。

player collision box(from scirra)

player collision box(from scirra)

将这一对象重新命名为“玩家盒子”,因为这是一个可移动的盒子并且将对玩家进行碰撞测试。然后在属性栏中将初始可见性设置为“不可见”,因为我们并不想要看到这一方形。

我们同样也希望能够为“玩家盒子”的平台移动实行更多可行的碰撞检测。所以我们便需要在玩家盒子属性栏的编辑行为中点击“添加/编辑”。当对话框出现时点击绿色加号按钮。

add player box behavior(from scirra)

add player box behavior(from scirra)

双击平台行为。

platform behavior(from scirra)

platform behavior(from scirra)

你将能够看到属性栏中出现了一些关于平台移动的新属性。你可以调整移动设置,如速度和加速。让我们让跳跃变得更加有活力,即将跳跃力度设置为1100而重力设置为2500。

我们同样也希望屏幕能够跟随着玩家而移动,所以请再次点击绿色加号然后在行为中添加“滚动”。

当你添加了这两种行为后关闭玩家行为对话框。

平台移动需要清楚自己能够“着陆”于何种对象上。玩家将降落在任何未拥有“固体”行为的对象上。所以这时候我们应该选择图层精灵并为其添加行为,即选择“固体”行为。

switch to event sheet(from scirra)

switch to event sheet(from scirra)

现在我们只需要将玩家定位在“玩家盒子”之上便可。切换到事件列表1中——我们正是在此利用Construct 2的事件系统去定义游戏的逻辑。

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多