【开发记录】微信小游戏开发入门——俄罗斯方块

叨叨

　　我在前一阵子，打算作一个微信小游戏，固然是单机的，只是为了了解小游戏开发的过程，最终选择了俄罗斯方块这一经典小游戏做为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制做一个微信小游戏了，好开心，在这里把这些日子学到的东西分享出来，但愿有人能够用获得，这里就结束了。