Cocos引擎-方面：
小游戲概論，主要包括一些入門(mén)的相關(guān)知識(shí)。我們將內(nèi)容分成了6個(gè)部分，分別是：
1.如何正確了解小游戲拦盹？
2.小游戲開(kāi)發(fā)需要哪些知識(shí)？
3.小游戲開(kāi)發(fā)環(huán)境
4.小游戲的資源管理
5.HTML 5發(fā)布為小游戲
6.小結(jié)
一溪椎、正確理解小游戲
為方便大家理解普舆，第一部分先講一下小游戲到底是什么恬口。
相信這個(gè)群里的所有聽(tīng)眾基本上都不會(huì)對(duì)這幾款小游戲感到陌生。目前整體來(lái)看沼侣，第一波上線的小游戲更多以休閑類為主祖能。例如《跳一跳》，應(yīng)該是當(dāng)前最流行的產(chǎn)品蛾洛，雖然它只是一款單機(jī)养铸。
此外，除棋牌類游戲轧膘，能夠支持好友對(duì)戰(zhàn)功能的只有《歡樂(lè)坦克大戰(zhàn)》和《Q寵大樂(lè)斗》兩款產(chǎn)品钞螟。
當(dāng)然，對(duì)于棋牌來(lái)說(shuō)谎碍，小游戲可能也會(huì)為其帶來(lái)一波新浪潮鳞滨。近一段時(shí)間棋牌類游戲由于房卡棋牌等模式的興起也非常流行，小游戲上線后蟆淀，大家拉個(gè)群拯啦，發(fā)一個(gè)小游戲的鏈接，就可以進(jìn)行游戲了扳碍。這種便利會(huì)給棋牌行業(yè)帶來(lái)很大的增益提岔。
1.聊天入口。用戶可以將小游戲分享鏈接直接推到群聊或與朋友的會(huì)話中笋敞，直接將他們拉進(jìn)小游戲中。
2.搜索入口荠瘪。玩家可以通過(guò)下拉微信聊天記錄夯巷，或在專門(mén)的小程序頁(yè)面對(duì)特定小游戲進(jìn)行搜索。若想利用這個(gè)入口哀墓，游戲需要有較好的口碑趁餐，當(dāng)然如果名字起得太長(zhǎng)太難，可能也會(huì)影響這個(gè)入口的使用效果篮绰。
3.微信小游戲列表入口后雷。玩家可以去這個(gè)列表中去尋找、發(fā)現(xiàn)新的小游戲吠各。
4.朋友圈臀突。從我的直覺(jué)來(lái)看，這個(gè)入口與聊天入口將會(huì)是最重要的2個(gè)小游戲入口贾漏。但是通過(guò)群聊的聊天分享候学，我認(rèn)為是比朋友圈更重要的入口。也就是小游戲立項(xiàng)的時(shí)候務(wù)必纵散、務(wù)必要做好通過(guò)社交拉新用戶進(jìn)入游戲的設(shè)計(jì)梳码。
在小游戲里隐圾，除了游戲本身的邏輯開(kāi)發(fā)和引擎使用外，對(duì)微信目前開(kāi)放社交API的使用掰茶，以及怎樣去設(shè)計(jì)社交暇藏，都會(huì)對(duì)游戲的傳播效果造成影響。分享點(diǎn)的刺激是有講究的濒蒋，在早期游戲里盐碱，游戲更多是以“戰(zhàn)力”、“等級(jí)”這些數(shù)值向的設(shè)計(jì)分享點(diǎn)啊胶，而現(xiàn)在甸各，游戲分享點(diǎn)則更多在于“情感之上”，這些都是在游戲設(shè)計(jì)過(guò)程中值得思考的內(nèi)容焰坪。提醒一點(diǎn)趣倾，80后和90后觸發(fā)分享的情感點(diǎn)是不一樣的，我不能說(shuō)更多某饰，但是游戲制作人自己應(yīng)該加以揣摩儒恋。
回到小游戲上，在講技術(shù)之前黔漂，我們要去理解小游戲的趨勢(shì)架構(gòu)是如何的诫尽。小游戲不等于原生游戲，也不等于HTML5游戲【媸兀現(xiàn)在一些媒體經(jīng)常會(huì)講：“小游戲是H5游戲的春天牧嫉。”嚴(yán)格來(lái)說(shuō)减途，這么講不是太準(zhǔn)確酣藻。
標(biāo)準(zhǔn)的HTML5游戲是什么呢？標(biāo)準(zhǔn)H5游戲是Facebook Instant Games鳍置、愛(ài)微游辽剧、QQ空間的那些游戲 。這些是在瀏覽器里跑H5的游戲税产；但是小游戲本質(zhì)是Runtime游戲怕轿，它跟小程序類似，結(jié)構(gòu)是小程序+游戲庫(kù)API辟拷。
在這個(gè)架構(gòu)之上撞羽，會(huì)有更多優(yōu)勢(shì)。首先它會(huì)比H5游戲更穩(wěn)定梧兼；其次小游戲跳出重進(jìn)后放吩，用戶不用像在H5游戲里那樣進(jìn)行重新登錄；另外小游戲可以調(diào)用微信的原生用戶羽杰，在轉(zhuǎn)發(fā)渡紫、支付等方面也固定了接口到推，可以說(shuō)對(duì)整個(gè)微信生態(tài)建設(shè)是有很大幫助的。當(dāng)然對(duì)于我們來(lái)說(shuō)一定要注意的是惕澎，雖然小游戲的調(diào)試環(huán)境是在瀏覽器當(dāng)中莉测，但這只是其 HTML5兼容性的體驗(yàn)，它真正在微信當(dāng)中時(shí)是用 Runtime的唧喉。
我們自己很清楚H5和小游戲之間在技術(shù)結(jié)構(gòu)上的差異捣卤，但現(xiàn)在如果說(shuō)小游戲不是H5游戲又會(huì)被人噴，于是我們今天發(fā)明了一個(gè)新名詞：HTML5技術(shù)棧八孝。它包含了所有純H5和類H5的技術(shù)解決方案董朝。
這張圖我想表達(dá)的是，在原生游戲中干跛，可能還有一些游戲在用自研引擎來(lái)制作子姜，但在小游戲中，已經(jīng)沒(méi)有自研引擎的身影了楼入。所以不管是國(guó)內(nèi)的Cocos哥捕、Laya、Egret這些H5引擎嘉熊，還是用國(guó)外的Phaser遥赚、Createjs，基本上都是可以直接用的阐肤。
需要注意凫佛，特別是小公司，大家最好使用已經(jīng)被微信適配證明過(guò)的引擎孕惜，特別是現(xiàn)在微信小游戲開(kāi)發(fā)文檔只有中文版本御蒲，海外的引擎可能并不能幫助你多少，除非你的研發(fā)團(tuán)隊(duì)能吃透他們的英文文檔而且忍受帶時(shí)差的論壇技術(shù)支持诊赊。而且在這次上線的游戲中，除了華夏樂(lè)游與飛魚(yú)科技外府瞄，其他都是騰訊自研的碧磅，你不知道他們?cè)谘邪l(fā)過(guò)程中究竟踩了多少坑，改了多少東西遵馆。
對(duì)于3種游戲的對(duì)比鲸郊，我來(lái)嚴(yán)格列舉一下他們之中區(qū)別。首先货邓，他們的入口都不同秆撮，這也就代表了它們的用戶屬性是不同的。比如换况，可能很多小游戲用戶并不是原生游戲玩家职辨，作為非玩家它們對(duì)于游戲產(chǎn)品的需求也會(huì)與玩家不太一樣盗蟆，對(duì)于“VIP1-VIP15”、“首充大禮包”舒裤、“首充3倍”喳资，它們或許就不會(huì)那么敏感。當(dāng)然腾供，這些都是值得去繼續(xù)揣摩的事情仆邓。
在流量成本上，小游戲和HTML5的崛起有一定原因源于其低于原生游戲的流量成本伴鳖。實(shí)際上游戲品類沒(méi)有什么變化节值，變的是流量成本，當(dāng)某一模式的流量成本過(guò)高了榜聂，行業(yè)就會(huì)有動(dòng)力去挖掘一個(gè)新平臺(tái)搞疗，去獲取一批新的游戲用戶。PC端游到PC頁(yè)游峻汉，PC頁(yè)游到手機(jī)原生贴汪、再到手機(jī)頁(yè)游，表面上看是一件技術(shù)驅(qū)動(dòng)市場(chǎng)變化的事情休吠，但本質(zhì)上是流量成本驅(qū)動(dòng)技術(shù)迭代扳埂、進(jìn)而驅(qū)動(dòng)市場(chǎng)變化。這個(gè)本質(zhì)要理解清楚瘤礁。
在開(kāi)發(fā)的時(shí)候阳懂，CP也要注意性能的約束。純H5游戲在性能和占用內(nèi)存上都是約束性最高的柜思，所以如果往往H5游戲做小游戲移植版本岩调，不論用哪個(gè)引擎，適配工作都會(huì)進(jìn)展得相對(duì)順利赡盘。當(dāng)然需要注意号枕，諸如CSS、DOM是不能用于小游戲開(kāi)發(fā)的陨享。但是反過(guò)來(lái)葱淳，如果你移植一款手機(jī)原生游戲到微信小游戲，就得非常小心內(nèi)存使用的問(wèn)題了抛姑。
其實(shí)原生游戲移植到小游戲也有一些案例赞厕，比如《保衛(wèi)蘿卜》，但一定要注意定硝，在移植原生游戲過(guò)程中一定要注意性能和內(nèi)存上的問(wèn)題皿桑，如果控制不好很可能程序就會(huì)崩潰。其實(shí)有不少曾經(jīng)的客戶過(guò)來(lái)問(wèn)我，如果原生游戲是用C++這些語(yǔ)言寫(xiě)的诲侮，能不能直接移植到小游戲上镀虐。很遺憾，不行浆西，目前必須通過(guò)手工去翻譯粉私，因?yàn)榻裉煳⑿盘峁┑臉?biāo)準(zhǔn)接口只有JavaScript。
我出于個(gè)人技術(shù)傾向近零、項(xiàng)目歷史的原因诺核，非常強(qiáng)烈地不喜歡那些通過(guò)編譯器去轉(zhuǎn)化不同編程語(yǔ)言的方案，因?yàn)檫@些方案并不「自然」久信，表面上看是省了很多移植開(kāi)發(fā)量窖杀，但在調(diào)試和優(yōu)化階段會(huì)有無(wú)數(shù)的坑等著你。所以最優(yōu)的方案裙士，我仍然建議大家用 JavaScript 重新移植游戲入客，不論你的原生游戲是Cocos C++, Lua還是Unity的。
二.小游戲開(kāi)發(fā)商需要哪些知識(shí)腿椎？
接下來(lái)我來(lái)講述一下小游戲的相關(guān)知識(shí)桌硫，希望幫助大家能夠順利上手開(kāi)發(fā)。
這張圖是小游戲目前可以使用的技術(shù)棧啃炸。最上層是各家游戲引擎铆隘，經(jīng)過(guò)微信驗(yàn)證后，都是可以提供給大家嘗試的南用。中間一層是小游戲的底層膀钠，是小游戲所借助的HTML5的技術(shù)棧。
為什么說(shuō)它是HTML5技術(shù)棧裹虫？因?yàn)樾∮螒虿](méi)有完全使用HTML 5標(biāo)準(zhǔn)肿嘲，它只是模擬這些的接口，從而更好地完成HTML 5向小游戲的移植工作筑公。最下面這部分是微信自己的API雳窟，之后會(huì)對(duì)它進(jìn)行展開(kāi)講解。
首先是底層的技術(shù)匣屡，它包括JavaScript代碼和Canvas 2D涩拙、WebGL 1.0的API砚蓬。這2個(gè)API都是和Web上的API是一致的睁本，這也是微信想要拉攏H5開(kāi)發(fā)者所作出的努力福也。微信同樣也很快地與國(guó)內(nèi)的幾個(gè)主要引擎商進(jìn)行了合作，讓各家引擎可以第一時(shí)間支持微信小游戲的發(fā)布虾宇。同時(shí)微信小游戲Runtime也開(kāi)發(fā)了一個(gè)Adapter，并且移植了一些海外諸如Phaser, Three.JS, CreatreJS等H5引擎到小游戲環(huán)境里面如绸。
上層我們建議大家通過(guò)游戲引擎來(lái)開(kāi)發(fā)嘱朽，這是出于對(duì)成本的考量旭贬，因?yàn)橛螒蛞婵梢詾榇蠹冶M可能縮短研發(fā)周期、降低項(xiàng)目成本和風(fēng)險(xiǎn)√掠荆現(xiàn)在微信所試驗(yàn)過(guò)的就是上圖所列出的6個(gè)引擎稀轨，這些大家都是可以去嘗試的。
除此之外還有微信小游戲的SDK岸军，這些雖然是是微信所提供最底層的東西奋刽，但實(shí)際上是除去引擎外大家需要去關(guān)注的部分。在游戲玩法邏輯研發(fā)之外艰赞，這些接口都是要去研究的佣谐，這才能讓游戲擁有更好的社交玩法。具體這些接口的詳細(xì)功能大家可以參閱微信的文檔方妖。目前可以看到狭魂，僅小游戲所擁有的直接分享功能和即點(diǎn)即玩的特性讓它在傳播和進(jìn)入門(mén)檻上都擁有極大的潛力。
這是《跳一跳》和《星途Go》好友排行榜的例子党觅，包括游戲里的排行榜和每個(gè)關(guān)卡的排行榜雌澄。
這個(gè)例子是《坦克大戰(zhàn)》中的邀請(qǐng)對(duì)戰(zhàn)，當(dāng)你把邀請(qǐng)發(fā)到群里后杯瞻，進(jìn)入的玩家可以選擇陣營(yíng)镐牺，形成3對(duì)3模式。
直接接受邀請(qǐng)是微信所做的最大創(chuàng)新又兵。在原生游戲中任柜，玩家點(diǎn)擊邀請(qǐng)鏈接后首先要下載安裝，之后還要互加好友沛厨，隨后才可以進(jìn)行匹配宙地，整體流程路徑很長(zhǎng)，流量轉(zhuǎn)化成本也很高逆皮。然而在小游戲場(chǎng)景下宅粥，當(dāng)你的好友點(diǎn)開(kāi)你的分享鏈接后，可以直接進(jìn)入游戲电谣，這是一個(gè)突破秽梅，大家需要在這方面考慮更多。
我剛剛仔細(xì)檢查了一下微信小游戲的API剿牺，有轉(zhuǎn)發(fā)邀請(qǐng)企垦，但是并沒(méi)有獲取其他微信好友昵稱、備注名晒来、分?jǐn)?shù)的排行榜API钞诡。大家可以再檢查確認(rèn)一下，如果的確是在今天沒(méi)有這個(gè)公開(kāi)的API，那么游戲設(shè)計(jì)為好友排行榜競(jìng)爭(zhēng)的玩法時(shí)候則需要注意一下荧降。不過(guò)目前在騰訊游戲中都可以使用接箫，未來(lái)這個(gè)API也有可能會(huì)出現(xiàn)。
三.小游戲開(kāi)發(fā)環(huán)境
接下來(lái)我會(huì)進(jìn)入更加技術(shù)的一個(gè)環(huán)節(jié)朵诫，讓大家更了解如何去適應(yīng)小游戲的開(kāi)發(fā)環(huán)境辛友。
這張圖是小游戲的運(yùn)行框架，它不是微信官方給出的剪返，是我們自己分析得出的废累。首先，最底層是iOS安卓的硬件随夸、系統(tǒng)等內(nèi)容九默，這些提供了系統(tǒng)層級(jí)別接口。微信在這基礎(chǔ)上開(kāi)發(fā)了微信安卓版和iOS版宾毒，其中包含了包括用戶驼修、支付、文件诈铛、多媒體等各種模塊乙各。
然而在在這樣一個(gè)原生應(yīng)用中，沒(méi)有瀏覽器的加持H5程序又怎樣運(yùn)行JavaScript代碼呢幢竹？這是通過(guò)JS VM在安卓上集成V8引擎耳峦，在iOS上集成JavaScript Core引擎去執(zhí)行JS代碼的。
微信僅僅執(zhí)行JS代碼還不足以讓開(kāi)發(fā)者的小程序運(yùn)行起來(lái)焕毫，因?yàn)殚_(kāi)發(fā)者所調(diào)用的用戶轉(zhuǎn)發(fā)文件系統(tǒng)這些接口都是不存在于JS VM中的蹲坷。實(shí)際上，它是通過(guò)綁定的接口來(lái)講微信原生接口橋接到JS接口上的邑飒。當(dāng)你調(diào)用這些JS接口時(shí)循签，實(shí)際上就是在調(diào)用原生接口來(lái)達(dá)成功能。如果大家對(duì)綁定技術(shù)感興趣疙咸，可以去關(guān)注我們開(kāi)源的JSB技術(shù)县匠，這也是目前游戲引擎當(dāng)中唯一開(kāi)源的實(shí)現(xiàn)技術(shù)。
這里我們就不深入細(xì)講了撒轮，繼續(xù)討論微信小游戲是怎樣提供接近于瀏覽器環(huán)境以及怎樣跟游戲引擎相結(jié)合乞旦。
這張圖比上一張多了一個(gè)Adapter，我將小游戲總結(jié)為2部分：圖形渲染API以及微信API题山。右邊的Adapter是微信官方提供的適配腳本兰粉，它提供了右邊2個(gè)API不存在的一些瀏覽器API，這些往往是大家開(kāi)發(fā)游戲所依賴的API顶瞳。比如亲桦，創(chuàng)建Image崖蜜，這樣才可以使用貼圖；Audio是播放功能客峭；LocalStorage是存儲(chǔ)；使用WebSocket來(lái)做網(wǎng)絡(luò)調(diào)用等抡柿。
在小游戲原始環(huán)境的圖形渲染API和微信API的基礎(chǔ)上舔琅，加上Adapter之后，就跟瀏覽器的環(huán)境非常接近了洲劣。
在此基礎(chǔ)上备蚓，微信提供了一個(gè)完整的Runtime，接近于瀏覽器的環(huán)境囱稽，但并不等同郊尝。游戲引擎的工作就是進(jìn)一步抹平瀏覽器和微信環(huán)境的差異。比如在Cocos引擎中战惊，你可以直接切換HTML5版本和小游戲版本流昏，不需要做任何游戲代碼上的修改。也就是說(shuō)你用JS寫(xiě)的游戲吞获，一份代碼就可以同時(shí)在小游戲平臺(tái)和原生平臺(tái)上運(yùn)行况凉。
總結(jié)一下，微信的三大接口：
1.渲染接口
2.微信功能接口
3.Adapter接口
除了抹除瀏覽器和小游戲之間的差異外各拷，游戲引擎還可以帶來(lái)成本上的巨大降低刁绒。就像上圖寫(xiě)的，成本降低主要來(lái)自于3個(gè)方面：
1.Framework中烤黍，當(dāng)我們游戲引擎封裝了更高層的API知市，開(kāi)發(fā)游戲會(huì)更加便利，這就使得人力成本降低
2.編輯器層面中速蕊，一個(gè)好的編輯器可以明顯提高程序嫂丙、美術(shù)、策劃之間的協(xié)同效率互例。
3.在兼容性層面中奢入，游戲引擎帶來(lái)的設(shè)備兼容性和穩(wěn)定運(yùn)行效率可以降低大家的維護(hù)成本，加上剛才提到的跨平臺(tái)能力媳叨，可以給大家?guī)?lái)更強(qiáng)大的渠道和流量腥光。
所有這些人力成本、維護(hù)成本的降低以及跨平臺(tái)所帶來(lái)的豐富流量糊秆，可以讓大家的項(xiàng)目以更低的開(kāi)發(fā)成本完成游戲武福，繼而盈利。
當(dāng)你希望在微信小游戲環(huán)境中使用第三方庫(kù)的時(shí)候痘番，很多第三方庫(kù)會(huì)遇到問(wèn)題捉片。比如JQuery平痰，它就使用了DOM的API，DOM API在微信小游戲中是不存在的伍纫，而且也無(wú)法模擬宗雇，因?yàn)楦揪蜎](méi)有DOM樹(shù)。
純JS的第三方庫(kù)是絕對(duì)不會(huì)有問(wèn)題的莹规。當(dāng)然赔蒲，有一些第三方庫(kù)使用ES6來(lái)編寫(xiě)的，這個(gè)時(shí)候你要注意去掉“ES6轉(zhuǎn)ES5”的標(biāo)簽良漱，在微信開(kāi)發(fā)者工具的詳情頁(yè)面中可以找到舞虱。總之母市，原則是使用DOM API的第三方庫(kù)請(qǐng)不要使用矾兜，JS的第三方庫(kù)可以隨意使用。
依賴于網(wǎng)絡(luò)的第三方庫(kù)患久，像Protocol Buffer椅寺，這些在加載的部分是需要定制的，需要加載部分API適配到微信小游戲所適配的API上墙杯，比如wx.request.downloadFile配并。
四.小游戲的資源管理
第四個(gè)部分，我想分享的是小游戲的資源管理高镐，這是小游戲目前和瀏覽器環(huán)境差異最大的另一個(gè)方面溉旋。
首先為大家介紹一下小游戲資源管的分布方式。大家如果使用過(guò)開(kāi)發(fā)者工具的話會(huì)注意到嫉髓，當(dāng)你開(kāi)發(fā)一個(gè)小游戲的時(shí)候观腊，你如果點(diǎn)預(yù)覽，它會(huì)有一個(gè)上傳的過(guò)程算行，之后掃它提供的二維碼就可以測(cè)試這個(gè)小游戲梧油。實(shí)際上這個(gè)上傳的過(guò)程就是將你的小游戲包上傳到CDN內(nèi)。在你的用戶掃這個(gè)二維碼時(shí)州邢，實(shí)際上是從微信的CDN下載這個(gè)小游戲包到他的手機(jī)上儡陨，并執(zhí)行。
這是最簡(jiǎn)單的版本量淌，讓我們來(lái)看一下相對(duì)復(fù)雜一點(diǎn)的骗村。
微信小游戲?yàn)榱四軌蛱嵘装虞d速度，將包體限制在了4M呀枢，這顯然對(duì)很多HTML5游戲來(lái)說(shuō)是不足夠的胚股。所以大家就需要將一些資源文件放到自己的遠(yuǎn)程服務(wù)器中。也就是這張圖所體現(xiàn)的訪問(wèn)關(guān)系：當(dāng)用戶掃你二維碼的時(shí)候裙秋，會(huì)讓小游戲包下載到微信琅拌，然后微信內(nèi)小游戲包代碼在執(zhí)行過(guò)程中會(huì)請(qǐng)求遠(yuǎn)程服務(wù)器資源缨伊。
不同用戶會(huì)將不同的資源下載到他自己的沙盒環(huán)境當(dāng)中，并且不同小游戲之間的資源緩存也是相互分割的进宝。這樣就可以保障不同用戶和不同小游戲間的資源不會(huì)互相沖突刻坊。
H5開(kāi)發(fā)者會(huì)非常在意首場(chǎng)景的加載體驗(yàn)，微信小游戲也非常需要注意這一點(diǎn)党晋。小游戲在下載過(guò)程中會(huì)將包首先完整下載紧唱，然后才會(huì)進(jìn)行詳細(xì)的代碼完整初始化。在初始化之后再去加載遠(yuǎn)程資源隶校，再去啟動(dòng)場(chǎng)景。
這與瀏覽器有很大的區(qū)別蛹锰。瀏覽器永遠(yuǎn)是按需加載深胳，當(dāng)它需要一個(gè)資源的時(shí)候才會(huì)加載一個(gè)資源。所以大家一定要在小游戲當(dāng)中控制好自己的包體大小铜犬。
經(jīng)過(guò)一段時(shí)間研究并與微信團(tuán)隊(duì)進(jìn)行溝通后舞终，我們得出了一個(gè)目前較好的資源解決方案。我們會(huì)將代碼包放在小游戲包內(nèi)癣猾，所有的資源都放在開(kāi)發(fā)者的Server上敛劝。這樣，當(dāng)代碼請(qǐng)求某個(gè)資源時(shí)纷宇，就會(huì)動(dòng)態(tài)進(jìn)行動(dòng)態(tài)下載夸盟，這樣才能滿足按需加載的需求。
所以這張圖和上面那種圖沒(méi)有太大區(qū)別像捶，唯一需要注意的是上陕，在微信CDN上儲(chǔ)存代碼包，在開(kāi)發(fā)者Server中儲(chǔ)存詳細(xì)的小游戲資源拓春。值得注意的是释簿，你的代碼是不能夠放到自己的Server上的，微信小游戲禁止在微信CDN以外的域名中加載它的代碼硼莽。
接下來(lái)我解釋一下Cocos Creator是加載微信小游戲時(shí)的資源策略庶溶。首先，我們同樣從微信的CDN當(dāng)中下載代碼包懂鸵。下載完成后偏螺，當(dāng)你的代碼需要某些資源時(shí)，我們會(huì)先從大包里去查找矾瑰。若內(nèi)置資源沒(méi)有砖茸，我們會(huì)去查找資源緩存（稍后解釋）。如果資源緩存也沒(méi)有殴穴，我們會(huì)從遠(yuǎn)程服務(wù)器去下載凉夯。數(shù)據(jù)下載后货葬，我們會(huì)將數(shù)據(jù)自動(dòng)緩存到資源環(huán)境中。這樣便形成了一個(gè)緩存機(jī)制劲够。
我們這樣做的原因是震桶，小游戲環(huán)境是實(shí)際上是沒(méi)有類似瀏覽器的緩存和資源過(guò)期機(jī)制的。 在瀏覽器中征绎，當(dāng)用戶請(qǐng)求一個(gè)頁(yè)面時(shí)蹲姐，第一次請(qǐng)求會(huì)下載所有資源，一段時(shí)間后人柿，第二次請(qǐng)求時(shí)它會(huì)自動(dòng)檢查所有資源是否過(guò)期柴墩，如果沒(méi)有過(guò)期則會(huì)從本地緩存空間中下載該資源，這對(duì)于開(kāi)發(fā)者和用戶都是透明的凫岖。但小游戲沒(méi)有這樣的機(jī)制江咳，所以當(dāng)你的信息再去請(qǐng)求資源時(shí)，每次都會(huì)重新下載該資源哥放，不管你這個(gè)資源此前下載過(guò)多少次歼指。所產(chǎn)生耗電量和加載時(shí)間對(duì)于用戶來(lái)說(shuō)都是不可接受的，所以我們?cè)贑ocos Creator當(dāng)中內(nèi)建了一個(gè)更完整的解決方案甥雕。
如何去處理資源過(guò)期的問(wèn)題呢踩身？如果說(shuō)資源URL是完全一致的話，在邏輯當(dāng)中是不會(huì)下載新資源的社露，這就會(huì)導(dǎo)致Bug挟阻。我們所推薦的解決方案是，在Cocos Creator打包時(shí)會(huì)有一個(gè)“MD5 CASH”選項(xiàng)呵哨，勾選后我們會(huì)為所有文件名打上MD5碼赁濒。這樣當(dāng)文件更新后，文件名就會(huì)變化孟害，這就一款為服務(wù)端URL會(huì)變化拒炎，這時(shí)代碼包在請(qǐng)求時(shí)就會(huì)被認(rèn)定為一個(gè)新的資源，這樣就完成了資源緩存和更新機(jī)制挨务。
同時(shí)我們還提供了API讓開(kāi)發(fā)者刪除資源緩存击你，這樣在大版本更新時(shí)，如果緩存資源過(guò)多谎柄，你就可以先去清除緩存丁侄，然后再去更新所有資源。
當(dāng)然朝巫，用戶如果覺(jué)得我們的資源管理方案不太適合你鸿摇，你也可以去自己設(shè)計(jì)一個(gè)合適自己的資源管理方案。這些方案所以來(lái)的API微信都有提供劈猿，即微信文件API和微信網(wǎng)絡(luò)API拙吉。網(wǎng)絡(luò)API可以讓用戶將文件下載到緩存空間中潮孽；文件API可以支持文件的重命名、刪除等操作筷黔。
五.HTML5 游戲發(fā)布為小游戲
相信很多朋友關(guān)注的是往史，如果我已經(jīng)有H5游戲了，我怎樣把這個(gè)H5游戲發(fā)布到小游戲當(dāng)中佛舱。這個(gè)其實(shí)是微信團(tuán)隊(duì)非常關(guān)注的事情椎例，他們希望大家的H5游戲可以去針對(duì)微信做了社交玩法后發(fā)布到微信小游戲環(huán)境當(dāng)中。我們繼續(xù)以Cocos Creator為例來(lái)看如何將已有游戲發(fā)布到小游戲请祖。
這張圖是我們編輯器的截圖订歪，在這里面可以去編輯場(chǎng)景、UI肆捕，可以進(jìn)行資源的管理陌粹、發(fā)布、打包福压。
用Cocos發(fā)布小程序需要這幾個(gè)步驟：
1.你可以從你的小程序公眾平臺(tái)上找到App ID并輸入，然后將發(fā)布平臺(tái)修改為WechatGame或舞。
2.點(diǎn)擊右下角build構(gòu)建荆姆，你就會(huì)看到下面這個(gè)界面：
3.出現(xiàn)該畫(huà)面就說(shuō)明在Cocos Creator構(gòu)建完成后，就可以直接在微信開(kāi)發(fā)者工具里看到你的項(xiàng)目了映凳。這個(gè)過(guò)程不需要用戶去修改任何配置文件胆筒。
4.當(dāng)調(diào)起微信開(kāi)發(fā)者工具之后，你就可以做預(yù)覽操作诈豌，在手機(jī)上測(cè)試微信小游戲了仆救。
六.小結(jié)
總結(jié)一下知識(shí)點(diǎn)。
首先矫渔，微信提供游戲上的支持彤蔽，并且提供了龐大用戶基礎(chǔ)和用戶分享API，這肯定會(huì)催生出完全不同的游戲體驗(yàn)庙洼。我認(rèn)為社交性玩法在微信上會(huì)有更大的發(fā)揮空間顿痪，會(huì)比以往的社交平臺(tái)都要大。
其次油够，我們講到了微信小游戲和瀏覽器環(huán)境的2大差異：API支持和資源加載蚁袭。
另外，我們推薦大家使用游戲引擎石咬，加速游戲的開(kāi)發(fā)和迭代揩悄，從而降低產(chǎn)品風(fēng)險(xiǎn)。
同時(shí)鬼悠，小游戲删性、手機(jī)頁(yè)游亏娜、PC頁(yè)游其實(shí)都依賴于HTML5的技術(shù)棧，包括Cocos Creator原生發(fā)布也都依賴于此镇匀。HTML5引擎提供了基于HTLM5技術(shù)棧的跨平臺(tái)發(fā)布照藻，為大家提供了更多選擇和可能性。
今天我們所說(shuō)的HTML 5技術(shù)棧包括手機(jī)頁(yè)游汗侵、手機(jī)原生和PC頁(yè)游幸缕。手機(jī)頁(yè)游包括QQ空間、微信小游戲晰韵、厘米秀這些Runtime方案发乔，F(xiàn)acebook Instant Games這種純H5方案以及愛(ài)微游梳星、瘋狂游樂(lè)場(chǎng)這些H5渠道等薯嗤。手機(jī)原生包括各種JSB、Runtime打包游戲拥峦、微端游戲等只恨。第三個(gè)是PC頁(yè)游译仗，因?yàn)镕lash之前宣布2020年停止更新，所以很多PC頁(yè)游上的Flash游戲現(xiàn)在也在轉(zhuǎn)成HTML5游戲官觅。
簡(jiǎn)單計(jì)算一下纵菌，我用手機(jī)原生游戲市場(chǎng)規(guī)模除以PC端游規(guī)模，再乘以PC頁(yè)游規(guī)模休涤，粗略算出手機(jī)頁(yè)游的市場(chǎng)空間可以打到每年280億人民幣咱圆。如果說(shuō)，手機(jī)頁(yè)游和PC頁(yè)游互為此消彼長(zhǎng)的話功氨，向上取整則可能會(huì)有500億的市場(chǎng)空間序苏。中國(guó)游戲產(chǎn)業(yè)規(guī)模占全球游戲市場(chǎng)的25%，當(dāng)然這個(gè)數(shù)還在上升捷凄，算上這一方面忱详，H5技術(shù)棧可以支撐全球手機(jī)頁(yè)游 + 部分手機(jī)原生 + PC頁(yè)游市場(chǎng)跺涤，理論市場(chǎng)容量上限可以達(dá)到2000億人民幣踱阿。所以說(shuō)，現(xiàn)在做這方面的技術(shù)儲(chǔ)備其實(shí)是非常有價(jià)值的钦铁。
Q&A環(huán)節(jié)
1.作為個(gè)人開(kāi)發(fā)者软舌，利用微信的用戶和支付功能，而不是將微信作為一個(gè)引流工具牛曹，能否從游戲中獲得較好的收益佛点？另外，Cocos和微信支付對(duì)接中是否有坑？
關(guān)于支付：微信小游戲目前還沒(méi)有與iOS打通超营，具體什么時(shí)候打通我也不太清楚鸳玩。所以說(shuō)能否從游戲中獲得較好的收益，這個(gè)問(wèn)題應(yīng)該由微信來(lái)回答演闭，因?yàn)檫@些數(shù)據(jù)如今都是保密的不跟，包括DAU、留存率米碰、安卓目前的收益率窝革、用戶畫(huà)像，像用戶畫(huà)像是需要你們?nèi)プ约鹤聊サ摹?br>
關(guān)于引流：我不確認(rèn)微信是否允許這么做吕座。但這肯定不是微信小游戲團(tuán)隊(duì)希望看到的結(jié)果
關(guān)于Cocos和微信支付對(duì)接：這種支付SDK對(duì)接根本就不是我關(guān)心的層面虐译。就Cocos來(lái)說(shuō)，與微信對(duì)接沒(méi)有什么坑吴趴，只是純粹的SDK調(diào)用漆诽。我相信包括其他引擎也不會(huì)有什么坑，因?yàn)閷?shí)在是太簡(jiǎn)單了锣枝。
2.微信小游戲的優(yōu)勢(shì)和劣勢(shì)有哪些厢拭？如何繞開(kāi)劣勢(shì)？
優(yōu)勢(shì)在于其龐大用戶基數(shù)與其社交性玩法撇叁，流量成本會(huì)很低蚪腐。目前來(lái)看，若想造成病毒式的傳播税朴，目前可能也就在Facebook、微信家制、QQ這種大的社交平臺(tái)上可以比較容易地實(shí)現(xiàn)正林。
當(dāng)前劣勢(shì)可能還是在于對(duì)非游玩家特點(diǎn)的理解上。我認(rèn)為大部分微信小游戲用戶很可能原來(lái)并不是傳統(tǒng)意義上的游戲玩家颤殴。這些玩家的游戲化需求觅廓、情感、樂(lè)趣涵但，都和我們以往理解的手游玩家不一樣杈绸。當(dāng)然我認(rèn)為也不能把這一點(diǎn)完全看成劣勢(shì)，因?yàn)榫退闶欠怯螒蛲婕乙彩怯杏螒蚧枨蟮陌痢?wèn)題關(guān)鍵在于怎樣正確理解瞳脓、切入、服務(wù)這些大量的非游戲用戶〕合溃現(xiàn)在小游戲剛剛起步劫侧，所有人都在摸索這件事情，誰(shuí)能先利用好這個(gè)平臺(tái)的用戶特點(diǎn)，誰(shuí)就能成為這個(gè)新領(lǐng)域的巨頭烧栋。
3.目前包括已上線的十幾款小游戲都是以輕度休閑為主写妥，處于試水階段，如何看待重度網(wǎng)游在小程序的發(fā)展?jié)摿颓熬埃?br>
我從2個(gè)方向來(lái)講审姓。
首先珍特，其實(shí)在PC頁(yè)游發(fā)展上也可以看到，都是從休閑游戲（偷菜搶車(chē)位魔吐、抓奴隸）開(kāi)始的扎筒，再將用戶培養(yǎng)到一定程度后才慢慢出現(xiàn)重度頁(yè)游。手機(jī)頁(yè)游也是如此画畅，不要想著第一天就可以直接跳躍到重度游戲砸琅。行業(yè)發(fā)展規(guī)則必然是要先去培養(yǎng)和教育用戶，然后再過(guò)渡到做中度轴踱、重度游戲症脂，我認(rèn)為不會(huì)有非常快的跳躍淫僻。
其次诱篷，微信小游戲很多玩家都是非游戲玩家，他們目前對(duì)于重度游戲可能并不會(huì)很感冒雳灵。如果是重度游戲玩家棕所，他為什么要去玩小游戲？到底小游戲用戶里有多少是重度玩家悯辙？重度玩家為什么要玩微信小游戲琳省，而不是已有的《傳奇霸業(yè)》《奇跡MU覺(jué)醒》等重度的微信精品游戲，理由是什么躲撰？這現(xiàn)在都是需要去摸索和探討的問(wèn)題针贬。其實(shí)就算是Facebook Instant Games目前也是主要由輕度休閑游戲組成的。
其實(shí)就現(xiàn)在PC平臺(tái)來(lái)看拢蛋，目前很多PC端游的品類也沒(méi)有完全移到頁(yè)游上面桦他，典型如FPS、MOBA游戲谆棱，在PC頁(yè)游上是看不到的快压。平臺(tái)屬性還是天然就決定了的。端游和PC端游的用戶場(chǎng)景是不同的垃瞧，像之前很多掛機(jī)類頁(yè)游之所以能崛起蔫劣，就是因?yàn)樵诤芏鄨?chǎng)景下用戶不具備安裝客戶端的條件，同時(shí)也無(wú)法投入過(guò)多精力去進(jìn)行端游个从，比如在辦公室中拦宣。目前來(lái)看，手機(jī)原聲游戲和手機(jī)頁(yè)游的用戶場(chǎng)景確實(shí)有所重疊，但這都需要進(jìn)一步地探討并優(yōu)化鸵隧。
4.小程序?qū)Τ跏及笮∠拗票容^嚴(yán)格绸罗，目前看官方的《四川麻將》感覺(jué)很粗糙，如何突破這個(gè)限制豆瘫？
初始包大小限制就是4M珊蟀。粗不粗糙和初始包大小是沒(méi)有關(guān)系的，你可以首場(chǎng)景加載4M初始包 + 10M資源外驱，只不過(guò)加載速度會(huì)慢而已育灸，你的代碼加載更多也沒(méi)有問(wèn)題。我認(rèn)為可能《四川麻將》粗糙的原因可能在于開(kāi)發(fā)者更多考慮了用戶的等待時(shí)間體驗(yàn)昵宇。我們也是建議盡量控制首場(chǎng)景的大小磅崭，在之后的游戲中逐漸加載更多資源，為用戶提供一種漸進(jìn)加載的游戲體驗(yàn)瓦哎。
5.微信小游戲不支持熱更新了嗎砸喻？
熱更新在 HTML 5 游戲中是不存在的，因?yàn)槭菦](méi)有本地文件的蒋譬，你永遠(yuǎn)可以更新自己的服務(wù)器內(nèi)容割岛，讓用戶得到更新的資源。對(duì)于小游戲來(lái)說(shuō)最關(guān)鍵的是犯助，你能不能熱更新你的代碼包癣漆。你的代碼包會(huì)存儲(chǔ)在微信CDN中，你必須向微信CDN提交更新申請(qǐng)剂买，至于具體的審核過(guò)程惠爽，還需要看后面微信官方所給出的具體方案。
6.小游戲內(nèi)存控制在多少比較合適瞬哼？
這需要看用戶手機(jī)的硬件情況婚肆，開(kāi)發(fā)者可以做的就是盡量控制不要讓內(nèi)存占用持續(xù)增長(zhǎng)，維持在某一個(gè)峰值以下倒槐。我認(rèn)為控制在100M以下比較安全。H5游戲一般是控制在150M以內(nèi)附井，200M也是可以跑讨越，但不安全。安卓一般內(nèi)存會(huì)比蘋(píng)果手機(jī)要大永毅，所以在測(cè)試的時(shí)候優(yōu)先測(cè)試蘋(píng)果手機(jī)把跨，尤其是 iPhone 6，如果沒(méi)有崩潰現(xiàn)象沼死，基本上就是可以了着逐。
Laya引擎-方面：
導(dǎo)語(yǔ)：使用一個(gè)簡(jiǎn)單的游戲開(kāi)發(fā)示例，由淺入深，介紹了如何用Laya引擎開(kāi)發(fā)微信小游戲耸别。
在支持微信小游戲的游戲引擎中健芭，Cocos，Egret秀姐，Laya都對(duì)小游戲的開(kāi)發(fā)提供了很多強(qiáng)大的支持慈迈。前段時(shí)間正好抽空研究了一下這塊的內(nèi)容，現(xiàn)做一個(gè)總結(jié)省有，針對(duì)如何使用Laya引擎開(kāi)發(fā)微信小游戲給大家做一下介紹痒留。
游戲主題：主角不是跳傘的玩家，而是地面的炮手蠢沿，大炮要把跳傘的傘兵用大炮一個(gè)個(gè)都消滅掉伸头。
1. 如果不用引擎會(huì)怎樣？
1.1 Canvas了解下
微信小游戲提供了canvas這個(gè)游戲核心組件舷蟀。利用Canvas可以在畫(huà)布上畫(huà)出文字恤磷、圖形、圖像等等雪侥。
不過(guò)講微信小游戲之前碗殷，得先說(shuō)說(shuō)H5，在H5時(shí)代獲取canvas對(duì)象非常簡(jiǎn)單速缨，如下圖：
var canvas=document.getElementById("myCanvas");
var ctx=canvas.getContext("2d");
常用的API：
ctx.drawImage(img,sx,sy,swidth,sheight,x,y,width,height); //繪制圖片
ctx.fillText(text,x,y,maxWidth); //繪制文字
ctx.rect(x,y,width,height); //繪制矩形
ctx.clearRect(x,y,width,height);//清除矩形內(nèi)像素
ctx.scale(scalewidth,scaleheight);//縮放
ctx.rotate(angle);//旋轉(zhuǎn)角度
锌妻。。旬牲。仿粹。
微信小游戲里，也提供了canvas對(duì)象原茅，只不過(guò)獲取接口變了：
wx.createCanvas()
其他H5環(huán)境下有的Canvas API吭历，微信環(huán)境里也都有。
1.2 動(dòng)畫(huà)的原理
Canvas只是一個(gè)2D的畫(huà)布擂橘，要做一個(gè)游戲晌区，動(dòng)畫(huà)總不能少吧？要讓圖片能動(dòng)起來(lái)通贞，這又是怎么做到的呢朗若？請(qǐng)看下圖：
好吧，動(dòng)畫(huà)其實(shí)就是不斷畫(huà)圖片昌罩，然后擦除哭懈，再畫(huà)圖片，再擦除的循環(huán)過(guò)程茎用，肉眼看起來(lái)遣总，那就是動(dòng)起來(lái)了睬罗。
在古老的電影膠片時(shí)代，我們看到的電影旭斥，就是一張一張連續(xù)幀的膠片組成的容达，最后投射到大屏幕上，變成了我們看到的電影琉预。
1.3 動(dòng)畫(huà)性能優(yōu)化
但是董饰，動(dòng)畫(huà)是講究幀率的，一般如果能達(dá)到每秒60幀圆米，那就和電影一樣是很流暢的動(dòng)畫(huà)效果了卒暂。計(jì)算公式：1000ms/60fps=16.67ms，這就要求我們每次動(dòng)畫(huà)里的業(yè)務(wù)邏輯計(jì)算娄帖，都要16.6ms里完成也祠，不能影響下一幀的顯示，否則就是卡頓近速，也就被人說(shuō)這個(gè)游戲好卡诈嘿，性能好差了。
知道原理了削葱，性能優(yōu)化具體怎么做呢奖亚？
Canvas分層
有些游戲中，背景是不變的析砸，為了提高性能昔字，可以把游戲背景抽離出一個(gè)單獨(dú)的canvas，這樣首繁，在畫(huà)面發(fā)生變化的時(shí)候作郭，不需要重繪整個(gè)背景，只需要繪制變化的那部分就可以弦疮。
減少API調(diào)用
每次的ctx的api調(diào)用夹攒，都是有性能消耗的，所以胁塞，盡量減少每幀的api調(diào)用次數(shù)咏尝，具體怎么減少，就要看業(yè)務(wù)需求了啸罢。
圖片預(yù)裁剪
圖片的裁剪過(guò)程编检，也是有性能消耗的，我們可以把裁剪的圖片預(yù)先存起來(lái)伺糠，之后在繪制的時(shí)候蒙谓，直接從內(nèi)存里拿斥季，而不需要每次都重新裁剪训桶。
離屏繪制
直接操作上屏的canvas累驮，性能是很差的，尤其是有單幀繪制操作很多的時(shí)候舵揭，性能下降更明顯谤专。 這個(gè)時(shí)候，我們可以預(yù)先創(chuàng)建一個(gè)離屏的canvas午绳，預(yù)先在這個(gè)canvas完成這一幀要繪制的所有動(dòng)作置侍，最后一次性的把這個(gè)離屏canvas繪制到上屏canvas中。
離屏繪制
直接操作上屏的canvas拦焚，性能是很差的蜡坊，尤其是有單幀繪制操作很多的時(shí)候，性能下降更明顯赎败。 這個(gè)時(shí)候秕衙，我們可以預(yù)先創(chuàng)建一個(gè)離屏的canvas，預(yù)先在這個(gè)canvas完成這一幀要繪制的所有動(dòng)作僵刮，最后一次性的把這個(gè)離屏canvas繪制到上屏canvas中据忘。
當(dāng)然還有很多其他更多的技巧和手段來(lái)提升canvas的性能，在這樣的情況下如果我們直接使用canvas去開(kāi)發(fā)一個(gè)游戲搞糕，還會(huì)面臨比如碰撞算法勇吊、物理系統(tǒng)之類的問(wèn)題汉规。 所以辈赋，如果只用canvas去開(kāi)發(fā)游戲钥屈，就如同你在吃雞游戲里悟民，只拿了一把平底鍋射亏，你怎么和別人正面剛智润？
所以，我們需要一把98K把自己武裝起來(lái)兼蜈，那就是使用游戲引擎開(kāi)發(fā)歼郭。
2. 為什么選擇Laya？
目前支持微信小游戲的引擎泰涂，有Cocos负敏，Egret，Laya，我們先看下三者的功能比較：
從各種支持度上來(lái)講蹈胡，laya是目前支持度最好的，也據(jù)laya側(cè)的宣傳，他的性能也是最高的源织。（關(guān)于性能的問(wèn)題，因外部水軍比較多，在沒(méi)有做實(shí)際詳細(xì)測(cè)試前逻炊，暫時(shí)不發(fā)表評(píng)價(jià)。）
在公司內(nèi)部，都有三種引擎的游戲?qū)崿F(xiàn)屏积，下面是截止5月份的公開(kāi)數(shù)據(jù)的引擎占比：
其實(shí)三個(gè)引擎都提供了很好的支持度卷要，一般來(lái)說(shuō)奕枝，如果原先使用過(guò)Cocos實(shí)現(xiàn)過(guò)APP端游戲要移植到微信小游戲端來(lái)的隘道，使用Cocos是最好的選擇，如果是從頭開(kāi)發(fā)一款小游戲激捏，那還是在Egret和Laya里選擇一款吧！
3. Laya 環(huán)境搭建
前面講了那么多，都還只是前戲爆办，只是為了大家對(duì)游戲的開(kāi)發(fā)有個(gè)初步的了解余佃，從這一節(jié)開(kāi)始我們就進(jìn)入正題了。
到 [https://www.layabox.com/](https://www.layabox.com/) 去下載最新的版本，并進(jìn)行安裝坏瘩。目前有1.X版本和2.0版本柱锹。（本文使用1.7.20版本做示例）
然后就可以創(chuàng)建一個(gè)新的游戲項(xiàng)目了提陶，我們可以現(xiàn)在選擇創(chuàng)建一個(gè)UI示例項(xiàng)目
[ 創(chuàng)建新工程 ]
3.1 代碼模式
當(dāng)然就是給你寫(xiě)代碼的地方，感覺(jué)這個(gè)編輯器，就是在VSCode的基礎(chǔ)上改的铅忿。連最頂上的Code標(biāo)識(shí)都還在。也因?yàn)檫@樣，所以才能很好的支持TypeScript。
[ 代碼模式布局 ]
為什么要使用TypeScript? 本文不詳細(xì)展開(kāi)比較堰乔，只需要了解TypeScript 是Javascript的超集，因?yàn)槎嗔藗€(gè)“Type”表示他支持強(qiáng)類型苟翻，并且由于靜態(tài)類型化怜俐，在寫(xiě)代碼的時(shí)候編輯器就能提示你的錯(cuò)誤，所以更適合開(kāi)發(fā)游戲這種邏輯復(fù)雜的應(yīng)用就好了擅这。當(dāng)然最終TypeScript還是會(huì)像ES6一樣，被編譯成普通的Javascript執(zhí)行。但是在開(kāi)發(fā)階段管理代碼來(lái)說(shuō)，已經(jīng)可以駕馭大型項(xiàng)目了湿镀。
3.2 設(shè)計(jì)模式
就是用來(lái)設(shè)計(jì)UI界面的地方树肃，拖拖拽拽就可以把游戲頁(yè)面整出來(lái)莉钙。Laya提供了好多組件停忿，如果有需要的可以使用，當(dāng)然也可以不用他的組件，自己搞自己的自定義組件。
[ 設(shè)計(jì)模式布局 ]
4. Laya的HelloWorld
都說(shuō)作為一個(gè)程序員，買(mǎi)來(lái)文房四寶之后芥牌，寫(xiě)下的第一行字柏靶，一定是“Hello World”案铺。
4.1 游戲初始化
4.1.1.GameMain.ts
首先刪掉系統(tǒng)剛才默認(rèn)的文件“LayaUISample.ts”,然后新建文件GameMain.ts
import WebGL = Laya.WebGL;
class GameMain {
constructor() {
//TS或JS版本初始化微信小游戲的適配
Laya.MiniAdpter.init(true,false);
//初始化布局大小
Laya.init(375,667, WebGL);
//布局方式設(shè)定
Laya.stage.scaleMode = Laya.Stage.SCALE_SHOWALL;
Laya.stage.screenMode = Laya.Stage.SCREEN_VERTICAL;
Laya.stage.alignV = Laya.Stage.ALIGN_CENTER;
Laya.stage.alignH = Laya.Stage.ALIGN_CENTER;
}
}
new GameMain();
Laya.MiniAdpter.init()是Laya提供的對(duì)小游戲提供的適配返吻，因?yàn)樵谛〕绦?amp;小游戲環(huán)境下街佑，并沒(méi)有Bom和DomAPI，比如褒侧，沒(méi)有window统诺，document, 所以需要這樣一個(gè)適配器婿失，對(duì)小游戲的開(kāi)發(fā)方式这难，進(jìn)行兼容。
4.1.2. bin/index.html
<!--啟動(dòng)類添加到這里-->
<!--jsfile--Main-->
<script src="js/GameMain.js"></script>
<!--jsfile--Main-->
在index.html里，提供了很多Laya的類庫(kù)，這些類庫(kù)扣囊，最終會(huì)被打包成合并一個(gè)code.js. 因?yàn)槲⑿判∮螒虻捏w積限制吓蘑，我們不需要把所有的庫(kù)都加載進(jìn)來(lái)溃蔫，只選擇我們需要的庫(kù)就好了，用不到的可以都刪除侄榴。
4.1.3. run
接下來(lái)辉哥，點(diǎn)擊運(yùn)行，就會(huì)出現(xiàn)模擬器界面了。
[ 運(yùn)行模擬器 ]
先別管黑乎乎的一團(tuán)，下面我們就要增加“Hello World”了钾怔。
4.2 繪制文字
4.2.1. Laya.Text
再次修改GameMain的代碼如下舶斧，重點(diǎn)是var txt:Laya.Text = new Laya.Text();
import WebGL = Laya.WebGL;
class GameMain {
constructor() {
//TS或JS版本初始化微信小游戲的適配
Laya.MiniAdpter.init(true,false);
//初始化布局大小
Laya.init(375,667, WebGL);
//布局方式設(shè)定
Laya.stage.scaleMode = Laya.Stage.SCALE_SHOWALL;
Laya.stage.screenMode = Laya.Stage.SCREEN_VERTICAL;
Laya.stage.alignV = Laya.Stage.ALIGN_CENTER;
Laya.stage.alignH = Laya.Stage.ALIGN_CENTER;
//創(chuàng)建Text對(duì)象
var txt:Laya.Text = new Laya.Text();
//給Text的屬性賦值
txt.text = "Hello World";//設(shè)定文字內(nèi)容
txt.color = "#ffffff"; //設(shè)定顏色
txt.fontSize=20; //設(shè)定字體大小
txt.pos(100,200); //設(shè)定位置
//將Text對(duì)象添加到舞臺(tái)
Laya.stage.addChild(txt);
}
}
new GameMain();
在上面的代碼中祝谚，我們給Stage舞臺(tái)上穿仪，添加了Text對(duì)象，然后點(diǎn)擊運(yùn)行
啊哦捐寥，傳說(shuō)中的HelloWorld終于出現(xiàn)了
4.3 繪制圖片
4.3.1 loadImage
Laya的Sprite提供了一個(gè)非常簡(jiǎn)單的loadImage方法瞒窒，可以即時(shí)加載圖片并加載到舞臺(tái)上束昵。
//設(shè)置舞臺(tái)背景色
Laya.stage.bgColor="#1e83e8";
//創(chuàng)建img Sprite精靈
var img:Laya.Sprite = new Laya.Sprite();
//加載顯示圖片，坐標(biāo)位于100,50腰耙，并設(shè)置寬高 130*108
img.loadImage("demo/paratrooper.jpg",100,50,130,108);
//把圖片添加到舞臺(tái)
Laya.stage.addChild(img);
預(yù)覽如下晰赞，是不是很簡(jiǎn)單？
但是這個(gè)方法晨仑，其實(shí)并不實(shí)用妥凳，在真實(shí)項(xiàng)目中竟贯，一般會(huì)有很多圖片，我們不會(huì)一張一張圖片的去加載逝钥，而是預(yù)先加載好屑那，再去顯示圖片艘款。也就是我們常常在游戲主界面看到的進(jìn)度條持际，其實(shí)就是在加載資源。
4.3.2 資源預(yù)加載
Laya提供一個(gè)資源加載器：Laya.loader 哗咆，來(lái)解決加載的問(wèn)題选酗。我們把上面的代碼再修改下，實(shí)現(xiàn)先加載完圖片岳枷，然后再繪制圖片芒填。
private imgPath1:string="demo/paratrooper.jpg";
private imgPath2:string="demo/shell.jpg";
constructor() {
//.....省略N行代碼
this.renderImage();
//....省略N行代碼
}
renderImage():void{
//定義圖片路徑集合
var resArray=[
{url:this.imgPath1,type:Laya.Loader.IMAGE},
{url:this.imgPath2,type:Laya.Loader.IMAGE}
]
//使用加載器加載圖片路徑
Laya.loader.load(resArray,Laya.Handler.create(this,this.onLoadComplete),Laya.Handler.create(this,this.onLoadProgress))
}
//加載完成后，把圖片繪制到畫(huà)布上
onLoadComplete():void{
console.log("加載完成");
var img1:Laya.Sprite = new Laya.Sprite();
img1.graphics.drawTexture(Laya.loader.getRes(this.imgPath1),100,50,100,100);
Laya.stage.addChild(img1);
var img2:Laya.Sprite = new Laya.Sprite();
img2.graphics.drawTexture(Laya.loader.getRes(this.imgPath2),100,300,100,100);
Laya.stage.addChild(img2);
}
//這里可以獲取到加載的進(jìn)度空繁，以后可以制作進(jìn)度條
onLoadProgress(percent:number):void{
console.log("percent->"+percent);
}
4.3.3 圖集
只是預(yù)加載圖片還不夠殿衰，實(shí)際場(chǎng)景由于有很多小圖片，所以我們可以把這些小圖片拼合成圖集盛泡，這就類似在前端在做性能優(yōu)化的有時(shí)候所使用的css sprite精靈圖闷祥，這樣制作成圖集，不但加載性能更高傲诵，而且也更便于制作幀動(dòng)畫(huà)凯砍。
圖集的加載類似這樣：
var resArray=[
{url:"res/atlas/demo.atlas",type:Laya.Loader.ATLAS},
]
Laya.loader.load(resArray,Laya.Handler.create(this,this.onLoadComplete),Laya.Handler.create(this,this.onLoadProgress))
和之前的圖片加載時(shí)Laya.Loader.IMAGE不同的是，type變成了Laya.Loader.ATLAS拴竹。
那圖集怎么制作呢悟衩？還有，大量的游戲界面栓拜，真的就靠手動(dòng)一張圖片一張圖片的顯示嗎座泳？ 當(dāng)然不！因?yàn)槲覀兘酉聛?lái)該了解下UI編輯器了幕与。
5. UI編輯器
UI編輯器挑势，當(dāng)然是用來(lái)編輯UI的，大多數(shù)的客戶端程序開(kāi)發(fā)環(huán)境啦鸣，都有類似的UI編輯器潮饱。點(diǎn)擊左側(cè)的
圖標(biāo)，進(jìn)入U(xiǎn)I編輯器模式诫给，如下圖：
具體UI編輯器的功能介紹香拉，建議還是看官方文檔饲漾，這里就不贅述了。
5.1創(chuàng)建UI
因?yàn)槲覀儎?chuàng)建的是默認(rèn)UI項(xiàng)目缕溉，所以UI編輯器里考传，有一個(gè)TestPage.ui，可以不用管他证鸥，我們創(chuàng)建一個(gè)自己的UI僚楞。
點(diǎn)擊 文件->新建文件
進(jìn)入新建頁(yè)面窗口，頁(yè)面類型有View 和Dialog兩種枉层，因?yàn)檫@里我們做的是整個(gè)頁(yè)面泉褐，所以選View。如果你有興趣去看源碼鸟蜡，其實(shí)Dialog也是基于View實(shí)現(xiàn)的膜赃，只不過(guò)多了Dialog的一些特性。
如果對(duì)這個(gè)view后面還有邏輯代碼要寫(xiě)揉忘，建議勾選“創(chuàng)建邏輯類”跳座，這樣就會(huì)自動(dòng)在View目錄下自動(dòng)創(chuàng)建一個(gè)和UI對(duì)應(yīng)的GamePage.ts
[ 新建頁(yè)面UI ]
5.2 導(dǎo)入資源
在assets目錄下，新建一個(gè)demo資源目錄泣矛，把需要的圖片都扔進(jìn)去疲眷，然后在UI編輯器的資源面板最下方找找到刷新按鈕
，新增資源圖片后您朽，一定要記得點(diǎn)下刷新狂丝，否則資源面板的內(nèi)容不會(huì)自動(dòng)刷新。
只要是demo文件下的圖片哗总，都會(huì)被自動(dòng)打包成圖集几颜，路徑就是 res/atlas/demo.atlas。
不知道有沒(méi)有同學(xué)發(fā)現(xiàn)讯屈，在上面的圖片中蛋哭，有部分資源顯示“不打包”，這是什么原因的耻煤？
點(diǎn)擊文件-》項(xiàng)目設(shè)置具壮，我們會(huì)看到圖集限制了能被打入圖集的單圖的最大寬高准颓，和最終圖集的最大寬高哈蝇，默認(rèn)標(biāo)準(zhǔn)可以自行修改。超過(guò)這個(gè)圖集標(biāo)準(zhǔn)的圖片攘已，就不會(huì)打包到圖集中去炮赦，就需要手動(dòng)加載了。
[ 請(qǐng)?jiān)谶@里填寫(xiě)圖片描述 ]
5.3 編輯UI
編輯頁(yè)面功能样勃，會(huì)用ppt的吠勘，應(yīng)該都會(huì)用了性芬，拖個(gè)圖片誰(shuí)不會(huì)？直接把資源管理器的圖片剧防，拖到右側(cè)場(chǎng)景編輯器里植锉。這次我們拖了一個(gè)藍(lán)天白云的背景，并在最下方放了一個(gè)大炮峭拘，看起來(lái)還有點(diǎn)意思俊庇。
頂部有一排圖標(biāo)，是用來(lái)協(xié)助對(duì)齊圖片用的鸡挠，提供了頂部對(duì)齊辉饱，底部對(duì)齊，左對(duì)齊拣展，右對(duì)齊彭沼，中線對(duì)齊等等，如果圖片很多备埃，用這個(gè)對(duì)齊就很方便了姓惑。
右側(cè)的屬性欄，就比較常用了按脚。
var這里挺益，你可以給你拖進(jìn)來(lái)的圖片組件，給個(gè)變量名乘寒，這個(gè)變量名望众，最后會(huì)在之前自動(dòng)生成的邏輯類里用到。我們把大炮定個(gè)變量名“pao”伞辛，后面會(huì)用到烂翰；x,y,width,height這里，就是坐標(biāo)和寬高蚤氏，就不用多說(shuō)了吧甘耿？
5.4 導(dǎo)出UI
UI做好以后，有個(gè)重要的工作竿滨，就是千萬(wàn)別忘記導(dǎo)出佳恬。很多初學(xué)者，經(jīng)常會(huì)忘記這點(diǎn)于游。導(dǎo)出UI毁葱，才會(huì)重新生成圖集和UI相關(guān)設(shè)置。
導(dǎo)出以后贰剥，我們看laya/pages/GamePage.ui 文件倾剿，不用管里面的詳細(xì)內(nèi)容，里面就是剛才我們拖拽圖片蚌成，自動(dòng)生成的響應(yīng)配置文件前痘。
5.5 使用UI
下面我們要把剛才編輯的GamePage顯示出來(lái)凛捏，那就回過(guò)頭來(lái)，再次修改GameMain.ts
class GameMain {
//定義靜態(tài)變量 gamePageView
public static gamePageView:view.GamePage;
constructor() {
//...
this.renderImage();
//...
}
renderImage():void{
//資源加載
var resArray=[
{url:"res/atlas/demo.atlas",type:Laya.Loader.ATLAS},
]
Laya.loader.load(resArray,Laya.Handler.create(this,this.onLoadComplete),Laya.Handler.create(this,this.onLoadProgress))
}
onLoadComplete():void{
//初始化view
GameMain.gamePageView = new view.GamePage();
//添加到舞臺(tái)
Laya.stage.addChild(GameMain.gamePageView);
}
}
new GameMain();
運(yùn)行一下芹缔，主界面游戲背景坯癣，和大炮都已經(jīng)架設(shè)好了，好的開(kāi)端最欠，就是成功的一半了坡锡。
接下來(lái)，根據(jù)最初的牛逼策劃窒所，我們要像pubgm一樣鹉勒，讓傘兵從天下掉下來(lái)，怎么實(shí)現(xiàn)吵取？接著看動(dòng)畫(huà)部分吧禽额！
6. 動(dòng)畫(huà)
6.1 創(chuàng)建傘兵對(duì)象
在src目錄下創(chuàng)建一個(gè)新目錄role，用來(lái)存放游戲中角色皮官。 在role里創(chuàng)建一個(gè)傘兵Soldier.ts對(duì)象文件脯倒。
module role{
export class Soldier extends Laya.Sprite{
constructor(){
super();
this.init();
}
init():void{
var img:Laya.Sprite = new Laya.Sprite();
img.graphics.drawTexture(Laya.loader.getRes("demo/soldier.png"),0,0,100,86);
this.addChild(img);
}
}
}
修改GamePage.ts,把傘兵加入到游戲主畫(huà)面中去，重點(diǎn)看renderSoldier()
module view{
export class GamePage extends ui.GamePageUI{
private soldier:role.Soldier;
constructor(){
super();
this.init();
}
init():void{
this.renderSoldier();
}
renderSoldier():void{
this.soldier= new role.Soldier();
this.addChild(this.soldier);
}
}
}
運(yùn)行起來(lái)看下捺氢，發(fā)現(xiàn)游戲主畫(huà)面上藻丢，已經(jīng)多了一個(gè)傘兵（請(qǐng)忽略我的很爛的摳圖，手動(dòng)捂臉^_~ ）
6.2 讓傘兵掉下來(lái)
做過(guò)前端的應(yīng)該都明白摄乒，傘兵掉下來(lái)悠反，就是要啟動(dòng)一個(gè)定時(shí)器，不斷修改傘兵的Y坐標(biāo)+1馍佑，移動(dòng)傘兵圖片的位置斋否。原理都知道，但是如何實(shí)現(xiàn)呢拭荤？
一般定時(shí)器有兩種：
setInterval：基于用戶指定時(shí)間
requestAnimationFrame ：基于瀏覽器幀能力
相比起來(lái)茵臭，requestAnimationFrame 性能更高，更適合做動(dòng)畫(huà)舅世。但是在游戲里會(huì)有很多地方都用到定時(shí)器旦委，如何管理那么多定時(shí)器，是非常讓人頭疼的事情雏亚。所以Laya也提供了自己的定時(shí)器的相關(guān)實(shí)現(xiàn)：Laya.timer 來(lái)簡(jiǎn)化定時(shí)器的使用缨硝，這個(gè)定時(shí)器同樣是基于幀率的，我們來(lái)看看這個(gè)怎么用评凝。
修改GamePage如下追葡，重點(diǎn)看Laya.timer.frameLoop
module view{
export class GamePage extends ui.GamePageUI{
private soldier:role.Soldier;
constructor(){
super();
this.init();
}
init():void{
this.renderSoldier();
//創(chuàng)建定時(shí)器
Laya.timer.frameLoop(1,this,this.onLoop);
}
renderSoldier():void{
this.soldier= new role.Soldier();
this.addChild(this.soldier);
}
onLoop():void{
//讓傘兵45度下降
this.soldier.y=this.soldier.y+1;
this.soldier.x=this.soldier.x+1;
}
}
}
來(lái)看下效果，看起來(lái)還不錯(cuò)
7. 碰撞
7.1 增加炮彈
下一步奕短，就改是大炮打傘兵了宜肉，當(dāng)然首先得給大炮創(chuàng)建一個(gè)炮彈。
Ball.ts
module role{
export class Ball extends Laya.Sprite{
constructor(){
super();
this.init();
}
init():void{
var img:Laya.Sprite = new Laya.Sprite();
img.graphics.drawTexture(Laya.loader.getRes("demo/ball.png"),0,0,45,54);
this.addChild(img);
}
}
}
在GamePage上添加炮彈
renderBall():void{
this.ball= new role.Ball();
this.ball.pos(162,540);
this.addChild(this.ball);
}
嗯翎碑，炮彈添加成功谬返，不過(guò)，貌似有點(diǎn)問(wèn)題日杈，怎么炮彈顯示層級(jí)在大炮上面了遣铝？似乎有點(diǎn)難看？
7.2 調(diào)整Sprite層級(jí)
還記得前端世界里神奇的z-index嗎莉擒？ Laya也有酿炸，叫zOrder。調(diào)整zOrder的數(shù)值涨冀，可以調(diào)節(jié)Sprite的層次（脫了馬甲填硕，我一樣認(rèn)識(shí)你，^_^）
把渲染炮彈部分改一下層級(jí)：
renderBall():void{
this.ball= new role.Ball();
this.ball.pos(162,540);
this.pao.zOrder=10; //調(diào)高原先大炮的顯示層級(jí)
this.addChild(this.ball);
}
這次炮彈躲在大炮后面去了鹿鳖，一會(huì)兒再讓他出來(lái)吧扁眯！
7.3 點(diǎn)擊大炮發(fā)射炮彈事件
炮彈向上飛，就和傘兵向下掉一樣翅帜，在幀循環(huán)里不斷修改y值就可以姻檀。但是這次，我們要響應(yīng)事件了涝滴，必須點(diǎn)擊大炮绣版，觸發(fā)點(diǎn)擊事件后，才發(fā)射炮彈歼疮。
再次修改GamePage.ts僵娃，這次的重點(diǎn)是多了 this.pao.on(Laya.Event.MOUSE_DOWN,this,this.onMouseDown); 這個(gè)事件監(jiān)聽(tīng).
module view{ export class GamePage extends ui.GamePageUI{
private soldier:role.Soldier;
private ball:role.Ball;
private isSendBall:boolean=false;
constructor(){
super();
this.init();
}
init():void{
this.renderSoldier();
this.renderBall();
//給大炮增加事件監(jiān)聽(tīng)
this.pao.on(Laya.Event.MOUSE_DOWN,this,this.onMouseDown);
//創(chuàng)建定時(shí)器
Laya.timer.frameLoop(1,this,this.onLoop);
}
renderSoldier():void{
this.soldier= new role.Soldier();
this.addChild(this.soldier);
}
renderBall():void{
his.ball= new role.Ball();
this.ball.pos(162,540);
this.pao.zOrder=10;
this.addChild(this.ball);
}
onMouseDown():void{
this.isSendBall=true;
}
onLoop():void{
//讓傘兵45度下降
this.soldier.y=this.soldier.y+1;
this.soldier.x=this.soldier.x+1;
//如果是發(fā)射炮彈狀態(tài)，炮彈向上發(fā)射
if (this.isSendBall){
this.ball.y=this.ball.y-3;
}
}
}
}
在運(yùn)行一下看看：
到目前為止腋妙，還進(jìn)行得不錯(cuò)默怨，就差擊落傘兵了，可憐的傘兵骤素，你的死期就要到了匙睹，還差一個(gè)碰撞了。
7.4 炮彈與傘兵的碰撞
碰撞算法常見(jiàn)的有以下這些：
矩形碰撞：矩形圖片接觸碰撞济竹，計(jì)算性能最快痕檬，但是如果圖像并不近似矩形的時(shí)候，準(zhǔn)確度就不高了送浊。
圓形碰撞：和矩形類似梦谜，比如炮彈就是圓的，用圓形檢測(cè)，更適合真實(shí)情況唁桩。
多矩形碰撞：如果圖像相對(duì)比較復(fù)雜闭树，可以拆分為多個(gè)矩形，在準(zhǔn)確性和性能方面取得平衡荒澡。
像素檢測(cè)碰撞：如果需要非常精確的碰撞报辱，就要使用像素檢測(cè)了，這個(gè)性能相對(duì)就比較低了单山。
在Laya里碍现，對(duì)于矩形碰撞檢測(cè)，提供了Rectangle.intersection()方法米奸，可以非常方便的進(jìn)行矩形檢測(cè)昼接。
繼續(xù)修改GamePage.ts
gameOver():void{
Laya.timer.clear(this,this.onLoop); //停止游戲幀定時(shí)器
this.renderBoom(); //顯示爆炸圖片
this.removeChild(this.soldier); //刪除傘兵
this.removeChild(this.ball); //刪除炮彈
}
onLoop():void{
//讓傘兵45度下降
this.soldier.y=this.soldier.y+1;
this.soldier.x=this.soldier.x+1;
//如果是發(fā)射炮彈狀態(tài)，這炮彈向上發(fā)射
if (this.isSendBall){ this.ball.y=this.ball.y-3;
//使用矩形碰撞判斷悴晰，如果炮彈和傘兵碰撞慢睡，則游戲結(jié)束
if (this.ball.getBounds().intersection(this.soldier.getBounds())){
this.gameOver();
}
}
}
再來(lái)看下效果：
Boom，傘兵成功被大炮打中膨疏，“絕地求死”完美收工一睁！
8. Laya的性能優(yōu)化
8.1 性能監(jiān)測(cè)工具
Laya已經(jīng)內(nèi)置了性能監(jiān)測(cè)工具，只要初始化后執(zhí)行Laya.Stat.show();就可以打開(kāi)
constructor() {
//TS或JS版本初始化微信小游戲的適配
Laya.MiniAdpter.init(true,false);
//初始化布局大小
Laya.init(375,667, WebGL);
//布局方式設(shè)定
Laya.stage.scaleMode = Laya.Stage.SCALE_SHOWALL;
Laya.stage.screenMode = Laya.Stage.SCREEN_VERTICAL;
Laya.stage.alignV = Laya.Stage.ALIGN_CENTER;
Laya.stage.alignH = Laya.Stage.ALIGN_CENTER;
//打開(kāi)性能監(jiān)測(cè)面板
Laya.Stat.show();
}
上面清楚的顯示了目前的FPS佃却、Sprite的數(shù)量者吁、DrawCall 、內(nèi)存消耗等饲帅，我們優(yōu)化的目標(biāo)就是把這些值降低下來(lái)复凳。
8.2 優(yōu)化手段
減少Sprite的數(shù)量
不可見(jiàn)區(qū)域的Sprite及時(shí)移除
靜態(tài)內(nèi)容使用cacheAs=bitmap降低DrawCall
使用Laya.Pool管理對(duì)象，減少重復(fù)創(chuàng)建的性能消耗
對(duì)象無(wú)用時(shí)灶泵，及時(shí)銷(xiāo)毀
定時(shí)器及時(shí)銷(xiāo)毀
育八。。赦邻。
具體的優(yōu)化手段有很多髓棋，大家可以在具體的業(yè)務(wù)開(kāi)發(fā)中不斷的總結(jié)提煉。
9. 發(fā)布到微信小游戲
講了那么多的Laya惶洲，說(shuō)好的微信小游戲呢按声？ 不要急，這就來(lái)了恬吕，Laya生成的代碼签则，可以非常方便的發(fā)布到微信小游戲。
點(diǎn)擊 
進(jìn)入發(fā)布界面铐料，在發(fā)布平臺(tái)選擇“微信小游戲”渐裂，此時(shí)生成可以在微信開(kāi)發(fā)者工具下運(yùn)行的release/wxgame版本.
使用微信開(kāi)發(fā)者工具打開(kāi)豺旬，已經(jīng)可以完美運(yùn)行了。而且我們發(fā)現(xiàn)laya把我們剛才寫(xiě)的代碼柒凉，和Laya的核心庫(kù)一起族阅，都被打包成一個(gè)code.js了。
[ 微信開(kāi)發(fā)者工具 ]
10. 開(kāi)發(fā)環(huán)境兼容
可是扛拨，作為微信環(huán)境下的游戲耘分，因?yàn)閏ode.js是laya自動(dòng)生成的举塔，我們開(kāi)發(fā)還是必須在laya的開(kāi)發(fā)環(huán)境下绑警，但是laya并不支持微信的接口調(diào)試，那我們可以在Laya里判斷開(kāi)發(fā)環(huán)境嗎央渣？
當(dāng)然可以计盒，用Laya.Browser.onWeiXin 就可以判斷了，比如：
if (Laya.Browser.onWeiXin) {
let wx=Laya.Browser.window.wx;
//執(zhí)行微信的API邏輯.....
}
只是調(diào)試起來(lái)就有點(diǎn)蛋疼了芽丹，得Laya里寫(xiě)好北启，發(fā)布到release/wxgame，再在微信開(kāi)發(fā)者工具里調(diào)試拔第。
=總結(jié)=
總體來(lái)說(shuō)咕村，Laya入門(mén)還是比較簡(jiǎn)單的，雖然官方也做了很多文檔蚊俺，也有做視頻教程懈涛，但是感覺(jué)資料還是有點(diǎn)缺，這次自己研究Laya的歷程分享出來(lái).
