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

叨叨

　　我在前一陣子，打算作一個微信小遊戲，固然是單機的，只是爲了瞭解小遊戲開發的過程，最終選擇了俄羅斯方塊這一經典小遊戲做爲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的簡單的學習文檔，能夠先大致閱讀一遍，相信會有點幫助的；

 

　　環境搭建：

　　　　一、去微信公衆平臺申請微信公衆平臺帳號，下載安裝 微信web開發者工具；

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

開始開發

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

　　一、新建項目，這裏咱們選擇2d項目與TypeScript項目，因爲小程序的遊戲包的大小限制，在我掌握控制資源大小能力的時候，我選擇了較爲簡單的2d項目

　　二、項目結構：1爲項目的入口文件，至關於Main文件，至於爲何是入口文件，下面會提到；2爲引用的代碼資源，裏面封裝了2d項目必要的封裝類；3爲項目的場景資源文件，包括音頻、視頻、圖片等遊戲須要的資源；

　　三、bin文件夾：此文件夾是編譯以後運行的文件夾，比較重要，下面來作詳細介紹；

　　　　事實上，雖然咱們在使用TypeScript開發小遊戲，可是最後仍是會編譯爲JavaScript文件，經過執行JavaScript文件來運行小遊戲，只是使用TypeScript會比JavaScript開發的更加嚴謹一些，若你的JavaScript很強，那麼也可嘗試使用JavaScript來編寫；

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

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

　　　　該文件做爲微信小遊戲的執行文件，在這裏能夠不過多理會；

　　　　這個爲發佈後的微信小程序引用了多少js文件（編譯好的libs與js中的文件）用的，如果在程序中沒有用到的模塊，能夠再這裏面進行刪除，以減小代碼的數量

　　四、項目編寫：項目的大致結構與編譯瞭解的差很少以後，便開始編寫咱們本身的小程序——俄羅斯方塊了，開發過程略，反正就是api的使用，這個在官網有這很多的案例與代碼；

　　　　首先將之前的代碼、資源文件刪除掉，而後創建本身的工程，在發佈以前，我將index.html文件中沒有使用的js引用註釋掉

　　　　

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

　　　　

　　六、微信web開發者工具最後的調試，打開開發者工具，打開項目，輸入咱們的AppID，打開LayaIDE發佈出來的項目；若模擬器能夠正常運行的話，那麼久點擊預覽吧，就能夠在手機上面看到了，手機預覽沒問題的話，就能夠點擊上傳上傳到微信公衆平臺上去；

　　七、到此爲止的開發都是隻有本身可以看到的，若想讓別人玩到本身的遊戲，那麼還須要最後一步，在微信公衆平臺-開發管理中，將本身剛剛上傳的項目發佈出來，固然真正的發佈遊戲是要提交審覈的，有不少的東西（各類資料）要準備，我就選擇了體驗版，只能規定本身指定的人玩，不過也夠了，反正別人也玩到了嘛，等到有真正好玩的遊戲作出來，在認認真真的發佈吧；

 再次叨叨

　　下一步目標：

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

　　二、學會使用網絡，下一步打算作簡單的網絡遊戲；

　　三、學會優化代碼，去除沒必要要的資源，精簡遊戲包大小；

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