快好知 kuaihz

Axure 8.0:制作简易翻卡游戏

翻卡游戏风靡于页游与手游中的小游戏。具有玩法简单、易于实现的特点,在活动中经常使用。本次教程将带大家快速制作。

成品效果图:

原型分析

流程分析:

卡牌奖品总览->点击按钮->卡牌翻到背面、洗牌->花费代价点击卡片/放弃本局游戏;

元素分析:

底层背景图片:作者自己用矩形画的

待翻卡牌:具有正面和反面2种状态,采用动态面板切换。作者是用椭圆形配简单文字画的。

花费代价提示:用2个标签,一个写不变的信息,一个写随时变的花费代价信息。

重新开局按钮:点击后所有卡牌为背面、洗牌,代价回归初始状态。

退出按钮(此教程省略):退出返回到指定页面

实现步骤

元件的层次

背景图片放在底层、卡牌放在顶层。通过”右击图片->顺序”设置。

花费值变量设置

菜单栏 ” 项目->全局变量-> +”添加变量变量名字和默认值自定,作者设为CardPrice和0

拖两个标签,一个写固定说明性文字如“下个花费”,一个起名为“价格”并写上初始文字。

单个卡牌设置

拖出一个动态面板,调好尺寸,起好名字如“奖品1”,双击后进入“面板状态管理”里双击state1编辑状态。Tip:单击选中state1后再单击可改名

正面:把正面图片放在动态面板里。作者是拖了个椭圆配上文字

背面:推荐直接选中state1后复制状态,然后改成另一张图片。作者是改了下圆的填充色和文字。

为背面图片添加鼠标单击时用例:

面板状态更改:

价格变量更改:作者改为”[[CardPrice+100]]”

“价格”标签文字修改:

之后可在主页面将该动态面板复制数个,并为每个奖品进行个性化调整。

翻面洗牌设置

变量和价格变回初始值:过程略。

翻面:为重来按钮添加用例。将所有卡牌的面板状态设置为背面。

洗牌:

可看作牌之间移动交换,耗费时间自定。具体交换规则点击每一步的”fx”详细设定每一步x,y坐标

fx详细设置:添加局部变量以指定交换的卡牌元件,此处命名为”LVAR1″,

x为”[[LVAR1.left]]”,y为”[[LVAR1.top]]”。x、y中需各自添加局部变量

X:

Y:

之后每一步的移动仿照此步设置好对应x,y值即可。

本站资源来自互联网,仅供学习,如有侵权,请通知删除,敬请谅解!
搜索建议:简易  简易词条  制作  制作词条  Axure  Axure词条  游戏  游戏词条  8.0  8.0词条  
原型

 Axure教程:原型设计之转盘抽...

转盘抽奖一般会出现在一些金融类网站中,通过转盘抽奖来激活用户浏览行为,后来又多用于微信的公众号运营中,通过转盘抽奖来宣传活动,从而达到吸粉的目的。这一章就教大家...(展开)

原型

 Axure教程:倒计时效果的实现

在新注册账号或者等待验证码的过程中,我们常常会见到需要等待几十秒的情况。这种自动倒计时的效果时如何实现的呢?文章讲解了如何用Axure实现倒计时效果,一起来看看...(展开)

原型

 Axure 教程:用中继器制作商...

本章主要介绍如何使用Axure中继器制作商品列表。对于商城内的产品,“商品列表页”是很关键的一环。好的布局可以让用户快速寻找到目标商品,文字or图片更优先?选择...(展开)