Egret知识点整理

1.js和ts直接的关系

• ts中调用js代码
• js中调用ts代码

js中调用ts，相当于不太模块下ts直接的相互调用。

2.命令行插件

在新建的egret项目目录中会有个scripts文件夹，在这里可以开发自己需要的插件。这个功能类似于laya的发布设置面板中的执行自定义命令行文件的做法。

buildConfig: (params) => {

        const { target, command, projectName, version } = params;

        if (command == 'build') {
            const outputDir = '.';
            return {
                outputDir,
                commands: [
                    // new EmitResConfigFilePlugin({
                    //     output: "resource/default.res.json",
                    //     typeSelector: config.typeSelector,
                    //     nameSelector: p => path.basename(p).replace(/\./gi, "_"),
                    //     groupSelector: p => "preload"
                    // }),
                    new ExmlPlugin('debug'), // 非 EUI 项目关闭此设置
                    new IncrementCompilePlugin(),
                ]
            }
        }
        else if (command == 'publish') {
            const outputDir = `bin-release/web/${version}`;
            return {
                outputDir,
                commands: [
                    new CustomPlugin(),
                    new CompilePlugin({ libraryType: "release", defines: { DEBUG: false, RELEASE: true } }),
                    new ExmlPlugin('commonjs'), // 非 EUI 项目关闭此设置
                    new UglifyPlugin([{
                        sources: ["main.js"],
                        target: "main.min.js"
                    }]),
                    new RenamePlugin({
                        verbose: true, hash: 'crc32', matchers: [
                            { from: "**/*.js", to: "[path][name]_[hash].[ext]" }
                        ]
                    }),
                    new ManifestPlugin({ output: "manifest.json" }),
                    
                    // 当执行完发布操作后，再执行自己的自定义的插件。
                    
                    
                ]
            }
        }
        else {
            throw `unknown command : ${params.command}`
        }
    }

这个文件夹中有不同的config.xxx.ts其实就是定义了不同平台的命令行。

3.调试

DEBUG 和 RELEASE

if (DEBUG) {
        var rect = value.split(",");
        if (rect.length != 4 || isNaN(parseInt(rect[0])) || isNaN(parseInt(rect[1])) ||
            isNaN(parseInt(rect[2])) || isNaN(parseInt(rect[3]))) {
            egret.$error(2016, this.currentClassName, toXMLString(node));
        }
    }

这里的DEBUG并不是自定义的，而是Egret提供的一个环境变量。上面这段代码只有在开发环境中才会执行，具有类似功能的还有````RELEASE```

4.屏幕适配 landscapeFlipped 模式

就是如果我的游戏是横屏的，无论我的屏幕是否是横屏的都会横屏显示。

5.webGL渲染

webGL是一套渲染2d和3dd的图形标准库，提供了很多复杂的api，通过这些Api可以获得硬件加速渲染，从而提升性能。

chrome 从v8开始支持webGL渲染，firefox从v4开始支持，ie从11开始支持。

安卓手机chrome 30开始支持
腾讯的x5引擎根据gl的命令检测是否开启Webgl功能，qq浏览器在android 4.0以下是不支持的。

可以在 Egret 程序的入口中开启 WebGL。如果浏览器不支持 WebGL 渲染将自动切换到 Canvas 渲染模式上。

使用 WebGL 渲染可以得到性能提升。但在使用很多文本和矢量绘图的情况下，可能有更多的开销，起不到提升性能的作用。因为在 WebGL 渲染模式下文本和矢量绘图是需要在 Canvas 中缓存下来再渲染到 WebGL 中。由于多了在 Canvas 渲染的过程，如果使用大量的文本或者矢量绘图将不能得到相应的性能提升。

在 WebGL 下如果要使用 Texture 对象的 toDataURL() 方法把纹理转换为 base64 字符串，那么纹理图片应放在同一服务器下，引用不同的服务器下的资源将不成功。

当然 WebGL 标准正在普及，在手机上有些特性支持还不是很友好。手机上非 Chrome 浏览器现在对不规则遮罩支持还不是很好，在使用 WebGL 渲染器时可以尽量避免使用不规则遮罩。

6.Timer和enter_frame

涉及到通过帧频去计算的时间都是不准确的。通过计算时间间隔会相对比较准确一点，因为每帧的时间间隔不是固定的。

7.纹理的填充方式

var img:egret.Bitmap = new egret.Bitmap();
        img.texture = RES.getRes("box");
        img.fillMode = egret.BitmapFillMode.REPEAT;

没有想到egret里面也有这种填充方式。

8. HTML5 游戏中使用纹理集的好处

• 第一个 在游戏中使用纹理集能够帮助你的游戏提高加载速度，从而减少你的带宽成本，更快速的 HTTP 加载时间。
• 在 webgl 模式下，能够进行硬件加速。这也就意味着 GPU 将处理图像和转化。这时使用了纹理集可以降低 GPU 渲染批次（Draw）来提升渲染性能，每个纹理都必须在绘制出几何体图像前与 GPU 连接在一起，并且特定的 GPU 都必须拥有一个特定数量的纹理槽，所以在抽样单位间进行纹理转化将需要花费大量的时间。而纹理集则能够通过让 GPU 将一个单一纹理绑定在图像驱动器上而减少转化所需要的额外开销，也就是减少少 Draw 的次数，而提升游戏的性能。