发布时间：2022-10-10 分类： 行业资讯
文章分享了蚂蚁庄园星球自动对打的原型设计过程，希望对您有用。
10月26日，我在起点的公开课上展示了三个有趣的小案例。今天，让我们来看看“Starball Auto Sparring”游戏的详细分析。
点击这里进行在线演示。
案例背景
为了能够在开放课堂上说些有趣的东西，并反映出Axure8特征的例子，我听取了操作老师和同学的建议，并考虑了几个案例。在小游戏中，我最终选择了着名的支付宝工具中的案例。蚂蚁庄园的明星球很快就是支付宝推出的一款有趣的游戏，我相信肯定有很多人已经体验过它。
我们不想简单地实现这么小的游戏，但希望从实现过程中了解Axure8的常用功能（样式设置，事件处理，动画设置，功能使用等）。有帮助。
案例计划
虽然明星球类游戏很简单，但它的场景非常丰富，具有开场动画，捕捉动画，统计数据，漂亮的游戏环境等。如果你完全意识到这样一个非常接近的场景，则需要花费很多时间。 。所以我们只是实现了它的主要功能并进行了进一步的改进——让它自动进行争吵，并在Axure8中使用以下功能：
动态面板的使用：小鸡的运动是一个相对整体，所以将鸡肉和所有组件的成分转换为动态面板并命名为
风格设置：鸡的卡通形象由基本组成，通过设置不同的形状，大小和背景颜色完成。通过设置填充颜色和阴影效果也可以完成星球。
使用数学函数：自动对打的效果需要达到将球送到随机位置的效果，它会在数学函数中使用随机函数，这个函数也常用于小游戏，反映了不确定性游戏。
动画应用：游戏总是更有趣，有些动画效果，肯定需要使用动画效果。
循环控制：如果你让球发球，接球并将球返回一轮，你可以重复申请吗？
小游戏流程
整个小游戏规划完成后，真正的实施更快。让我们来看看游戏中的关键点。
案例分析
游戏环境设置
游戏环境在操场上。操场周围有几个课程，鸡肉和星球玩具。所有这些我们只需要使用Axure的基本组件，设置形状和背景颜色。
1，卡通鸡
看看卡通小鸡的构图：
它实际上是一些椭圆形（身体，眼睛，翅膀，腮红，阴影），矩形（脚），三角形（嘴），半圆形（cockscomb），通过设置不同的填充颜色。
为了让鸡用自己的翅膀拍打，我们将两个翅膀的椭圆形状转换为动态面板，以便在动态面板加载事件中设置旋转动画。
选择构成小鸡的所有组件后，将其转换为动态面板。为了在转动机翼时看到整只鸡，将动态面板调整到稍微宽一点，左右两侧留出一点空间。
2，明星球
星球是一个圆，然后设置其渐变填充颜色和一定的填充角度，但Axure的当前填充颜色仅支持线性填充，没有办法像PS那样制作圆形填充效果。 （当然，我们可以使用球形图像）
设置球的阴影效果：
在y轴方向上仅存在偏移，即，从上方照射模拟光。
3.星球背后的白球
设置为白色背景，透明度为68.
4.周边环境
最后，我们将使用鸡，操场和星球作为一个整体。选择后，右键单击并将其转换为动态面板，然后使用绿色渐变填充椭圆并添加矩形以生成绿色树。选择小树Ctrl + D复制两个小树并调整大小。
这里的环境已经准备就绪，完整的场景如下：
事件处理
以下是事件处理过程的说明，并在三个位置添加事件处理：
外部动态面板加载事件
在活动中点击星球
鸡翅的动态面板加载事件
1.外部动态面板加载事件：自动缩放白球
在比赛开始时，星球后面的白球消失并消失，然后重复。
事件发生在外部动态面板的加载事件中：
将白球大小设置为200 * 200，采用线性动画，持续时间为2秒，从中心放大，实现放大效果
将白球的透明度设置为0，具有线性动画效果，持续时间为2秒，以达到消失效果
等待2秒，注意时间与上述两个动画的持续时间相同
将白球的大小设置为原始大小为94 * 94，无需设置动画效果，目的是恢复球的大小。
将透明度设置为100，这意味着恢复透明度。
触发动态面板的加载时间事件以实现循环处理
2.点击事件的星球：处理发球后自动对打
这是游戏事件的核心过程。
该事件分为发球后的回归过程和小鸡接球。
服务过程：
首先隐藏白色自动放大球
将球设置为最小20 * 20
设置随机x位置，这里是数学随机函数，生成随机位置，随机大小为0~（min_ball/2）+ Math.random（）* 390，这实际上是一个简单的数学公式
将球移动到目标位置
将鸡移动到目标位置。这里应该注意。由于球的大小和球的大小不一致，鸡的位置应略微计算[[random_x-chicken_r + min_ball_r]]，这是随机位置减去围绕小鸡大小的半径，加上球的半径至少
为了模拟更逼真，球在运动过程中以350度的特定角度旋转，具有动画效果
等待时间：
等待时间是2000毫秒，这与在发球期间球移动时动画所需的时间相同。
发送到虚线位置的小球的动画持续时间与鸡移动到球的位置的动画持续时间相同，因此它可以接收球。
退货流程：
返回球的过程基本上与服务过程相反，将球移动到其原始位置，减小尺寸，然后将小鸡移动到其原始位置。
使用线性动画将球移动到原始位置
使用线性动画
将球大小设置为原始大小使用线性动画将小鸡移动到原始位置
旋转球
循环处理：
重新触发球的点击事件，模拟循环处理
3.鸡翅事件的动态面板加载时间：模拟鸡翅扑
选择鸡翅动态面板
添加加载时事件
沿顺时针方向旋转小翼，绕左上角旋转60度，动画持续时间为1200毫秒
等待100毫秒
逆时针旋转相同的角度以匹配相同持续时间的动画
重新触发动态面板的加载时间以完成循环扇形
总结
迷你游戏的整个过程已经解释过，我希望每个人都能从乐趣中学到一些Axure的技能。
案例下载：
链接:https://pan.baidu.com/s/1skGUXYl密码: fk5q
