制作简单的HMTL5游戏

说到制作游戏大家都会觉得十分复杂,望而却步。 但是有了construct2, 你不需要从头做起,这一切都简单许多。 本博将指导大家如何使用construct2制作简单的HTML5小游戏。
首先我们先来看一下成果图。

添加背景
附上一张背景图
制作简单的HMTL5游戏_第1张图片

双击空白处创建精灵
在弹出对话框中选择Tiled background
制作简单的HMTL5游戏_第2张图片
之后会弹出一个插入图片的页面 点击这里写图片描述
并将这张背景图案上传

上传后调整图案和空白背景的大小使之吻合
再修改图层名称为Background并锁定(锁定只需要按图层名称左侧的小锁头)
这里写图片描述
再新建一个图层命名为Main
效果图

添加玩家
也是先双击空白处 因为我们已经锁定背景图层 背景图层不会被选中 现在所创建的精灵都在main 图层上
双击后选中sprite制作简单的HMTL5游戏_第3张图片
创建玩家精灵 插入玩家精灵的图片
制作简单的HMTL5游戏_第4张图片
点击左侧的set original point的图标这里写图片描述
为玩家精灵设置在枪口的原点, 因为子弹要从枪口射出。

选中玩家精灵后左侧的properties bar中会有behavior一项
点击最下方的add/edit为玩家精灵添加行为:
1.8direction 使其可以旋转朝向8个方向
2.scrollto 使其始终保持在屏幕中央
3.boundtolayout 使其始终保持在画布范围内
制作简单的HMTL5游戏_第5张图片

添加其他精灵
按以上方法依次添加
怪物 Monster这里写图片描述
子弹 Bullet这里写图片描述
爆炸 Explode制作简单的HMTL5游戏_第6张图片
并在objectbar修改名称
制作简单的HMTL5游戏_第7张图片

接下来为这些精灵添加行为
为Bullet和Monster添加bullet行为
并为Bullet的bullet属性中添加Destroyoutsidelayout
制作简单的HMTL5游戏_第8张图片

接下来修改这两个bullet行为的速度 我将bullet的设为400 monster设为80
制作简单的HMTL5游戏_第9张图片
接下来为Explode添加faded的行为使之可以在子弹碰到怪兽后几秒内淡出
制作简单的HMTL5游戏_第10张图片
我们复制粘贴多个怪兽在最开始尽量离玩家不要太近

至此我们已将主要精灵全部添加完毕啦~

添加事件

事件让各个精灵间的交互有了意义,首先我们需要进入事件列表
这里写图片描述
点击任意空白处即可设置事件

设置事件分为2步:条件和执行的行为
如果再细分又有以下4步:
1.当哪一个精灵
2.当这个精灵干什么的时候
3.哪一个精灵
4.做什么

我们先演示一遍如何创建一个事件, 以后就不赘述,直接列出以上四个步骤。

我们先设置一个事件使玩家的枪口可以指向我们鼠标所在的方向
首先单击空白处后会出现如下对话框
制作简单的HMTL5游戏_第11张图片
因为条件是每一帧动画 不涉及某个精灵 所以点击system
制作简单的HMTL5游戏_第12张图片
之后弹出此页面
在其中选择Every tick 表示每一帧画面都执行我们将要给出的行为

至此我们的条件已经设置完毕啦 接下来设置执行的动作啦
这里写图片描述

条件设置完毕后你会进入这样的画面
点击add action 将会弹出这个对话框
制作简单的HMTL5游戏_第13张图片

选择player(因为我们要让player执行行为)
制作简单的HMTL5游戏_第14张图片

将x,y的坐标设为以下形式
制作简单的HMTL5游戏_第15张图片
点击done即可完成这个事件啦 是不是超级简单呢~
附效果图
这里写图片描述

添加全部事件

读者已经有了创建事件的能力 以下创建事件的步骤就不再重复
1.我们想让玩家可以发射子弹所以我们创建事件
这里写图片描述
其中image point1就是我们设置的原点
2.我们想让怪兽在一开始朝向不同的方向前进所以创建事件
这里写图片描述
3.但是现在当我们的怪兽离开画面之后就永远离开了 所以我们设置事件让他们可以返回这里写图片描述
当怪兽出画面了之后 会重新朝向玩家所在的方向前进

设置怪兽行为
我们的怪兽不能永远存在
所以应该给怪兽设定生命值
回到layout1 选择monster 并在properties的如下栏里面添加变量health
设置health 的初始值为5
制作简单的HMTL5游戏_第16张图片

在子弹打到他的时候生命值少1
为了实现这个我们回到事件表设置如下事件
制作简单的HMTL5游戏_第17张图片
使得怪兽生命值可以减少
子弹在使用后会爆炸并消失

当生命值<=0的时候怪兽就消失 (若子弹连击怪兽可能会出现<0的情况所以不能单纯的设为=0)所以我们设置如下事件
这里写图片描述

至此 怪兽就可以死亡啦!

设置分数
为了更好的玩家体验最好有奖励的分数设置
首先右击事件表空白处
选择add global variable 并添加变量Score使其初始值=0
这里写图片描述
回到layout1中在layer bar中添加一个新的图层使其不能随屏幕的移动而移动
制作简单的HMTL5游戏_第18张图片
更改该图层的性质
制作简单的HMTL5游戏_第19张图片

选中该图层添加文本精灵这里写图片描述
可以更改字体颜色大小

回到事件表中
使文本可以有内容 显示当前Score的值
这里写图片描述

然后我们设置事件当怪兽死亡时我们的Score就+1
这里写图片描述

至此我们的游戏就完成啦~~(撒花)

然后我们进行调试看一下成果图
单击左上角这里写图片描述
就会跳转到游戏页面啦~

附上成果图

希望有所帮助,感谢阅读~

你可能感兴趣的:(制作简单的HMTL5游戏)