傻瓜式游戏制作详解

需用Construct 2工具

一、新建工程

打开Construct 2，可以看到很熟悉类似微软office风格的界面，点击左上角File文件按钮打开文件菜单，选择New新建工程。

二、插入对象
1、瓦片背景
首先我们来为咱们的游戏添加背景。使用Construct2里的 Tiled Background对象（背景瓦片相信大家都很熟悉，RPG游戏制作大师系列的地图元素，通俗点，就是一个图片可以横向或纵向重复平铺，和网页制作里的CSS原理相似，能防止游戏在加载时因图片太大而减慢速度），下面官方提供了素材——背景纹理图，右击另存到你的计算机里。图片链接自官网，自动加了链接，图片自己处理下，或者去官网获取。

现在，在 layout画布里双击，弹出插入对象对话框。在该对话框中双击 Tiled Background对象。

这时，鼠标指针形状变成了十字形，你可以在布局的任何位置点击，我们在布局中间差不多位置点击，弹出 Texture editor对话框，我们点击打开文件夹图标，把刚才保存的背景瓦片载入。

接下来单击对话框右上角X关闭对话框，如果提示保存图片，请保存！现在画布上出现了背景瓦片对象。选中它，在左边的 Properties Bar属性面板里设置它的 position位置为0,0（左上角），以及它的 size大小为1280,1024（画布的大小）。

背景创建完璧，你可以按 CTRL+鼠标滚轮放大缩小，或者点击 view菜单-zoom命令来查看整体效果，你也可以按住 space空格键，或者按下 鼠标中键，来平移画布，很类似PS的操作。你也可以按 CTRL+0或者 view菜单-zoom to 100%命令来恢复画布1：1的视图模式。

这时，你可以点击run图标运行，浏览器（IE9哦或者谷歌，火狐最好也新版本）将自动打开并展示游戏，还不错哦！

三、添加层
接下来，我们来添加更多的对象。首先我们先去把背景瓦片对象锁定了，这样不会被我们选中，和PS,FL里的锁定一样。

画布有多个层组成，我们可以在不同的层放置不同的对象，可以通过调整层的上下顺序来调整对象的前后显示，层可以被隐藏或者锁定，平滚特效等。背景瓦片放置于最底层，其他对象如玩家，怪物，NPC等放置在上面的几层。

我们可以通过Layers tab来管理层，和Project bar工程面板在一个选项卡中。

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

接下来请保持图层Main处于选中状态，接着我们将把对象置于该图层。
四、添加输入控制对象
回到画布中，同样双击插入另外一个对象，这次我们选择Mouse对象，我们需要鼠标输入控制。同样的添加Keyboard对象。
注意：这些对象不需要置于画布中，他们是隐藏的，自动在工程中工作，现在工程中的所有层都可以**鼠标和键盘输入控制了。
五、游戏对象
是时候来添加游戏对象了，如玩家角色，怪物角色，子弹，游戏特效等。下面是本例中要用的图片：
玩家：
怪物：

子弹：
爆炸特效：

在CT2中，游戏中这些对象，我们将采用sprite（RPG中好些人称为精灵，在flash里成为元件）对象来置入。该对象用来显示图片（纹理，图像设计专业说法，在CT2里可以就认为图片），还可以移动，旋转或缩放。
接下来依次插入上面的几个对象，插入过程如下，和上面的操作一样，大致如下：
1、双击插入新对象
2、选择Sprite对象
3、当鼠标变成十字，在画布中点击
4、对话框装载指定图片
5、保存并关闭对话框
注意：如果你觉得这样的操作方法太慢，繁琐，你可以直接把图片拖入到画布中，和PS操作差不多，Construct2会自动为该图片创建Sprite对象。

移动子弹和爆炸对象到画布外，这样游戏一开始，我们看不到这些对象。
默认CT2会自动把我们的对象命名为Sprite,Sprite2,Sprite3,Sprite4，我们可以在他们各自的Properties bar属性面板里的Name属性里更改。依次更改为Player,Monster,Bullet,Explosion（玩家，怪物，子弹，爆炸特效）。

六、添加行为
Behaviors类似于flash中的行为（动作），是预先封装的功能函数。例如，我们添加一个Platform行为给一个对象，添加Solid行为给地板，游戏运行时，该对象就可以象platformer游戏（例如：超级玛丽）中的角色一样跳来跳去。你也可以通过事件来达到同样的效果，但是这需要较长的时间，而且该预置的行为已经很好，当然如果你一定添加点自己的想法，那么就折腾事件重新写你自己需要的吧。

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

接下来我们就来给对象添加相应的行为。
1、我们给角色player添加8 direction movement行为：选中player，在properties bar属性面板里，找到Behaviors分类，点击Add/Edit弹出Behaviors行为对话框。

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


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

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

