Egret社区
本帖最后由 jj229937432 于 2020-4-19 21:23 编辑

框架介绍
Gardener作为一款轻型的白鹭游戏UI框架,提供丰富UI功能,满足绝大部分的游戏产品的需求。兼容EUI,适配横屏和竖屏项目,框架接口清晰简单,控制灵活,是从线上多款产品框架中总结提炼出来,而且完全开源。此框架的意义在于解放开发者,让开发者把更多的精力用在游戏的核心玩法上。当前最低 egret engine 5.0.14 测试通过。

内置龙骨动画控制器
Gardener内置一个龙骨动画控制器,支持二进制导出格式(json格式与二进制格式基本相同,扩展容易)、极速格式(已废弃),因为最新版本的dragonbones导出的二进制动画格式支持所有动画类型。此控制器特点是自动管理回收和资源缓存。

Demo展示                                                                portraid_screenshot.png

竖屏

竖屏


landspace_screenshot.png

横屏

横屏


框架层级
GardenerUI框架中,层级关系从下到上有:Scene层 -> Window层 -> Navigator层 -> Popup层 -> MessageBox层,它们相互独立,均为Main的子元素。所有层级容器都可以获取,并且可以直接修改他们的层次关系和布局属性。

各级容器
gardener.SceneContainer ——scene场景容器,最底层,一般用来展示模块区域场景
gardener.WindowContainer ——window窗口容器,一般用来展示功能相对独立的窗口,打开频率相对较高
gardener.NavigatorContainer ——navigator导航容器
gardener.PopupContainer ——popup弹窗容器,一般用来展示微小动作的确认或者小型功能模块
gardener.MessageContainer ——message box消息弹窗容器 / 奖励弹窗容器

层级

层级


显示对象Scene ——scene场景

  1. /**
  2.   * 非EUI 场景画面,必须继承gardener.BaseScene 和实现gardener.IScene 接口
  3.   */
  4.   class SceneDemo_1 extends gardener.BaseScene implements gardener.IScene;

  5. /**
  6.   * EUI 场景画面,必须继承gardener.EUIBaseScene 和实现gardener.IScene 接口
  7.   */
  8.   class SceneEUIDemo_2 extends gardener.EUIBaseScene implements gardener.IScene
复制代码



Window ——window窗口
  1. /**
  2.   * 非EUI Window画面,必须继承gardener.BaseWindow 和实现gardener.IWindow接口
  3.   */
  4.   class WindowDemo_1 extends gardener.BaseWindow implements gardener.IWindow;

  5. /**
  6.   * EUI Window画面,必须继承gardener.EUIBaseWindow 和实现gardener.IWindow接口
  7.   */
  8.   class WindowEUIDemo_2 extends gardener.EUIBaseWindow implements gardener.IWindow
复制代码


Navigator ——navigator导航

  1. /**
  2.   * egret.DisplayObject 导航控件 使用之前需要初始化开启 navigatorContainerAvailable = true, gardener.addNavigator(navi)
  3.   */
  4.   class NavigatorDemo extends egret.DisplayObject;  
复制代码



Popup ——popup弹窗

  1. /**
  2.   * 非EUI Popup画面,必须继承gardener.BasePopup 和实现gardener.IPopup接口
  3.   */
  4.   class PopupDemo extends gardener.EUIBasePopup implements gardener.IPopup;

  5. /**
  6.   * EUI Popup画面,必须继承gardener.EUIBasePopup 和实现gardener.IPopup接口
  7.   */
  8.   class PopupEUIDemo extends gardener.EUIBasePopup implements gardener.IPopup
复制代码



MessageBox ——message box消息弹窗

  1. /**
  2.   * 非EUI MessageBox画面,必须继承gardener.BaseMessageBox
  3.   */
  4.   class DemoMessageBox extends gardener.BaseMessageBox;

  5. /**
  6.   * EUI MessageBox画面,必须继承gardener.EUIBaseMessageBox
  7.   */
  8.   class DemoEUIMessageBox extends gardener.EUIBaseMessageBox
复制代码


框架引入
将源码框架中bin目录中的gardener文件夹复制到白鹭项目中libs文件夹中,在egretProperties.json中配置modules.
  1. {
  2.    "name": "gardener",
  3.    "path": "./libs/gardener"
  4.       }
复制代码

