童话说说技术创业美文职业
投稿投诉
职业母婴
职场个人
历史治疗
笔记技能
美文纠纷
幽默家庭
范文作文
乐趣解密
创业案例
社会工作
新闻家居
心理安全
技术八卦
仲裁思考
生活时事
运势奇闻
说说企业
魅力社交
安好健康
传统笑话
童话初中
男女饮食
周易阅读
爱好两性

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

9月5日 尘世客投稿
  我出的这一版非常简单,就是让大家熟悉推箱子游戏做出来的原理,当然你可以花时间优化一下,比如加个方格子,多设置几个障碍物,多加几个箱子等等。熟悉基本原理,拓展性的东西自己摸索就会了,这就是很多大神一上来搞得很复杂,导致很多人觉得很牛逼的样子。附上原型图,大家可以凑合着看看草图推箱子游戏。
  看到很多产品大神用axure玩的不亦乐乎,还能拿来做很多小游戏,我也蠢蠢欲动来玩一下。推箱子恰巧是入门级,教程最多的进阶版axure产品,大家看到大神们的教程都惊呆了,怎么那么的动作条件,于是连尝试的勇气都没有了
  没关系,今天我来教大家一个最最最最简单的推箱子教程,相信我,你一定可以很快学会上手的。之所以网上的推箱子教程那么难学,主要是因为大神们都是一气呵成,没有把动作流程拆解出来教学,只是单纯的把设置流程截图出来,导致用户在看的时候非常懵逼,我擦,这一步是什么意思啊,怎么变量怎么过去的啊
  没关系,接下来就是我的简易版教学,首先我们来看需要哪些元件和变量。
  四个对象:
  人(动态面板)
  箱子(动态面板)
  目的地(矩形元件)
  墙(矩形元件)
  四个全局变量
  renX:人的x坐标;
  renY:人的y坐标;
  xiangziX:箱子的x坐标;
  xiangziY:箱子的y坐标。
  实现流程将整个过程分为四步:
  移动人。首先人要先移动吧,人不移动怎么推箱子呢;
  箱子跟着人一起移动。人可以自由移动了,那就要可以带着箱子一起移动了吧,其实这一步是最简单的,待会详细讲一下你就明白了;
  让箱子与目的地坐标重合。这是判断是否闯关成功的标准对不对;
  设置围墙。前面3步完成后,人和箱子都可以无拘无束的移动了,这一步就是给他们加个围栏,让他们只能在围栏中移动。
  那么,这就是我将推箱子游戏分析后,简化的四步骤,不要着急,一步一步来,很多大神一开就将所有预设条件都设置进去,所以用户看的才那么懵逼啊对不对。
  第一步,移动人
  如图,我创建了一个人的箱子,然后创建了一个移动手柄,上下左右按键。实现的动作效果就是:点击键盘的按键,人可以上下左右移动,这里我以“上“”按键为例,设置动作。
  第一步,鼠标单击时,先用全局标量记录下当前没有移动时人的坐标位置,这点很重要,刚才创建的全局变量renX和renY就是用来记录人的坐标位置的。下一步,就是移动人,记住,移动人的时候采取相对位置,意思就是相当于当前位置,我将人的纵坐标移动了“30”(上移),就是这个意思。
  同理可得,其他三个下,左,右的动作设置,这还能不明白吗?
  做完了之后预览一下,看看人是不是可以通过上下左右按键进行移动了。还有一点,这里我设置移动距离为30,因为我的方块大小就是30,刚好一个身位,所以这个距离视你设置方块大小而定,保持一致。
  第二步,移动箱子
  很多人在这一步会很懵,屡一下先,人碰到箱子后,再点击移动按键,箱子就会和人朝一个方向位移相同距离。想明白了,这一步就是要对人在“移动时”设置动作。
  先设置动作条件,当人接触到了箱子时,再移动的话,先记录下当前未移动时箱子的坐标位置,用全局变量xiangziX和xiangziY记录,然后移动箱子,选择跟随就完事了。
  “移动跟随”的意思就是箱子跟着人一起移动相同的距离,比如人往右移动30,箱子也会往右移动30,推箱子的原理就是这样的。
  至此,你已经可以预览一下了,是不是实现了,人可以自由移动,然后在接触到了箱子之后,可以推着箱子一起移动呢?不接触箱子的话,箱子就不会动,放心吧
  第三步,设置一个目的地
  这个原理其实就很简单,把目的地用一个元件来代替,当箱子和元件的坐标位置重合的时候就算闯关成功,然后出现提示标语“闯关成功”。这里,我用了一个雪花来代替。
  当箱子和雪花重叠时,提示成功。
  那么,这一步就是对箱子设置动作,当箱子移动时,如果接触到了雪花,则显示成功;反之则隐藏提示框。
  至此,完成前面三步,一个推箱子就算是完成了,但是现在的情况时,人和箱子都是可以随便移动的,没有一个边界,也就是墙,同时,墙内还会有障碍物,如果碰到了障碍物,是不能往障碍物方向移动的,这个实现过程就在第四步。
  第四步,设置墙和障碍物
  先屡清楚思路,当人移动时,正常情况下,可以自由移动;碰到墙和障碍物的时候,就要保持原位置不动;当箱子被人推着移动时,正常情况下可以自由移动;当碰到墙和障碍物时,箱子和人都保持原位置不动。这样理解,我们就很好设置动作了。
  这里,我拉出来了四条直线作为墙,一个黑色的方块作为障碍物,就是很简单嘛,为了让大家好理解。
  这里,我再以人为为例,设置它碰到障碍物的动作。
  当人移动时碰到了障碍物,移动人的位置到“绝对位置”的renX和renY的坐标,想没想起来之前我们设置的,人在每一次移动时,先记录他的位置,再移动,那记录他的坐标位置的全局变量就是renX和renY。
  此时,设置完成之后,大家可以预览一下,当人往障碍物方向移动时,就不会有反应,因为让人移动到的绝对位置就是上一次记录的位置!同理,箱子也是一样。
  这里注意:不仅要移动到箱子到绝对位置,还要让人也移到绝对位置,如果不设置人的话,就是箱子不能动,而人还可以动,就会跟箱子重叠了!我这里以箱子为例,把设置动作展示出来。
  就是这样,说白了就是碰到障碍物就保持上一次全局变量记录的位置,当然碰到墙壁也是一样,所以大家可以自己练习一下。
  原型地址:https:obiyo5。axshare。com
