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

制作原因:项目中需要实现主界面中五个界面左右切换,包含点击切换和滑动切换,并且点击和滑动都需要关联表现,原先项目使用ugui实现该效果,代码量大,容易出问题,不好管控,使用FGUI后不需一行代码即可相同效果

流程:

  首先创建一个组件,这里我使用720*1280,组件中只需要两个list即可,下面上截图

  使用 FairyGUI 0代码实现游戏界面左右切换_第1张图片使用 FairyGUI 0代码实现游戏界面左右切换_第2张图片

 

 

 

  内容列表部分

  使用 FairyGUI 0代码实现游戏界面左右切换_第3张图片使用 FairyGUI 0代码实现游戏界面左右切换_第4张图片使用 FairyGUI 0代码实现游戏界面左右切换_第5张图片使用 FairyGUI 0代码实现游戏界面左右切换_第6张图片

 

 

 

 

  按钮列表部分

  使用 FairyGUI 0代码实现游戏界面左右切换_第7张图片使用 FairyGUI 0代码实现游戏界面左右切换_第8张图片使用 FairyGUI 0代码实现游戏界面左右切换_第9张图片

 

  列表中的按钮

  按钮需要是单选按钮

 

   使用 FairyGUI 0代码实现游戏界面左右切换_第10张图片

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

 

 

   使用 FairyGUI 0代码实现游戏界面左右切换_第11张图片

 

  按钮的控制器增加动效的播放控制,实现选中和非选中效果

  使用 FairyGUI 0代码实现游戏界面左右切换_第12张图片

 

 

  滑动条部分

  使用 FairyGUI 0代码实现游戏界面左右切换_第13张图片

 

使用 FairyGUI 0代码实现游戏界面左右切换_第14张图片

 

  使用 FairyGUI 0代码实现游戏界面左右切换_第15张图片

 

  使用 FairyGUI 0代码实现游戏界面左右切换_第16张图片

  以上就是全部内容,按照这种方式实现即可

  在主代码中添加内容列表的滑动监听即可知道目前处于哪一页,增加对应逻辑即可

  也可设置默认页,代码部分看API

   如需实现按钮选中状态不同图片,在动效中实现即可,或者直接代码修改

   效果

  

 

使用 FairyGUI 0代码实现游戏界面左右切换_第17张图片使用 FairyGUI 0代码实现游戏界面左右切换_第18张图片

 

 

 

 

  

 

你可能感兴趣的