官方教程示例 http://phaser.io/examples

相机 Camera

1. 镜头跟随

实现游戏角色在大地图中的镜头跟随效果，角色保持在镜头中间，靠近边界时镜头也不会超出地图边界。

1
2
3
4
5
game.physics.startSystem(Phaser.Physics.P2JS);
player = game.add.sprite(game.world.centerX, game.world.centerY, 'player');
game.physics.p2.enable(player);
cursors = game.input.keyboard.createCursorKeys();
game.camera.follow(player);  //镜头跟随关键

2. 镜头移动

可以直接通过game.camera来控制镜头的位置

1
game.camera.x = 50;

​3. 镜头跟随触发区域dead zone

在镜头跟随的基础上，可以设定一个方形的触发镜头移动的区域Dead Zone。即当角色到达Dead Zone的边界时，镜头就触发往相应方向移动的效果。如果不设置的话，角色必须到达镜头边界后，才会移动镜头（也就是默认的Dead Zone大小与镜头区域大小一致）。

1
game.camera.deadzone = new Phaser.Rectangle(100, 100, 600, 400);

4. 保持在镜头固定位置

如果想在镜头某处固定一个元素，比如电视台的图标那样，只需要将元素的fixedToCamera设置成true

1
logo.fixedToCamera = true;

5. 镜头跟随模式

共有四种跟随模式：LOCKON/PLATFORMER/TOPDOWN/TOPDOWN_TIGHT

实际上就是设置了四种不同大小的Dead Zone:

1
2
3
4
5
6
7
w = width/8   h = height/3​   
LOCKON：Dead Zone 设置为null
PLATFORMER​：（-7w/16, -1h/3, w,h）
helper  = max(w, h)/4​
TOPDOWN：（(width-helper)/2, (height-helper)/2, helper, helper）
helper  = max(w, h)/8​
​TOPDOWN_TIGHT​：（(width-helper)/2, (height-helper)/2,  helper, helper）

6. 角色不出镜头范围

需要给游戏角色的图片加上物理碰撞检测，碰到边界时，角色将无法在继续向前