目录

傻瓜式游戏制作详解

目录

傻瓜式游戏制作详解

需用Construct 2工具

一、新建工程

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

https://i-blog.csdnimg.cn/blog_migrate/203f4b6784786c5c1db00974e81d72ca.png

二、插入对象

1、瓦片背景

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

https://i-blog.csdnimg.cn/blog_migrate/b9be43389bea7833ed1b09508eb752dd.png

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

https://i-blog.csdnimg.cn/blog_migrate/f75f0617e1b81917cf82bff55f3fb1d8.png

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

https://i-blog.csdnimg.cn/blog_migrate/6a38f044efd2ea98a673e74f48043e22.png

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

https://i-blog.csdnimg.cn/blog_migrate/f23d214cfc3503b641b990159e607bb3.png

背景创建完璧,你可以按 CTRL+鼠标滚轮 放大缩小,或者点击 view菜单-zoom命令 来查看整体效果,你也可以按住 *space

空格键* ,或者按下 鼠标中键 ,来平移画布,很类似PS的操作。你也可以按 CTRL+0 或者 view菜单-zoom to 100%命令 来恢复画布1:1的视图模式。

https://i-blog.csdnimg.cn/blog_migrate/e627d9b0f9c30963976e949c7040ad84.png

这时,你可以点击 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游戏(例如:超级玛丽)中的角色一样跳来跳去。你也可以通过事件来达到同样的效果,但是这需要较长的时间,而且该预置的行为已经很好,当然如果你一定添加点自己的想法,那么就折腾事件重新写你自己需要的吧 https://i-blog.csdnimg.cn/blog_migrate/8ca2b78c01f2305a5a36f975c0f7938b.gif

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行为对话框。

https://i-blog.csdnimg.cn/blog_migrate/ccb90b6aaa802962c13269b1b65894f4.png

添加更多怪物

按住CTRL,拖拽Monster对象复制几个实例。他们都是Monster对象类型的。

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

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

https://i-blog.csdnimg.cn/blog_migrate/c5f5599841597a01f6460c226438dd83.png

七、事件

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

https://i-blog.csdnimg.cn/blog_migrate/9627a2307fa598583576cf828e6274dd.png

此时,你运行就可以看到效果了。

