/douUI-ts

douUI-ts

Primary LanguageJavaScriptMIT LicenseMIT

douUI-ts

基于 dou2d 的 UI 框架

逗UI，基于 dou2d 引擎上提供 2D 相关的 UI 实现。

注：目前不提供相关的 UI 编辑器，需手动通过代码编辑 UI 界面，示例项目提供常见组件的皮肤实现。

开始上手

  1. 在编写代码之前请引入位于core/dest文件夹中的所有文件，同时需要引入dou2d和doucore项目下的core/dest文件夹中的所有文件：
<script type="text/javascript" src="examples/lib/dou.js"></script>
<script type="text/javascript" src="examples/lib/dou2d.js"></script>
<script type="text/javascript" src="examples/lib/douUI.js"></script>
  1. 可以采用dou2d中提供的AssetDepot工具打包资源：
node ./../../dou2d-ts/tools/AssetDepot/bin/Main.js depot resource resource/res.json
  1. 编写根 UI 容器类并加载资源配置文件：
class UIApp extends Dou.UILayer {
    constructor() {
        super();
        this.once(Dou.Event2D.ADDED_TO_STAGE, this.onAdded, this);
    }
    async onAdded(event: Dou.Event2D): Promise<void> {
        await Dou.asset.loadConfigAsync("resource/res.json", "resource/");
        // 具体的实现代码
    }
}
  1. 编写皮肤类并注册：
Dou.Theme.registerDefaultSkin(Dou.Button, skin.ButtonSkin);

引擎示例