5 Star 12 Fork 9

jiajun / Egret Gardener

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
README.md 14.58 KB
一键复制 编辑 原始数据 按行查看 历史
jiajun 提交于 2021-02-22 10:39 . no message

框架介绍

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

内置龙骨动画控制器

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

Demo展示

输入图片说明

输入图片说明

输入图片说明

输入图片说明

框架层级

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

各级容器

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

ui_frame.jpg

显示对象

Scene ——scene场景
 /**
  * 非EUI 场景画面,必须继承gardener.BaseScene 和实现gardener.IScene 接口
  */
  class SceneDemo_1 extends gardener.BaseScene implements gardener.IScene; 

 /**
  * EUI 场景画面,必须继承gardener.EUIBaseScene 和实现gardener.IScene 接口
  */
  class SceneEUIDemo_2 extends gardener.EUIBaseScene implements gardener.IScene
Window ——window窗口
 /**
  * 非EUI Window画面,必须继承gardener.BaseWindow 和实现gardener.IWindow接口
  */
  class WindowDemo_1 extends gardener.BaseWindow implements gardener.IWindow;

 /**
  * EUI Window画面,必须继承gardener.EUIBaseWindow 和实现gardener.IWindow接口
  */
  class WindowEUIDemo_2 extends gardener.EUIBaseWindow implements gardener.IWindow
Navigator ——navigator导航
 /**
  * egret.DisplayObject 导航控件 使用之前需要初始化开启 navigatorContainerAvailable = true, gardener.addNavigator(navi)
  */
  class NavigatorDemo extends egret.DisplayObject;  
Popup ——popup弹窗
 /**
  * 非EUI Popup画面,必须继承gardener.BasePopup 和实现gardener.IPopup接口
  */
  class PopupDemo extends gardener.EUIBasePopup implements gardener.IPopup;

 /**
  * EUI Popup画面,必须继承gardener.EUIBasePopup 和实现gardener.IPopup接口
  */
  class PopupEUIDemo extends gardener.EUIBasePopup implements gardener.IPopup
MessageBox ——message box消息弹窗
 /**
  * 非EUI MessageBox画面,必须继承gardener.BaseMessageBox
  */
  class DemoMessageBox extends gardener.BaseMessageBox;

 /**
  * EUI MessageBox画面,必须继承gardener.EUIBaseMessageBox
  */
  class DemoEUIMessageBox extends gardener.EUIBaseMessageBox

框架引入

将源码框架中bin目录中的gardener文件夹复制到白鹭项目中libs文件夹中,在egretProperties.json中配置modules.

      {
        "name": "gardener",
        "path": "./libs/gardener"
      }

启用Gardener 示例

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

        // 自定义导航对象
        let navi: DemoNavigator = new DemoNavigator();
        navi.touchEnabled = false;
        navi.touchChildren = true;
        gardener.addNavigator(navi);

接口说明

1. 初始化
    /**
	 * 初始化Gardener
	 * @param main 白鹭项目启动类 Main
	 * @param config {
			navigatorContainerAvailable?: boolean,	// 是否启用导航层
			stringResName?: string,					// 全局本地化文本字符串配置文件,json格式, 通过gardener.getString(key)来获取
			orientation?: string,					// App窗口方向,默认是项目设定的方向
			stageWidth?: number,					// 自定义游戏窗口宽度,默认是全屏窗口宽度
			stageHeight?: number,					// 自定义游戏窗口高度,默认是全屏窗口高度
			windowContainerMaskColor?: number,		// Window层遮罩颜色,默认是黑色0x000000
			windowContainerMaskAlpha?: number,		// Window层这招不透明度,默认是0
			popupContainerMaskColor?: number,		// Popup层遮罩颜色,默认是黑色0x000000
			popupContainerMaskAlpha?: number,		// Popup层遮罩不透明度,默认是0
			messageContainerMaskColor?: number,		// MessageBox层遮罩颜色,默认0x000000
			messageContainerMaskAlpha?: number,		// MessageBox层遮罩不透明度,默认0
			popupPositionHori?: number,				// Popup对象全局水平位置,默认是中间0.5
			popupPositionVert?: number,				// Popup对象全局垂直位置,默认是中间0.5
			allowMultipleMessageBoxes?: boolean,	// 是否允许MessageBox可以弹出多层,每层独立,默认是true,如果为false,新弹出的messagebox会关闭前一个
			showMultipleMessageBoxesOffset?: number	// 当allowMultipleMessageBoxes=true的时候,后一个相比前一个messagebox是否有错位显示,默认是10}
	 */
    gardener.initGardener(main: egret.DisplayObjectContainer, config?: {
		navigatorContainerAvailable?: boolean,
		stringResName?: string,
		orientation?: string,
		stageWidth?: number,
		stageHeight?: number,
		windowContainerMaskColor?: number,
		windowContainerMaskAlpha?: number,
		popupContainerMaskColor?: number,
		popupContainerMaskAlpha?: number,
		messageContainerMaskColor?: number,
		messageContainerMaskAlpha?: number,
		popupPositionHori?: number,
		popupPositionVert?: number,
		allowMultipleMessageBoxes?: boolean,
		showMultipleMessageBoxesOffset?: number
	}): void
