3.3.2 游戏测试:手术刀

想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 
本节视频教程请点击此处。

如下图,点击“素材库”添加一个文字素材、医生漫画图像素材、“开始游戏”按钮素材,并修改“舞台”颜色为黄色

3.3-26_.png


图3.3-26

点击新建第2页面,点击“素材库”添加一个手术刀图像元素,点击“线条”工具在“舞台”上绘制一个线条,并修改其线条类型为“点线”

3.3-27_.png


图3.3-27
继续补充绘制线条、添加“杀人”“完美”“及格”文本框如下图

3.3-28_.png


图3.3-28
再添加一个文本框,命名为“分数”,输入内容为“0”,并调整大小、字体颜色等属性

3.3-29_.png


图3.3-29
新建“图层1”,将“图层0”上的手术刀剪切粘贴进“图层1”上,改变手术刀“Z轴旋转角度”为“-90”,调整其大小位置如下图

3.3-30_.png


图3.3-30
新建“图层2”,在该图层添加一个手指点击的图片素材,同时添加一个文本框,输入文字内容为“按住屏幕,开始手术”,调整字体大小、颜色等属性如下图

3.3-31_.png


图3.3-31
修改“图层0”名称为“底部”,“图层1”名称为“手术刀”,“图层2”名称为“提示”

3.3-32_.png


图3.3-32
选中“手术刀”以及“底部”两个图层的第30帧位置,右键→“插入帧”

3.3-33_.png


图3.3-33
鼠标按住“手术刀”图层的第1帧关键帧将其拖动至第2帧

3.3-34_.png


图3.3-34
选中“手术刀”图层关键帧之后的任意一帧,右键→“插入关键帧动画”

3.3-35_.png


图3.3-35
点击选中“手术刀”图层的最后一帧,将“舞台”上的手术刀移至最上“杀人”位置

3.3-36_.png


图3.3-36
新建“图层3”,在该图层第2帧右键→“插入关键帧”

3.3-37_.png


图3.3-37
将原来的虚线复制一份,粘贴进“图层3”第2帧上,修改线条颜色为红色,线条类型为“实线”

3.3-38_.png


图3.3-38
点击“图层3”关键帧之后的任意一帧,右键→“插入曲线变形动画”

3.3-39_.png


图3.3-39
选择“图层3”第2帧,使用“节点”工具将曲线的最上一个节点向下移至底端

3.3-40_.png


图3.3-40
点击“预览”观察效果,发现红线会随着手术刀向上的动画也向上延伸


3.3-41_.png



图3.3-41
如下图,当手术刀移至“完美”阶段时,时间轴运动到27帧

3.3-42_.png


图3.3-42
鼠标选中“手术刀”和“图层3”的第27帧,右键→“插入关键帧”

3.3-43_.png


图3.3-43
同理,观察到当手术刀移至“及格”阶段时,时间轴运动到19帧

3.3-44_.png


图3.3-44
鼠标选中“手术刀”和“图层3”的第19帧,右键→“插入关键帧”

3.3-45_.png


图3.3-45
为手术刀素材命名为“刀子”

3.3-46_.png


图3.3-46
观察,当手术刀在最底端位置时,其“上”值为“467.6”

3.3-47_.png


图3.3-47
观察,当手术刀在“及格”位置时,其“上”值为“184.9”

3.3-48_.png


图3.3-48
观察,当手术刀在“完美”位置时,其“上”值为“51.9”

3.3-49_.png


图3.3-49
观察,当手术刀在“杀人”位置时,其“上”值为“2”

3.3-50_.png


图3.3-50
如下图,选中“分数”文本框,在其“属性”面板下点击文字内容右边的“关联”按钮,在下拉的关联属性菜单栏下设置
关联对象:“刀子”
关联属性:“上”
关联方式:“自动关联”
当主控量=“467.6”(手术刀在最底端位置)时被控量=“0” 
当主控量=“184.9”(手术刀在“及格”位置)时被控量=“60” 
当主控量=“51.9”(手术刀在“完美”位置)时被控量=“100” 
当主控量=“2”(手术刀在“杀人”位置)时被控量=“0” 

3.3-51_.png


图3.3-51

3.3-52_.png


图3.3-52

为手指点击图像添加一个出现即暂停行为:如下图,点击手指右边的“添加/编辑行为”按钮,在弹出的“编辑行为”对话框中选择“动画播放控制”→“暂停”→触发条件:“出现”

3.3-53_.png


图3.3-53
新建图层“控制层”,并将“图层3”重命名为“红线”

3.3-54_.png


图3.3-54

在“控制层”图层添加一个矩形,调整大小使其符合“舞台”大小,并调整其透明度为“0”

3.3-55_.png


图3.3-55
点击矩形右下角的“添加/编辑行为”按钮,为其添加两个编辑行为:
“动画播放控制”→“播放”→触发条件:“手指按下”
“动画播放控制”→“下一页”→触发条件:“手指抬起”

3.3-56_.png


图3.3-56
新建第3页面,暂时添加一张图片素材

3.3-57_.png


图3.3-57
点击“预览”观察动画效果

3.3-58_.png


