资讯专栏INFORMATION COLUMN

[Laya游戏开发]小技巧使Laya构建速度提高10倍

Harpsichord1207 / 1399人阅读

摘要:为何选择引擎微信小游戏推出之后,很多公司也相应的进入到微信小游戏这个领域,现在市场上的游戏开发引擎,如都对小游戏有了很好的兼容性。

1. 为何选择Laya引擎

微信小游戏推出之后,很多公司也相应的进入到微信小游戏这个领域,现在市场上的游戏开发引擎,如Cocos、Egret、Laya都对小游戏有了很好的兼容性。目前公司技术栈主要是使用Cocos和Laya,经过几个项目的接触,考量了引擎在IDE上的上手习惯,API的设计上,发现Laya更适合微信小游戏的开发。

2. 默认的Laya构建方式

Laya在使用IDE默认创建项目后(本文选择typescript语言),会在当前项目目录下,新建一个为.laya的文件夹。默认生成的编译配置文件为

其中compile.js为开发时默认运行文件,这里如果开发者是mac系统,使用F8编译项目后,可能都会报以下错误:


通过报错提示,这里如果出错的话,将compile.js名称改为gulpfile.js,并且,将文件内gulp运行的默认task改为"default"。

通过compile.js文件可知,默认的Laya构建方式是,使用gulp、browserify进行项目构建,tsify编译typscript,vinyl-source-stream用于将tsify构建的node stream转化为gulp能识别的stream文件。所以我们每次修改ts源码,都需要手动点击编译或者使用F8编译。并且,就Laya的3D示例项目,每次编译的时间基本在1s~2s。

3. 改进的Laya构建方式

对于web前端开发,可能都会配置webpack+webpack-hot-middleware之类进行代码热更新,开发web网页的流程基本就是:修改代码 -> 自动编译 -> 自动刷新,倘若有两个屏幕,开发者不需要去刷新浏览器、输入命令重新编译等机械重复的行为。既然Laya默认使用了browserify(其实browserify这几年更新已经很慢了),这里我们可以加入gulp.watch,观察src目录源文件,每当src下文件发生修改时,自动触发编译操作,相当于开发者不需要再按F8编译。

gulp.task("watch", ["default"], () => {
    gulp.watch("../src/**/*.ts", () => {
        gulp.run("default");
    });
});

但是这种方式,相当于gulp重新进行编译,实际编译速度依然不快。那么问题来了,有没有办法编译对时候,gulp只编译修改的那部分,从而加快编译速度?

4. 使用watchify监听文件变化并结合browserify-sync自动刷新网页

通过gulp官网可了解到watchify到相关使用,这里我们将代码改成,并结合browser-sync,带来自动刷新网页的功能。

const watchedBrowserify = watchify(browserify({
    basedir: workSpaceDir,
    debug: false,
    entries: ["src/Main.ts"],
    cache: {},
    packageCache: {}
}).plugin(tsify));

// 记录watchify编译ts的时候是否出错,出错则不刷新浏览器
let isBuildError = false; 
gulp.task("build", () => {
    return watchedBrowserify
        .bundle()
        .on("error", (...args) => {
           isBuildError = true;
            gutil.log(...args);
        })
        .pipe(source("bundle.js"))
        .pipe(gulp.dest(workSpaceDir + "/bin/js"));
    });

    gulp.task("watch", ["build"], () => {
        // 浏览器开发时自动刷新页面
        browserSync.init({
            port: 3002, // 监听端口,这里注意是否和其他项目冲突
            server: {
                watchFiles: ["../bin/"], // 刷新网页的监控目录
                baseDir: "../bin/"
            } 
    });
    //  watchify监听文件刷新
    watchedBrowserify.on("update", () => {
        isBuildError = false;
        runSequence("build", () => {
            if (!isBuildError) { // 没有编译错误时,刷新浏览器界面
                browserSync.reload();
            }
        });
    });
    // 打印watchify编译日志
    watchedBrowserify.on("log", gutil.log);
});
    

其中,runSequence用于同步执行gulp任务,多次实践,这里还需要加入变量isBuildError,在代码编译出错时,不执行browserSync的刷新。

最终效果:

编译速度快了近10倍,浏览器也能自动刷新了,开发游戏又更加愉快了~

欢迎下载源代码: https://github.com/derickweng...

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/105951.html

相关文章

  • 使Laya引擎开发微信游戏(上)

    摘要:本文由云社区发表使用一个简单的游戏开发示例,由浅入深,介绍了如何用引擎开发微信小游戏。前段时间正好抽空研究了一下这块的内容,现做一个总结,针对如何使用引擎开发微信小游戏给大家做一下介绍。 本文由云+社区发表 使用一个简单的游戏开发示例,由浅入深,介绍了如何用Laya引擎开发微信小游戏。 showImg(https://segmentfault.com/img/remote/146000...

    zhjx922 评论0 收藏0
  • 使Laya引擎开发微信游戏(下)

    摘要:点击进入发布界面,在发布平台选择微信小游戏,此时生成可以在微信开发者工具下运行的版本使用微信开发者工具打开,已经可以完美运行了。 本文由云+社区发表 6. 动画 6.1 创建伞兵对象 在src目录下创建一个新目录role,用来存放游戏中角色。 在role里创建一个伞兵Soldier.ts对象文件。 module role{ export class Soldier extend...

    ivan_qhz 评论0 收藏0
  • 使用Google Closure Compiler进行Js代码压缩

    摘要:是什么是一个使下载和运行更快的工具。它解析您的,分析它,删除死代码并重写并最小化剩下的内容。它还检查语法,变量引用和类型,并警告常见的陷阱。其他参数这里使用默认运行后就可以看到生成了压缩的文件了。其他的代码压缩工具 1.Google Closure Compiler是什么? The Closure Compiler is a tool for making JavaScript dow...

    young.li 评论0 收藏0
  • Laya项目)JS/TS语言zip压缩解压缩三方库及其使

    摘要:语言的项目里,要用对压缩过的文件解压缩。压缩二进制数据解压二进制数据好了。中可以直接保存对象到文件,但不行,所以构造成成通用的格式,压缩后保存。保存的配置文件叫,以的形式加载,然后再把字符串转成即可。 TS语言的Laya项目里,要用typescript对压缩过的文件解压缩。文件是AS3写的工具导出的。怎么办,上github找一个库,地址如下https://github.com/imay...

    SQC 评论0 收藏0
  • TS项目中使用Protobuf的解决方案

    摘要:因为放弃对的维护而又一次火热起来。流行的解决方案就是用。有中使用方式,实时解析方式解析方式静态代码方式事先导出的文件。早已有很多解决方案。好了,现在就可以在项目中使用的代码了输出 H5因为Adobe放弃对Flash Player的维护而又一次火热起来。目前有laya和egret两个H5游戏引擎,支持AS3、TS、JS三种语言开发。用H5开发游戏,绕不开与服务器的传输。流行的解决方案就是...

    hlcfan 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<