从零到一:用Phaser.js写意地开发小游戏(Chapter 2
来源:互联网 发布:2017编程学什么语言 编辑:程序博客网 时间:2024/06/08 13:26
上一节我们认识了Phaser.js,也说到了Phaser比较适合开发2D的小游戏,那么接下来的几篇文章会以开发一个移动端的小游戏为例,来介绍如何上手Phaser.js。这一节的主要内容是用Phaser.js搭建游戏的骨架。
游戏相关的一些概念
画布
一般来说,做游戏的话基于Canvas会比基于DOM性能要好很多,尤其是涉及大量动画的情况下。Phaser会将一切渲染在canvas元素上,于是,毫不夸张地说,你的body标签里可能只包含一个canvas元素。
由于本节开发的目标是一个移动端的小游戏,因此画布一般来说都是充满全屏的。
场景
一个完整的游戏都是有分场景的,不是指“迷宫”、“沙漠”这些游戏场景,而是“加载”、“开始”、“游戏”、“结束”等场景。一般来说我们实际做项目的时候也大概是如下四种场景:
加载——展示进度条和loading动画,主要操作为加载游戏资源,如图片、音频等。
开始——展示开始按钮、活动规则等,主要是让玩家能有主动开始的操作(很关键,后面会说到)。
游戏——整个游戏的主要逻辑都在这个场景中,最核心的部分。
结束——展示游戏最终得分、排名等。
这样的场景的划分也算是描述出了整个游戏的生命周期,我认为上述四个场景是最基本的,缺了哪个场景游戏都不算完整,或者是体验不够完善。
另外,关于再玩一次,有两种方式,一种是回到开始场景,也就是说要再点一次开始游戏,这时候你可以再看看游戏规则等;另一种是直接开始游戏。选用哪一种方式视具体项目而定,比较常见的是直接开始游戏。
对象池
游戏中生成非常多的元素,我们会需要一个对象池来维护他们,对象池可以理解成是一个Group。那么关于对象池有以下相关的操作:
尽可能的复用对象,可以减少内存的开销。例如已经移出可视范围的对象(例如跑酷游戏的障碍),重新设置它们的位置,而不是重新创建。
如有确定要销毁的对象,记得显式调用distroy方法(一般游戏框架并不会被销毁killed的对象,它们还能被“复活”)。
正式开始
每一步我都会给出示例代码,大家点击示例代码链接旁的“点击预览”即可看到效果。
第一步:创建实例
引入Phaser.js
创建游戏实例
说明:这里宽高设置成320*568是为了方便大家查看示例,实际应用场景应该是
var width = window.innerWidth;var height = window.innerHeight;
示例代码:https://jsfiddle.net/Vincent_...
// 实际应用场景改为window.innerWidth和window.innerHeight。// 这里是为了方便查看示例。var width = 320;var height = 568;// 创建游戏实例var game = new Phaser.Game(width, height, Phaser.AUTO, '#game');
第二步:定义场景
定义每个场景的内容
将场景添加到游戏实例中
说明:
每个场景都是一个function。
通过
game.state.add
可以将场景添加到游戏
示例代码:https://jsfiddle.net/Vincent_...
// 实际应用场景改为window.innerWidth和window.innerHeight。// 这里是为了方便查看示例。var width = 320;var height = 568;// 创建游戏实例var game = new Phaser.Game(width, height, Phaser.AUTO, '#game');// 定义场景var states = {// 加载场景 preload: function() {}, // 开始场景 created: function() {}, // 游戏场景 play: function() {}, // 结束场景 over: function() {}};// 添加场景到游戏示例中Object.keys(states).map(function(key) {game.state.add(key, states[key]);});
第三步:将场景串通
具体定义每个场景的生命周期
从一个场景切换到另一个场景
启动游戏
说明:
每个场景都有自己的生命周期,常用的生命周期是preload(加载)、create(准备就绪)、update(更新周期)、render(渲染完成)。顺带介绍一下这四个生命周期吧(详细介绍可以查看官方离线文档):
preload - 尽管我们有预加载的场景,但如果你希望能缩短进入页面时加载的时间,可以分摊一些到其他场景,只需要在其他场景加入preload方法即可。
create - 如果存在preload方法,则会在加载完毕后执行此方法;否则将在进入该场景时直接执行此方法。
update - 更新周期自动执行的方法,例如在play场景的update方法中可以去检测两个物体是否有接触。
render - 渲染完毕后执行的方法,例如可以在此方法中勾勒出物体的边缘,来方便观察物体的碰撞区域。
示例代码:https://jsfiddle.net/Vincent_...
// 实际应用场景改为window.innerWidth和window.innerHeight。// 这里是为了方便查看示例。var width = 320;var height = 568;// 创建游戏实例var game = new Phaser.Game(width, height, Phaser.AUTO, '#game');// 定义场景var states = {// 加载场景 preload: function() { this.create = function() { // TO-DOgame.stage.backgroundColor = '#aaa'; setTimeout(function() {game.state.start('created');}, 3000); } }, // 开始场景 created: function() { this.create = function() { // TO-DOgame.stage.backgroundColor = '#777';setTimeout(function() {game.state.start('play');}, 3000); } }, // 游戏场景 play: function() { this.create = function() { // TO-DOgame.stage.backgroundColor = '#444';setTimeout(function() {game.state.start('over');}, 3000); } }, // 结束场景 over: function() { this.create = function() { // TO-DO game.stage.backgroundColor = '#000'; alert('游戏结束!'); } }};// 添加场景到游戏示例中Object.keys(states).map(function(key) {game.state.add(key, states[key]);});// 启动游戏game.state.start('preload');
迈出了第一步
至此我们已经将游戏的场景设置好,并成功启动了游戏,通过游戏背景颜色的变化可以体验到场景的切换,我们也能了解到整个游戏分为了四部分,每部分有自己的生命周期。
很多教程会从创建主角做起,但我认为先把游戏骨架搭建好了,再丰富每个场景里面的细节,会更容易理解整个游戏的运行过程。
代码没有很多行,我也都用ES5来写,阅读起来应该不费劲。这一节包括后面的章节的内容都不会太多,方便大家消化。同时也尽可能的介绍每一步是怎么做的。
搭建好游戏的骨架后,我们总算是迈出了第一步。
未完待续
- 从零到一:用Phaser.js写意地开发小游戏(Chapter 2
- 从零到一:用Phaser.js写意地开发小游戏(Chapter 1
- 从零到一:用Phaser.js写意地开发小游戏(Chapter 3
- phaser 小游戏制作
- 啊哈 phaser制作小游戏flappy bird(2)
- javascript ---- Phaser做引擎小游戏
- 写意
- HTML5 - JS - 2D 游戏框架:Phaser
- phaser游戏开发之基础知识2
- Phaser.js 官方中文文档 phaser.io
- phaser.js入门篇
- Phaser.js教程
- 【2Dhtml5游戏框架phaser介绍2】使用在线云IDE开发phaser
- 用html+css+js实现中国象棋小游戏开发项目
- 初学Phaser.js之管中窥豹
- phaser.js显示对象篇
- Phaser.js物理引擎篇
- js 小游戏开发 面向对象 马原
- html select 可输入 可编辑
- 练习86
- 023-Java-014
- vue实例中data使用return包裹
- PYTHON 结巴中文分词工具的基础使用
- 从零到一:用Phaser.js写意地开发小游戏(Chapter 2
- 在Android studio中创建assets目录
- itk中的特征提取算法(二)
- Android7.0中文API -- Spinner
- pushlet工作流程分析
- 练习87
- 同时引入多个jQuery
- python- pandas cumsum用法(求累计次数)
- nginx 下 angular应用 出现错误状态码问题总结