H5游戏开发教程1

近期由于工作需要，开发了一系列H5小游戏，最早以前使用原生的canvas开发了，但是开发效率比较低，虽然好多西可以灵活定义，比如滤镜处理，渐变等。但是整体而言开发速度慢，很多时候满足不了实际开发需要。后来逐渐接触到国产的Layabox和国外的PIXI以及Phaser等框架，当然3d方面的有three.js 还有babylon这些都是比较常用的H5游戏框架。而且这几款框架都是比较容易上手的。鉴于跨平台和手机的兼容性问题，我一般使用Phaser和layabox，他们的兼容性不错。phaser的游戏声音模块做的不错，兼容大部分手机，而且游戏结构方面许多东西都封装的不错，支持js与Ts，而且比较容易上手。Layabox内容涉及较广2d和3d都支持，性能也不错。phaser只能目前自支持2d游戏，尚无3d支持。顺便说一下，我是用的是PhaserCe,phaser3目前不断更新完善中，有很多地方会出现兼容性问题。但以后肯定会不错的。当然了使用这两个框架的原因是，用他们做的游戏可以很方便的转化为微信小游戏。Laya可以直接开发微信小游戏，phaser的话需要许多东西准备。推荐大家一个网站：“phaser小站”，很不错的一个网站，大家有时间看看。之后一有时间我就会把游戏开发中的心得写出来，使之成为系列教程。

每个游戏都会为大家使用LayaBox和Phaser两个框架演示。使用语言是typescript。为何会使用typescript，而不直接使用js呢？原因是typescript开发效率会很高，调试也简单，结构清晰。最主要的是它自动转换的js比我们自己写的js不知优秀多少倍。所以配置一下开发环境，果断用typescript吧！

作为第一篇先讲一下屏幕适配问题。phaser使用的是设备像素，layabox使用的是物理像素，简单的说就是phaser游戏中的图片尺寸不能太大，否则需要缩放，但layabox的图片使用大小取决于设备的物理像素。举个例子

同样的图片宽度的图片，在phaser和在layabox的区别如下。具体的像素概念大家自己看吧！像素与物理像素的区别，所以游戏设计是一定要考虑好框架选择和素材的大小以及适配方式。