网站地图    收藏   

主页 > canvas引擎 > Phaser游戏引擎 >

phaser教程之相机camera

来源:未知    时间:2020-01-29 22:16 作者:小飞侠 阅读:

[导读] 相机 Camera 1. 镜头跟随 实现游戏角色在大地图中的镜头跟随效果,角色保持在镜头中间,靠近边界时镜头也不会超出地图边界。 game.physics.startSystem(Phaser.Physics.P2JS); player = game.add.sprite...

image.png

相机  Camera

1. 镜头跟随

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

    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来控制镜头的位置

game.camera.x = 50;

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

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

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

4. 保持在镜头固定位置

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

logo.fixedToCamera = true;

5. 镜头跟随模式

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

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

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. 角色不出镜头范围

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


7.完整代码:

var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render });

function preload() {

    game.load.image('background','assets/tests/debug-grid-1920x1920.png');
    game.load.image('player','assets/sprites/phaser-dude.png');

}

var player;
var cursors;

function create() {

    game.add.tileSprite(0, 0, 1920, 1920, 'background');

    game.world.setBounds(0, 0, 1920, 1920);

    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);

}

function update() {

    player.body.setZeroVelocity();

    if (cursors.up.isDown)
    {
        player.body.moveUp(300)
    }
    else if (cursors.down.isDown)
    {
        player.body.moveDown(300);
    }

    if (cursors.left.isDown)
    {
        player.body.velocity.x = -300;
    }
    else if (cursors.right.isDown)
    {
        player.body.moveRight(300);
    }

}

function render() {

    game.debug.cameraInfo(game.camera, 32, 32);
    game.debug.spriteCoords(player, 32, 500);

}


自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论