启用Gardener 示例        

  1. gardener.initGardener(this, {                                // 启动参数,参数详细请参照initGardener接口
  2.     stringResName: "StringResource_cn_json",            // 全局本地化文本文件
  3.     allowMultipleMessageBoxes: true,                    // 允许MessageBox多层覆弹
  4.     showMultipleMessageBoxesOffset: 10,                  // 多层MessageBox错位显示
  5.     navigatorContainerAvailable: true                    // 启用导航层
  6.         });
  7.         
  8.         // 自定义Window容器属性
  9.         gardener.WindowContainer.y = 130;
  10.         gardener.WindowContainer.height = gardener.StageHeight - 100 - 130  // window高度 从全屏高度去除导航层头部和底部的高度

  11.         // 自定义导航对象
  12.         let navi: DemoNavigator = new DemoNavigator();
  13.         navi.touchEnabled = false;
  14.         navi.touchChildren = true;
  15.         gardener.addNavigator(navi);
复制代码



接口说明



1. 初始化  
  1.        /**
  2.          * 初始化Gardener
  3.          * @param main 白鹭项目启动类 Main
  4.          * @param config {
  5.             navigatorContainerAvailable?: boolean,        // 是否启用导航层
  6.             stringResName?: string,                                        // 全局本地化文本字符串配置文件,json格式, 通过gardener.getString(key)来获取
  7.             orientation?: string,                                        // App窗口方向,默认是项目设定的方向
  8.             stageWidth?: number,                                        // 自定义游戏窗口宽度,默认是全屏窗口宽度
  9.             stageHeight?: number,                                        // 自定义游戏窗口高度,默认是全屏窗口高度
  10.             windowContainerMaskColor?: number,                // Window层遮罩颜色,默认是黑色0x000000
  11.             windowContainerMaskAlpha?: number,                // Window层这招不透明度,默认是0
  12.             popupContainerMaskColor?: number,                // Popup层遮罩颜色,默认是黑色0x000000
  13.             popupContainerMaskAlpha?: number,                // Popup层遮罩不透明度,默认是0
  14.             messageContainerMaskColor?: number,                // MessageBox层遮罩颜色,默认0x000000
  15.             messageContainerMaskAlpha?: number,                // MessageBox层遮罩不透明度,默认0
  16.             popupPositionHori?: number,                                // Popup对象全局水平位置,默认是中间0.5
  17.             popupPositionVert?: number,                                // Popup对象全局垂直位置,默认是中间0.5
  18.             allowMultipleMessageBoxes?: boolean,        // 是否允许MessageBox可以弹出多层,每层独立,默认是true,如果为false,新弹出的messagebox会关闭前一个
  19.             showMultipleMessageBoxesOffset?: number        // 当allowMultipleMessageBoxes=true的时候,后一个相比前一个messagebox是否有错位显示,默认是10}
  20. */
  21. gardener.initGardener(main: egret.DisplayObjectContainer, config?:any): void
复制代码



2. 验证组件是否可用  

  1. /**
  2.      * 判断Gardener是否初始化完成
  3.      */
  4.     gardener.checkGgValid(): boolean
复制代码



3. 打开一个Scene
  1. /**
  2.      * 打开一个Scene
  3.      * @param scene IScene 打开的对象
  4.      * @param showAnime boolean 是否显示切换Scene的过度动画
  5.      */
  6.     gardener.loadScene(scene: gardener.IScene, showAnime?: boolean): void
复制代码



4. 打开一个window

  1. /**
  2.      * 打开一个window,如果当前有window已经打开,则自动关闭并dispose
  3.      * @param window IWindow
  4.      */
  5.     gardener.openWindow(window: gardener.IWindow): void
复制代码


5. 打开一个window,同时保留上一个window
  1. /**
  2.      * 打开一个window,同时缓存上一个window,当此window关闭的时候,之前保存的window会自动弹回
  3.      * @param window IWindow
  4.      */
  5.     gardener.openWindowAndSavingPrevious(window: gardener.IWindow): void
复制代码



6. 关闭当前window
  1. /**
  2.      * 关闭当前window,如果closeAll=true,则dispose所有之前缓存的window历史
  3.      * @param closeAll 默认false
  4.      */
  5.     gardener.closeWindow(closeAll?: boolean): void
复制代码



7. 清空并回收所有缓存的window

  1. /**
  2.      * 清空并回收所有缓存的window
  3.      */
  4.     gardener.clearWindowHistory(): void
复制代码