如果提示错误:Mouse is not any object name,确保你已添加了Mouse object鼠标对象!(按步骤做下来的,不会提示,官方的文档有注释,我也就翻一下呗 https://i-blog.csdnimg.cn/blog_migrate/8ca2b78c01f2305a5a36f975c0f7938b.gif

你可能会担心如何记住所有可用的表达式。别担心,浮动在上边的object panel,默认处于半透明状态不会干扰你的注意力。移动鼠标到该面板上,单击,面板变完全可见。该面板起着字典的功能,可以帮你记住各类你可以使用的表达式。你可以双击表达式来插入,省的手动输入。

还有,点击对话框上的Done确定按钮。该动作就被添加了!如下:

https://i-blog.csdnimg.cn/blog_migrate/d639ac6621a38025b7f47a6811d2b7e2.png

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

八、添加游戏功能

通过上边的学习,我们已经学会了添加事件,教程到这,已经很长了,我们会发现教程看起来很啰嗦,太细,做起来一下子就完了,所以接下来我们稍微简化下。记住添加条件或动作的步骤如下:

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。如下:

https://i-blog.csdnimg.cn/blog_migrate/fdf465cd2025997e9c85c8cf1abf745e.png

如果你运行game,你将看到子弹从角色图片的中心发出,并不是从枪口发出。我们来修改下,在工程或对象面板中右击player对象选择Edit animations编辑动画。

https://i-blog.csdnimg.cn/blog_migrate/a5707cced752052beef56bad1545a0a6.png

在弹出的图片编辑器中,选择Set origin and image points工具

看到image points对话框,对象的原点以红点显示。

https://i-blog.csdnimg.cn/blog_migrate/d8909eae60ef1e01bee46a4113232457.png

这是对象的原点(如果你旋转对象,将绕着这个点),点击绿色的+号按钮添加一个点,该点以蓝点显示。我们在角色图片枪口位置处左击,将该点放置于枪口位置:

https://i-blog.csdnimg.cn/blog_migrate/4b140fdf049ea3391c77475dfa7f7c4a.png

关闭图片编辑器,双击事件表中早前添加的Spawn an object动作,更改Image point为1.在面板中可以看到序号的,默认的原点为0,其他添加的一次1,2。。等。如下:

https://i-blog.csdnimg.cn/blog_migrate/045e462ec5fbba6f6ca0a7e57bd8cab6.png

运行游戏。此时子弹已经修改为从枪口发射。此时,子弹没有做其他任何事。接下来我们来添加碰撞事件,用来消灭敌人。

添加事件如下:

条件:Bullet->On collision with another object->pick Monster.          //子弹->于其他对象碰撞->选择Monster怪物。

动作:Monster->Destroy               //怪物->消灭

动作:Bullet->Spawn another object->Explosion, layer 1                 //在图层1 碰撞的位置产生新对象-爆炸特效

动作:Bullet->Destroy                      //子弹销毁

爆炸特效

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

https://i-blog.csdnimg.cn/blog_migrate/e2201968021017473728ce7111154a44.png

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

https://i-blog.csdnimg.cn/blog_migrate/07cc79da6ceb53ac676e3619bffd3898.png

让怪物聪明一点(添加怪物智能AI,专业说法,囧,本例可没那么高深)

当下怪物只会向右移动。我们来让他们更有趣些。首先让他们产生在随机的位置。

条件:System->On start of Layout                    //系统->画布启动时

动作:Monster->Set angle->random(360)             //怪物->设置角度->0-360随机度数

https://i-blog.csdnimg.cn/blog_migrate/a476b131f29d1444d24c3a48cb0fce61.png

此时,怪物依然移出画布,再也看不到,接着我们再来修改,让怪物移动边缘处的时候,自动往回移动,并且添加智能,让怪物朝着玩家角色移动(自然是角色没挂的时候 https://i-blog.csdnimg.cn/blog_migrate/b332e34526c73194aa4f075ad941b4ef.gif )。

条件: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:

https://i-blog.csdnimg.cn/blog_migrate/c288bd4394df3593aa69fd1776a76d6c.png

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

https://i-blog.csdnimg.cn/blog_migrate/cb4b18dfc489d6c8abc9d9b48879ac1d.png

在弹出的对话框中输入变量名health,保持类型为Number(数字型),设置Initial value初始值为5。这使怪物拥有5个生命值。当他们被子弹射到时,生命值减1,直到为0,被消灭。

当我们点击OK确定。变量就出现在实例变量对话框中以及属性面板中,可以通过Add/Edit链接修改。

https://i-blog.csdnimg.cn/blog_migrate/c001f15d460957468882277b6884a3c6.png

更改事件

切换到事件表(event sheet记得英文哦,教程中有些地方就写中文了,软件还是英文的,软件是可以汉化,但是太费时间,等心情好再说)中,我们来更改怪物被消灭的事件。

找到事件Bullet-on collision with Monster.现在的动作是destroy monster,右击该动作,选择Replace。

https://i-blog.csdnimg.cn/blog_migrate/0087399b680ffffc515ad8e7691df1f1.png

弹出的对话框和新建动作的对话框一样,选择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          //怪物消灭

https://i-blog.csdnimg.cn/blog_migrate/1495f5813782f9d86d51f3aa3c73605f.png

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

运行游戏,尝试射击。

显示分数并存档

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

右击事件表底部,并选择Add global variable。

https://i-blog.csdnimg.cn/blog_migrate/b60e649df61093de914d3b760ffcc1c7.png

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

https://i-blog.csdnimg.cn/blog_migrate/e5067e238f7cc28fc57daaa97632a21b.png

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

注意:local variable局部变量限制于自身所在事件的作用范围,现在我们不用考虑这个,本例不用。其实很多东西都是参考程序里的,不过无所谓了,无视吧!

接着我们来添加动作,在Monster:health less or equal 0事件里添加动作System->Add to(under Global & local variables)->Score, value 1.如下:

https://i-blog.csdnimg.cn/blog_migrate/1f2e1a9be7da541dbb72b3545d2630f8.png

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

十、添加HUD元素

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

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

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

https://i-blog.csdnimg.cn/blog_migrate/5871067250825d2fdd9df2aaa742900d.png

切换到事件表中。我们来添加动作让分数每帧可以更新。点击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"文本等,文件也有注释,不过是英文的,懂英文的小菜,不懂的也没事,学下吧,计算机英语常用的就这些单词。