如何利用Egret Pro在2D项目中添加3D内容

Egret Pro 就是白鹭研发的一款可以开发2D/3D游戏的可视化编辑器，在2019年正式发布，其采用了完全实体组件系统的架构，可以更方便的实现以游戏设计师为中心的开发理念。

如果您希望在现有项目中添加3D内容，可以将EgretPro项目导出为一个白鹭第三方库，然后在 Egret 项目中通过导入外部库的方式进行使用。

使用方式
#步骤一：创建 EgretPro 项目
下载并安装 EgretPro 1.6 或者更高版本
打开EgretPro,选择新建 -> 库项目，如果新建项目类型中没有库项目，请确认创建项目面板中的引擎版本号为 1.6.0 或更高版本。
点击浏览按钮，选择一个 Egret 项目根路径。确认后将项目路径处的新项目名称 NewProject 修改为pro-library
点击创建按钮，创建成功后，您的项目结构应如下所示：

|-- root
    |-- resource
    |-- libs
    |-- src
    |-- pro-library
        |-- resource
        |-- src
        |-- egretpro.json
    |-- egretProperties.json

步骤二：将 EgretPro 项目导出为第三方库
通过VS Code 打开刚刚创建好的项目在项目根目录执行

npm install
npm run build:library

即可将当前项目打包成一个js库，位置是pro-library

步骤三：将生成的 pro-library 导入 Egret 项目
修改2d项目 egretProperties.json 中的modules,添加该模块

{
    "modules":[
        // .....
            {
            "name": "pro-library",
            "path": "./pro-library/pro-library" //指向EgretPro库项目的pro-library文件夹 
        }
    ]
}

修改后需要通过执行编译命令，在manifest.json中看到pro-library.js引入即为成功

步骤四：升级2D项目
2d项目为了可以和EgretPro第三方库兼容，需要进行升级引擎至 5.3.7 版本，开发者可以通过 Egret Launcher 下载最新版本。

下载引擎后，修改index.html,后如下所示

egret.runEgret({    
    renderMode: "webgl",
    audioType: 0,
    calculateCanvasScaleFactor: function (context) {
        var backingStore = context.backingStorePixelRatio ||
            context.webkitBackingStorePixelRatio ||
            context.mozBackingStorePixelRatio ||
            context.msBackingStorePixelRatio ||
            context.oBackingStorePixelRatio ||
            context.backingStorePixelRatio || 1;
        return (window.devicePixelRatio || 1) / backingStore;
    },
    pro:true,  // 需要修改为true,以启动 EgretPro 环境
});

步骤五：在Egret 项目中添加 EgretPro 内容
目前可以将 EgretPro 中的场景渲染为一个egret.Texture对象，Egret引擎只需要将egret.Texture添加到Bitmap对象当中，即可渲染到舞台。

const texture = await egret.pro.createTextureFrom3dScene("assets/scenes/animations/test.scene.json", 640, 640);
const bitmap = new egret.Bitmap(texture);
this.addChild(bitmap);

编译运行即可

如何在 EgretPro 和 Egret项目之间进行交互
EgretPro 与2d引擎间提供了几个方法用于函数调用以及通讯。EgretPro项目与Egret2d项目都可通过 egret.pro 进行调用。

declare namespace egret.pro {
    /**
     * 执行方法
     * 通过传入命令的字符串，获取已注册的方法并执行，参数为可变参数
     * 执行方法可获取到方法的返回值
     * 若找到注册该方法，会报出警告并返回 null
     * @param command 
     * @param thisObject 
     * @param args 
     */
    export function execute(command: string, ...args: any[]): any;

    /**
     * 注册方法
     * 根据传入字符串名称，注册方法
     * 同一个名称的方法只能注册一次，相同名称会报出警告
     * @param command 
     * @param func 
     * @param thisObject 
     */
     export function register(command: string, func: (...args: any[]) => any, thisObject: any): void;

    /**
     * 注册事件
     * @param eventType 
     * @param target
     * @param func 
     * @param thisObject 
     */
    export function addEventListener(eventType: string, target: any, func: (...args: any[]) => void, thisObject: any): void;

    /**
     * 移除事件
     * @param eventType 
     * @param target
     * @param func
     */
     export function removeEventListener(eventType: string, target: any, func: (...args: any[]) => void): void;
    /**
     * 派发事件
     * @param command 
     * @param target
     * @param args 
     */
     export function dispatch(command: string, target: any, ...args: any[]): void;
}

如何利用Egret Pro在2D项目中添加3D内容

猜你喜欢