在上月末，一个引人注目的消息在业界掀起了波澜。蝴蝶互动公司宣布其旗下游戏《传奇世界》的月流水突破了1500万，成为业内首款千万级别的爆款游戏，这一成绩无疑为H5游戏行业注入了一股强心剂。相较于以往对H5游戏的唱衰声，这次事件再次将H5游戏推向了风口浪尖。
不同于传统的Flash页游，H5游戏的Canvas技术能在PC端和移动端实现跨平台运行。游戏开发一直是前沿技术的极致运用领域，H5游戏也不例外。这篇文章将带你从基础入手，深入H5游戏开发的世界。
一、准备条件
1.1 设计师应注意的地方
在设计H5网页，特别是移动端的H5网页时，由于多种设备、多种平台、多种尺寸的问题，设计师和前端工程师可能会面临一些挑战。为了确定设计稿的标准尺寸，我们需要参考市面上主流的手机尺寸。现在已经有很多2K分辨率的手机屏幕了，设计稿的宽度是否也要跟着最大分辨率来设计？实际上并不需要。我们需要根据实际市场情况来选择一个合适的尺寸作为设计稿的基准。
1.2 开发者应注意的地方
在开发和测试阶段，开发者需要注意内容在页面中可能无法全屏显示的问题。由于手机浏览器或微信客户端等不同平台的特性，底部或顶部可能会有一个状态栏的占位。这可能导致内容无法完全显示在屏幕上。在进行H5页面内容规划布局设计时，应避免将重要内容放在过于偏上或偏下的位置。
二、开始动手
2.1 页面流程
当我们开始开发一个H5游戏时，其流程通常包括以下步骤：首先出现一个加载进度条，加载必要的图片、音频、字体等文件；然后显示主菜单，提示用户开始游戏；接着进入游戏主逻辑，根据用户在游戏过程中的操作触发相应的逻辑反应，如胜利、失败或触发某个按钮或按键退出显示结果页面；最后用户可以选择分享游戏或关闭游戏。
2.2 资源的加载
H5游戏开发需要大量的视觉和听觉素材，而用户的网络带宽有限。开发者需要关注资源的加载过程，避免因资源加载过慢而影响用户体验。一个好的做法是创建一个预加载器，延后脚本代码的执行，直到所有的资源都下载完毕为止。这样可以确保在游戏开始前，所有必要的资源都已经准备好，从而提供更好的用户体验。
以phaser为例，我们可以使用其提供的加载器来预加载游戏资源，然后在资源加载完成后执行相应的逻辑。这样不仅可以提高游戏的加载速度，还可以提高游戏的稳定性。
3. 游戏开发的世界观
3.1 认识phaser
Phaser是一款专门用于移动及桌面的HTML5 2D游戏开发的开源免费框架。它内置游戏物理引擎，为开发者提供了强大的工具来开发高质量的游戏。通过这个框架，我们可以轻松地开发出桌面和移动的小游戏。
3.2 场景的生命周期
场景是游戏中不同的界面或内容。例如，游戏菜单界面为一个场景，玩游戏的界面为另一个场景，不同的关卡又是不同的场景等。通过合理地切换场景，我们可以将一个复杂的游戏分解成多个小块，从而简化游戏的开发过程。
3.3 元素
元素是游戏中的显示对象，如文字、图形、图像、精灵和瓦片等。这些元素通过组合和交互，构成了游戏的视觉和操作体验。了解这些元素的使用方法对于开发出高质量的游戏至关重要。
以瓦片精灵为例，我们可以使用它来实现背景的平铺效果。通过调整瓦片的大小和位置，我们可以创建出各种复杂的背景效果。我们还可以使用Tween对象来实现补间动画效果，使游戏画面更加流畅。
3.4 物理引擎
为了使游戏更加逼真，我们需要使用物理引擎来计算游戏中物体的运动、旋转和碰撞效果。Phaser内置了多种物理引擎供我们选择使用。例如P2作为一个JS的2D渲染器就非常适合用于H5游戏开发中实现物理效果的需求。通过使用物理引擎我们可以让游戏中的物体具有真实的物理属性如重力、碰撞等从而让游戏体验更加真实和有趣。
3.5 动画