2. 验证组件是否可用
    /**
	 * 判断Gardener是否初始化完成
	 */
	gardener.checkGgValid(): boolean
3. 打开一个Scene
    /**
	 * 打开一个Scene
	 * @param scene IScene 打开的对象
	 * @param showAnime boolean 是否显示切换Scene的过度动画
	 */
	gardener.loadScene(scene: gardener.IScene, showAnime?: boolean): void
4. 打开一个window
    /**
	 * 打开一个window,如果当前有window已经打开,则自动关闭并dispose
	 * @param window IWindow
	 */
	gardener.openWindow(window: gardener.IWindow): void
5. 打开一个window,同时保留上一个window
    /**
	 * 打开一个window,同时缓存上一个window,当此window关闭的时候,之前保存的window会自动弹回
	 * @param window IWindow
	 */
	gardener.openWindowAndSavingPrevious(window: gardener.IWindow): void
6. 打开一个window,同时保留上一个window
    /**
	 * 打开一个window,同时缓存上一个window,当此window关闭的时候,之前保存的window会自动弹回
	 * @param window IWindow
	 */
	gardener.openWindowAndSavingPrevious(window: gardener.IWindow): void
7. 关闭当前window
    /**
	 * 关闭当前window,如果closeAll=true,则dispose所有之前缓存的window历史
	 * @param closeAll 默认false
	 */
	gardener.closeWindow(closeAll?: boolean): void
8. 清空并回收所有缓存的window
    /**
	 * 清空并回收所有缓存的window
	 */
	gardener.clearWindowHistory(): void
9. 打开一个popup
    /**
	 * 打开一个popup
	 * @param popup IPopup
	 */
	gardener.openPopup(popup: gardener.IPopup): void
10. 关闭当前popup
    /**
	 * 关闭当前popup
	 * @param immediate boolean 立即关闭,不显示动画,默认false
	 */
	gardener.closePopup(immediate?: boolean): void
11. 弹出messagebox 消息弹窗, 一般游戏中即时弹出的消息,奖励,提醒等可以通过MessageBox实现
    /**
	 * 弹出messagebox
	 * @param messageBox IMessageBox
	 * @param closeOthers boolean 打开的同时是否关闭其他当前打开
	 */
	gardener.showMessageBox(messageBox: gardener.IMessageBox, closeOthers?: boolean): void
12. 关闭所有已打开的messagebox
    /**
	 * 关闭所有已打开的messagebox
	 */
	gardener.closeAllMessageBoxes(): void
13. 关闭指定的messagebox
    /**
	 * 关闭指定的messagebox
	 * @param target IMessageBox
	 */
	gardener.closeMessageBox(target: IMessageBox): void
14. 显示飘字文本
    /**
	 * 显示飘字文本
	 * @param tip IFloatTip
	 */
	gardener.showFloatTip(tip: gardener.IFloatTip): void
15. 添加导航模块,window层之上,popup层之下,可自定义层级
    /**
	 * 添加导航模块,window层之上,popup层之下
	 * @param navi egret.DisplayObject
	 */
	gardener.addNavigator(navi: egret.DisplayObject): void
16. 查找当前已打开的Popup
    /**
	 * 查找当前已打开的Popup
	 * @return IPopup
	 */
	gardener.findCurrentPopup(): gardener.IPopup
17. 根据类型查找当前已打开的popup,常用于判断当前打开的popup是否是指定类型,如果不是指定类型,则返回null
    /**
	 * 根据类型查找当前已打开的popup,常用于判断当前打开的popup是否是指定类型,如果不是指定类型,则返回null
	 * @param targetClass class
	 * @return IPopup
	 */
	gardener.findCurrentPopupByClass(targetClass): gardener.IPopup
