FGUI+Laya Air 游戏架构之stage分层架构

先提前说明，此架构是幼麟棋牌框架的作者@麒麟子大神教给笔者的，麒麟子大佬给了一套基于FGUI+Laya Air写的棋牌大厅界面子工程学习，奎斯花了一段时间从代码中学习并初步总结了出了分层游戏架构的基本模式，因为只是初步学习,还有一些其他模块奎斯暂时没有加(比如网络模块)，下面奎斯分享出这套游戏架构(这里只介绍理论总结，不贴具体代码)。

一、分层架构基本模式：

先UI分层架构图：

在分层架构中，我们将UI拆分为game、hub、popup、notice、alert、mask六大层次：

GAME:主要用于放置玩家可见的游戏场景，比如游戏预加载场景、大厅场景等等

HUB:一般就是漂浮在场景之上的按钮玩家信息栏之类的

POPUP:游戏弹出层比如游戏结束界面等

NOTICE:一般就是锁屏提示比如网络重连时候提示正在链接服务器。或者加载界面的时候提示一个loading

ALERT:是属于一种特殊的弹出层，弹出确认提示框之类的

MASK:遮罩一般与弹出层配合sh，比如出现一个提示框的时候，除了提示框部分其他部分就要变暗，有一种淡入淡出的效果。

而上面每一层层次在zOrder上都是逐渐由低到高，一般我们会把每层用枚举类型标识。

二、分层管理模式：

在分层架构中，采用一种Master-Scene-UI的管理方式。除了类似Alert这种比较通用的都放入Basic包体，一般我们会把每一个UI(包括GAME层)在FGUI中都做成一个单独的包体

每个UI都会有一个Master组件、一个Scene组件、一个Page组件：

这三种组件都继承自一个公共的父类master、scene、page，并分别由master_manager、scene_manager、ui_manager来管理，而这三类组件的关系是:

1.master_manager负责管理scene_manager

2.scene_manager管理ui_manager

3.ui_manager管理每层分层的具体显示与删除

所有配置信息写入单独的类中在初始化时统一传入master_manager管理器，这里奎斯直接贴出大厅子工程中的全局图：

在UI显示出来后，具体的游戏业务逻辑我们都写在每个UI的page组件中。

三、实例简单演示：

奎斯在初步学习完之后，将分层架构用一个简单的五子棋小游戏实现了遍，这里简单演示下：

1.可以看到我们将包体分别各种UI(包括游戏场景和悬浮于场景上的)和公共组件两部分，下面显示是大厅场景和游戏场景的UI部分，我们通常会挂在GAME层。

2.Alert上面说过是一种特殊的弹出层，他与POPUP层不同在他是一种可以复用的提示框很多地方多次用到，而POPUP层是每一种UI都完全不同。

3.游戏结束奎斯是做成了一个单独的提示框UI放到POPUP层，在调用完Alert的UI后再调用结束UI,并在调用的时候使用遮罩，内容在代码部分再改变，比如"游戏结束，xx胜利了！"

读者可以根据这种基本分层再按需求划分UI，这是奎斯目前的分层架构的初步总结。

欢迎阅览奎斯文章。

这个是我用stage分层框架写的极简联机五子棋全栈小游戏，欢迎大家试玩: