小皇可可|使用Hype物理引擎制作一个网页小游戏（上）
【小皇可可|使用Hype物理引擎制作一个网页小游戏（上）】Hype软件是一款Mac系统上的HTML5制作软件 ， 在该软件中 ， 引人注意的是它强大的物理引擎功能和动画制作功能 ， 作为一个专业的程序员 ， 要制作一款具备物理量的网页小游戏 ， 少说也要费上一番功夫 ， 更别提非专业编程人员了 ， 但是这些问题 ， 使用上Hype ， 可以迎刃而解 。
下面 ， 小编将使用Hype4版本 ， 演示如何快速且简单地制作一个具备元素重力物理量的网页小游戏 ， 从此教程中 ， 相信大家能感受到Hype的强大与魅力 。
一、游戏画面展示
教程开始前 ， 请大家先跟小编看看最终的网页游戏效果预览GIF吧 ， 对将要做的效果进行一个大致的了解 。
文章图片
图1：网页游戏效果GIF预览
游戏玩法是：点击上方的“reset”文字 ， 会出来一个圆形小球 ， 小球具备重力和弹力 ， 会自然下落 ， 撞到墙或者是杠杆会反弹 ， 玩家通过点击左边的L方块或者右边的R方块 ， 弹起小球 ， 一旦小球从正中间掉下 ， 则视为失败 。
了解了玩法以后 ， 针对这个玩法 ， 需要部署好对应的静态场景 ， 然后使用Hype的物理引擎 ， 对小球施加各种物理量 ， 之后再制作一些动态效果 ， 如颜色渐变 ， 按钮点击事件等等 ， 就可以实现这个小游戏啦 ， 下面请大家跟随小编一起开始进行场景的部署 。
二、页面制作
第一步：该游戏更多是想用于手机端休闲时使用 ， 所以从上图GIF预览中可以看出 ， 场景不大 ， 因此 ， 在Hype界面左侧中选择创建一个新场景 ， 然后在“场景检查器”中 ， 设置场景的大小为“320px*568px”,再填充下场景的背景颜色 ， 颜色大家认为舒适即可 ， 小编的背景颜色代码设置为“#5C131F” ， 具体如下图2 。
文章图片
图2：设置场景大小和颜色
第二步：点击“元素”按钮 ， 选择矩形 ， 创建四个矩形 ， 然后使用鼠标拉动调整矩形的大小和位置 ， 使得矩形大小和摆放的位置如下图3红框所示 。
可能看到这里有人有疑惑？为什么要在场景外添加这4个矩形呢 ， 是不是有点多余 ， 反正在场景外也看不到矩形 ， 添加来干嘛？其实不是的 ， 这4个矩形虽然在场景外看不到 ， 但是其主要作用是作为墙壁 ， 为小球提供碰撞的弹力 ， 如果没有这4个墙壁 ， 小球会直接飞出场景外 ， 因此这4个矩形是有必要的 。
文章图片
图3：4个矩形作为墙壁
第三步：为上述4个矩形 ， 在元素检查器中的边框选项中 ， 添加一个宽度为5px ， 样式为实现 ， 颜色为绿色的边框 。
文章图片
图4：添加边框
第四步：在元素按钮中 ， 添加两个圆角矩形 ， 并在第一个矩形中输入L ， 第二个矩形中输入R ， 字体大小为44px 。 然后在“度量检查器”中调整两个圆角矩形的宽度和高度为90px ， 再在“元素检查器”中加入边框 ， 宽度2px ， 样式为实现 ， 颜色为朱红色 ， 最后摆放两个矩形元素的位置如下图5 。
文章图片
图5：加入L和R两个矩形
第五步：同样的 ， 在元素按钮中 ， 再添加两个矩形 ， 矩形的宽度为283px ， 高度为17px ， 然后加入大小为2px的实线蓝色边框 ， 再在“度量检查器”中 ， 设置其中一个矩形的旋转角度(Z,X,Y)为（20,0,0）,另一个矩形的旋转角度为（-20,0,0） ， 最后摆放两个矩形在如下图6所示位置 ， 并确保它们处于同一水平线上即可 。
文章图片
推荐阅读
- 角色|佛陀降世 《圣斗士星矢：重生》阿赖耶识·沙加的使用技巧
- 使命召唤|使用腾讯手游助手 助力玩家召唤英雄
- 妹子|又一个代打主播？贝玲妃使用关羽证明自己，礼物满屏停不下来
- 拳头|LOL至臻皮肤商店开启！你手中的至臻点，最后使用期限尚未到来
- 艾琳|天美“疯”了！签到送8款传说皮肤，艾琳开放使用，妲己源梦来袭
- fpx战队|王者荣耀：被90%玩家遗弃的装备，夏侯惇如果使用，能增加1个大招
- 九游网|光剑紫使用教程，《元气骑士》光剑紫形态变换技巧教学
- 地下城与勇士|DNF：试炼之塔会产出大量怪物召唤券，遇到卡壳的时候要果断使用
- 3DM游戏网|《死亡循环》也将使用Denuvo防篡改技术
- 87G手游网|救援烟一般，诱饵烟操作最秀，和平精英：烟雾弹的使用方法