18. 查找当前已打开的window
    /**
	 * 查找当前已打开的window
	 * @return IWindow
	 */
	gardener.findCurrentWindow(): gardener.IWindow
19. 根据类型查找当前已打开的window,常用于判断当前打开的window是否是指定类型,如果不是指定类型,则返回null
    /**
	 * 根据类型查找当前已打开的window,常用于判断当前打开的window是否是指定类型,如果不是指定类型,则返回null
	 * @param targetClass class
	 * @return IWindow
	 */
	gardener.findCurrentWindowByClass(targetClass): gardener.IWindow
20. 查找当前已打开的scene
    /**
	 * 查找当前已打开的scene
	 * @return IScene
	 */
	gardener.findCurrentScene(): gardener.IScene
21. 根据类型查找当前已打开的scene,常用于判断当前打开的scene是否是指定类型,如果不是指定类型,则返回null
    /**
	 * 根据类型查找当前已打开的scene,常用于判断当前打开的scene是否是指定类型,如果不是指定类型,则返回null
	 * @param targetClass class
	 * @return IScene
	 */
	gardener.findCurrentSceneByClass(targetClass): gardener.IScene
22. 显示全局遮罩, 覆盖全屏,最上层
    /**
	 * 显示全局遮罩, 覆盖全屏,最上层
	 * @param loading egret.DisplayObject
	 */
	gardener.showLoadingMask(loading: egret.DisplayObject): void
23. 移除遮罩
    /**
	 * 移除遮罩
	 * @param loading egret.DisplayObject 指定对象
	 */
	gardener.removeLoadingMask(loading: egret.DisplayObject): void
24. 生成龙骨二进制动画对象
    /**
	 * 生成龙骨二进制动画
	 * @param resName string 资源文件名称 例如 resName_ske_dbbin, resName_tex_png
	 * @param disposeAfterUnload boolean 当动画被移除的时候,是否自动回收 默认true,如果设为false,则需要手动回收gardener.dbDisposeDbbinAnime(anime)
	 * @param removeAfterComplete boolean 当动画播放周期结束,是否自动从父容器中移除,默认为true
	 */
	gardener.dbGenerateDbbinAnime(resName: string, armatureName: string, disposeAfterUnload?: boolean, removeAfterComplete?: boolean)
25. 回收指定的龙骨二进制动画对象
    /**
	 * 回收指定的龙骨二进制动画对象
	 * @param anime dragonBones.EgretAramtureDisplay
	 */
	gardener.dbDisposeDbbinAnime(anime: dragonBones.EgretArmatureDisplay): void
25. 回收所有二进制龙骨动画资源缓存
    /**
	 * 回收所有二进制龙骨动画资源缓存
	 */
	gardener.dbDisposeAllDbbinFactoryData(): void
26. 回收指定二进制龙骨动画资源缓存
    /**
	 * 回收指定二进制龙骨动画资源缓存
	 * @param resName string 资源文件名称
	 */
	gardener.dbDisposeDbbinFactoryData(resName: string): void
27. 关闭龙骨谷歌动画计时器
    /**
	 * 关闭龙骨谷歌动画计时器
	 */
	gardener.dbStopDbWorldClock(): void
28. 获取文本字符串模板
    /**
	 * 获取文本字符串模板
	 * @param key string 字符串对应的键值
	 * @param replaceValues string[] 动态替换字符串模板中的参数。模板例子:欢迎{0}来到游戏{1}区...
	 * @return 文本字符串
	 */
	gardener.getString(key: string, ...replaceValues: string[]) 

全局属性

	/**
	 * gardener 全局配置
	 */
	export var Configuration;
	/**
	 * 字符串模板json对象
	 */
	export var StringResourceJson;
	/**
	 * 全局高度
	 */
	export var StageHeight;
	/**
	 * 全局宽度
	 */
	export var StageWidth;
	/**
	 * Scene容器
	 */
	export var SceneContainer;
	/**
	 * Window容器
	 */
	export var WindowContainer;
	/**
	 * Popup容器
	 */
	export var PopupContainer;
	/**
	 * MessageBox容器
	 */
	export var MessageContainer;
	/**
	 * 导航层
	 */
	export var NavigatorContainer;
1
https://gitee.com/jjflora/Egret-Gardener.git
git@gitee.com:jjflora/Egret-Gardener.git
jjflora
Egret-Gardener
Egret Gardener
master

搜索帮助