axure游戏原型设计教程《特工皇妃楚乔传》方块移动拼图游戏单机版

2017年5月16日 阅读:329

从这篇文章开始,维度君准备写一系列的axure游戏原型设计的教程。比起其他的原型设计软件,axure软件确实很强大,可以很方便地实现很多非常具有逻辑性的设计,包括很多小游戏。如果会美术设计,那结合起axure软件,表示完全不逊色于其他的可视化游戏制作的平台或者软件。2017年6月5日即将播出的《特工皇妃楚乔传》,维度君表示很期待,所以这里就选择此部电视剧的美女帅哥做一个拼图游戏吧。没错,就是使用axure来做。逻辑会比较复杂,起码比上一系列的教程《Axure原型设计40例》复杂得多,但也不用担心,能做更复杂的原型,说明你的技术提高了,哈哈哈~~~

一、游戏效果图

二、游戏链接

http://weidublog.com/wp-content/case/prototyping2/201705151618/

三、玩法介绍

鼠标点击分别移动下方所有小图块至合适的位置。

四、整体设计

首先,一开页面出现的是游戏的开始页面,开始页面上有一个“开始游戏”的按钮,点击按钮,即可以跳至游戏页面;

其次,在游戏页面中需要实现游戏的主逻辑,即通过鼠标的拖拉,可以将小图块拖放至正确的位置,当全部小图块都拖放至正确的位置(即拼图完成),主逻辑还需要做出正确的判断,并根据判断弹出继续游戏的弹框;

最后,在继续游戏弹框中有一个“继续游戏”的按钮,点击按钮,即可以跳至下一图片的拼图游戏页面中。

五、主逻辑设计

1、小图块拖拉

在axure8.0中,是有很多对鼠标和键盘监听的交互用例的。对于拼图游戏,自然不能用键盘相关的交互用例了,要不然游戏性就太差了。但对于鼠标监听的相关交互用例,大多都是单击,双击,移入或者移出之类的,想做拼图游戏,如果能用鼠标的拖动交互用例是最好不过了,可惜的是最常见的图片元件、矩形元件等都不支持拖动相关的交互用例。怎么办?答案是动态面板,动态面板支持鼠标拖动时的交互用例,只需要把动态面板当成一个中间容器,把图片或者其他的元件塞在里面,即可以使用鼠标的拖动事件来实现对这些元件的拖动效果。

2、小图块吸附

拼图游戏基本都有小图块吸附的功能,即当玩者移动小图块到正确位置附近,一旦放手之后,小图块就会被自动吸附到完全正确的位置。这样的设计主要有两方面的考虑,一方面是为了提高游戏的流畅性,毕竟不可能让玩家把太多的时间花费在像素级的位置上;另一方面也是为了程序自动判断是否全部拼图完成,因为有可能玩家拼的某个小图块与正确位置只相差一个像素,但是用肉眼又很难发现,从而被程序判断为拼图失败。

那么该如何解决呢?我们可以在每个小图块上绑定一个小方块A,然后在这个小图块的正确位置上也放一个同样的小方块B,一旦这两个小方块有接触的时候,小方块A就带着小图块自动移动到小方块B的位置。这两个小方块越大,自动吸附范围就越大,小方块越小,自动吸附范围就越小。

3、拼图完成判断

如何判断拼图是否完成?这如果编程实现的话应该说特别简单,但是用axure软件来实现的话又不一样了。也不是说很复杂,就是重复性工作很多而已。具体的方法就是,判断是否全部36个小方块分别对应36个小图块中绑定的小方块,如果是,那就代表拼图完成,否则即拼图尚未完成。也就是说实现的时候需要编辑36个判断条件,哈哈哈~~~也许有更好的办法,如果哪位想到的话,可以下方评论告诉我。

六、多关卡设计

多关卡设计是为了让拼图游戏更加有内容,总不能让玩者只拼一幅图就游戏结束了吧?但是如果每个关卡的交互不同的地方太多,哪怕是一个元件名称的不同,那多关卡复制的时候都有很多工作量。这里的设计就是考虑到这一点,所以把多有的交互都做到了统一,想复制多关卡时,只需要改变图片内容即可。

七、其他

维度君这阵子会持续更新axure游戏设计的教程,希望大家可以持续关注维度君的博客:http://weidublog.com,你们的关注就是维度君坚持的动力,谢谢~~

更多axure游戏制作教程:
http://weidublog.com/index.php/2017/05/16/154/

作者:维度
转载请注明:http://weidublog.com/index.php/2017/05/16/153/

没有评论

评论已关闭。