投诉 评论 转载

Protopie实战教程:滑页切换效果本篇文章为大家展示了在Protopie中如何实现滑页效果,来看看吧!左右滑页是手机上常用的一种交互方式,在Protopie中,我们无需任何交互配置即可实现滑页效果,这完全……AxureRP9教程:模拟ofo地图最近疑似陷入财务困境的小黄车,共享单车ofo公司,遭到用户争相索还199元人民币的押金,小黄车陷入风口浪尖之中。(o)不过呢,今天要讲的不是ofo的困境,不是ofo会以何种方式……完整度超95的原型需求,应该具备哪些条件?在做需求原型的时候,不管自己写再细,到了评审或研发测试阶段,研发同事经常找你咨询需求中的具体细节问题,而这些刚好你是没有考虑到,或者没有写进文档里面。那如何去避免需求遗漏……Protopie实战教程:checkbox多选框本篇文章为大家展示了如何实现checkbox多选框效果checkbox多选框和radio一样在任何Web和APP应用中都非常常见,且形式更多样,我们所要实现的效果如下:……如何利用axure制作简易版的推箱子我出的这一版非常简单,就是让大家熟悉推箱子游戏做出来的原理,当然你可以花时间优化一下,比如加个方格子,多设置几个障碍物,多加几个箱子等等。熟悉基本原理,拓展性的东西自己摸索就会……AxureRP9教程:pagename函数使用实例本篇文章通过原型设计工具为大家演示pagename函数的使用,希望对有需要的同学能有所帮助!效果图今天演示的是函数小知识,很遗憾,无效果图!!!当然了,无效果……Axure教程仿做京东商城式的左侧菜单栏本期给大家带来的教程是“仿做京东商城式的左侧菜单栏”。一、照例先上gif二、制作方法1。分解元素“元素1”为菜单说明,没有特别功能。“元素2”为菜……AxureRP9教程:能获取本地时间的时钟本篇文章为大家展示了如何利用原型设计工具设计一款能获取本地时间的时钟,希望对有需要的同学能有所帮助!效果图使用工具AxureRP9beta绘制原型Cam……Protopie实战教程:radio单选框如何实现radio单选框在任何Web和APP应用中的效果,一起来文中看看radio单选框在任何Web和APP应用中都非常常见,效果如下:操作步骤:(1)从Sk……项目经理,如何用产品思维设计Axure组件库?项目经理给甲方提案需要展现能力和专业性,其中原型图的设计其中的一环。那么,项目经理,如何用产品思维设计Axure组件库?很多产品经理都有自己的独家组件库,其实我们来分析一……AxureRP9教程:模拟猜拳本篇文章利用原型设计工具为大家展示了AB双方猜拳时出现石头、剪刀或布的效果,希望对有需要的同学能有所帮助!效果:AB双方猜拳时出现石头、剪刀或布为等概率事件math……Axure教程:App移动端弹窗广告本篇教程将为大家展示如何使用Axure制作App移动端弹窗广告效果。最终效果我们在很多APP做活动的时候,都会出现弹窗广告的效果,今天我们分享一下弹窗的制作方法。……
设计提升满意度从产品的角度看待爱情(亮点在于对爱情的产品分析)对QQ、msn等即时通讯软件(IM)的定性研究解密绝大多数人会在支付步骤离开:解决方法!手机客户端适配性电子商务网站是否应向非登陆用户开放购物通道关于“双向关系”与“单向关系”的一些解读商业周刊:揭秘Google改版流程尼尔森:关于iPad易用性的测试报告判断LOGO好坏的12条参考标准让它与众不同吧消除设计的界限让人又爱又恨的标签们

友情链接:中准网聚热点快百科快传网快生活快软网快好知文好找作文动态热点娱乐育儿情感教程科技体育养生教案探索美文旅游财经日志励志范文论文时尚保健游戏护肤业界