周边系统

本教程的周边系统的学习包括:语言切换、声音开关、图鉴系统、转盘抽奖系统、商城系统、

点击下载工程示例

可以参考视频学习,也可以下拉查看图文教程

语言切换

语言切换效果的原理是:把不同的语言按照顺序存在数组的不同行里,然后用变量控制切换,找到某行对应顺序的文字内容显示,如果使用的是对话框,则需要添加多个对话框对象,每个对话框代表一种语言,在对话编辑里填入相应内容,然后用变量控制对话框显隐,并通过对话序号跳转当前对话对应的顺序。

接下来分别演示文本和对话框的语言切换

文本语言切换

首先舞台上放好文本和按钮。

文本显示“感谢使用唤境引擎”,双击舞台上文本即可编辑内容。


然后添加数组,用来存放中英两种语言。

数组的属性设置一下,有几种语言就设置几个宽度,有几句话,就设置几个高度,因为演示一句话的中英文两种切换,所以宽度2,高度1.

那在场景开始的时候,将文本内容的中英文存到数组里。

条件是系统的场景开始时

动作是数组的依据XY设置值

第一行存中文,X代表行,0是第一行。

第二行存英文

然后设置点击按钮,切换语言。因为需要个变量判断当前是什么语言,所以先添加全局变量

改名语言,双击可以看到设置

把变量值0当作中文,1为英文。现在添加事件,点击中文按钮,设置变量为0

条件是按钮被点击时

动作是系统的设置值

然后根据语言变量,将文本设置为对应的语言。变量为1,语言是中文,数组里的第1行第一列。
条件是系统的比较变量

动作是文本的设置文本

文本内容是数组第一行第一列,用表达式.at()


现在完成中文的显示

英文也是一样,点击英文按钮,设置变量为1,

变量为1时,设置文本为数组的第2行第1列。

整体事件

效果预览

对话框语言切换
中英文两种语言切换,所以需要两个对话框分别存放中英文。

舞台上摆放位置一样

并把两个对话框的可见属性取消勾选。

然后分别编辑对话框内容


然后设置点击按钮,切换语言。因为需要个变量判断当前是什么语言,所以先添加全局变量

改名语言,双击可以看到设置

还需要添加一个变量,判断当前说到哪句话,
取名序号,用来定位显示对话的序号。

添加事件,变量为0时,也就是中文显示的时候,把序号变量的值设为中文对话的当前序号



否则变量为1时,也就是英文时,把序号变量设为英文对话的当前序号


整体事件

然后添加事件,制作按钮点击切换效果:点击中文按钮,显示中文对话框,隐藏英文


还需要设置语言变量为0 ,如果直接写动作,因为事件的先后执行顺序,会导致英文切换为中文的时候,序号变量没有赋值。所以我们再加个动作组,把设置变量为0的事件封装

添加动作组

然后添加事件,使用动作组,

动作是语言变量为0,同时中文对话框跳转到当前序号





最后在按钮中文按钮的事件里,添加个动作,使用动作组

切换中文的事件全部写好

英文按钮设置事件类似,隐藏中文对话框,显示英文对话框,使用动作组,修改语言变量为1. 英文对话框跳转到当前序号。

全部事件完成

效果预览

声音开关

首先把音乐导入


添加声音组件

然后添加精灵图当作控制声音开关的按钮

将代表声音开关的两张图上传,注意是同一个精灵的两帧,现在第一帧表示开,第二帧表示关

添加全局变量,控制声音开关图的切换。初始值为0,表示当前开关图是第一帧,也就是表示声音开的状态。

然后舞台上放好开关图,开始写事件,首先设置场景开始,音乐开始。

条件是系统的场景开始时

动作是声音的播放

进行相应的播放设置,注意,音量为0 表示正常的分贝,负数是音量分贝减少。

还需要加个动作,让开关图片停止播放,不然两张图会一直播放。

整条事件

然后设置图片被点击时,控制音量的播放和停止。

条件可以用鼠标的点击对象(电脑游戏可以使用这个鼠标的条件)

或者触屏的所类型点击判断,(手游必须使用触屏的这个条件)

这里用触屏演示

然后再添加一条子事件,

根据变量值判断现在声音是什么状态,用系统的比较变量,

变量为0 ,表示现在声音是开的,动作应该停止音乐

标签和播放的标签填写一致,用英文双引号引起来

同时把变量改为1,系统的设置值动作

还需要把开关图片修改为关闭状态的第二帧,

帧编号是从0开始的哦,第二帧的编号就是1

这样就完成了控制声音关的效果,打开声音的事件类似。同样是子事件,注意层级顺序。并且多个否则的条件。变量为1,声音播放,动画帧为0.同时把变量改为0

