html5手游制作,HTML5游戏制作（九）——炮塔游戏

本章学习创建一个炮台类游戏&＃xff0c;通过一个完成的游戏案例&＃xff0c;来理解&＃xff1a;

平铺背景、物理属性、行为的含义&＃xff0c;以及进一步熟悉界面视图的功能

&＃xff0c;掌握基本的操作技巧。

【炮塔游戏】游戏功能描述&＃xff1a;

玩家点击鼠标可以实现炮口的朝向&＃xff0c;并根据鼠标点击的距离计算炮弹的初速度&＃xff0c;实现距离越大速度越快的效果。将箱子打出视图之外可获取积分&＃xff0c;当积分大于一定值的时候&＃xff0c;即胜利。

是不是很有意思&＃xff1f;那让我们开始吧&＃xff01;

学习目标&＃xff1a;

掌握tiledbackground对象的使用方法

掌握physics行为的使用方法

巩固原点设置和复制对象的方法

巩固setangle toward position动作

巩固mouse对象的使用方法

掌握applyimpulse at angle动作

掌握applyimpulse at angle动作

了解onloader layout complete事件

1.  添加对象和图层

素材公众号内回复【

炮塔游戏

】即可获取。

(1)首先&＃xff0c;点击文件&＃xff0c;新建一个空白项目&＃xff0c;点击【Open】。

(2)将默认的图层命名为【Background】&＃xff0c;回到视图窗口&＃xff0c;我们再添加一个平铺背景的对象【TiledBackground】&＃xff0c;导入我们的平铺素材&＃xff0c;然后调整到合适的位置。

平铺背景&＃xff1a;即重复显示的意思&＃xff0c;将这张图片重复显示直到充满整个屏幕。很多图案的重复也可以叫做平铺。

拖动鼠标选中如下图所示的效果即可。

(3)接着我们来给它添加一个物理行为【Physics】&＃xff0c;物理行为即给对象添加了一个物理属性&＃xff0c;可模仿真实世界中的重力作用。

添加完物理行为后&＃xff0c;大家会发现它会往下掉。这是因为物理行为会模仿自然环境产生重力效果。我们可以将其设置为不可移动【Immovable】>【Yes】&＃xff0c;碰撞覆盖我们选中盒型碰撞【CollisionMask】>【BoundingBox】。

(4)接下来&＃xff0c;我们再新建一个图层&＃xff0c;命名为【Game】。

然后&＃xff0c;我们导入Ball对象&＃xff0c;可以直接将对象拖入【Game】图层&＃xff0c;并调整合适大小&＃xff1b;同样给它添加一个物理行为【Physics】。

并将球的碰撞覆盖【CollisionMask】设置为环形碰撞【Circle】。

测试后正常。

2. 添加Game图层内容

以下操作对象图层皆在【game】图层上。

(1)导入箱子对象【box】&＃xff0c;将它的大小【size】设置为【48,48】。然后点击视图【view】&＃xff0c;并勾选对齐网格【snapto gird】&＃xff0c;设置网格大小为16&＃xff0c;接着再勾选显示网格【showgrid】。这时画布中便会出现网格效果&＃xff0c;方便我们去对齐添加的对象。

(2)双击箱子【box】对象&＃xff0c;打开动画编辑器&＃xff0c;选中原点【origin】&＃xff0c;在弹出的对话框中选中origin&＃xff0c;单击右键&＃xff0c;快速定位【quickassign】&＃xff0c;将它的原点设置为左上角【top-left】。

设置箱子对象的原点为左上角&＃xff0c;主要目的是方便箱子对齐。

(3)按住【Ctrl】键&＃xff0c;拖动鼠标左键&＃xff0c;依次复制出多个箱子对象。

(4)然后&＃xff0c;选中一个箱子&＃xff0c;再给箱子也添加一个物理行为【Physics】&＃xff0c;点击其他箱子可以发现物理行为同样被复制了。同时&＃xff0c;要将它的碰撞覆盖设置为盒型碰撞。

(5)接下来&＃xff0c;我们把炮塔和炮导入进来。

选中炮塔对象&＃xff0c;双击编辑图像&＃xff0c;使用矩形选框&＃xff0c;选中炮塔&＃xff0c;并把多余的部分裁剪&＃xff0c;最后调整大小。操作过程如下图所示&＃xff1a;

3. 设置发射子弹功能

(1)首先&＃xff0c;插入鼠标对象。在画布中双击空白处&＃xff0c;找对鼠标对象&＃xff0c;点击【Insert】即可。

(2)然后&＃xff0c;切换到事件列表中&＃xff0c;添加语句1&＃xff1a;

选中系统【System】>每帧【EveryTick】&＃xff1b;

接着&＃xff0c;再后面添加动作&＃xff1a;

选中我们的大炮对象【Cannon2】&＃xff0c;设置它的朝向【SetAngle Toward Position】为鼠标朝向。

这时&＃xff0c;我们需要将炮身的原点对炮塔的圆圈位置对齐。

双击编辑大炮&＃xff0c;选择原点&＃xff0c;将它的原点设置在合适的位置。

