一.phaser介绍
1.Phaser是国外一款免费开源的html5 2d游戏引擎框架,能创建运行在桌面端和移动端浏览器上的html5游戏和应用。
2.phaser的关键特征:
- 支持Canvas 和WebGL两种渲染模式
- 简单易用的资源加载系统
- 完善的动画系统
- 丰富的用户交互事件
- 支持html5 Audio和Web Audio两种声音模式
- 强大的物理引擎
二.创建游戏和游戏场景
1.游戏的创建
- 新建一个html页面
- 在页面中引入phaser.js文件
- 使用Phaser.Game对象来创建游戏
new Phaser.Game(**width**/游戏宽度,**height**/游戏高度,**renderer**/游戏渲染方式(Phaser.CANVAS Phaser.WEBGL Phaser.AUTO),**parent**(游戏的容器,可以是一个dom元素或id),**state**(游戏默认场景),**transparent**,**antialias**,**physicsConfig**)
例如,创建一个游戏对象:
var game=Phaser.Game(400,400,Phaser.AUTO,'container');
三.游戏中的场景
1.场景在Phaser中叫做State.创建场景对象Phaser.State的两种形式:
<1>对象形式:
{
init:function(){},
preload:function(){},
create:function(){},
update:function(){}.
render:function(){}
}
<2>函数形式:
function(){
this.init=function(){},
this.preload=function(){}.
this.create=function(){},
this.update=function(){},
this.render=function(){}
}
2.场景中的方法
- init() 一些场景的初始化代码可以写在这个方法里
- preload() 用来加载游戏资源
- create() 创建游戏显示对象或注册事件等
- update() 在游戏的每一帧都会调用,用来书写需要在每一帧都执行的代码
render() 在游戏的每一渲染周期都会调用,用来做一些自定义的渲染工作。
3.场景的管理
Phaser.StateManager场景管理对象
var game=new Phaser.Game();
game.state.add(name,**state**);
game.state.start(name);