3.3.2 游戏测试:手术刀
想要了解更多Mugeda功能?>>>猛戳我,学习更多教程
本节视频教程请点击此处。
如下图,点击“素材库”添加一个文字素材、医生漫画图像素材、“开始游戏”按钮素材,并修改“舞台”颜色为黄色
图3.3-26
点击新建第2页面,点击“素材库”添加一个手术刀图像元素,点击“线条”工具在“舞台”上绘制一个线条,并修改其线条类型为“点线”
图3.3-27
继续补充绘制线条、添加“杀人”“完美”“及格”文本框如下图
图3.3-28
再添加一个文本框,命名为“分数”,输入内容为“0”,并调整大小、字体颜色等属性
图3.3-29
新建“图层1”,将“图层0”上的手术刀剪切粘贴进“图层1”上,改变手术刀“Z轴旋转角度”为“-90”,调整其大小位置如下图
图3.3-30
新建“图层2”,在该图层添加一个手指点击的图片素材,同时添加一个文本框,输入文字内容为“按住屏幕,开始手术”,调整字体大小、颜色等属性如下图
图3.3-31
修改“图层0”名称为“底部”,“图层1”名称为“手术刀”,“图层2”名称为“提示”
图3.3-32
选中“手术刀”以及“底部”两个图层的第30帧位置,右键→“插入帧”
图3.3-33
鼠标按住“手术刀”图层的第1帧关键帧将其拖动至第2帧
图3.3-34
选中“手术刀”图层关键帧之后的任意一帧,右键→“插入关键帧动画”
图3.3-35
点击选中“手术刀”图层的最后一帧,将“舞台”上的手术刀移至最上“杀人”位置
图3.3-36
新建“图层3”,在该图层第2帧右键→“插入关键帧”
图3.3-37
将原来的虚线复制一份,粘贴进“图层3”第2帧上,修改线条颜色为红色,线条类型为“实线”
图3.3-38
点击“图层3”关键帧之后的任意一帧,右键→“插入曲线变形动画”
图3.3-39
选择“图层3”第2帧,使用“节点”工具将曲线的最上一个节点向下移至底端
图3.3-40
点击“预览”观察效果,发现红线会随着手术刀向上的动画也向上延伸
图3.3-41
如下图,当手术刀移至“完美”阶段时,时间轴运动到27帧
图3.3-42
鼠标选中“手术刀”和“图层3”的第27帧,右键→“插入关键帧”
图3.3-43
同理,观察到当手术刀移至“及格”阶段时,时间轴运动到19帧
图3.3-44
鼠标选中“手术刀”和“图层3”的第19帧,右键→“插入关键帧”
图3.3-45
为手术刀素材命名为“刀子”
图3.3-46
观察,当手术刀在最底端位置时,其“上”值为“467.6”
图3.3-47
观察,当手术刀在“及格”位置时,其“上”值为“184.9”
图3.3-48
观察,当手术刀在“完美”位置时,其“上”值为“51.9”
图3.3-49
观察,当手术刀在“杀人”位置时,其“上”值为“2”
图3.3-50
如下图,选中“分数”文本框,在其“属性”面板下点击文字内容右边的“关联”按钮,在下拉的关联属性菜单栏下设置
关联对象:“刀子”
关联属性:“上”
关联方式:“自动关联”
当主控量=“467.6”(手术刀在最底端位置)时被控量=“0”
当主控量=“184.9”(手术刀在“及格”位置)时被控量=“60”
当主控量=“51.9”(手术刀在“完美”位置)时被控量=“100”
当主控量=“2”(手术刀在“杀人”位置)时被控量=“0”
图3.3-51
图3.3-52
为手指点击图像添加一个出现即暂停行为:如下图,点击手指右边的“添加/编辑行为”按钮,在弹出的“编辑行为”对话框中选择“动画播放控制”→“暂停”→触发条件:“出现”
图3.3-53
新建图层“控制层”,并将“图层3”重命名为“红线”
图3.3-54
在“控制层”图层添加一个矩形,调整大小使其符合“舞台”大小,并调整其透明度为“0”
图3.3-55
点击矩形右下角的“添加/编辑行为”按钮,为其添加两个编辑行为:
“动画播放控制”→“播放”→触发条件:“手指按下”
“动画播放控制”→“下一页”→触发条件:“手指抬起”
图3.3-56
新建第3页面,暂时添加一张图片素材
图3.3-57
点击“预览”观察动画效果
图3.3-58
制作第3页:如下图,在第3页添加一个文本框,输入文字内容为“0”,调整文字大小、颜色、位置等。点击文字内容右边的“关联”按钮,设置关联属性
关联对象:“分数”
关联属性:“文本取值”
关联方式:“公式关联”
被控量=“关联属性”
即设置了该文本的取值等于第2页“分数”文本取值
图3.3-59
点击“舞台”上的图片元素,右键→“转换为元件”
图3.3-60
双击该元件进入“元件1”编辑页面。在“元件1”编辑页面中,点击时间轴上第4帧,右键→“插入帧”
图3.3-61
点击图片元件的“添加/编辑行为”按钮,在弹出的“编辑行为”对话框中选择“动画播放控制”→“暂停”→触发条件:“出现”
图3.3-62
同时选中时间轴上的2、3、4帧,右键→“插入关键帧”
图3.3-63
在第2帧上点击“属性”面板下的“编辑”按钮,在弹出的“媒体库”中选择所需的图片素材,点击“添加”,替换原有的图片
图3.3-64
图3.3-65
同理,替换第3、4帧上的图片
图3.3-66
图3.3-67
点击回到“舞台”,将元件命名为“评判”
图3.3-68
点击到第2页面,点击“控制层”上矩形的“添加/编辑行为”按钮
图3.3-69
在“编辑行为”对话框中点击添加四个“跳转到帧并停止”行为:“动画播放控制”→“跳转到帧并停止”
图3.3-70
修改“触发条件”为“手指抬起”,依次填写描述为“100分”“80”“60”“死”
图3.3-71
点击“100分”行为的“编辑”按钮
图3.3-72
设置“参数”
帧号:“3”
作用对象:“评判”
执行条件:“检查元素状态”
元素名称:“分数”
考察属性:“文本取值”
逻辑条件:“小于等于”
参考值:“100”,点击“确认”
图3.3-73
同理点击“80”行为的“编辑”按钮
图3.3-74
设置“参数”
帧号:“2”
作用对象:“评判”
执行条件:“检查元素状态”
元素名称:“分数”
考察属性:“文本取值”
逻辑条件:“小于等于”
参考值:“80”,点击“确认”
图3.3-75
同理点击“60”行为的“编辑”按钮
图3.3-76
设置“参数”
帧号:“1”
作用对象:“评判”
执行条件:“检查元素状态”
元素名称:“分数”
考察属性:“文本取值”
逻辑条件:“小于等于”
参考值:“60”,点击“确认”
图3.3-77
同理点击“死”行为的“编辑”按钮
图3.3-78
设置“参数”
帧号:“4”
作用对象:“评判”
执行条件:“检查元素状态”
元素名称:“刀子”
考察属性:“上”
逻辑条件:“小于等于”
参考值:“51”(手术刀在“完美”左右位置),点击“确认”
图3.3-79
注意:Mugeda的行为逻辑是从上往下的顺序执行的,我们首先会执行“播放”的行为,然后是“跳转下一页”的行为,其次是100分的“跳转到帧并停止”行为,同理依次执行其他行为。若中间有一个行为条件不满足,则不会继续执行下一行为。
图3.3-80
点击“预览”观察动画效果
图3.3-81
制作“再来一次”按钮:在第3页面添加按钮素材,添加文本框,输入文本框内容为“再来一次”
图3.3-82
点击“再来一次”文本框的“添加/编辑行为”按钮,在弹出的“编辑行为”对话框中选择“动画播放控制”→“跳转到页”→触发条件:“点击”,点击“编辑”按钮
图3.3-83
在“参数”对话框中填写帧号为“1”,点击“确认”
图3.3-84
回到“编辑行为”对话框后再加一个行为:“属性控制”→“改变元素属性”→触发条件:“点击”,点击“编辑”按钮
图3.3-85
设置“参数”
元素名称:“分数”
元素属性:“文本取值”
赋值方式:“用设置的值替换现有值”
取值:“0”
点击“确认”
即设置重来一次时将原先的分数值清零行为
图3.3-86
点击到第1页面,点击“开始游戏”按钮的“添加/编辑行为”按钮,在“编辑行为”对话框中设置“跳转下一页”“禁止翻页”两个编辑行为
“跳转下一页”行为:“动画播放控制”→“下一页”→触发条件:“点击”
“禁止翻页”行为:“动画播放控制”→“禁止翻页”→触发条件:“出现”
图3.3-87
图3.3-88
点击“预览”动画效果
本节视频教程请点击此处。
如下图,点击“素材库”添加一个文字素材、医生漫画图像素材、“开始游戏”按钮素材,并修改“舞台”颜色为黄色
图3.3-26
点击新建第2页面,点击“素材库”添加一个手术刀图像元素,点击“线条”工具在“舞台”上绘制一个线条,并修改其线条类型为“点线”
图3.3-27
继续补充绘制线条、添加“杀人”“完美”“及格”文本框如下图
图3.3-28
再添加一个文本框,命名为“分数”,输入内容为“0”,并调整大小、字体颜色等属性
图3.3-29
新建“图层1”,将“图层0”上的手术刀剪切粘贴进“图层1”上,改变手术刀“Z轴旋转角度”为“-90”,调整其大小位置如下图
图3.3-30
新建“图层2”,在该图层添加一个手指点击的图片素材,同时添加一个文本框,输入文字内容为“按住屏幕,开始手术”,调整字体大小、颜色等属性如下图
图3.3-31
修改“图层0”名称为“底部”,“图层1”名称为“手术刀”,“图层2”名称为“提示”
图3.3-32
选中“手术刀”以及“底部”两个图层的第30帧位置,右键→“插入帧”
图3.3-33
鼠标按住“手术刀”图层的第1帧关键帧将其拖动至第2帧
图3.3-34
选中“手术刀”图层关键帧之后的任意一帧,右键→“插入关键帧动画”
图3.3-35
点击选中“手术刀”图层的最后一帧,将“舞台”上的手术刀移至最上“杀人”位置
图3.3-36
新建“图层3”,在该图层第2帧右键→“插入关键帧”
图3.3-37
将原来的虚线复制一份,粘贴进“图层3”第2帧上,修改线条颜色为红色,线条类型为“实线”
图3.3-38
点击“图层3”关键帧之后的任意一帧,右键→“插入曲线变形动画”
图3.3-39
选择“图层3”第2帧,使用“节点”工具将曲线的最上一个节点向下移至底端
图3.3-40
点击“预览”观察效果,发现红线会随着手术刀向上的动画也向上延伸
图3.3-41
如下图,当手术刀移至“完美”阶段时,时间轴运动到27帧
图3.3-42
鼠标选中“手术刀”和“图层3”的第27帧,右键→“插入关键帧”
图3.3-43
同理,观察到当手术刀移至“及格”阶段时,时间轴运动到19帧
图3.3-44
鼠标选中“手术刀”和“图层3”的第19帧,右键→“插入关键帧”
图3.3-45
为手术刀素材命名为“刀子”
图3.3-46
观察,当手术刀在最底端位置时,其“上”值为“467.6”
图3.3-47
观察,当手术刀在“及格”位置时,其“上”值为“184.9”
图3.3-48
观察,当手术刀在“完美”位置时,其“上”值为“51.9”
图3.3-49
观察,当手术刀在“杀人”位置时,其“上”值为“2”
图3.3-50
如下图,选中“分数”文本框,在其“属性”面板下点击文字内容右边的“关联”按钮,在下拉的关联属性菜单栏下设置
关联对象:“刀子”
关联属性:“上”
关联方式:“自动关联”
当主控量=“467.6”(手术刀在最底端位置)时被控量=“0”
当主控量=“184.9”(手术刀在“及格”位置)时被控量=“60”
当主控量=“51.9”(手术刀在“完美”位置)时被控量=“100”
当主控量=“2”(手术刀在“杀人”位置)时被控量=“0”
图3.3-51
图3.3-52
为手指点击图像添加一个出现即暂停行为:如下图,点击手指右边的“添加/编辑行为”按钮,在弹出的“编辑行为”对话框中选择“动画播放控制”→“暂停”→触发条件:“出现”
图3.3-53
新建图层“控制层”,并将“图层3”重命名为“红线”
图3.3-54
在“控制层”图层添加一个矩形,调整大小使其符合“舞台”大小,并调整其透明度为“0”
图3.3-55
点击矩形右下角的“添加/编辑行为”按钮,为其添加两个编辑行为:
“动画播放控制”→“播放”→触发条件:“手指按下”
“动画播放控制”→“下一页”→触发条件:“手指抬起”
图3.3-56
新建第3页面,暂时添加一张图片素材
图3.3-57
点击“预览”观察动画效果
图3.3-58
制作第3页:如下图,在第3页添加一个文本框,输入文字内容为“0”,调整文字大小、颜色、位置等。点击文字内容右边的“关联”按钮,设置关联属性
关联对象:“分数”
关联属性:“文本取值”
关联方式:“公式关联”
被控量=“关联属性”
即设置了该文本的取值等于第2页“分数”文本取值
图3.3-59
点击“舞台”上的图片元素,右键→“转换为元件”
图3.3-60
双击该元件进入“元件1”编辑页面。在“元件1”编辑页面中,点击时间轴上第4帧,右键→“插入帧”
图3.3-61
点击图片元件的“添加/编辑行为”按钮,在弹出的“编辑行为”对话框中选择“动画播放控制”→“暂停”→触发条件:“出现”
图3.3-62
同时选中时间轴上的2、3、4帧,右键→“插入关键帧”
图3.3-63
在第2帧上点击“属性”面板下的“编辑”按钮,在弹出的“媒体库”中选择所需的图片素材,点击“添加”,替换原有的图片
图3.3-64
图3.3-65
同理,替换第3、4帧上的图片
图3.3-66
图3.3-67
点击回到“舞台”,将元件命名为“评判”
图3.3-68
点击到第2页面,点击“控制层”上矩形的“添加/编辑行为”按钮
图3.3-69
在“编辑行为”对话框中点击添加四个“跳转到帧并停止”行为:“动画播放控制”→“跳转到帧并停止”
图3.3-70
修改“触发条件”为“手指抬起”,依次填写描述为“100分”“80”“60”“死”
图3.3-71
点击“100分”行为的“编辑”按钮
图3.3-72
设置“参数”
帧号:“3”
作用对象:“评判”
执行条件:“检查元素状态”
元素名称:“分数”
考察属性:“文本取值”
逻辑条件:“小于等于”
参考值:“100”,点击“确认”
图3.3-73
同理点击“80”行为的“编辑”按钮
图3.3-74
设置“参数”
帧号:“2”
作用对象:“评判”
执行条件:“检查元素状态”
元素名称:“分数”
考察属性:“文本取值”
逻辑条件:“小于等于”
参考值:“80”,点击“确认”
图3.3-75
同理点击“60”行为的“编辑”按钮
图3.3-76
设置“参数”
帧号:“1”
作用对象:“评判”
执行条件:“检查元素状态”
元素名称:“分数”
考察属性:“文本取值”
逻辑条件:“小于等于”
参考值:“60”,点击“确认”
图3.3-77
同理点击“死”行为的“编辑”按钮
图3.3-78
设置“参数”
帧号:“4”
作用对象:“评判”
执行条件:“检查元素状态”
元素名称:“刀子”
考察属性:“上”
逻辑条件:“小于等于”
参考值:“51”(手术刀在“完美”左右位置),点击“确认”
图3.3-79
注意:Mugeda的行为逻辑是从上往下的顺序执行的,我们首先会执行“播放”的行为,然后是“跳转下一页”的行为,其次是100分的“跳转到帧并停止”行为,同理依次执行其他行为。若中间有一个行为条件不满足,则不会继续执行下一行为。
图3.3-80
点击“预览”观察动画效果
图3.3-81
制作“再来一次”按钮:在第3页面添加按钮素材,添加文本框,输入文本框内容为“再来一次”
图3.3-82
点击“再来一次”文本框的“添加/编辑行为”按钮,在弹出的“编辑行为”对话框中选择“动画播放控制”→“跳转到页”→触发条件:“点击”,点击“编辑”按钮
图3.3-83
在“参数”对话框中填写帧号为“1”,点击“确认”
图3.3-84
回到“编辑行为”对话框后再加一个行为:“属性控制”→“改变元素属性”→触发条件:“点击”,点击“编辑”按钮
图3.3-85
设置“参数”
元素名称:“分数”
元素属性:“文本取值”
赋值方式:“用设置的值替换现有值”
取值:“0”
点击“确认”
即设置重来一次时将原先的分数值清零行为
图3.3-86
点击到第1页面,点击“开始游戏”按钮的“添加/编辑行为”按钮,在“编辑行为”对话框中设置“跳转下一页”“禁止翻页”两个编辑行为
“跳转下一页”行为:“动画播放控制”→“下一页”→触发条件:“点击”
“禁止翻页”行为:“动画播放控制”→“禁止翻页”→触发条件:“出现”
图3.3-87
图3.3-88
点击“预览”动画效果