3、添加其他行为。
我们以同样的方法给其他对象添加相应的行为如下:
给Bullet对象添加Bullet movement和Destroy outside layout行为。
给Monster对象添加Bullet movement行为。
给Explosion对象添加Fade行为。Fade行为默认会销毁对象，所以不用担心对象有没有销毁。

此时，我们再运行查看游戏，会发现怪物一下子就飞出去了。我们来编辑下怪物的行为，选中Monster怪物对象。看到properties bar属性面板中，我们会发现属性栏里多出了其他一些属性，这些属性是添加了行为后才有的。

更改speed速度为80（单位：像素/秒）
同样的方法给Bullet子弹对象的速度更改为600，Explosion对象的Fade行为的Fade out time淡出时间为0.5秒。

添加更多怪物
按住CTRL，拖拽Monster对象复制几个实例。他们都是Monster对象类型的。

对象类型可认为是对象的类（学过编程的知道，没学也没事）。在事件系统中，我们主要处理的就是对象类型。例如：你创建了一个Bullet collides with Monster事件，将会检测子弹与所有基于Monster对象类型的实例的碰撞，而不需要单独为每个怪物添加碰撞事件。通过Sprites（精灵/元件），一个对象类型的实例将共享同一个图片（纹理材质）。这样游戏在加载的时候只需加载一次该图片即可。我们在以后的课程中再深入对象类型和实例。目前，就可以认为不同类型的敌人是不同类型的对象类型。游戏中运行时创建的怪物对象都是相应对象类型的实例。（学过编程的都知道，本不想翻译这段话的，想想还是翻了，不必太纠结这个）

使用Ctrl +拖拽 创建7到8个新的怪物实例（为了区分下，往下我们用实例来表述）。放置怪物的时候不要太靠近玩家。否则角色一下子就挂了！此时你的画布类似如下：

接下来我们将通过Construct2的可视化编程——事件系统，添加自定义功能函数。

七、事件
首先，在画布区域上方的选项卡上切换到Event sheet1事件编辑器面板，一个列表的事件被成为Event sheet事件表。游戏的不同部分可以拥有不同的事件表，事件表同样可以"include"包含即导入（编程里的概念，不懂就无视吧）其他事件表，这样可以重复利用事件表，目前我们不需要这些功能。



关于事件
Construct 2整个系统运作是基于事件系统，大多数显示器帧频为60帧/秒，为了匹配显示器达到平滑的显示效果，Construct 2也设置了差不多帧速率。所以事件表通常是一秒钟运行60次。每次都会更新屏幕相应发生变化的区域。事件表运行时的顺序为从上往下，所以靠上的事件先运行。

条件、动作、子事件
事件包含条件，测试某些条件是否满足，例如，is spacebar down?(检测空格键是否按下)。如果条件满足了，那么事件的动作将会运行，例如，Create a bullet object创建一个子弹实例。当动作运行后，任何子事件也会运行，这样可以测试更多条件，运行更多的动作和更多的子事件等。使用该系统，我们可以为游戏或程序创建更多负责的功能。本例中，我们不需要该功能。
简述如下：
Are all conditions met?           //条件是否都满足？
--->yes:run all the event's actions.          //是：运行所有事件的动作
--->no:go to next event(not including any sub-event)      //否：往下运行下个事件，这里没有运用（包含）子事件

我们来创建第一个事件
我们将使player（发射口）一直看向鼠标，这样我们点击发射子弹的时候，子弹将发往鼠标方向。如下：

记住：每次屏幕被重绘的时候，tick(一个内部循环中，每秒几帧屏幕重绘，百度一下吧，囧)将会运行（tick下的事件都会运行一次）。所以如果我们强制player每帧都朝向鼠标，那么player将一直朝向鼠标。

我们开始制作该事件。在event sheet的空白位置双击，将打开添加事件对话框：

不同的对象根据他们要做的行为拥有不同的条件和动作，在对话框中双击System对象，对话框中列出了所有System对象的条件：

双击Every tick条件插入到事件表中。对话框将关闭，Every tick事件被创建，但没有actions(动作)。如下：

接着我们添加一个动作来使角色看向鼠标。点击event右边的Add action链接，打开对话框如下：

对话框中列出了可以添加动作的对象，双击player对象，对话框列出了player对象可添加的动作如下：

选取Set angle towards position动作。该动作会自动计算角色到给定的X,Y坐标的角度。
接下来要指定X,Y坐标值（动作的参数，条件同样可以带有参数）。我们输入Mouse.X和Mouse.Y（也可以输入表达式如：Mouse.X+100，虽然用的并不多）

