叨叨

　　我在前一陣子，打算做一個微信小游戲，當然是單機的，只是為了了解小游戲開發的過程，最終選擇了俄羅斯方塊這一經典小游戲作為demo，源代碼已托管值github，當然，這個游戲demo對用不并不友好，但是已經可以讓我入門小程序開發了XD。

　　demo地址：https://github.com/nbclw/Laya_Brick

準備

　　在任何開發前都需要對要開發的東西有一定的了解、準備；

　　小游戲原理：微信小游戲是屬于H5游戲的一種吧，我是這樣理解的；在H5中，有一個叫Canvas（畫布）的存在，與電腦的畫布很類似，后面的新顏色覆蓋舊的顏色，舊的顏色也不進行記錄；但是游戲可以有FPS這一概念的存在，比如我們可以使用程序每秒鐘繪制50幀的Canvas（畫布），也就是FPS是50，那么游戲的各種畫面就可以動了；然而小游戲也有一定的限制，比如最終的游戲包（代碼+資源）不可超過4M，當然也可以通過分包加載的方式加載游戲，那也最多不可超過8M；

　　賬號：在開發微信小程序之前，需要到微信公眾平臺申請一個開發賬號，如果只是學習的話，申請一個個人賬號也完全ok；申請完成之后，在設置-開發設置里有一個AppID的標識，這個在新建項目時需要用到；另外，平臺里也給了很多文檔、API供學習查閱；

　　開發工具：工具的話微信也給出了專門的開發工具，在微信公眾平臺即可下載到；

　　游戲引擎：無論什么開發，總會有一些方便的集成工具供大家使用，人多力量大；這里我選擇的是的LayaBox的游戲引擎，所以，在開發的時候需要再下載一個LayaIDE的開發工具，在這里面編寫游戲和發布，最后再在專門的微信開發工具進行最后的調試與上傳；

　　語言選擇：使用LayaIDE來開發小游戲的話，它支持三種語言：ActionScript、JavaScript、TypeScript；首先是ActionScript，我對這個語言沒接觸過，并且和剩下的兩種語言相比，只多了能做flash游戲，我又不懂flash游戲，所以先pass掉；JavaScript語言的話還是比較熟悉的，但是由于是一種弱語言，雖說最近出了很多補償措施，但是我沒有多少時間來做嘗試，所以先做保留；最后是TypeScript，這個語言據說是JavaScript的超集，同時具備了類、變量等一些靜態語言的特性，是我接手的最佳語言；于是隨后選擇了使用TypeScript來開發小游戲；補充一下，demo里面包含一分TypeScript的簡單的學習文檔，可以先大體閱讀一遍，相信會有點幫助的；

　　環境搭建：

　　　　1、去微信公眾平臺申請微信公眾平臺賬號，下載安裝 微信web開發者工具；

　　　　2、去LayaBox下載LayaIDE開發工具，根據教程配置TypeScript的編譯環境，在官網的技術文檔TypeScript專題有教程，此處不過多累述；

開始開發

　　其實在使用 微信web開發者工具 開發時，會有一個模板游戲當然也可以根據其架構和API來開發小游戲，但是由于我功力達不到，開發過一版游戲（使用JavaScript），調試運行可以，但是到手機上就不可以了，我也就不過多糾結，直接轉入LayaIDE開發，畢竟官網有更多的案例和API，后面的開發除非特殊情況，說的都是LayaIDE開發；

　　1、新建項目，這里我們選擇2d項目與TypeScript項目，由于小程序的游戲包的大小限制，在我掌握控制資源大小能力的時候，我選擇了較為簡單的2d項目

　　2、項目結構：1為項目的入口文件，相當于Main文件，至于為什么是入口文件，下面會提到；2為引用的代碼資源，里面封裝了2d項目必要的封裝類；3為項目的場景資源文件，包括音頻、視頻、圖片等游戲需要的資源；

　　3、bin文件夾：此文件夾是編譯之后運行的文件夾，比較重要，下面來做詳細介紹；

　　　　事實上，雖然我們在使用TypeScript開發小游戲，但是最后還是會編譯為JavaScript文件，通過執行JavaScript文件來運行小游戲，只是使用TypeScript會比JavaScript開發的更加嚴謹一些，若你的JavaScript很強，那么也可嘗試使用JavaScript來編寫；

　　　　里面的js文件為上面項目結構中的libs編譯的結果，將里面各個封裝好的模塊編譯到各個文件中

　　　　里面的js文件為上面項目結構中的src編譯的結果，將各自ts文件編譯到對應的js中；

　　　　該文件作為微信小游戲的執行文件，在這里可以不過多理會；

　　　　這個為發布后的微信小程序引用了多少js文件（編譯好的libs與js中的文件）用的，若是在程序中沒有用到的模塊，可以再這里面進行刪除，以減少代碼的數量

　　4、項目編寫：項目的大體結構與編譯了解的差不多之后，便開始編寫我們自己的小程序——俄羅斯方塊了，開發過程略，反正就是api的使用，這個在官網有這不少的案例與代碼；

　　　　首先將以前的代碼、資源文件刪除掉，然后建立自己的工程，在發布之前，我將index.html文件中沒有使用的js引用注釋掉

　　5、發布，選擇發布平臺，先來個簡單的發布吧，不包含版本控制之類的；發布之后，我們會得到一些文件，其實libs這個文件夾并沒有多少用的，雖說里面有編譯之后的封裝文件，但是項目實際運行的所有代碼都被LayaIDE自動壓縮到code.js文件中，因此，libs文件夾可以刪掉，為了減少游戲包體積嘛；還有一個不怎么好的消息，那就是，上面我說的資源文件夾assets是沒有被發布出來的，我也沒弄清楚怎么回事，只能手動拷貝出來，并且找到code.js文件中的引用路徑并修改正確；

　　6、微信web開發者工具最后的調試，打開開發者工具，打開項目，輸入我們的AppID，打開LayaIDE發布出來的項目；若模擬器可以正常運行的話，那么久點擊預覽吧，就可以在手機上面看到了，手機預覽沒問題的話，就可以點擊上傳上傳到微信公眾平臺上去；

　　7、到此為止的開發都是只有自己能夠看到的，若想讓別人玩到自己的游戲，那么還需要最后一步，在微信公眾平臺-開發管理中，將自己剛剛上傳的項目發布出來，當然真正的發布游戲是要提交審核的，有很多的東西（各種資料）要準備，我就選擇了體驗版，只能規定自己指定的人玩，不過也夠了，反正別人也玩到了嘛，等到有真正好玩的游戲做出來，在認認真真的發布吧；

 再次叨叨

　　下一步目標：

　　1、學會使用分包加載游戲，更大的游戲包帶來更好的游戲（雖說最多8M）；

　　2、學會使用網絡，下一步打算做簡單的網絡游戲；

　　3、學會優化代碼，去除不必要的資源，精簡游戲包大??；

 　　好不容易做使用LayaBox做的俄羅斯方塊可以運行了，盡管游戲功能少，盡管發布到微信公眾平臺上只是一個體驗版，只能指定少數人玩耍（話說也沒幾個人在玩這游戲了），但是除最后一步的提交審核，別的流程都走了一遍了，總算可以從0到1制作一個微信小游戲了，好開心，在這里把這些日子學到的東西分享出來，希望有人可以用得到，這里就結束了。