快速制作H5弹幕小游戏

VXPLO互动大师

如何使用iH5互动大师零代码制作弹幕小游戏，直接发送朋友圈，微信好友可提交评论，并看到自己或者别人提交的内容。

链接：http://aebca5be71a3.ih5.cn/idea/sXespSU


制作步骤：

第一步：准备素材

1.选中舞台，点击页面工具，新建一个页面。

2.选中页面，点击中文字体工具，添加几个中文字体，分别是“推荐阅读”、“港囧倒计时……”、“和·新片……”和“泰囧带火了……”，并在后面3个标题下添加3个图标。这个是后面将用作点击跳转外部网站链接用的。


3.选中页面，点击图片工具，添加一张按钮图片，在按钮下添加一个开关，这是后面将用来控制弹幕显示的开关。


第二步：制作背景动画

1.选中页面，点击时间轴工具，添加一个时间轴，“自动播放”和“循环播放”均勾选“YES”，并将其重命名为“背景时间轴”。点击时间轴，点击图片工具，添加5张背景图。第一张与最后一张是一样的。


2.为前4张背景图添加轨迹。每张图片的轨迹添加两个关键帧，关键帧1的透明度是100，关键帧2的透明度是0。制作过渡效果。


第三步：添加跳转外链事件

在标题1，标题2和标题3下分别添加一个事件，事件属性设置如下图：


“资源位置”则是我们要跳转的链接，可以自行输入，本案例中跳转一个文章链接。除了“触发对象”和“资源位置”以外，3个事件是一样的。

第四步：制作控制弹幕发送输入框和弹幕内容的开关

1. 选中页面1，点击透明按钮工具，在舞台上画一个框，添加透明按钮作为弹幕容器，并重命名为“弹幕容器”。选中“弹幕容器“透明按钮，点击工具栏的“动效”两次，添加“淡入”和“淡出”的动效，设置“自动播放”为“NO”，让其不会自动播放。



2. 选中弹幕容器，点击图片工具，上传发表框图片。


选中发表框图片，点击输入框工具，添加一个输入框，将其透明背景设置为YES，这样输入框的背景就会变成透明。


3. 选中按钮图片，点击计数器工具，添加一个计数器。这个计数器用来判断弹幕的显示和隐藏。选中开关按钮，添加一个事件，触发条件为“手指按下”（或“轻触”），目标对象为计数器，目标动作是“加1”。


4. 选中计数器，点击事件工具，添加4个事件。计数器下事件1的触发条件是“为奇数”，目标对象是开关图片，目标动作是“设置属性”，改变按钮的x坐标为75px，具体如下图所示。计数器下的事件2的触发条件是“为偶数”，目标对象是开关图片，目标动作是“设置属性”，恢复按钮的x坐标为19px。这样当用手指点开关时，计数器会加1（即为奇数），按钮图片往右移动，显示出底下图片上的“ON”；再点一次则计数器变成2（变成偶数），按钮往左移动，显示出底下的“OFF”。



5. 计数器下事件3的触发条件是“为奇数”，目标动作是“弹幕容器”对象“淡出”的动效， 目标动作是“开始”。计数器下事件4的触发条件是“为偶数”，目标动作是“弹幕容器”对象“淡入”的动效， 目标动作是“开始”。这样当用手指点开关时，计数器会加1（即为奇数），弹幕容器里的所有内容会隐藏，再点一次则计数器加1变成偶数，弹幕容器里所有内容会显示。


第五步：制作弹幕播放效果
1. 选中页面1下的弹幕容器，点击时间轴工具，添加一个时间轴，重命名为弹幕时间轴。在弹幕时间轴下添加10个“文本”，文本属性的“记录文本”设置为“YES”。


2. 10个文本实际上就是案例播放时的弹幕，文本内容将会被输入的最新内容替换。弹幕的移动实际上只是文本从右到左进行平移，所以制作时我们只需要使用时间轴工具，在两个关键帧中改变文本的x轴坐标即可。



分别点击文本，为10个文本添加“轨迹”。为了使弹幕不同时出现，我们可以先设置其中5个文本的关键帧是从0秒开始，其他文本的关键帧有一些时间差，如本案例中的2.5秒（文本6）、2.7秒（文本7），3.75秒（文本8），1.9秒（文本9），4.6秒（文本10）。第二个关键帧设置在时间轴结尾。取消文本6至文本10的勾选，这样在关键帧出现前它们会隐藏。


第六步：制作数据库

1. 选中舞台，点击数据库工具，在舞台下添加一个数据库。

2. 选中数据库，点击文本字段，添加一个文本字段，字段名称命名为“弹幕内容”，绑定对象为页面1的弹幕容器里的输入框。


3. 选中舞台，添加一个二维变量，变量名称为a，行为10，列为1。在数据库提交后通过输出的事件可以输出最新的10条发送的弹幕。


4. 将页面1的弹幕时间轴下的10个文本分别绑定二维变量的第一行至第十行。


5. 在数据库下添加两个事件，属性设置如下图。事件1的目的是把数据库的数据实时提交到二维变量当中；第二个事件是在输入完成后，输入框自动清空。


6. 为了让案例再次打开时实时更新，我们在舞台下添加一个事件，属性设置如下。每当案例打开时，数据库都会进行输出，确保舞台上显示的是最新的数据。


第七步：添加提交事件

1. 选中发表框下的“发弹”按钮，


在这个发送按钮下添加两个事件，制作按钮被按下时产生变化的效果。第一个事件是当用户按下按钮时按钮透明度减为50%，第二个事件是用户松开手时按钮还原。


2. 点击“发弹”按钮，添加两个事件，事件1使数据库提交数据，事件2使弹幕重新开始从右边向左边移动。


零代码制作H5弹幕，完成！
视频教程，或者想制作其他H5小游戏，或者测试题，或者抽奖活动，可直接登录www.ih5.cn   或加入iH5交流群：429970818