8. 打开一个popup

  1. /**
  2.      * 打开一个popup
  3.      * @param popup IPopup
  4.      */
  5.     gardener.openPopup(popup: gardener.IPopup): void
复制代码



9. 关闭当前popup

  1. /**
  2.      * 关闭当前popup
  3.      * @param immediate boolean 立即关闭,不显示动画,默认false
  4.      */
  5.     gardener.closePopup(immediate?: boolean): void
复制代码



10. 弹出messagebox 消息弹窗, 一般游戏中即时弹出的消息,奖励,提醒等可以通过MessageBox实现

  1. /**
  2.      * 弹出messagebox
  3.      * @param messageBox IMessageBox
  4.      * @param closeOthers boolean 打开的同时是否关闭其他当前打开
  5.      */
  6.     gardener.showMessageBox(messageBox: gardener.IMessageBox, closeOthers?: boolean): void
复制代码



11. 关闭所有已打开的messagebox

  1. /**
  2.      * 关闭所有已打开的messagebox
  3.      */
  4.     gardener.closeAllMessageBoxes(): void
复制代码



12. 关闭指定的messagebox

  1. /**
  2.      * 关闭指定的messagebox
  3.      * @param target IMessageBox
  4.      */
  5.     gardener.closeMessageBox(target: IMessageBox): void
复制代码



13. 显示飘字文本

  1. /**
  2.      * 显示飘字文本
  3.      * @param tip IFloatTip
  4.      */
  5.     gardener.showFloatTip(tip: gardener.IFloatTip): void
复制代码



14. 添加导航模块,window层之上,popup层之下,可自定义层级

  1. /**
  2.      * 添加导航模块,window层之上,popup层之下
  3.      * @param navi egret.DisplayObject
  4.      */
  5.     gardener.addNavigator(navi: egret.DisplayObject): void
复制代码



15. 查找当前已打开的Popup

  1. /**
  2.      * 查找当前已打开的Popup
  3.      * @return IPopup
  4.      */
  5.     gardener.findCurrentPopup(): gardener.IPopup
复制代码



16. 根据类型查找当前已打开的popup,常用于判断当前打开的popup是否是指定类型,如果不是指定类型,则返回null

  1. /**
  2.      * 根据类型查找当前已打开的popup,常用于判断当前打开的popup是否是指定类型,如果不是指定类型,则返回null
  3.      * @param targetClass class
  4.      * @return IPopup
  5.      */
  6.     gardener.findCurrentPopupByClass(targetClass): gardener.IPopup
复制代码



17. 查找当前已打开的window

  1. /**
  2.      * 查找当前已打开的window
  3.      * @return IWindow
  4.      */
  5.     gardener.findCurrentWindow(): gardener.IWindow
复制代码



18. 根据类型查找当前已打开的window,常用于判断当前打开的window是否是指定类型,如果不是指定类型,则返回null

  1. /**
  2.      * 根据类型查找当前已打开的window,常用于判断当前打开的window是否是指定类型,如果不是指定类型,则返回null
  3.      * @param targetClass class
  4.      * @return IWindow
  5.      */
  6.     gardener.findCurrentWindowByClass(targetClass): gardener.IWindow
复制代码



19. 查找当前已打开的scene

  1. /**
  2.      * 查找当前已打开的scene
  3.      * @return IScene
  4.      */
  5.     gardener.findCurrentScene(): gardener.IScene
复制代码



20. 根据类型查找当前已打开的scene,常用于判断当前打开的scene是否是指定类型,如果不是指定类型,则返回null

  1. /**
  2.      * 根据类型查找当前已打开的scene,常用于判断当前打开的scene是否是指定类型,如果不是指定类型,则返回null
  3.      * @param targetClass class
  4.      * @return IScene
  5.      */
  6.     gardener.findCurrentSceneByClass(targetClass): gardener.IScene
复制代码



21. 显示全局遮罩, 覆盖全屏,最上层

  1. /**
  2.      * 显示全局遮罩, 覆盖全屏,最上层
  3.      * @param loading egret.DisplayObject
  4.      */
  5.     gardener.showLoadingMask(loading: egret.DisplayObject): void
复制代码



22. 移除遮罩

  1. /**
  2.      * 移除遮罩
  3.      * @param loading egret.DisplayObject 指定对象
  4.      */
  5.     gardener.removeLoadingMask(loading: egret.DisplayObject): void
复制代码