图3.3-58
制作第3页:如下图,在第3页添加一个文本框,输入文字内容为“0”,调整文字大小、颜色、位置等。点击文字内容右边的“关联”按钮,设置关联属性
关联对象:“分数”
关联属性:“文本取值”
关联方式:“公式关联”
被控量=“关联属性”
即设置了该文本的取值等于第2页“分数”文本取值

3.3-59_.png


图3.3-59
点击“舞台”上的图片元素,右键→“转换为元件”

3.3-60_.png


图3.3-60
双击该元件进入“元件1”编辑页面。在“元件1”编辑页面中,点击时间轴上第4帧,右键→“插入帧”

3.3-61_.png


图3.3-61
点击图片元件的“添加/编辑行为”按钮,在弹出的“编辑行为”对话框中选择“动画播放控制”→“暂停”→触发条件:“出现”

3.3-62_.png


图3.3-62
同时选中时间轴上的2、3、4帧,右键→“插入关键帧”

3.3-63_.png


图3.3-63
在第2帧上点击“属性”面板下的“编辑”按钮,在弹出的“媒体库”中选择所需的图片素材,点击“添加”,替换原有的图片

3.3-64_.png


图3.3-64


3.3-65_.png


图3.3-65
同理,替换第3、4帧上的图片


3.3-66_.png


图3.3-66

3.3-67_.png


图3.3-67
点击回到“舞台”,将元件命名为“评判”

3.3-68_.png


图3.3-68
点击到第2页面,点击“控制层”上矩形的“添加/编辑行为”按钮

3.3-69_.png


图3.3-69
在“编辑行为”对话框中点击添加四个“跳转到帧并停止”行为:“动画播放控制”→“跳转到帧并停止”

3.3-70_.png


图3.3-70
修改“触发条件”为“手指抬起”,依次填写描述为“100分”“80”“60”“死”

3.3-71_.png


图3.3-71
点击“100分”行为的“编辑”按钮

3.3-72_.png


图3.3-72
设置“参数”
帧号:“3”
作用对象:“评判”
执行条件:“检查元素状态”
元素名称:“分数”
考察属性:“文本取值”
逻辑条件:“小于等于”
参考值:“100”,点击“确认”

3.3-73_.png


图3.3-73
同理点击“80”行为的“编辑”按钮

3.3-74_.png


图3.3-74
设置“参数”
帧号:“2”
作用对象:“评判”
执行条件:“检查元素状态”
元素名称:“分数”
考察属性:“文本取值”
逻辑条件:“小于等于”
参考值:“80”,点击“确认”

3.3-75_.png


图3.3-75
同理点击“60”行为的“编辑”按钮

3.3-76_.png


图3.3-76
设置“参数”
帧号:“1”
作用对象:“评判”
执行条件:“检查元素状态”
元素名称:“分数”
考察属性:“文本取值”
逻辑条件:“小于等于”
参考值:“60”,点击“确认”

3.3-77_.png


图3.3-77
同理点击“死”行为的“编辑”按钮

3.3-78_.png


图3.3-78
设置“参数”
帧号:“4”
作用对象:“评判”
执行条件:“检查元素状态”
元素名称:“刀子”
考察属性:“上”
逻辑条件:“小于等于”
参考值:“51”(手术刀在“完美”左右位置),点击“确认”

3.3-79_.png


图3.3-79
注意:Mugeda的行为逻辑是从上往下的顺序执行的,我们首先会执行“播放”的行为,然后是“跳转下一页”的行为,其次是100分的“跳转到帧并停止”行为,同理依次执行其他行为。若中间有一个行为条件不满足,则不会继续执行下一行为。

3.3-80_.png


图3.3-80
点击“预览”观察动画效果

3.3-81_.png


图3.3-81
制作“再来一次”按钮:在第3页面添加按钮素材,添加文本框,输入文本框内容为“再来一次”

3.3-82_.png


图3.3-82
点击“再来一次”文本框的“添加/编辑行为”按钮,在弹出的“编辑行为”对话框中选择“动画播放控制”→“跳转到页”→触发条件:“点击”,点击“编辑”按钮

3.3-83_.png


图3.3-83
在“参数”对话框中填写帧号为“1”,点击“确认”

3.3-84_.png


图3.3-84
回到“编辑行为”对话框后再加一个行为:“属性控制”→“改变元素属性”→触发条件:“点击”,点击“编辑”按钮

3.3-85_.png


图3.3-85
设置“参数”
元素名称:“分数”
元素属性:“文本取值”
赋值方式:“用设置的值替换现有值”
取值:“0”
点击“确认”
即设置重来一次时将原先的分数值清零行为

3.3-86_.png


图3.3-86
点击到第1页面,点击“开始游戏”按钮的“添加/编辑行为”按钮,在“编辑行为”对话框中设置“跳转下一页”“禁止翻页”两个编辑行为
“跳转下一页”行为:“动画播放控制”→“下一页”→触发条件:“点击”
“禁止翻页”行为:“动画播放控制”→“禁止翻页”→触发条件:“出现”

3.3-87_.png


图3.3-87

3.3-88_.png


图3.3-88
点击“预览”动画效果

3.3-89_.png

 

0 个评论

要回复文章请先登录注册