我出的这一版非常简单,就是让大家熟悉推箱子游戏做出来的原理,当然你可以花时间优化一下,比如加个方格子,多设置几个障碍物,多加几个箱子等等。熟悉基本原理,拓展性的东西自己摸索就会了,这就是很多大神一上来搞得很复杂,导致很多人觉得很牛逼的样子。附上原型图,大家可以凑合着看看草图——推箱子游戏。

如何利用axure制作简易版的推箱子

看到很多产品大神用axure玩的不亦乐乎,还能拿来做很多小游戏,我也蠢蠢欲动来玩一下。推箱子恰巧是入门级,教程最多的进阶版axure产品,大家看到大神们的教程都惊呆了,怎么那么的动作条件,于是连尝试的勇气都没有了……

没关系,今天我来教大家一个最最最最简单的推箱子教程,相信我,你一定可以很快学会上手的。之所以网上的推箱子教程那么难学,主要是因为大神们都是一气呵成,没有把动作流程拆解出来教学,只是单纯的把设置流程截图出来,导致用户在看的时候非常懵逼,我擦,这一步是什么意思啊,怎么变量怎么过去的啊……

没关系,接下来就是我的简易版教学,首先我们来看需要哪些元件和变量。

四个对象:

  1. 人(动态面板)
  2. 箱子(动态面板)
  3. 目的地(矩形元件)
  4. 墙(矩形元件)

四个全局变量

  • renX:人的x坐标;
  • renY:人的y坐标;
  • xiangzi X:箱子的x坐标;
  • xiangziY:箱子的y坐标。

实现流程将整个过程分为四步:

  • 移动人。首先人要先移动吧,人不移动怎么推箱子呢;
  • 箱子跟着人一起移动。人可以自由移动了,那就要可以带着箱子一起移动了吧,其实这一步是最简单的,待会详细讲一下你就明白了;
  • 让箱子与目的地坐标重合。这是判断是否闯关成功的标准对不对;
  • 设置围墙。前面3步完成后,人和箱子都可以无拘无束的移动了,这一步就是给他们加个围栏,让他们只能在围栏中移动。

那么,这就是我将推箱子游戏分析后,简化的四步骤,不要着急,一步一步来,很多大神一开就将所有预设条件都设置进去,所以用户看的才那么懵逼啊对不对。

  • 第一步,移动人

如何利用axure制作简易版的推箱子

如图,我创建了一个人的箱子,然后创建了一个移动手柄,上下左右按键。实现的动作效果就是:点击键盘的按键,人可以上下左右移动,这里我以“上“”按键为例,设置动作。

如何利用axure制作简易版的推箱子

第一步,鼠标单击时,先用全局标量记录下当前没有移动时人的坐标位置,这点很重要,刚才创建的全局变量renX和renY就是用来记录人的坐标位置的。下一步,就是移动人,记住,移动人的时候采取相对位置,意思就是相当于当前位置,我将人的纵坐标移动了“-30”(上移),就是这个意思。

如何利用axure制作简易版的推箱子

同理可得,其他三个下,左,右的动作设置,这还能不明白吗?

做完了之后预览一下,看看人是不是可以通过上下左右按键进行移动了。还有一点,这里我设置移动距离为30,因为我的方块大小就是30,刚好一个身位,所以这个距离视你设置方块大小而定,保持一致。

  • 第二步,移动箱子

很多人在这一步会很懵,屡一下先,人碰到箱子后,再点击移动按键,箱子就会和人朝一个方向位移相同距离。想明白了,这一步就是要对人在“移动时”设置动作。

如何利用axure制作简易版的推箱子

先设置动作条件,当人接触到了箱子时,再移动的话, 先记录下当前未移动时箱子的坐标位置,用全局变量xiangzi X和xiangziY记录,然后移动箱子,选择跟随就完事了。

如何利用axure制作简易版的推箱子

“移动-跟随”的意思就是箱子跟着人一起移动相同的距离,比如人往右移动30,箱子也会往右移动30,推箱子的原理就是这样的。

至此,你已经可以预览一下了,是不是实现了,人可以自由移动,然后在接触到了箱子之后,可以推着箱子一起移动呢?不接触箱子的话,箱子就不会动,放心吧

  • 第三步,设置一个目的地

这个原理其实就很简单,把目的地用一个元件来代替,当箱子和元件的坐标位置重合的时候就算闯关成功,然后出现提示标语“闯关成功”。这里,我用了一个雪花来代替。

如何利用axure制作简易版的推箱子

当箱子和雪花重叠时,提示成功。

如何利用axure制作简易版的推箱子

那么,这一步就是对箱子设置动作,当箱子移动时,如果接触到了雪花,则显示成功;反之则隐藏提示框。

如何利用axure制作简易版的推箱子

至此,完成前面三步,一个推箱子就算是完成了,但是现在的情况时,人和箱子都是可以随便移动的,没有一个边界,也就是墙,同时,墙内还会有障碍物,如果碰到了障碍物,是不能往障碍物方向移动的,这个实现过程就在第四步。

  • 第四步,设置墙和障碍物

先屡清楚思路,当人移动时,正常情况下,可以自由移动;碰到墙和障碍物的时候,就要保持原位置不动;当箱子被人推着移动时,正常情况下可以自由移动;当碰到墙和障碍物时,箱子和人都保持原位置不动。这样理解,我们就很好设置动作了。

如何利用axure制作简易版的推箱子

这里,我拉出来了四条直线作为墙,一个黑色的方块作为障碍物,就是很简单嘛,为了让大家好理解。

这里,我再以人为为例,设置它碰到障碍物的动作。

如何利用axure制作简易版的推箱子

当人移动时碰到了障碍物,移动人的位置到“绝对位置”的renX和renY的坐标,想没想起来之前我们设置的,人在每一次移动时,先记录他的位置,再移动,那记录他的坐标位置的全局变量就是renX和renY。

此时,设置完成之后,大家可以预览一下,当人往障碍物方向移动时,就不会有反应,因为让人移动到的绝对位置就是上一次记录的位置!同理,箱子也是一样。

如何利用axure制作简易版的推箱子

这里注意:不仅要移动到箱子到绝对位置,还要让人也移到绝对位置,如果不设置人的话,就是箱子不能动,而人还可以动,就会跟箱子重叠了!我这里以箱子为例,把设置动作展示出来。

如何利用axure制作简易版的推箱子

就是这样,说白了就是碰到障碍物就保持上一次全局变量记录的位置,当然碰到墙壁也是一样,所以大家可以自己练习一下。

原型地址:https://obiyo5.axshare.com