多语言展示
当前在线:1237今日阅读:84今日分享:32

如何制作接力型H5小游戏?

接力型游戏是当今非常流行的一种小游戏,那么,接力型的H5小游戏是不是更具有吸引力,小编今天就把接力型H5小游戏的制作方法分享给大家。
工具/原料

木疙瘩

步骤1:制作首页
1

新建图层,分别将首页图片和文字素材添加进舞台,调整位置大小等。同时在时间轴上插入关键帧动画,为各个素材制作动画效果。

2

如下图,将“历史”文字图片转化为元件,在元件页面通过遮罩功能制作一个“历史”文字的动态效果。

3

最后为其他文字等素材添加预置动画等,设置出现时间和动画效果。

步骤2:制作擦玻璃过渡动画
1

添加背景图片、“擦一擦”“宛平城”等素材,调整位置大小,同时为素材制作相对应的动画效果等。

2

新建图层,在最后帧数上插入关键帧,添加一个“擦玻璃”功能,设置其背景图片和前景图片,同时可设置其橡皮擦大小、剩余比例等属性。

3

新建图层,在“擦玻璃”后一帧插入关键帧,再添加“擦玻璃”背景图片,调整大小位置,使其与“擦玻璃”背景图片大小位置重合。同时为该图层插入关键帧动画设置移动的动画效果。

4

新建图层,在“擦玻璃”关键帧相同帧数上添加一个“出现即暂停”的行为物体(注意在该帧数后面一帧插入一个空白帧)。

5

为“擦玻璃”添加一个“擦玻璃完成即播放下一帧”的行为。

6

新建图层,在“擦玻璃”下一帧插入文字,“插入进度动画”,设置文字以打字机效果出现的动画。

步骤3:制作视频页
1

导入视频至舞台,可为视频添加背景图片、设置视频大小位置以及其他播放属性。

2

如下图,新建图层,在时间轴合适的位置插入关键帧,插入一个“出现即暂停”行为物体(注意在后面一帧插入一个空白帧)。

3

新建图层,在“出现即暂停”帧数后一帧插入关键帧,插入相关文字,为文字“插入进度动画”,设置文字以打字机效果出现的动画。为文字所在的帧命名为“go”。

4

为视频添加“视频结束跳转到‘go’帧并播放”的行为。

步骤4:制作献花接力效果
1

添加相关素材,调整素材的大小位置等,注意为文本框命名为“献花数量”。

2

新建图层“计数器”,添加一个“计数器”在舞台上,设置默认值为“0”,计数值为“1”,并且为其命名为“计数器1”。

3

为按钮添加行为数据服务→设置计数器→触发条件:点击→设置参数 计数器名称:“计数器1” 显示计数元素:“献花数量”

4

如图,如何制作“点击按钮,花即从按钮中随机移至上面五朵花中任意一朵位置”的动画效果?

5

如下图,制作一个花的元件,设置“从按钮位置旋转移至舞台上面第一朵花的位置上”的动画效果。为元件命名为“花1”。

6

同理再设置一个元件,该元件的花最后停留在舞台上面第二朵花的位置上,为其命名“花2”,将其添加进舞台(此处仅供理解,不再多添加其它三个元件)。

7

在舞台之外添加一个随机数,设置相关属性,例如最大值为“2”,最小值为“1”,更新间隔“0.1”。

8

为按钮添加两个行为动画播放控制→播放元件片段→触发条件:点击→设置参数 元件实例名称:“花1” 是否循环:“不循环” 起始帧号:“2” 结束帧号:“20” 执行条件:检查元素状态→随机数1→文本或取值→等于→1 同理设置跳转“花2”播放的行为。

9

设置画面出现即显示原始数值:新建图层,添加一个文本框,为其添加“出现即将计数器数值显示到‘献花数量’文本框中”的行为。

步骤5:设置留言
1

我们先新建图层,在合适的帧数上添加一个“出现即暂停”的行为物体,将舞台动画停在一帧。在“暂停”帧数的后一帧添加“我要留言”按钮素材,同时再在下一帧制作“留言页面”,在留言区域添加输入框,为其命名为“文本输入1”。

2

如下图,为“提交”按钮添加“提交‘文本输入1’表单”行为,提交成功或失败后都跳转舞台画面(上一帧)。

3

同时也可设置点击黑色其他区域也可跳转返回舞台画面(上一帧)的行为。

4

为舞台的“我要留言”按钮添加“点击跳转下一帧”行为。

5

最后,我们可在后台查找相关提交的数据。

注意事项

在制作H5接力小游戏时,一定要有耐心!

推荐信息