Axure案例教程:投篮游戏抛物线设计

2018-06-2817:01:25原型设计Comments3,777 views字数 1958阅读模式

实例的特点是:篮球在重力的影响下应该呈现抛物线式的运动。界面中直接给出了游戏的参考线,篮球将会沿着这条线射出,然后在重力的作用下逐渐下降,进入篮筐后得分。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/3915.html

本次制作吸取了像素鸟的教训,没有让背景的云飘起来,这样可以大大减少gif图的体积,从而能够上传游戏流程。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/3915.html

一、成果展示

Axure案例教程:投篮游戏抛物线设计文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/3915.html

体验地址:点我体验文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/3915.html

交互说明:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/3915.html

  • 当点击大炮的时候开始进行蓄力,同时上方出现蓄力条;
  • 当松手的时候篮球将会射出;
  • 篮球的运动轨迹为抛物线,且沿着指导线的方向射出;
  • 当篮球进入篮筐后得分并可以进行下一次射击;
  • 如果未能够投中,游戏结束,刷新后继续挑战吧。

二、制作过程

1. 背景绘制

同之前的方式一样,首先需要找到免费的素材并下载,然后根据素材的品质调整大小以及扣去背景。并将所有的素材加载到axure之中,然后调整位置大小并将所有素材的位置记录下来。注意这一步以前是没有的,记录素材的位置有利于之后抛物线的实现以及一些逻辑判断。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/3915.html

将所有的元素都摆放整齐之后沿着炮筒的方向画一条直线,作为辅助线帮助用户估计设计的角度。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/3915.html

2. 让辅助线动起来

Axure案例教程:投篮游戏抛物线设计文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/3915.html

将辅助线转化为动态面板,设置state1和state2,把state2的线略微进行平移,这样只要频繁切换两个面板就会给人线移动的错觉。面板切换的方式为设置动态面板循环,循环的速度依据实际情况而定,总之感觉不要太违和就可以了。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/3915.html

3. 设置全局变量

Axure案例教程:投篮游戏抛物线设计文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/3915.html

本例子的全局变量较多,请大家一定要注意哪个是哪个,一旦稍不注意,就有可能出现错误,且公式复杂,错误的地点并不是很好找。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/3915.html

x代表当前篮球的x坐标,e代表游戏状态,e=0即停止所有运动,time为蓄力时间的计算,score为得分的判定。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/3915.html

4. 计算方程

这是本实例最难的一步,需要大家拿出草稿纸来仔细计算,一旦这里出错,结果将会未知。因为axure没有报错的功能,所以要找到出错的点很难。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/3915.html

计算的思路是这样的。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/3915.html

  • 首先由于篮球是从炮孔出去的,所以该抛物线必然会经过这一个坐标;
  • 由于射出的方向是和炮孔平行的,所以这条参考线是该抛物线的一条切线;
  • 抛物线的确定需要三个要素,因此以上两个条件约束后将可以得到一个抛物线系;
  • 按下的时间将作为最后一个要素将抛物线完全确定。

知道了上述因素,我们大概就有思路了,首先先将方程一一写出来。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/3915.html

  • 抛物线方程:y=ax*x+bx+c;
  • 切线方程:求导可以得到y=2ax+b;
  • 已知图中篮球的初始位置是(88,431);
  • 已知切线的斜率为k=(y1-y2)/(x1-x2);
  • 蓄力时间t的获得后面再讲,总之,就是t也是一个已知的量;
  • 让t成为该函数的对称轴即t=-2a/b。

通过上面的推倒最后经过计算可以得到结果。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/3915.html

a=0.39/(2*t-176);文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/3915.html

b=-2*a*t;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/3915.html

c=431-7744*a-88*b;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/3915.html

运动总方程为y=(0.39/(2*t-176))x*x+-2*(0.39/(2*t-176))*t*x+431-7744*(0.39/(2*t-176))-88*(-2*(0.39/(2*t-176))*t)。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/3915.html

聪明的你一定发现了什么,是的,上面的总方程中没有a,b,c了,t只要已知,就可以绘制出完整的抛物线实现我们的投篮动作了,接下来让我们来思考t的获取。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/3915.html

5. t的获取

Axure案例教程:投篮游戏抛物线设计文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/3915.html

上图中的条件是边界判定,否则计时器将会永远运行下去,现在的做法就是将篮球约束在页面内,所以投出去之后篮球才会停下来。该操作time不断进行自加运算,当鼠标停止按的时候直接将动态变量e设置为0,即可以停止计时,这个时候time的数值计做t,通过该数值即可以判断最终抛物线的形状。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/3915.html

上方蓄力条的制作方法也是类似的,只要获取了time,让time成为其长度即可,这样进度条就可以随着time的积累逐渐加长了。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/3915.html

6. 设置球的运动

之前我们已经获取了所有的数据,这里只需要让他们成为小球的x坐标以及y坐标即可。我们可以使用移动功能,将小球移动到绝对位置。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/3915.html

Axure案例教程:投篮游戏抛物线设计文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/3915.html

设置方式如上图所示,条件依然是游戏进行与否的判定,主要内容是移动,将小球移动到绝对坐标的位置。最后x=x+100则是x值的循环,只有x不断取新的值才能够让球持续的运行下去。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/3915.html

7. 得分判定

Axure案例教程:投篮游戏抛物线设计文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/3915.html

得分判定的设置如上图所示,为接触式判定,在篮筐处放置一个动态面板,当篮球接触该面板的时候发生下列操作,即复位以及分数的增加。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/3915.html

三、写在最后

本实例的难度主要在函数的计算方面,且由于公式复杂,计算频繁,导致实际运行的时候比较卡,作者做的比较简单, 仅仅保留了核心功能。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/3915.html

本实例要注意的点很多,比如:循环的速度、等待的时间、边界的判定,很多数据都是需要不断尝试的,且有可能逻辑会出现矛盾,以及软件本身bug使得某些动作不会进行。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/3915.html

比如:球的旋转,当加上之后性能明显下降,网页运行效率降低;再比如:球落地或者射高后的结束判断则直接不会执行。当然也有可能是作者的逻辑不对,总之最终版删去了不少功能,最后得到了这个稳定的结果。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/3915.html

  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/yuanxing/3915.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定