作者：刘春鹏
一则有关HTML5游戏的的消息震惊业界，蝴蝶互动宣布旗下的《传奇世界》月流水破1500万，成为业内首款千万级别爆款游戏，这无疑给H5游戏行业注入了一针强心剂。从H5诞生以来，对于H5游戏一直唱衰不断，而这又一次把H5游戏推向风口浪尖。
区别于寻常的Flash页游，此游戏采用了H5的Canvas技术，能在PC端和移动端跨平台运行。一直以来，游戏开发都是把前沿技术运用到极致的媒介，H5游戏也不例外，这篇文章会从带你从浅入手，深入H5游戏开发的世界。
1、准备条件
1.1、设计师应该注意的地方
移动端最大的问题在于多种设备，多种平台，多种尺寸，当我们在做手机端H5网页设计稿时（当然包含微信端的H5网页设计），如果没有做过类似的移动端的设计，UI设计师和前端工程师肯定会纠结的。那么多手机屏幕尺寸，设计稿应该按照哪一个尺寸作为标准尺寸。现在已经有很多2K分辨率的手机屏幕了，设计稿是不是也要把宽高跟着最大分辨率来设计。显然不是。先看一下市面上主流的手机尺寸：
我们在H5开发初期的时候，进行了各种尺寸的设计稿尝试，比如1倍的（320X480）、2倍的（640X1136）、3倍的（1242X2280）像素。最终得出的试验结果是。H5的设计稿一般设计为640X1136即可。即iphone 5s的物理像素（也即是5、5c以及将要发布的5se的物理像素，这一系列手机在iphone的占有率中是最高的）， 既满足了retina用户的显示需求，又能降低2G、3G用户加载图片需要的带宽。不过，你若有更高质量的追求，750*1334像素的设计稿也是一个不错的选择。
1.2、开发者应该注意的地方
不管在手机浏览器还是在微信客户端或者腾讯新闻客户端开发，内容大都不能全屏显示的。在底部或者顶部多多少少会有一个状态栏的占位，并不能展示手机的全部尺寸。一些手机浏览器底部会有导航，也有些会在顶部和底部都有占位，比如导航栏、状态栏。顶部的占位会把内容往下挤，底部的占位会把内容遮盖住。所以，我们在进行H5页面内容规划布局设计的时候，不能把重要内容放在太偏下或者太偏上的位置，否则前端布局时可能出现内容显示不全的情况。如果有滑动的交互操作，用户很有可能触发浏览器页面的滑动，导致较差的用户体验。
下图为腾讯新闻客户端和微信内置浏览器的占位高度，在640x1136（iphone5s）上他们的高度是一样的。如果你的页面高度超过1008px，页面就会出现滚动功能。
除去顶部大概130px的像素，底部大概150左右的像素，内容的安全高度大概有850左右，怎么布局页面，具体要看你的项目主要在什么环境上运行。
2、开始动手
2.1、页面流程
当我们在玩一个简单的H5游戏的时候，其流程通常会包含以下步骤：
1、 出现一个载入进度条，载入一些必须的图片、音频、字体等文件；
2、 显示主菜单，提示用户开始游戏；
3、 进入游戏主逻辑。在游戏过程中，当用户胜利或者失败，或是触发了某个按钮或者按键时，游戏会退出，显示结果页面。
4、用户分享游戏或者关闭游戏。
也就是说一个完整的H5游戏，至少有3个页面不可或缺，就是加载页、游戏页、结果页。由此也可以延伸出多个页面，比如开始页，分享页等。
2.2、资源的加载
区别于普通的网页的开发，H5游戏需要大量的视觉听觉素材，并且用户的网络的带宽有限。当你使用了很多的图片、声音、视频以及媒体文件的时候，用户会花费一些时间等待浏览器从服务器下载。 如果在编写游戏时， 你不把它放在心上，不提前加载而直接使用， 等你开发完游戏到真实的用户场景上运行时，你就会碰到问题多多，因为图片和声音文件是异步加载的，你的JavaScript代码会在资源全部加载完成前执行。这常常导致一个红叉的图片在上蹿下跳，声音效果在需要时不播放或者延迟很久冒出来一个声音. 好的开发习惯是创建一个预加载器，延后脚本代码的执行，直到所有的资源都下载完毕为止，这个时候才放出游戏的开始按钮，让用户参与游戏。
我们经常会看到，一些站点在首次进入的时候会先显示一个进度条，等资源加载完毕后再呈现页面，进度条大概像这样：
以图片的加载为例，大致的代码应该是这样：
至于预加载的技术原理，其实也相当简单，就是维护一个资源列表，挨个去加载列表中的资源，然后在每个资源加载完成的回调函数中更新进度即可。
当前加载完的资源个数/pic总数*100，就是加载进度的百分比了。
当然，我们没必要手动写自己的加载器，很多优秀的游戏框架已经帮我们做到了，比如phaser，下面是phaser实现预加载的代码，具体的示例点我，点我
在上述的例子中，我们先创建一个游戏对象，然后往这个游戏对象中添加了两个方法，boot方法执行的时候准备了一张进度条图片，loaderState方法执行的时候，加载游戏所需的图片，并在页面上显示当前的进度。在多关卡的游戏中，加载的设置尤为重要。
3、理解游戏
3.1、认识phaser
对于一款游戏来说，框架就是它的基石。好的框架能是开发者利器，能够帮助开发者做出强有力的，跨浏览器的游戏，能给广大玩家带来更精致的作品。Phaser是一款专门用于移动及桌面的HTML5 2D游戏开发的开源免费框架，内置游戏物理引擎，它也就是传说中100行代码之内搞定Flappy Bird的神器。通过这个框架我们可以很容易地开发桌面和移动的小游戏。接下来我会以这个框架为基础，了解游戏的开发知识。
联系客服
