Hype

Hype中文官网 > 使用技巧 > 实例:使用Hype物理引擎制作一个网页小游戏(三)

实例:使用Hype物理引擎制作一个网页小游戏(三)

发布时间:2020/11/04

本节是本教程的最后一节,本节主要内容是带大家使用Hype的物理量功能,对部分元素赋予物理量,完成游戏的开发制作,然后再进行一些网页的相关优化设置,提高游戏体验。

前章节回顾:实例:使用Hype物理引擎制作一个网页小游戏(二)

  1. 一、施加物理量

在Hype中,默认新建的每个元素的物理量都是“停用?不施加物理量”,如下图1。

默认元素物理量
图1:默认元素物理量

因此大家需要手动去对某些特定元素施加特定的物理量,大家跟着小编来分析一波。由于小球是需要元素碰撞提供弹力的,因此对某些元素是需要施加物理量,提供弹力的,其中需要提供弹力的元素有:上下左右四个矩形墙壁、左右两个能够翘起和释放的矩形、上方横向移动的矩形障碍。

因此,需要选中上述说到的这些元素,然后在“物理量检查器”中,设置元素物理量为“静态?互相影响,没有移动”,然后更重要的是设置退还系数,这其实就是元素的弹性系数,这里小编给的系数值是0.58,如下图2,毕竟弹性太大小球反弹速度就会很快,游戏难度就很大了,给一个适当的弹性系数还是很重要的。

施加物理量和退还系数
图2:施加物理量和退还系数

下面对圆形小球施加一个物理量,具体如下图3。元素物理量选择为“动态?全物理量主体”,代表小球是会受到重力、摩擦力、弹力等物理量的影响,并因此产生移动。

其中,密度设置为1.0,密度系数影响的是小球的质量,即受到的重力,这里设置1.0,使用正常的重力即可;退还系数0.58,和其他的元素相同;摩擦力设置为0.0,取消摩擦力的影响,防止小球因为摩擦力出现意想不到的诡异移动曲线;空气阻力设置为0.1,因为实际上空气的确存在着阻力,加上空气阻力会让游戏体验更好一点;如果设备支持重力感应,还可以额外勾选上“通过设置倾斜控制重力”选项。

对小球施加物理量
图3:对小球施加物理量
  1. 二、网页优化设置

完成上述步骤后,游戏就可以正常运行起来了,但是因为移动设备的不同,游戏体验可能有差异,因此还需要对不同的设备做一些相关的优化设置。首先:在“文稿检查器”中,点击“编辑头HTML”,如下图4。

编辑头HTML
图4:编辑头HTML

第二步:然后往打开的文件中,加入图5红框的代码,这行代码是为了使网页兼容移动设备的不同宽度,同时限制网页不可被缩放和放大,优化游戏的体验。

往头文件中加入代码
图5:往头文件中加入代码

第三步:打开“场景检查器”,然后在“场景加载时”,再添加一个操作,操作选择“运行JavaScript”,函数选择新函数,然后命名为“preventScroll”,如下图6。

场景加载时运行JavaScript
图6:场景加载时运行JavaScript

第四步:这时Hype会为大家打开新函数的编写界面,在该函数中加入下图红框的代码即可,这一段代码是为了阻止浏览器的默认事件,比如右键可以复制文字等浏览器自带的属性功能,这些功能可能会影响到游戏的游玩体验,因此需要进行禁用。

编写JavaScript代码
图7:编写JavaScript代码

好了,到了这里本教程就算是正式完成了,大家赶快动起手来,实现自己的一个小游戏吧!

一款游戏的制作,往往比自己亲自去玩这游戏更有乐趣和成就感,本篇教程融合了Hype的各种功能,综合性较强,如果有些新手小伙伴们对有些地方疑惑,可以到中文网站上查看更多Hype新手教程,当然在那上面,也有更多的高级教程辅助大家提高对Hype软件的使用,欢迎大家前往关注。

作者署名:包纸

标签:JavaScript物理量物理量检查器

读者也访问过这里:
Hype中文版
创建漂亮的HTML5网页内容
立即购买
QQ 群
官方交流群:1046763737 立即加群
400-8765-888 kefu@makeding.com
热门文章
H5制作软件Hype导出功能详解
Hype是一款Mac端网页制作工具,它可以通过时间线录制功能制作各种各样的网页炫酷动画效果,同时也支持使用物理引擎制作动画。当然,它的强大不仅仅体现于动画制作方面,它的导出功能同样也是功能齐全,下面小编就通过使用Hype 4版本,为大家详细介绍下这款H5制作软件的导出功能。
2020-06-05
UI动效设计工具Hype的响应式布局及设置
响应式布局可以使用户的网页在各种尺寸的屏幕上都能够较好地兼容,不会因为屏幕尺寸大小变化导致网页拉伸变形。Hype就支持这种响应式布局,它允许设计者为单个场景创建多个布局,当用户在浏览器中显示页面时,Hype将根据设备的当前宽度动态加载合适的布局。
2020-05-21
Hype软件持久符号的应用
Hype是一款支持无代码创作炫酷网页的Mac端应用软件,它支持各种动画、元素。其中有一个强大的符号功能,该功能分为基本符号和持久符号两种,本文中,小编将使用Hype 4版本,为大家演示和讲解Hype中的持久符号。
2020-06-04
Hype中触发事件的使用
一个优秀的网页绝不仅仅是一个静态的页面,在网页当中,还应该存在着一些点击或者触摸等主动触发事件,当用户点击页面上某处的时候,页面会相应的发生一些动态变化,这就是网页的触发事件。Hype作为一款专业的Mac端网页制作软件,同样支持触发事件功能。
2020-06-08
使用Hype进行动画制作的入门介绍
在一个网页中,如果多了一些动态元素的呈现,会使页面看起来更显得高大上一些。而Hype使用功能强大的动画系统,利用时间线录制功能,使制作者制作动画变得轻而易举。
2020-05-21
Hype制作矢量形状动态变形的动画效果
相信大家都看过一些网页动画,就是从一个矢量图形慢慢变成另外一个矢量图形。其实这个效果利用Hype可以非常简单地实现,下面小编就利用Hype 4版本,教大家如何快速简单地实现这一功能。
2020-06-09