phaser入门教程：phaser3入坑指南phaser入门教程-1
phaser入门教程：phaser3入坑指南phaser入门教程-1height: 600 width: 800一 首先定义config 也就是游戏对象的一些配置let config = { type: Phaser.AUTO
phaser3
Phaser 是一款快速、免费以及开源 HTML5 游戏框架，它支持 WebGL 和 Canvas 两种渲染模式，可以在任何 Web 浏览器环境下运行，游戏可以通过第三方工具转为 iOS、Android 支持的 Native APP，允许使用 JavaScript 和 TypeScript 进行开发。
咱们直接来说咱们的主角phaser 目前两代版本， 跟python 一样， 分phaser2和phaser3 而且2和3不兼容， 在3里改写了很多的方法， 也改变了很多用法，对于想学习的同学，我建议是从phaser3直接学起.而且phaser2的底层是封装了pixi 而phaser3则重写了自己的渲染器！官方宣称性能各方面都明显比 Phaser 2 快很多！
废话不多说， 咱们先来认识下phaser3如何创建一个游戏对象
一 首先定义config 也就是游戏对象的一些配置
let config = {
type: Phaser.AUTO
width: 800
height: 600
physics: {
default: 'arcade'
arcade: {
gravity: { y: 300 }
debug: false
}
}
scene: {
preload: preload
create: create
update: update
}
};
- type可以理解为页面渲染方式， 总共有3中， 使用canvas 使用WEBGL 以及使用AUTO
- width和height就是游戏区域的宽和高
- physics则是物理引擎， 里面的default指定的是默认使用的物理引擎phaser3里集成了3种物理引擎 分别是arcade matter impact
- arcade则是对初始设置， gravity是重力， y指的是y轴 300则是向下的重力速度debug就是是否开启debug模式，开启会有什么效果这个可以自己尝试
- scene就是场景， 要知道一个游戏有可能是单场景的， 也有可能是多场景， 各个场景各司其职来配合， 所以场景是很重要的!!!这里重点， 在preload create update这3个方法中的this指的就是场景， 而不是游戏对象
- preload create update可以理解就是3个生命周期函数， preload是最先执行， 然后是create 最后是update 一直不停地执行! 多场景的使用方法， 咱们下回分解.
二 配置文件咱们创建完了 该创建游戏对象了
var game = new Phaser.Game(config);
也就是说new一个phaser.Game 然后把咱们刚才创建的配置文件 当做入参传递进去就会生成一个game对象了 这个game对象有什么用呢 咱们往后看.
三 该写preload create update这3个函数了
preload () {
console.log('preload')
}
create() {
console.log('create')
}
update () {
console.log(')
}
这3个一般咱们怎么用呢 先简单介绍下!
首先 preload一般是用来加载资源文件的
例如: this.load.image('player' 'image/player.png');
先在这里把该加载的资源都加载完成 当然 加载进度也是在这里定义的 相对于phaser2来说 phaser3的进度获取不算太复杂
this.load.on('progress' function(value) { //新的进度加载
console.log(Math.round(value * 100) ' %')
});
咱们获取的加载进度progress是一个介于0和1之间的数 所以要转换成%需要做处理 相信聪明的你已经懂了.
其次 create呢 我们一般是把已经读取到cache里的图片在这里进行添加
例如: this.add.sprite(x y 'player');
x指的是屏幕x轴方向的值 y就是y轴的值 这是图片的起始位置 而player则是刚才我们在preload中加载的图片的第一个参数 忘了就上去看看.两者之间是对应的 因为它代表了我们加载的图片资源的名字.
当然这里还可以定义一些比如计时器 补间动画等等不需要重复执行的东东.
最后 update 先要清楚 update是一直在跑的
update
这样 我们一些需要实时检测的东西 就可以放到update里去 update的执行间隔大概是16毫秒左右一次
什么东西需要实时检测呢 就比如地球与月亮的碰撞...飞驰的子弹...满屏不停出现的小怪兽等等 还有很多很多的应用.
暂且今天先到这里 在最后还有一个小小的惊喜 那就是 update这个函数是有形参的 而且是2个 第一个形参指的游戏的运行时间 第二个形参就是update的执行间隔时间 这可以很方便的让我们做很多事情.
下一次咱们会先介绍一些这个游戏库的api中常用的功能 还有后面的实战 就不要的很无聊的都来用官网的那个吃星星的案例了好不 咱们来个捕鱼大战吧 还挺有意思的!
还有一个问题就是 因为phaser毕竟的外国的框架 在github上 国内下载文档和案例还是挺难的 所以可以关注一个wx公众号 叫多多程序员 回复phaser3Doc 就可以获得phaser3的本地文档(英文版) 还是挺方便的 对自己英文有点自信的可以下载去先看一看
咱们回头见!
