叨叨

　　我在前一陣子，打算做一個微信小遊戲，當然是單機的，只是為了了解小遊戲開發的過程，最終選擇了俄羅斯方塊這一經典小遊戲作為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制作一個微信小遊戲了，好開心，在這裏把這些日子學到的東西分享出來，希望有人可以用得到，這裏就結束了。

【開發記錄】微信小遊戲開發入門——俄羅斯方塊