Hype

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

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

发布时间:2020/11/03

在上一小节中,相信大家跟着小编的教程都能够顺利完成这款网页小游戏的静态场景制作,在本小节中,小编将带着大家完成网页小游戏的动画录制部分。

第一步:从上一节的游戏预览效果可以看到,游戏过程中,上方的矩形一直来回横向移动,作为游戏干扰因素,提高游戏可玩性,因此我们需要对矩形制作一个不停来回移动的动画。选中矩形,然后点击“录制”按钮,移动时间线到00:05:00秒处,然后移动矩形到下图所示位置(左侧移动至右侧位置),这样就完成了矩形横向移动的动画。

设置矩形动态移动
图1:设置矩形动态移动

第二步: 在5秒处点击时间线操作旁的加号按钮,打上一个关键帧,设置时间线操作为“开始时间线”,时间线选择“主时间线”,勾选上倒序播放,如下图2;然后再移动时间线到0秒处,打上一个关键帧,设置时间线操作为“开始时间线”,时间线选择“主时间线”,这里不要勾选倒序播放。这样就完成了矩形来回移动的动态效果了,游戏障碍算是设置完成。

打关键帧
图2:打关键帧

第三步: 点击时间线,然后选择创建时间线,创建四个新的时间线,如下图3红框,分别是“PaddleLeft-Hit”、“PaddlegLeft-Release”、“PaddleRight-Hit”和“PaddleRight-Release”,这四个对应左右两个矩形元素的翘起和释放。

4个新时间线
图3:4个新时间线

第四步:切换到“PaddleLeft-Hit”时间线,然后选择对应的左边的矩形,确保在0秒时,矩形元素的旋转角度为(20,0,0),再点击“录制”按钮,移动时间线到00:00:05处,设置矩形的旋转角度为(-20,0,0),以上动画效果,制作了左边矩形翘起的一个动画效果;对于时间线“PaddleRight-Hit”同样如此操作,只是旋转角度Z从-20度变为20度。

制作矩形翘起的动画
图4:制作矩形翘起的动画

第五步:切换到“PaddleLeft-Release”时间线,然后选择对应的左边的矩形,再点击“录制”按钮,移动时间线到00:00:18处,设置矩形的旋转角度为(20,0,0),如下图5;再切换到“PaddleRight-Release”时间线,然后选择对应的右边矩形,点击“录制”按钮,移动时间线到00:00:18处,设置矩形的旋转角度为(-20,0,0)。

制作矩形释放的动画
图5:制作矩形释放的动画

第六步:增加触发事件,游戏中,点击左边的L方块,左边矩形会翘起,松开方块则矩形会释放,这就需要我们为L方块增加一个触发事件,选中左边矩形,在Hype的“操作检查器”中,为“鼠标向下移动时”,添加一个操作,操作选择“开始时间线”,时间线选择“PaddleLeft-Hit”,再为“鼠标向上移动时”,添加一个操作,操作选择“开始时间线”,时间线选择“PaddleLeft-Release”,如下图6所示,当然,对于R方块也是同理,需要增加触发事件。

增加矩形触发事件
图6:增加矩形触发事件

第七步:选中“Reset”按钮,在“操作检查器”中,添加一个“鼠标点按时”的触发操作,操作选择“跳到场景”,场景默认选择当前场景,具体如下图7,完成以后,点击Reset按钮即可重置场景,重新开始游戏了。

为Reset按钮增加触发事件
图7:为Reset按钮增加触发事件

上面就是关于网页小游戏动画的一些设置步骤,在最后一小节中,小编会将元素赋予物理量,其中包括重力和弹力等,使元素对象能够模拟现实情况进行移动,提高游戏可玩性和真实性,Hype的物理量功能也是Hype强大的功能之一,大家继续往下看吧!

作者署名:包纸

标签:动画录制操作检查器触发操作

读者也访问过这里:
Hype中文版
创建漂亮的HTML5网页内容
立即购买
QQ 群
官方交流群:1046763737 立即加群
kefu@makeding.com
热门文章
基础教程:Hype 4软件界面介绍
Hype是一款基于MacOS系统的交互动效制作软件,延续了苹果软件的简洁风格,与Keynote软件的界面基本一致。
2020-07-23
H5制作软件Hype导出功能详解
Hype是一款Mac端网页制作工具,它可以通过时间线录制功能制作各种各样的网页炫酷动画效果,同时也支持使用物理引擎制作动画。当然,它的强大不仅仅体现于动画制作方面,它的导出功能同样也是功能齐全,下面小编就通过使用Hype 4版本,为大家详细介绍下这款H5制作软件的导出功能。
2020-06-05
基础教程:Hype 4工作流程(一)
本章节通过一个简单的案例,完整讲述Hype 4的基础操作,让小伙伴了解怎么样使用Hype 4交互动效制作软件设计一个动效。
2020-11-09
Hype 如何进行安装与激活
本篇将为各位小伙伴们集中介绍一下H5制作软件Hype的安装与激活教程。
2020-12-24
Hype软件持久符号的应用
Hype是一款支持无代码创作炫酷网页的Mac端应用软件,它支持各种动画、元素。其中有一个强大的符号功能,该功能分为基本符号和持久符号两种,本文中,小编将使用Hype 4版本,为大家演示和讲解Hype中的持久符号。
2020-06-04
使用Hype进行动画制作的入门介绍
在一个网页中,如果多了一些动态元素的呈现,会使页面看起来更显得高大上一些。而Hype使用功能强大的动画系统,利用时间线录制功能,使制作者制作动画变得轻而易举。
2020-05-21