如果你是一名游戏新手,并且刚接触游戏引擎的话,个人推荐使用 Phaser 游戏引擎框架,因为它较简单,易上手,容易懂.先献上开发参考文档:
api 文档 (强烈推荐)
官网
虽然有中文版的文档,但是翻译的真心不好,开发中,只要看好 api 文档,结合官网的例子,就很好开发了.
准备工作
运行 phaser 小游戏需要 web 服务器环境,官网中有提到安装 web 服务器环境,如果你是一名前端攻城狮,你也可以自己用 gulp 或者 webpack 开发工具搭一个 web 服务器环境.我已写好一套小游戏开发框架放在 github 上, github 地址 .
把代码拉下来运行后,就可以开始正式开发了.
开发过程
设置画布
代码中设置画布的大小是 987 * 1280,本来是按照 720 * 1280 尺寸设置的,但是为了适应不用的屏幕,需要将宽设置大一些,满足在每个移动设备中高撑满,宽自适应的效果,所以设计稿中的背景图的宽也需要长些.再根据每个设置月画布大小的比例,算出游戏需要向左偏移的距离 left.
//在html中定义画布将加载在那个dom元素上
<div id='main'></div>
//创建一个游戏对象
let game = new Phaser.Game(config.DesignSize.width, config.DesignSize.height, Phaser.CANVAS, 'main')
添加场景:
开始运行场景
//添加场景
game.state.add('boot', Boot)
game.state.add('preload', Preload)
game.state.add('play', Play)
一共有 3 个场景
//开始"boot"场景
Game.state.start('boot')
states //游戏场景
├── boot.js //启动场景
├── play.js //游戏逻辑处理场景
└── preload.js //预加载场景
每个场景都有自己的生命周期,常用的生命周期是 init(初始化),preload(加载),create(准备就绪),update(更新周期),render(渲染完成)
init - 初始化数据定义,最开始执行.
preload - 尽管我们有预加载的场景,但如果你希望能缩短进入页面时加载的时间,可以分摊一些到其他场景,只需要在其他场景加入 preload 方法即可.
create - 如果存在 preload 方法,则会在加载完毕后执行此方法;否则将在进入该场景时直接执行此方法.
update - 更新周期自动执行的方法,例如在 play 场景的 update 方法中可以去检测两个物体是否有接触.
render - 渲染完毕后执行的方法,例如可以在此方法中勾勒出物体的边缘,来方便观察物体的碰撞区域.
每个场景执行都有先后顺序,如果前一个场景执行完后,就可以启动下一个场景.
定义好每个场景后,就可以开始写游戏逻辑了.此处就不展开具体的游戏写法,下一篇将具体讲一下游戏开发中总结的精华.
来源: http://www.jianshu.com/p/4078f2b9276a