文/刘春鹏 腾讯网前端开发工程师，腾讯网首页、天天快报WEB版项目技术负责人，致力于HTML5页面开发。

　　从H5诞生以来，对于H5游戏一直唱衰不断，而这又一次把H5游戏推向风口浪尖。

　　区别于寻常的Flash页游，此游戏采用了H5的Canvas技术，能在PC端和移动端跨平台运行。一直以来，游戏开发都是把前沿技术运用到极致的媒介，H5游戏也不例外，这篇文章会从带你从浅入手，深入H5游戏开发的世界。

　　1、准备条件

　　1.1、设计师应该注意的地方

　　移动端最大的问题在于多种设备，多种平台，多种尺寸，当我们在做手机端H5网页设计稿时（当然包含微信端的H5网页设计），如果没有做过类似的移动端的设计，UI设计师和前端工程师肯定会纠结的。那么多手机屏幕尺寸，设计稿应该按照哪一个尺寸作为标准尺寸。现在已经有很多2K分辨率的手机屏幕了，设计稿是不是也要把宽高跟着最大分辨率来设计。显然不是。先看一下市面上主流的手机尺寸：


　　若要使一个游戏更逼真，那一定离不开物理引擎，物理引擎是通过为游戏中的物体赋予真实的物理属性，计算运动、旋转和碰撞之后的效果。就是把现实世界的牛顿定律，应用到虚拟世界当中去。物理引擎是独立于游戏引擎存在的一个库。物理引擎的种类很多，例如box2d，cocos，three等，各有优劣，各有擅长。Phaser就内置了三种物理引擎arcade、ninja、P2（pixi 2d）。P2在这里要单独提一下，P2作为一个JS的2D渲染器，它的目标是提供一个快速的、轻量级而且是兼任所有设备的2D库。对于支持webgl的浏览器，P2将使用webgl绘图，不支持webgl的浏览器就降级至canvas，Pixi渲染器可以使开发者享受到硬件加速，但并不需要了解WebGL。进当然不限于这些引擎，你可以另外添加自己需要的物理引擎。下面是物理引擎的一个实例。


　　4.2、在进行页面布局的时候，脱离设备，按照640x1136像素进行布局，然后在页面的meta里加入


　　进行0.5倍缩放。这时候屏幕能适应320x568宽度的手机屏，对于比较宽的手机，会有些黑边。你也可以通过phaser进行缩放。


　　scaleMode会更改canvas的大小达到适配的目的。

　　4.3、如果你想学习phaser，这里有650+的例子和文档，你也可去百度搜一篇Flappy Bird开发的教程，这样的学习会更高效。

　　5、结尾

　　当试着用百度搜索了一些“H5游戏开发”之后，发现网上教程很多，什么“45分钟学会H5游戏开发”，“100行代码做个H5游戏”比比皆是，于是就改了主意，从另一角度来阐释游戏开发。H5游戏开发的思路大都是来自于Flash，Flash有一套现成的开发流程，把它的思想理解之后，对于H5游戏开发好处多多。再次把焦点回到市场上来，“今年将是H5游戏的元年！”，这个口号一直喊了5年，市场渐渐疲软。直到2016年第一款千万级别的产品出世，让游戏行业重新认识到原来H5游戏也是可以赚钱的。以现在的眼光来看待H5游戏行业，无论从技术层面还是用户层面来讲，H5游戏的市场都呈现越来越广阔的状态。

锐亚教育，游戏开发论坛|游戏制作人|游戏策划|游戏开发|独立游戏|游戏产业|游戏研发|游戏运营| unity|unity3d|unity3d官网|unity3d 教程|金融帝国3|8k8k8k|mcafee8.5i|游戏蛮牛|蛮牛 unity|蛮牛