【游戏开发】ConstDerb1—How to make a Platbackm game

Z时代
2024-01-10
分类：技术分享

什么是construct2

construct2是一款html5游戏引擎。通过construct2，你无需编写代码，通过图形化界面操作，你可以设计出属于你的小游戏。

今天我们通过一款幽灵射击的小游戏，初步认识一下construct2.

如果你未安装construct2，请这里

Ghost Shooter

游戏架构

玩家
技能：发射子弹

怪物
子弹命中则消失

游戏素材

玩家

怪物

子弹

爆炸效果

背景

游戏设计

新建工程
这一步骤不用多说，点击左上角，新建一个New File即可
当我们新建了一个工程后，可以看见一片空白的layout，这就是我们的工作区域了，你可以在左边设置layout的属性。

插入元素
插入壁纸
首先我们来为游戏添加背景。在layout画布里双击，弹出插入对象对话框。在该对话框中双击Tiled Background对象。

这时候，我们鼠标变成+，随便点一个空白区域，会弹出一个新窗口，然后往里面添加我们刚刚的背景图片就好啦。添加好后，我们需在在左边的Properties Bar属性面板里设置它的position位置为0,0（左上角），以及它的size大小为1280,1024（画布的大小）。

最终结果就如下面这样子啦：

添加层
所谓层，就是和你想象的一样。一个游戏中，有不同的层，背景在最底层，然后玩家怪物等在背景层上面。所以，我们首先要锁定背景层，防止我们不小心改动了背景层的属性。其次我们要新建一个层，这个层用来放我们的玩家怪物子弹等等。

在层面板中，我们可以看到背景层的序号为0，Construct2是从0开始计算，和编程类似，选中背景图层，点击pencil图标将背景层名字更改为Background。并点击Background图层的锁图标将锁定本图层。接着点击绿色的+号按钮添加一个新图层“Main”。

接下来请保持图层Main处于选中状态，接着我们将把对象置于该图层。
添加输入控制对象
双击画布，然后插入Mouse对象和Keyboard对象。这两个对象是为了单击鼠标射击和控制方向。
添加游戏对象
可以把我们上面给的4幅游戏素材拖入画布中，移动子弹和爆炸对象到画布外，这样游戏一开始，我们看不到这些对象。

为对象添加行为
我们用到的行为如下
8 Direction movement: 这个行为可以让你实现给角色添加方向移动（方向键）的功能。
Bullet movement:这个行为让对象朝着它当前的角度移动，比如，本例中玩家射出的子弹的移动行为，不要被这名字迷惑了，它不只适用于子弹，也可以应用于怪物等移动。在Contruct2里所有的移动行为都是通过添加速度向前行进。
Scroll to：这个行为可以让运行时画布随着对象移来移去（滚动）。这个行为很适合于角色。
Bound to layout：这个行为可以防止对象离开画布区域。这个行为对于角色来说也很重要。
Destroy outside layout:当对象离开画布区域时，就将其销毁。比如本例中的子弹，如果不销毁的话，虽然子弹离开画布区域了，但是依然暂用内存。所以我们需要及时销毁不再需要的对象。
Fade:这个行为可以给对象添加淡出效果，用于爆炸等特效的消失。
为player添加行为
我们给角色player添加8 direction movement行为：选中player，在properties bar属性面板里，找到Behaviors分类，点击Add/Edit弹出Behaviors行为对话框。

在对话框中，点击绿色+号-添加行为图标，在弹出的“Add behavior”对话框中双击8 direction movement。

接着以同样的方法给player添加Scroll To和Bound to layout行为，此时”player:Behaviors”对话框如下：

关闭行为对话框。点击运行查看游戏！此时我们已经可以移动角色，屏幕也跟随角色移动，而且通过设置Bound to layout行为后，角色也不能移出画布区域。

添加其他行为
给Bullet对象添加Bullet movement和Destroy outside layout行为。
给Monster对象添加Bullet movement行为。
给Explosion对象添加Fade行为。Fade行为默认会销毁对象，所以不用担心对象有没有销毁。
此时，运行游戏，你会发现子弹和怪物一下子飞了出去，这时候你就要设置他们的移动速度了：怪物speed速度为80（单位：像素/秒），Bullet子弹对象的速度更改为400，Explosion对象的Fade行为的Fade out time淡出时间为0.5秒。

现在我们的怪物有点少，我们可以安装ctrl拖动怪物，来增加怪物的个数。

添加事件
所谓事件，就是各个对象的行为，例如玩家发射子弹等等。在画布区域上方的选项卡上切换到Event sheet1事件编辑器面板，一个列表的事件被成为Event sheet事件表。
添加第一个事件
我们添加的第一个事件将使player（发射口）一直看向鼠标，这样我们点击发射子弹的时候，子弹将发往鼠标方向。如下：

在event sheet的空白位置双击，将打开添加事件对话框。不同的对象根据他们要做的行为拥有不同的条件和动作，在对话框中双击System对象，双击Every tick条件插入到事件表中。对话框将关闭，Every tick事件被创建，但没有actions(动作)。接着我们添加一个动作来使角色看向鼠标。点击event右边的Add action链接。选取Set angle towards position动作。该动作会自动计算角色到给定的X,Y坐标的角度。
接下来要指定X,Y坐标值（动作的参数，条件同样可以带有参数）。我们输入Mouse.X和Mouse.Y。
让角色可以射击
条件：Mouse->On click->Left clicked(the default)
动作：Player->Spawn another object->For Object，choose the Bullet

这时候我们发现，子弹是从头部射出，因为默认射出位置是(imagine point 0), 我们可以在对象面板中右击player对象选择Edit animations，在弹出的图片编辑器中，选择Set origin and image points工具，看到image points对话框，对象的原点以红点显示，这是对象的原点（如果你旋转对象，将绕着这个点），点击绿色的+号按钮添加一个点，该点以蓝点显示。我们在角色图片枪口位置处左击，将该点放置于枪口位置。关闭图片编辑器，双击事件表中早前添加的Spawn an object动作，更改Image point为1.在面板中可以看到序号的，默认的原点为0，其他添加的一次1，2。。。等。如下：

运行游戏。此时子弹已经修改为从枪口发射。此时，子弹没有做其他任何事。接下来我们来添加碰撞事件，用来消灭敌人。
添加事件如下：
条件：Bullet->On collision with another object->pick Monster。
动作：Monster->Destroy
动作：Bullet->Spawn another object->Explosion，layer 1
动作：Bullet->Destroy
让怪物聪明点
当下怪物只会向右移动。我们来让他们更有趣些。首先让他们产生在随机的位置。
Condition: System -> On start of Layout
Action: Monster -> Set angle -> random(360)

此时，怪物依然移出画布，再也看不到，接着我们再来修改，让怪物移动边缘处的时候，自动往回移动，并且添加智能，让怪物朝着玩家角色移动
Condition: Monster->Is outside layout
Action:Monster->Set angle toward position->For X，Player.X - for Y,Player.Y