使用|使用 FairyGUI 0代码实现游戏界面左右切换

制作原因:项目中需要实现主界面中五个界面左右切换,包含点击切换和滑动切换,并且点击和滑动都需要关联表现,原先项目使用ugui实现该效果,代码量大,容易出问题,不好管控,使用FGUI后不需一行代码即可相同效果
流程:
首先创建一个组件,这里我使用720*1280,组件中只需要两个list即可,下面上截图
使用|使用 FairyGUI 0代码实现游戏界面左右切换
文章图片
使用|使用 FairyGUI 0代码实现游戏界面左右切换
文章图片




内容列表部分
使用|使用 FairyGUI 0代码实现游戏界面左右切换
文章图片
使用|使用 FairyGUI 0代码实现游戏界面左右切换
文章图片
使用|使用 FairyGUI 0代码实现游戏界面左右切换
文章图片
使用|使用 FairyGUI 0代码实现游戏界面左右切换
文章图片





按钮列表部分
使用|使用 FairyGUI 0代码实现游戏界面左右切换
文章图片
使用|使用 FairyGUI 0代码实现游戏界面左右切换
文章图片
使用|使用 FairyGUI 0代码实现游戏界面左右切换
文章图片


列表中的按钮
【使用|使用 FairyGUI 0代码实现游戏界面左右切换】按钮需要是单选按钮

使用|使用 FairyGUI 0代码实现游戏界面左右切换
文章图片

按钮动效部分,两个是相反的,这里只看一个就行,其实就是实现按钮的选中状态,选中放大,否则正常大小


使用|使用 FairyGUI 0代码实现游戏界面左右切换
文章图片


按钮的控制器增加动效的播放控制,实现选中和非选中效果
使用|使用 FairyGUI 0代码实现游戏界面左右切换
文章图片



滑动条部分
使用|使用 FairyGUI 0代码实现游戏界面左右切换
文章图片


使用|使用 FairyGUI 0代码实现游戏界面左右切换
文章图片


使用|使用 FairyGUI 0代码实现游戏界面左右切换
文章图片


使用|使用 FairyGUI 0代码实现游戏界面左右切换
文章图片

以上就是全部内容,按照这种方式实现即可
在主代码中添加内容列表的滑动监听即可知道目前处于哪一页,增加对应逻辑即可
也可设置默认页,代码部分看API
如需实现按钮选中状态不同图片,在动效中实现即可,或者直接代码修改
效果


使用|使用 FairyGUI 0代码实现游戏界面左右切换
文章图片
使用|使用 FairyGUI 0代码实现游戏界面左右切换
文章图片







    推荐阅读