意派Epub360怎么制作一个端午节H5小游戏页面?

原创 收藏 评论
举报 2020-06-19

六月已经过了三分之一,“粽子节”也马上要到了,每当这时候,又到新媒体运营人和设计师头秃的时刻,在传统的节日里,如何把传统的节日使用互联网元素表现,让更多的年轻人能够参与进来,H5这个形式或许是个不错的选择,而小游戏又容易让用户参与与分享。

 

在端午节做互动小游戏营销制作,其实有一个万能的制作思路,不光是在端午节,更是可几乎以应用在所有的节日上面上的形式。

今天我们介绍这样一款H5平台,市场上零代码的第三方平台很多,但是像 意派Epub360这样专业级的工具,能够灵活创作一个场景,并且上手操作门槛极低的还是很少的。

 

在正式开始前,我们先来介绍一下作品的主要的功能组件和设置方法。

 

主要组件:碰撞侦测

作用:多个元素之间发生接触时,可以触发一些事件,例如计数或播放动画


效果如下:

Compact.gif


 

 关于这个组件详细使用教程:《碰撞检测》

 

应用场景

碰撞检测组件,可以侦测组件的位置变化,当不同组件之间碰撞时,利用触发器触发各种动作,常用于H5小游戏。

 

碰撞检测的几个概念

1.碰撞目标元素/碰撞元素

被用来设定为可以触发碰撞事件的两组组件,针对任意一个碰撞检测组件,都需要设置这么两组对象。这两组对象,可以各一个,也可以各多个。

2.碰撞时触发器

用于设定当发生碰撞时,可以触发到动作


 

 本期H5案例如下:


点击体验>>>>>>[端午游戏1]抓住这个粽子


 端午节接粽子.gif

关于组件的使用我们理解清楚之后我们就可以做端午节,下面是游戏部分的设置步骤:

 

1.我们把元素添加到画布上,摆放好,添加计时器,给“粽子”元素添加飞出动画,顶部,等待触发

1.png 

            

 

 

2.给每个元素添加飞入动画,并把每一个飞入动画放在动画组里,设置与上一个一起开始

2.png 

            

 

3.给每个飞出动画,动画结束时触发飞入的动画组

3.png 

            

 

4.添加碰撞组件,绑定碰撞元素和目标元素

4.png 

            

 

5.在碰撞侦测组件碰撞时,触发播放飞出动画

 5.png

            

 

6.在碰撞侦测组件碰撞时,参数变量+1,就是游戏得分加1

 6.png

            

 

学会了这个教程,我们不光做端午节的H5游戏,甚至所有的节日的H5小游戏了,只要是碰撞类型的小游戏,比如端午节接粽子,中秋节接月饼,618购物节接礼品,春节接红包……本期教程就到这里啦,下期我们再见~

 

 

Epub360 H5工具官方地址:www.epub360.com

21epub视效艺术组创意出品,转载请注明来源:意派·Epub360-专业的H5页面制作工具

Epub360,是一个专业的H5页面制作工具及企业服务平台,提供工具技术支持、工具教学培训、企业H5互动营销解决方案等服务。


本文系作者授权数英发表,内容为作者独立观点,不代表数英立场。
转载请在文章开头和结尾显眼处标注:作者、出处和链接。不按规范转载侵权必究。
本文系作者授权数英发表,内容为作者独立观点,不代表数英立场。
未经授权严禁转载,授权事宜请联系作者本人,侵权必究。
本内容为作者独立观点,不代表数英立场。
本文禁止转载,侵权必究。
本文系数英原创,未经允许不得转载。
授权事宜请至数英微信公众号(ID: digitaling) 后台授权,侵权必究。

    评论

    文明发言,无意义评论将很快被删除,异常行为可能被禁言
    DIGITALING
    登录后参与评论

    评论

    文明发言,无意义评论将很快被删除,异常行为可能被禁言
    800

    推荐评论

    暂无评论哦,快来评论一下吧!

    全部评论(0条)