Jiahonzheng's Blog

Construct2 实现 打砖块 游戏

字数统计: 1.6k阅读时长: 5 min
2017/10/11 Share

在博客正式开始之前,先放出 打砖块 的项目地址和 Demo 地址。

项目地址: Block-Breaker

项目 Demo:Block-Breaker

Construct2

Construct2 是一个制作 HTML5 游戏的简单引擎,不需要编码,通过定义各个部件和事件完成游戏开发。该引擎可以将开发的游戏封装成多种形式,如 PhoneGapCocoonJS ,再用相应工具生成 iosAndroid 的应用。

Construct2 不需要编程,简单直观,入门容易,适用于开发射击、动作类的平面游戏。

这篇博客,侧重点并不是 Construct2 的使用教程,而是 Construct2 的应用教程:开发 打砖块 游戏。

关于 Construct2 的安装、使用教程,可以点击这里跳转到官方教程。

打砖块 ,是一款很经典的游戏,充满了童年回忆。记得小时候在那种廉价的游戏机,我是这款游戏的常客。在软导老师布置这项 “使用 Construct2 开发游戏” 的作业时,我想到了复刻这款经典小游戏。

游戏构思

我们想通过使用 Construct2 设计一款打砖块的游戏,在实现游戏代码之前,我们需要对这款游戏进行必要的并且充分的构思。

我们这款游戏的命名很简单,中文名为 打砖块,英文名为 Block-Breaker

现在,我们开始对 打砖块 进行游戏构思。

游戏逻辑

为了更好地进行构思,我们称游戏的主体部份,为 Play 版面。在这个版面中,玩家可以通过控制 滑动板 从而控制 的攻击方向,实现打砖块的操作。

那我们玩家通过什么方式操作 滑动板 。在这款游戏中,我们打算使用鼠标,而不是键盘来作为游戏的操作方式。

当玩家把所有 砖块 都消灭时,玩家取得游戏胜利,此时游戏就进入另一个版块 Win

当玩家没有接住 时,玩家游戏失败,此时游戏进入 Lose 板块。

Oops,我们还要设置计分系统,计分系统的重要性我们后面会提及到。

当然,我们还要设置“前戏”部分,在正式游戏开始之前,我们将设置一个 Home 板块。这个版块提供了 开始游戏游戏介绍 两个操作,这两个操作分别对应 PlayAbout 两个板块。

整体架构

经过构思,我们将 打砖块 分为五大板块:HomeAboutPlayWinLose

现在,我们得考虑板块之间的耦合问题。

按钮跳转

  • Home --> About

  • About -> Home

  • Home --> Play

  • Win ---> Home

  • Win ---> Play

  • Lose --> Home

  • Lose --> Play

其他跳转

对于 Play --> Win ,我们通过 Construct2 设置的全局变量 score 来跳转。由于我们设计游戏时,砖块数目是确定的,而玩家每成功击打一个砖块,即可获得相应的分数,故玩家胜利时取得分数也是确定的。根据这个特点,即可建立 Play -> Win 的跳转条件。

对于 Play --> Lose ,我们可以通过判断 是否离开当前界面来建立跳转条件,Construct2 提供了 Is outside layoutAPI 函数。

游戏实现

项目 Repo: Block-Breaker

项目 Demo:Block-Breaker

素材准备

Construct2 是基于素材操作的游戏引擎,所以在制作游戏前,我们需要准备素材。

综合上面的游戏整体架构分析,我们需要制作以下素材:Home 标题、 About 内容、 砖块滑动板Win 内容、 Lose 内容。

在这个环节里,我们使用 Adobe Illustrator 制作素材。由于篇幅的关系,本篇博客没有涉及素材制作细节,相信各位 dalao 都能谅解。

具体素材可以在 项目 Repo 里的 Resources 查看。

下面是Construct2 的全局素材列表。

网络不给力哦

注意事项

  • 由于采用鼠标作为游戏的操作方式,我们需要添加 Mouse 的对象。

  • 本游戏中的每个板块的 Layout Size 都是 854 * 480

  • 由于我偏爱 “性冷淡” 的设计风格,我们的板块背景都是保留默认设置。

Play 版面

新增名为 PlayLayout ,同时也添加名为 PlayEvent 的事件表。

添加以下对象:

网络不给力哦

在添加的对象中,WallLeftWallRightWallTop 为自定义对象,只需把 Play 三边包裹住就好,作为限制 运动的墙壁。

复制布局对象。这里给大家介绍一个小技巧,想重用素材,可以点击目标对象,然后按下 Ctrl 并拖动鼠标,即可获得同类对象。最终 Play 版面为下图:

网络不给力哦

我们需要对每个对象进行属性设置。下面是对象的Behaviors表。

Object Behaviors
Wall* Solid
Block* Solid
BlockControl Solid 8Direction
Ball Bullet

我们需要对 BallBlockControl 的具体参数进行设置。

Ball 的属性详情如下:

网络不给力哦

BlockControl 的属性详情如下:

网络不给力哦

别忘了给 Ball 设置初始运动方向哦~ (设置方法:点击 Ball 对象,旋转对象中间的指示条,可参考下图)

网络不给力哦

Play 版面的素材导入设置完毕后,我们需要配置事件表。PlayEvent 事件表具体配置如下:

网络不给力哦

Win 版面

新增名为 WinLayout ,同时也添加名为 WinEvent 的事件表。

由于篇幅的关系,此处和下文都直接给出具体的配置图,敬请谅解。

网络不给力哦

网络不给力哦

网络不给力哦

Lose 版面

新增名为 LoseLayout ,同时也添加名为 LoseEvent 的事件表。

网络不给力哦

网络不给力哦

网络不给力哦

Home 版面

新增名为 HomeLayout ,同时也添加名为 HomeEvent 的事件表。

网络不给力哦

网络不给力哦

网络不给力哦

About 版面

新增名为 AboutLayout ,同时也添加名为 AboutEvent 的事件表。

网络不给力哦

网络不给力哦

网络不给力哦

开发感想

Construct2 的设计思想是让开发者能够通过简单地导入素材,并设置素材相关属性以及游戏事件,从而开发一款游戏。

Construct2 的设计模式,让我惊讶:原来还有这么简单的游戏开发方式。之前,我在开发 逃亡的贪吃球 都是打码实现的,花了很长的时间。而今天,我竟然花了大概一个小时的时间,将 打砖块 开发完成。

感谢软导老师给了我们这个开拓视野的机会!!

当然,用 Construct2 开发的可玩性还是不够打码高,自由度也有些限制。但我觉得这并不是 Construct2 的缺点,这只是它的一点小瑕疵。

接近完美的东西才是最美的,不是么?我发现我好像爱上这款引擎了。

CATALOG
  1. 1. Construct2
  2. 2. 游戏构思
    1. 2.1. 游戏逻辑
    2. 2.2. 整体架构
      1. 2.2.1. 按钮跳转
      2. 2.2.2. 其他跳转
  3. 3. 游戏实现
    1. 3.1. 素材准备
    2. 3.2. 注意事项
    3. 3.3. Play 版面
    4. 3.4. Win 版面
    5. 3.5. Lose 版面
    6. 3.6. Home 版面
    7. 3.7. About 版面
  4. 4. 开发感想