分类 Egret 下的文章

无法理解,《月亮与六便士》读后感

《月亮与六便士》,书中作者并没有明确的说明,本书题目的意思,甚至根本就没有提到过这两个单词。我对这个名字有自己的解读,月亮指代的是主人公对美好艺术的追求,而六便士则是说的其穷困潦倒的生活。

s6088624.jpg

无法理解,书中大量的提到了一些无法理解的事情,作者试图解释主人公一些行为背后的动机,可是终于没有梳理清楚。书中对与主人公的记录大部分还是来自于第三方的叙述。对于书中各种事情的描述我不想说太多,但是这并不妨碍主人公成为一个伟大的画家,毕其一生在追求的艺术,在其死后终被世人认可。与其伟大的艺术形成鲜明对比的是其极其恶劣的生活。

从这边书中看到的是什么呢?看到的是主人公对于艺术的执着,对于美的追求,为了他所追求的艺术他放弃了一切所有他能够放弃的东西,甚至是一切的世俗伦理的东西,他的追求不带有任何的功利,只为了自己对艺术的追求的满足。

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 的次数,而提升游戏的性能。

grunt 入门学习笔记

grunt是一个自动化的工具。可以处理一下反复重复的,劳动繁重的任务。

安装脚本

npm install -g grunt-cli

与grunt对应的是Gruntfile.js文件或者是Gruntfile.coffee,用来配置和定义任务,同时包含Grunt插件的加载。

grunt-init    会自动创建一个包含grunt的package.json文件
npm init 会自动创建一个基本的package.json文件

如果说已经有package.json文件了,需要在项目中添加新的模块和依赖,可以使用下面的脚本

npm install grunt --save-dev

grunt的插件的安装也同样是使用上面的方法

Gruntfile

包含以下内容:

wrapper函数
项目与任务配置
加载grunt插件和任务
自定义任务

配置

grunt.initConfig({
    concat:{

    },
    uglify:{

    },
    my_property:''
})

配置文件的属性一般是以任务的名字命名,属性值可以是任意的数据类型。options属性一般是指任务的默认配置属性。

api

grunt.initConfig // 初始化配置信息

// 任务
grunt.tesk.registerTask
grunt.registerTask

grunt.loadTasks
grunt.task.loadTasks

grunt.loadNpmTasks
grunt.task.loadNpmTasks

// 警告和致命错误
grunt.fail.warn
grunt.fail.fatal

// 
grunt.package //调用package.json的数据值

grunt api

task

grunt.registerTask(task,taskList);

task是注册的任务的名字,taskList是任务的名字列表,当调用任务的是时候会依次的调用taskList的任务。

grunt.register(taskName,description,taskFunction)

taskFunction是执行任务的方法。

任务的文件格式是在一个配置文件中的包含自定义的属性,其中固有的属性有 options,src,dest

node 学习笔记 之 package.json

package.json script字段

{
    "scripts": {
      "dev": "node build/dev-server.js",
      "build": "node build/build.js",
      "unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
      "e2e": "node test/e2e/runner.js",
      "test": "npm run unit && npm run e2e"
    }
}

定义了npm的脚本字段。

npm run dev //自动执行指向到 node build/dev-server.js 

npm install -save 和 npm install -save-dev 的区分

npm install moduleName

会安装moduleName在当前目录的node_modules目录下。但是不会写入依赖,运行npm install 的时候也就不会安装moduleName模块了。

npm install -g moduleName

会安装moduleName在全局,不会再项目的node_modules目录中保存模块,不会写入到package.json的依赖中。在运行npm install的时候也不会下载安装moduleName。具体全局安装到了哪个目录下面可以通过npm config prefix查看。

npm install -save moduleName

安装模块在node_modules目录下,并且会将模块的依赖写入到dependencies节点下面。在运行npm install的时候会初始化项目,将模块下载到项目目录下面。执行npm install --production或者指定NODE_ENV的变量值为production的时候,会自动的下载模块到node_modules目录下面。

npm install --save-dev moduleName

安装模块到node_modules目录下面,并且会将依赖写入到devDependencies节点下面。运行npm install 的时候会初始化项目,并将模块下载到项目下面。但是运行npm install --production的时候,不会自动下载到node_models目录下面。

devDependencies 节点下的依赖是中开发环境的时候才会需要的。但是在部署到正式环境的时候是不会安装这些依赖的,一般是通过npm install --save-dev命令行来安装,如果是开发环境和正式发布环境都需要的那么就需要用npm install --save命令行来安装了。

phaser Webpack 打包微信小游戏项目拆解

根据climbing-marble项目来分析phaser项目打包接入微信平台的实现方法。

package.json 入口文件

scripts": {
    "dev": "grunt dev",
    "dist": "grunt dist",
    "custom": "grunt custom",
    "wechatdev": "grunt wechat-dev",
    "wechatdist": "grunt wechat-dist",
    "devqq": "grunt devqq"
  }

其中 "wechatdev": "grunt wechat-dev" 是微信平台的打包脚本文件,通过npm run wechatdev脚本来实现

grunt wechat-dev 脚本解读

通过grunt wechat-dev可以找到Gruntfile.js文件中的相应的配置。

 grunt.registerTask('wechat-dev', [
    //'tslint:dist',
    'replace:wechat',
    'copy:wechat',
    'writeWechatData',
    'concurrent:wechatdev'
]);

自定义任务名称为wechat-dev,执行流程以及分别对应的grunt插件如下

    'replace:wechat',
    'copy:wechat',
    'writeWechatData',
    'concurrent:wechatdev'

上面的replace,copy,concurrent等命令分别对应task/options/目录下面的js配置文件。

在concurrent.js文件中

module.exports = {
    options: {
        logConcurrentOutput: true
    },
    dev: ['watch:assets', 'watch:html', 'webpack:dev'],
    wechatdev: ['watch:wechat_assets', 'webpack:wechatdev'],
    wechatdist: ['watch:wechat_assets', 'webpack:wechatdist']
};

可以看到wechatdev,对应两个任务,watch:wechat_assets,webpack:wechatdev

webpack:wechatdev可以找到对应的文件

wechatdev: require('../webpack/wechatdev.config'),

writeWechatData任务解读

自定义的writeWechatData任务的具体实现。

grunt.registerTask('writeWechatData', 'Writes JSON and XML to variables', function () {
        let x2js = new X2JS();

        // let neusa_shadow = JSON.stringify(x2js.xml2js(grunt.file.read('assets/fonts/neusa_shadow.fnt')));
        // let neusa_regular = JSON.stringify(x2js.xml2js(grunt.file.read('assets/fonts/neusa_regular.fnt')));
        let tls = grunt.file.read('assets/atlases/interface.json');
        let tls2 = grunt.file.read('assets/atlases/boostAnimation.json');

        let data = //'window.neusa_shadow = ' + JSON.stringify(neusa_shadow) + '; \n' +
            //'window.neusa_regular = ' + JSON.stringify(neusa_regular) + ';\n' +
            'window.boostanimation = ' + JSON.stringify(tls2) + ';\n' +
            'window.interface = ' + JSON.stringify(tls) + ';';

        grunt.file.write('_build/wechat/data.js', data);
    });

读取项目中的json配置文件,再拼接上window.boostxxxxx头部以后,写入到_build/wechat/data.json文件中。

wechatdev.config解读