此时，你运行就可以看到效果了。
如果提示错误：Mouse is not any object name，确保你已添加了Mouse object鼠标对象!（按步骤做下来的，不会提示，官方的文档有注释，我也就翻一下呗）

你可能会担心如何记住所有可用的表达式。别担心，浮动在上边的object panel，默认处于半透明状态不会干扰你的注意力。移动鼠标到该面板上，单击，面板变完全可见。该面板起着字典的功能，可以帮你记住各类你可以使用的表达式。你可以双击表达式来插入，省的手动输入。
还有，点击对话框上的Done确定按钮。该动作就被添加了！如下：

第一个事件添加完毕！尝试运行游戏，角色在移动的时候一直朝下鼠标。

八、添加游戏功能
通过上边的学习，我们已经学会了添加事件，教程到这，已经很长了，我们会发现教程看起来很啰嗦，太细，做起来一下子就完了，所以接下来我们稍微简化下。记住添加条件或动作的步骤如下：
1、双击添加新事件，点击Add action链接添加一个动作。
2、在对话框中双击要添加条件/动作的对象
3、选取要添加的条件/动作
4、如果有需要的话，输入参数

接下来教程中以下面的格式来表述：

Add condition System->Every tick
Add action Player->Set angle towards position->X:Mouse.X   Y:Mouse.Y

让角色可以射击
当玩家点击的时候，可以发射子弹。这可以通过Spawn an object动作来实现，该动作在同样的位置和角度（相对于角色）创建新的对象实例。子弹的Bullet movement属性将会使它向前飞出。制作如下事件：

条件：Mouse->On click->Left clicked(the default)       //鼠标->点击->左击（默认）
动作：Player->Spawn another object->For Object, choose the Bullet         //Play对象->产生另外的对象->对象，选择子弹
层，输入1（“Main”图层）,Image point（子弹的发射起点）保持默认为0。如下：

如果你运行game,你将看到子弹从角色图片的中心发出，并不是从枪口发出。我们来修改下，在工程或对象面板中右击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怪物。
动作：Monster->Destroy               //怪物->消灭
动作：Bullet->Spawn another object->Explosion, layer 1                 //在图层1 碰撞的位置产生新对象-爆炸特效
动作：Bullet->Destroy                      //子弹销毁

爆炸特效
运行游戏，尝试射击一个怪物，我们可以看到碰撞发生，爆炸特效也产生了，杯具的是，有个大大的黑色边框，好难看！

不用担心，我们可以去掉黑框，在工程面板或者对象面板点击Explosion object爆炸特效对象。在它的属性面板里设置Effect属性为Additive（叠加，玩过PS的知道，黑色颜色值为0，叠加后就不起作用，就看不到了，具体的去百度下吧）。再次尝试游戏可以看到，完美了！


让怪物聪明一点（添加怪物智能AI，专业说法，囧，本例可没那么高深）
当下怪物只会向右移动。我们来让他们更有趣些。首先让他们产生在随机的位置。
条件：System->On start of Layout                    //系统->画布启动时
动作：Monster->Set angle->random(360)             //怪物->设置角度->0-360随机度数

此时，怪物依然移出画布，再也看不到，接着我们再来修改，让怪物移动边缘处的时候，自动往回移动，并且添加智能，让怪物朝着玩家角色移动（自然是角色没挂的时候）。
条件：Monster->Is outside layout               //判断怪物是否要离开画布
动作：Monster->Set angle toward position->For X, Player.X - for Y,Player.Y          //设置怪物朝向角色的坐标
再次运行游戏。此时你可以看到怪物在画布里朝着不同的方向移来移去，最终都会朝着角色围过来。这个智能的行为咱们不编程看不到代码（就算编程也太难，囧，要不也不找这软件了哈），将就着看吧，似乎不错了！
此我们的角色还是无敌的，怪物却是太脆落了，子弹一碰就挂了，接着我们通过instance variables实例变量来修改这些。

九、实例变量
Instance variables实例变量允许每个怪物存储它自身的生命值。一个变量简化了说就是一个可以改变的值。他们单独存储，分别带他们相应的实例。

我们来为怪物添加health实例变量。在工程或对象面板选择怪物monster（注意monster的意思就是怪物，本教程翻译的时候好多地方都是这样注释的，因为实际制作中我们是用英文的）。亦或，在画布中选取monster怪物对象。这样属性面板呈现的是怪物的相关属性。在properties bar属性面板的Instance variables分类下点击Add/edit：

弹出实例变量对话框，类似于早前的行为对话框。本对话框允许你为对象添加或修改实例变量。点击绿色+号按钮来添加新变量。

