Phaser 简单入门
2010jing.png
首先，到github下载 Phaser
准备一些材料如图片。
基本结构
part1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Phaser - Making your first game, part 1</title>
<script type="text/javascript" src="js/phaser.min.js"></script>
<style type="text/css">
body {
margin: 0;
}
</style>
</head>
<body>
<script type="text/javascript">
var game = new Phaser.Game(800,600,Phaser.AUTO,'',{preload:preload,create:create,update:update});
function preload(){
}
function create(){
}
function update(){
}
</script>
</body>
</html>
首先实例化一个Phaser.Game的对象，赋值给变量 game.
参数说明
第一二个参数 800,600，分别是canvas的宽，高。
第三个参数 Phaser.AUTO 用于渲染上下文，这里默认会选择WebGL,如果浏览器不支持，会选择Canvas。
第四个参数 空字符串， 这里可以写入 DOM的 id值， 表示可以将canvas 插入到指定的位置。 填空字符串 ' ' 表示canvas 会追加在body。
最后一个参数，是一个对象，可以包含Phaser的基础功能，这个参数是可选。
更多的 Game() 构造函数 资料
加载资源
function preload() {
game.load.image('sky','assets/sky.png');
game.load.image('ground', 'assets/platform.png');
game.load.image('star', 'assets/star.png');
game.load.spritesheet('dude', 'assets/dude.png', 32, 48);
}
预加载 外部资源，如图片，音频， json, xml, txt到缓存。
game.load.image 加载 image 到当前加载队列，
sky- 指定唯一的资源key
assets/sky.png - 资源路径
game.load.spritesheet 加载 Sprite Sheet 到当前加载队列，
dude - 指定唯一的资源key
assets/dude.png - 资源路径
32 - frameWidth
48 - frameHeight
更多的 Phaser.Loader 资料
添加Sprite
function create(){
game.add.sprite(100,100,'star');
}
在 坐标（x,y）=(100,100)的位置 添加 star
2010jing.png
添加一个整体的环境
function create(){
// We're going to be using physics, so enable the Arcade Physics system
game.physics.startSystem(Phaser.Physics.ARCADE);
// A simple background for our game
game.add.sprite(0, 0, 'sky');
// The platforms group contains the ground and the 2 ledges we can jump on
platforms = game.add.group();
// We will enable physics for any object that is created in this group
platforms.enableBody = true;
// Here we create the ground.
var ground = platforms.create(0, game.world.height - 64, 'ground');
// Scale it to fit the width of the game (the original sprite is 400x32 in size)
ground.scale.setTo(2, 2);
// This stops it from falling away when you jump on it
ground.body.immovable = true;
// Now let's create two ledges
var ledge = platforms.create(400, 400, 'ground');
ledge.body.immovable = true;
ledge = platforms.create(-150, 250, 'ground');
ledge.body.immovable = true;
game.add.sprite(100,100,'star');
}
首先激活 Arcade Physics system
添加 sky 背景
创建一个group 来包含 一个地板 和 两个横条
在添加对象到group之前 需要先enableBody = true
接下来就是添加 地板和横条，并且对大小 和位置分别设置。
2010jing.png
添加人物和设定
// The player and its settings
player = game.add.sprite(32, game.world.height - 150, 'dude');
// We need to enable physics on the player
game.physics.arcade.enable(player);
// Player physics properties. Give the little guy a slight bounce.
player.body.bounce.y = 0.2;
player.body.gravity.y = 300;
player.body.collideWorldBounds = true;
// Our two animations, walking left and right.
player.animations.add('left', [0, 1, 2, 3], 10, true);
player.animations.add('right', [5, 6, 7, 8], 10, true);
人物是这样的
2010jing.png
player.body.bounce.y = 0.2
设置y轴方向的反弹值
player.body.gravity.y = 300
设置y轴方向的重力的值
player.body.collideWorldBounds = true
设置碰撞边界为true, 否则 小人物就会掉下去，消失在canvas。
player.animations.add('left', [0, 1, 2, 3], 10, true);
player.animations.add('right', [5, 6, 7, 8], 10, true);
定义两个动画效果分别为 left 和 right
left frame 从 0，1, 2，3 向左奔跑 10秒每贞， true 表示 循环
right frame 从 5，6, 7，8 向右奔跑 10秒每贞， true 表示 循环
中间第四frame是个正面。