这样就完成了声音开关的效果。整体事件如下

预览

音量调节

通过滑动条的值,改变声音的音量值,进而实现音量调节

场景里导入音乐,并且添加声音组件和滑动条。

然后添加时间,场景开始时播放音乐。

再添加一条事件,让音量的大小与滑动条的值关联。

条件是系统的每帧执行

动作是声音的设置音量,

标签和播放的标签填写一致,分贝数和滑动条的数值相关。因为滑动条是0到100为增加,然而分贝数是负数到0为增加,所以分贝数,应该为 滑动值-100的负数,滑动条的值用表达式 .progress

因为音量为-30左右就听不到了,所以最好再*0.5,设的小点。这个值可以自己尝试设置,找到比较合适的。

全部事件预览

注意:最好把滑动条的默认值改为100,避免场景刚开始时,听不见声音。

这样就实现了音量大小控制。

转盘抽奖系统

抽奖转盘:是通过转盘背景和转盘上的奖品绑定,实现同时旋转的效果。

转盘的旋转:是通过设置一个目标角度,然后利用函数 lerp() 将转盘自身角度不断逼近目标角度,这样会有转盘逐渐减慢的视觉效果。

中奖的判定:是通过一个位于转盘上方的隐藏的小图,选中离它近的奖品为中奖奖品。这样可以避免,指针区域过大,无法准确判断奖品。

现在从这三个方面制作抽奖系统~

抽奖转盘
首先把素材都导入:转盘和奖品

舞台上调整好大小和位置

然后把所有奖品放到一个同类组里,这样就可以对所有奖品统一操作,不用一个一个奖品设置能力和事件。

给奖品同类组添加绑定能力,注意是不移动的对象身上添加绑定能力,这样绑定在移动对象身上就可以跟着动啦

添加事件,场景开始时,将奖品猫和转盘背景绑定。

动作是奖品同类组的与对象绑定

整条事件

转盘的旋转
点击按钮,转盘旋转,舞台上放好按钮。

然后添加数字类型的变量作为目标角度


再添加两个变量,一个事当前角度,一个是抽奖阶段,判断当前转盘处于什么阶段,是该旋转还是该停止。

添加事件,点击按钮,设置目标角度,并把抽奖阶段改为1。

系统的设置值动作,目标角度用个随机的角度。

表达式random(0,360)+720 会得到一个720-1080之间的随机数。也就是转盘会转两-三圈。

添加动作,系统设置值,抽奖阶段为1

当抽奖阶段为1的时候,让转盘开始旋转,
条件是系统的比较变量

添加动作,按钮禁用

再添加动作,设置变量当前角度不断靠近目标角度,表达式为 lerp(当前角度,目标角度,dt)

然后将转盘角度设为当前角度


因为表达式 lerp() 不会让转盘角度完全等于目标角度,所以要判断当角度非常接近的时候,把转盘角度设为目标角度。

添加子事件

子事件的条件是转盘角度在角度内



动作是转盘的设置角度

把当前角度设为0 ,抽奖阶段改回0 ,这样就不会继续旋转了。

转盘旋转的全部事件

预览

中奖的判定
把指针图导入

舞台上摆好,可以看出指针是比较大的,所以它指定的区域如果是在交界处,比较难判定中奖奖品是哪个。

所以再添加一个精灵

调小它的尺寸,不透明度设为0,

舞台上摆放好,让它位于指针的正上方。

然后添加个文本,当中奖的时候,文本显示恭喜中奖。

可以修改一下文本颜色和字号

舞台上摆好位置,把他摆在场景外,当中奖时,让文本移动进来。

现在开始写事件,判定中奖。

转盘停止旋转的时候,也就是他的角度为目标角度的时候。

添加子事件

选出离透明精灵最近的猫咪,作为中奖的奖品

条件是奖品同类组的选中最近/远实例

坐标就是那个用来判定中奖的透明精灵坐标

动作就是中奖后的表现效果,这里我们希望是从上方滑下来一行“恭喜中奖”的文字。所以动作先设置文本为“恭喜中奖”

然后用文本的移动到位置

坐标和速度根据自己的需求设置数值。

文字不可能一直显示,所以可以等待1-2秒后,把文本位置设回到场景外
系统的等待动作

文本的设置位置


把按钮改回启用状态。现在就完成了中奖的全部制作,整体事件如下

效果预览

图鉴/商城系统

原理:通过变量控制翻页后的商品图显示。通过每张商品图身上的实例变量,与商品展示页的图框实例变量关联,从而实现,对应的框显示对应的商品。