在弹出的对话框中输入变量名health，保持类型为Number（数字型），设置Initial value初始值为5。这使怪物拥有5个生命值。当他们被子弹射到时，生命值减1，直到为0，被消灭。
当我们点击OK确定。变量就出现在实例变量对话框中以及属性面板中，可以通过Add/Edit链接修改。

更改事件
切换到事件表（event sheet记得英文哦，教程中有些地方就写中文了，软件还是英文的，软件是可以汉化，但是太费时间，等心情好再说）中，我们来更改怪物被消灭的事件。
找到事件Bullet-on collision with Monster.现在的动作是destroy monster,右击该动作，选择Replace。

弹出的对话框和新建动作的对话框一样，选择Monster->Subtract from(in the Instance variables catrgory)->Instance variable "health",并输入值1。点击Done确定。该动作呈现如下：

现在我们射击怪物时，当子弹碰到怪物，怪物生命值减1，子弹爆炸消失，但我们得添加一个事件来检测怪物的生命为0时，让它消灭。添加如下事件：
条件：Monster->Compare instance variable->Health,Less or equal,0         //校对实例变量值是否<=0 不要用=0，连射可导致怪物生命值负数。
动作：Monster->Spawn another object->Explosion, layer1               //产生爆炸效果，你可以替换成怪物挂掉的效果
动作：Monster->Destroy          //怪物消灭

同样对怪物和玩家之间添加碰撞，以及角色的生命值。如下：

运行游戏，尝试射击。

显示分数并存档
我们来添加分数显示功能，让玩家知道猎取了多少怪物，获得了多少分数。我们需要另外一个变量，但此时我们熬添加一个全局变量global variable。假设我们的游戏有好几关，全局变量就可以累积分数。全局变量适用于整个游戏，只有一个之存储着。
右击事件表底部，并选择Add global variable。

输入分数变量名Score。其他字段默认即可，点击OK确定。变量将从0开始计数。

现在全局变量呈现在事件表中：

注意：local variable局部变量限制于自身所在事件的作用范围，现在我们不用考虑这个，本例不用。其实很多东西都是参考程序里的，不过无所谓了，无视吧！
接着我们来添加动作，在Monster:health less or equal 0事件里添加动作System->Add to(under Global & local variables)->Score, value 1.如下：

现在玩家就拥有分数了，每当怪物被杀掉，就可以增加1分，但现在我们运行游戏依然看不到分数，我们需要一个文本对象。

十、添加HUD元素
玩过游戏的都知道HUD，游戏界面最上面固定不动的界面元素，显示玩家生命值，分数等其他信息。接着我们来添加一个超级简单的HUD，只有一个文本对象text object。因为我们要让HUD界面的对象保持固定不动，而Main图层我们是需要跟随角色滚动的。所以新建一个图层HUD，设置parallax属性为0，这样该层就不再滚动。

在图层面板layers bar中新建一个层HUS。请确保该层在最顶上位置，并选中，然后在属性面板中设置Parallax属性值X,均Y为0,0。

在画布空白处双击插入对象，选择Text Object,放置于画布的左上角，我们的背景是黑灰系的，我们去更改字体大小，颜色等让文本看得很清楚。并通过调整杆（选中对象时，四方框上的正方形）拉伸文本足够宽来显示分数。如下：

切换到事件表中。我们来添加动作让分数每帧可以更新。点击Every tick事件，添加动作Text->Set Text。
使用&文本连接操作符，我们可以转换数字为文本并和文本字符串连接。输入如下：
"Score:" & Score              //文本字符串 用双引号括起来，变量则不要
运行游戏，射击怪物，现在分数已可显示更新，保持位置不变。

教程接近尾声了，我们再添加一些功能并总结。
添加如下事件：
条件：System->Every X seconds->3              //添加系统事件每3秒启动
动作：system->Create object->Monster, layer 1, 1400(for X), random(1024)(for Y)           //在图层1创建怪物实例，坐标可以自己指定，这里为画布最右边还过去点，已离开画布，因为我们画布的大小为1280，1024，Y坐标为随机数0-1024

总结：
恭喜，你已使用Construct2创建了第一个HTML5游戏，你可以点击左上角文件菜单中的EXport导出命令导出游戏相关网页文件，放置于网站空间，也可以用网页编辑软件编辑生长的网页，添加广告等，或者置入现成网页。
在本节课程中，我们学习了一些最基本但很重要的知识点：插入对象，使用层、行为、事件等。希望能引起你对Construct2的兴趣，继续使用它来创建更多更好的游戏。
你可以在这里下载本例完成的工程 下载地址
作者添加了其他一些元素，比如"Game over"文本等，文件也有注释，不过是英文的，懂英文的小菜，不懂的也没事，学下吧，计算机英语常用的就这些单词。