23. 生成龙骨二进制动画对象
  1. /**
  2.      * 生成龙骨二进制动画
  3.      * @param resName string 资源文件名称 例如 resName_ske_dbbin, resName_tex_png
  4.      * @param disposeAfterUnload boolean 当动画被移除的时候,是否自动回收 默认true,如果设为false,则需要手动回收gardener.dbDisposeDbbinAnime(anime)
  5.      * @param removeAfterComplete boolean 当动画播放周期结束,是否自动从父容器中移除,默认为true
  6.      */
  7.     gardener.dbGenerateDbbinAnime(resName: string, armatureName: string, disposeAfterUnload?: boolean, removeAfterComplete?: boolean)
复制代码



24. 回收指定的龙骨二进制动画对象

  1. /**
  2.      * 回收指定的龙骨二进制动画对象
  3.      * @param anime dragonBones.EgretAramtureDisplay
  4.      */
  5.     gardener.dbDisposeDbbinAnime(anime: dragonBones.EgretArmatureDisplay): void
复制代码


25. 回收所有二进制龙骨动画资源缓存
  1. /**
  2.      * 回收所有二进制龙骨动画资源缓存
  3.      */
  4.     gardener.dbDisposeAllDbbinFactoryData(): void
复制代码



26. 回收指定二进制龙骨动画资源缓存

  1. /**
  2.      * 回收指定的龙骨二进制动画对象
  3.      * @param anime dragonBones.EgretAramtureDisplay
  4.      */
  5.     gardener.dbDisposeDbbinAnime(anime: dragonBones.EgretArmatureDisplay): void
复制代码



27. 关闭龙骨谷歌动画计时器

  1. /**
  2.      * 关闭龙骨谷歌动画计时器
  3.      */
  4.     gardener.dbStopDbWorldClock(): void
复制代码



28. 获取文本字符串模板

  1. /**
  2.      * 获取文本字符串模板
  3.      * @param key string 字符串对应的键值
  4.      * @param replaceValues string[] 动态替换字符串模板中的参数。模板例子:欢迎{0}来到游戏{1}区...
  5.      * @return 文本字符串
  6.      */
  7.     gardener.getString(key: string, ...replaceValues: string[])
复制代码



全局属性

  1. /**
  2.      * gardener 全局配置
  3.      */
  4.     export var Configuration;
  5.     /**
  6.      * 字符串模板json对象
  7.      */
  8.     export var StringResourceJson;
  9.     /**
  10.      * 全局高度
  11.      */
  12.     export var StageHeight;
  13.     /**
  14.      * 全局宽度
  15.      */
  16.     export var StageWidth;
  17.     /**
  18.      * Scene容器
  19.      */
  20.     export var SceneContainer;
  21.     /**
  22.      * Window容器
  23.      */
  24.     export var WindowContainer;
  25.     /**
  26.      * Popup容器
  27.      */
  28.     export var PopupContainer;
  29.     /**
  30.      * MessageBox容器
  31.      */
  32.     export var MessageContainer;
  33.     /**
  34.      * 导航层
  35.      */
  36.     export var NavigatorContainer;
复制代码


源码
游客,如果您要查看本帖隐藏内容请回复
















分享到 :
5 人收藏

86 个回复

倒序浏览
jj229937432  圆转纯熟 | 2020-4-18 02:39:59
本帖最后由 jj229937432 于 2020-4-28 16:24 编辑

新鲜出炉,一手资源,欢迎指导,欢迎建议,有问题直接问,咱们一起研究。
初见、  登堂入室 | 2020-4-20 10:57:34
Egret 轻型游戏UI框架——Gardener
去你的吧  登堂入室 | 2020-4-20 11:54:56
学习学习
wenbing  登堂入室 | 2020-4-20 12:28:55
看看
虾~~咪  圆转纯熟 | 2020-4-20 15:48:12
优秀,学习下
orecle  圆转纯熟 | 2020-4-20 16:56:53
看起来蛮好的
小邓子超级6  初学乍练 | 2020-4-20 17:05:02
6666
nybl  登堂入室 | 2020-4-20 17:06:28
瞧一瞧
去你的吧  登堂入室 | 2020-4-20 17:15:08
瞅了一眼 !为啥加了这么多trycatch 对性能有影响吧? ,页面不需要加载资源吗?
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|京网文[2014]0791-191号|京ICP证150115号|Egret社区 ( 京ICP备14025619号 )

Powered by Discuz! X3.4 © 2001-2019 Comsenz Inc.

返回顶部