1.先搭起一个基本的架子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<!-- 两种方式，一种是使用CDN，第二种是引入本地文件 -->
<!-- <script src="https://cdn.bootcdn.net/ajax/libs/phaser-ce/2.19.2/phaser.min.js"></script> -->
<script src="js/phaser.min.js"></script>
<body>
<script>
</script>
</body>
</head>
<body>
</body>
</html>
2.js中先声明
var game = new Phaser.Game(800, 600, Phaser.CANVAS, "game", {
preload,
create,
update,
});
// 用来加载一些资源
function preload(){},
// 进行一些对象的创建及初始化
function create(){},
// 游戏的主循环
function update(){},
Phaser.Game
- 第一个参数是设置宽
- 第二个参数是设置高
- 第三个参数是使用哪个渲染器：Phaser.AUTO 将自动检测、Phaser.WEBGL、Phaser.CANVAS 或 Phaser.HEADLESS（根本不渲染），注意移动端推荐使用Phaser.CANVAS
- 第四个参数是DOM ID（字符串）或元素本身，也可以空字符串，空字符串表示挂载到body下。
- 第五个参数是默认状态对象
上面是第一种声明方式，还可以其他方法声明：
-
- 第二种：定义对象
var game = new Phaser.Game(375, 667, Phaser.CANVAS, "game");
var state = {
preload: preload,
create: create,
update: update,
};
function preload() {
console.log("preload----》》》2");
}
var platforms;
function create() {
console.log("create----》》》2");
}
function update() {
console.log("update----》》》2");
}
game.state.add("state", state);
game.state.start("state");
-
- 第三种：定义函数
var game = new Phaser.Game(375, 667, Phaser.CANVAS, "game");
function state() {
this.preload = function () {
console.log("第三种---preload1");
};
this.create = function () {
console.log("第三种---create2");
};
this.update = function () {
console.log("第三种---update3");
};
}
game.state.add("state", state);
game.state.start("state");
-
- 第四种：管理场景
game.MyStates = {};
game.MyStates.state1 = {
preload: function () {
console.log("第四种---preload1管理对象");
},
create: function () {
console.log("第四种---create1管理对象");
},
update: function () {
console.log("第四种---update1管理对象");
},
};
game.MyStates.state2 = {
preload: function () {
console.log("第四种---preload2管理对象");
},
create: function () {
console.log("第四种---create2管理对象");
},
update: function () {
console.log("第四种---update2管理对象");
},
};
game.state.add("state1", game.MyStates.state1);
game.state.add("state2", game.MyStates.state2);
game.state.start("state1");
第三种和第四种都可以创建多个场景，方便进行场景切换，也可以设置加载进度条
适配移动端
一般在这里就可以设置适配了 EXACT_FIT 拉伸占满宽度,SHOW_ALL 按照设置的宽高比，不一定会占满整个宽，USER_SCALE 自定义,EXACT_FIT和SHOW_ALL用的比较多
function preload(){
if (!game.device.desktop) {
game.scale.scaleMode = Phaser.ScaleManager.EXACT_FIT;
}
}
还需要定义一些css样式
body{margin:0;}
#game {
position: absolute;
width: 100%;
height: 100%;
}
/* 让游戏在pc端居中显示 */
canvas {
margin: 0 auto;
}
在场景一里load的资源，在其他场景中可以add出来：
game.MyStates.state1 = {
preload: function () {
game.load.image("loading", "assets/preloader.gif")
},
create: function () {
game.state.start("state2")
},
};
game.MyStates.state2 = {
preload: function () {
// 在这里可以访问到state1中加载的资源
game.add.sprite(10, game.height / 2, "loading");
},
};
game.state.add("state1", game.MyStates.state1);
game.state.add("state2", game.MyStates.state2);
game.state.start("state1");
精灵
sprite和image的区别：
- 加载都是通过game.load.image
- 使用sprite是通过game.add.sprite，而使用image是通过game.add.image
- sprite可以有物理属性，image没有（比如碰撞的时候需要设置为精灵，image检测不到）
锚点默认在左上角
