制作HTML5游戏1

最新推荐文章于 2024-03-11 00:10:57 发布

Jessicazzw

最新推荐文章于 2024-03-11 00:10:57 发布

阅读量399

点赞数

分类专栏：作业

本文链接：https://blog.csdn.net/weixin_40377691/article/details/78547977

版权

作业专栏收录该内容

12 篇文章 0 订阅

订阅专栏

本文将简要介绍如何使用construct2制作HTML5游戏1，打开construct2以后，点击左上角的文件图标即可新建项目。

在layout1页面中，双击任意位置，将会出现如下图框：

点击Tiled Background添加背景后将会出现如下页面，点击文件夹按钮即可自行选择本地上的图片作为背景图片。

在整个页面左边，是背景图的属性设置，将Position改为0，0.Size改为1280，1024即可使背景图铺满整个层。

在界面右侧点击Layers可以添加层或者删除层、重命名层、锁定或者解锁层等等。

设置好背景效果后的界面如下图：

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

接下来，我们来添加更多的对象。首先我们先去把背景瓦片对象锁定了，这样才不会被我们再次选中。

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

在本游戏中所涉及的游戏对象有：

接下来请保持图层Main处于选中状态，接着我们将把对象置于该图层。

回到画布中，同样双击插入另外一个对象，这次我们选择Mouse对象，我们需要鼠标输入控制。同样的可以添加Keyboard对象。

注意：这些对象不需要置于画布中，他们是隐藏的，自动在工程中起作用，现在工程中的所有层都可以使用鼠标和键盘输入控制了。

在CT2中，游戏中这些对象，我们将采用sprite（RPG中好些人称为精灵，在flash里成为元件）对象来置入。该对象用来显示图片（纹理，图像设计专业说法，在CT2里可以就认为图片），还可以移动，旋转或缩放。

接下来依次插入上面的几个对象，插入过程如下，和上面的操作一样，大致如下：

1、双击插入新对象

2、双击选择Sprite对象

3、当鼠标变成十字，在画布中点击

4、弹出对话框，点击open图标，加载四张素材图片中的一张

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:这个行为可以让你实现给角色添加方向移动（方向键）的功能。

Bullet movement:这个行为让对象朝着它当前的角度移动，比如，本例中玩家射出的子弹的移动行为，不要被这名字迷惑了，它不只适用于子弹，也可以应用于怪物等移动。在Contruct2里所有的移动行为都是通过添加速度向前行进。

Scroll to：这个行为可以让运行时画布随着对象移来移去（滚动）。这个行为很适合于角色。

Bound to layout：这个行为可以防止对象离开画布区域。这个行为对于角色来说也很重要。

Destroy outside layout:当对象离开画布区域时，就将其销毁。比如本例中的子弹，如果不销毁的话，虽然子弹离开画布区域了，但是依然暂用内存。所以我们需要及时销毁不再需要的对象。

Fade:这个行为可以给对象添加淡出效果，用于爆炸等特效的消失。

接下来我们就来给对象添加相应的行为。

我们给角色player添加8 direction movement行为，如下图：选中player，在properties bar属性面板里，找到Behaviors分类，点击Add/Edit弹出Behaviors行为对话框。在对话框中，点击绿色+号-添加行为图标，在弹出的“Add behavior”对话框中双击8 direction movement。

同样的方法我们可以添加更多的对象和更多行为。

关于事件

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

条件、动作、子事件

事件包含条件，测试某些条件是否满足，例如，Is spacebar down?(检测空格键是否按下)。如果条件满足了，那么事件的动作将会运行，例如，Create a bullet object创建一个子弹实例。当动作运行后，任何子事件也会运行，这样可以测试更多条件，运行更多的动作和更多的子事件等。使用该系统，我们可以为游戏或程序创建更多负责的功能。

不同的对象根据他们要做的行为拥有不同的条件和动作，在对话框中双击System对象，对话框中列出了所有System对象的条件。双击Every tick条件插入到事件表中。对话框将关闭，Every tick事件被创建，但没有actions(动作)。