为了方便对齐&＃xff0c;我们可以将自动对齐网格取消&＃xff0c;便于用鼠标拖动对齐圆圈。也可使用键盘

↑↓←→

键进行微调。

(3)接着添加语句2&＃xff1a;

当我们点击鼠标的时候&＃xff0c;炮管发射炮弹。

依次操作为&＃xff0c;添加事件&＃xff0c;【Add event】>选中鼠标【Mouse】>当点击鼠标左键【On click】的时候&＃xff0c;炮管产生炮弹。具体操作如下&＃xff1a;

添加动作&＃xff1a;生成炮弹

来预览一下效果&＃xff1a;

发现还有一些问题&＃xff0c;我们的炮弹没有从炮口发射出来&＃xff0c;而是从下往上出来的&＃xff0c;还实现了球体的完美平衡(注意这里的炮弹有物理属性)&＃xff0c;需要编辑一下图像原点&＃xff0c;将其设置为炮口。

(4)双击大炮对象&＃xff0c;编辑图形原点&＃xff0c;添加一个原点&＃xff0c;将其设置在炮口。然后&＃xff0c;切换到事件列表&＃xff0c;将语句2中的动作图像原点改为1。

(5)产生初速度&＃xff0c;在某个方向上产生脉冲速度。

在语句2中继续添加动作&＃xff0c;选中【ball】&＃xff0c;选择【Applyimpulse at angle】对某个角度添加脉冲&＃xff0c;即添加一个初速度。

然后&＃xff0c;在【Impulse】中设置鼠标与炮弹之间的距离&＃xff0c;

distance(ball.X,ball.X,mouse.X,mouse.Y)

,注意是在英文状态下输入&＃xff1b;Angle设置为炮身的角度【cannon2.angle】

完整语句如下&＃xff1a;

4.  添加音效

(1)给游戏添加音效

添加声音对象。

在项目工程面板中找到【Sounds】文件夹&＃xff0c;单击右键【ImportSounds】导入音频。

找到所需的音效文件&＃xff0c;点击打开&＃xff0c;再点击【Import】导入&＃xff0c;确定。

回到我们的语句2中&＃xff0c;给点击鼠标发射炮弹添加音效。

依次操作为&＃xff1a;添加动作【AddAction】>选中音效【Audio】>播放【Play】&＃xff0c;找到对应的音效&＃xff0c;点击确定即可。

(2)添加背景音效

新建语句4&＃xff0c;依次执行&＃xff1a;系统【System】>加载界面完成【OnLoader Layout Complete】。

添加动作&＃xff0c;选择音效对象&＃xff0c;播放背景音效。

完整语句如下&＃xff1a;

效果如下&＃xff0c;功能OK。

5. 添加积分功能

(1)添加文本对象

(2)在事件列表中设置文本&＃xff1a;

新建全局变量Score&＃xff0c;

(3)添加语句4&＃xff0c;设置得分&＃xff0c;

(4)添加语句5&＃xff0c;当箱子出界的时候&＃xff0c;积分增加20。

操作如下&＃xff1a;添加事件【Add event】&＃xff0c;选中箱子【Box】&＃xff0c;添加条件为箱子出界【Is outside layout】。

接着添加动作&＃xff1a;系统【system】>增加【add to】>选中积分【Score】&＃xff0c;设置数值为【20】。

测试发现积分会不断的增加&＃xff0c;原因是箱子出界后并没有消失&＃xff0c;所以会不断的增加&＃xff1b;

需要将出界的箱子设置为消失。

完整语句如下&＃xff1a;

6. 设置重玩

(1)再次添加文本对象&＃xff0c;命名为Win&＃xff0c;设置它的显示内容为YOUWIN!&＃xff0c;大小72&＃xff0c;不可视。

(2)当积分大于480的时候&＃xff0c;会显示胜利。

回到事件列表中&＃xff0c;我们添加一个事件&＃xff0c;当我们的积分&＃xff1e;400的时候&＃xff0c;游戏胜利。依次操作如下图所示&＃xff1a;

添加语句6&＃xff0c;选中系统&＃xff0c;执行比较值。

设置score>&＃61;400。

接着&＃xff0c;添加动作&＃xff1a;让win文本可视。

(2)添加语句7&＃xff1a;

选择鼠标对象&＃xff0c;在某个对象上单击鼠标的时候&＃xff0c;做某个动作。

这里当鼠标点击按钮对象的时候&＃xff0c;会发生什么动作。

所有音效消失&＃xff0c;全局变量重置&＃xff0c;系统从新加载。

(3)游戏完整语句如下&＃xff1a;

这里需要注意&＃xff0c;当鼠标点击按钮对象的时候&＃xff0c;需要再加一个条件即当按钮对象显示的时候&＃xff0c;鼠标才可以点击。

素材&＃xff1a;公众号回复【炮塔游戏】即可获取。

本小节完&＃xff0c;快来试试吧。(点击阅读原文可试玩)

感觉不错&＃xff0c;点个赞。

编辑&＃xff1a;两点IT

【免责声明】图片等素材来源网络&＃xff0c;仅供学习&＃xff0c;如有侵权请及时联系