摘要:為何選擇引擎微信小游戲推出之后,很多公司也相應的進入到微信小游戲這個領域,現在市場上的游戲開發引擎,如都對小游戲有了很好的兼容性。
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...
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/105951.html
摘要:本文由云社區發表使用一個簡單的游戲開發示例,由淺入深,介紹了如何用引擎開發微信小游戲。前段時間正好抽空研究了一下這塊的內容,現做一個總結,針對如何使用引擎開發微信小游戲給大家做一下介紹。 本文由云+社區發表 使用一個簡單的游戲開發示例,由淺入深,介紹了如何用Laya引擎開發微信小游戲。 showImg(https://segmentfault.com/img/remote/146000...
摘要:點擊進入發布界面,在發布平臺選擇微信小游戲,此時生成可以在微信開發者工具下運行的版本使用微信開發者工具打開,已經可以完美運行了。 本文由云+社區發表 6. 動畫 6.1 創建傘兵對象 在src目錄下創建一個新目錄role,用來存放游戲中角色。 在role里創建一個傘兵Soldier.ts對象文件。 module role{ export class Soldier extend...
摘要:是什么是一個使下載和運行更快的工具。它解析您的,分析它,刪除死代碼并重寫并最小化剩下的內容。它還檢查語法,變量引用和類型,并警告常見的陷阱。其他參數這里使用默認運行后就可以看到生成了壓縮的文件了。其他的代碼壓縮工具 1.Google Closure Compiler是什么? The Closure Compiler is a tool for making JavaScript dow...
摘要:語言的項目里,要用對壓縮過的文件解壓縮。壓縮二進制數據解壓二進制數據好了。中可以直接保存對象到文件,但不行,所以構造成成通用的格式,壓縮后保存。保存的配置文件叫,以的形式加載,然后再把字符串轉成即可。 TS語言的Laya項目里,要用typescript對壓縮過的文件解壓縮。文件是AS3寫的工具導出的。怎么辦,上github找一個庫,地址如下https://github.com/imay...
摘要:因為放棄對的維護而又一次火熱起來。流行的解決方案就是用。有中使用方式,實時解析方式解析方式靜態代碼方式事先導出的文件。早已有很多解決方案。好了,現在就可以在項目中使用的代碼了輸出 H5因為Adobe放棄對Flash Player的維護而又一次火熱起來。目前有laya和egret兩個H5游戲引擎,支持AS3、TS、JS三種語言開發。用H5開發游戲,繞不開與服務器的傳輸。流行的解決方案就是...
閱讀 3486·2021-10-18 13:30
閱讀 2941·2021-10-09 09:44
閱讀 1964·2019-08-30 11:26
閱讀 2287·2019-08-29 13:17
閱讀 757·2019-08-29 12:17
閱讀 2246·2019-08-26 18:42
閱讀 471·2019-08-26 13:24
閱讀 2951·2019-08-26 11:39