是否可以将Phaser物理应用于TileSprite的滚动位置?

时间:2016-08-23 14:20:01

标签: javascript game-engine phaser-framework

我正在尝试用top-down perspective进行游戏,其中玩家精灵被固定在屏幕中心,而背景正在向与玩家方向相反的方向移动(滚动),因此它会产生效果玩家的运动。

我从这些示例开始:Invaders(用于背景滚动)和Asteroids Movement(用于精灵移动)。前者使用TileSprite及其tilePosition属性来垂直滚动背景。这适用于固定方向(垂直或水平)的线性滚动。但在我的情况下,我需要在任何方向上实现滚动(即移动)。此外,我需要像加速和拖曳这样的物理特征,就像在小行星的例子中一样。所以我想将Arcade Physics应用到TileSprite。但似乎Arcade Physics不适用于TileSprite。或者,更准确地说,它不像我预期的那样有效。

我尝试为Spilees使用TileSprite启用Arcade Physics。这是代码:

function preload() {
    game.load.baseURL = 'http://examples.phaser.io/assets/';
    game.load.crossOrigin = 'anonymous';

    game.load.image('ship', 'games/invaders/player.png');
    game.load.image('starfield', 'games/invaders/starfield.png'); 
}

var player;
var cursors;
var starfield;
var playerAngle = 0; // angle of the player's movement, in degrees
var playerSpeed = 5; // the player's speed, px per frame

function create() {
    game.physics.startSystem(Phaser.Physics.ARCADE);

    //  The scrolling starfield background
    starfield = game.add.tileSprite(0, 0, 800, 600, 'starfield');
    game.physics.enable(starfield, Phaser.Physics.ARCADE);
    starfield.body.velocity.set(200);

    //  The player sprite
    player = game.add.sprite(400, 300, 'ship');
    player.anchor.setTo(0.5, 0.5);

    //  Gameplay controls
    cursors = game.input.keyboard.createCursorKeys();
}

function update() {
    //  Scroll the background
    var delta = 0;
    if (cursors.left.isDown)
        delta = -1;
    else if (cursors.right.isDown)
        delta = 1;
    if (delta)
        player.angle = playerAngle = (playerAngle + delta + 360) % 360;
    var a = (playerAngle + 90) / 360 * 2 * Math.PI; // angle of the background movement/scrolling, in radians
    // move the background by playerSpeed along the a angle
    game.physics.arcade.velocityFromRotation(a, 200, starfield.body.velocity);
}

Try at Phaser sandbox

不幸的是,这段代码无法正常工作。

就我所理解和the docs所述,Arcade Physics仅适用于Sprite,而非TileSprite或任何其他游戏对象。如果是这样,这意味着我必须手动重现所有物理内容,例如加速和拖拽TileSprite。我用恒定的速度写了简单的TileSprite运动(没有加速度,阻力和其他东西)。这是代码:

function preload() {
    game.load.baseURL = 'http://examples.phaser.io/assets/';
    game.load.crossOrigin = 'anonymous';

    game.load.image('ship', 'games/invaders/player.png');
    game.load.image('starfield', 'games/invaders/starfield.png'); 
}

var player;
var cursors;
var starfield;
var playerAngle = 0; // angle of the player's movement, in degrees
var playerSpeed = 5; // the player's speed, px per frame

function create() {
    game.physics.startSystem(Phaser.Physics.ARCADE);

    //  The scrolling starfield background
    starfield = game.add.tileSprite(0, 0, 800, 600, 'starfield');

    //  The player sprite
    player = game.add.sprite(400, 300, 'ship');
    player.anchor.setTo(0.5, 0.5);

    //  Gameplay controls
    cursors = game.input.keyboard.createCursorKeys();
}

function update() {
    //  Scroll the background
    var delta = 0;
    if (cursors.left.isDown)
        delta = -1;
    else if (cursors.right.isDown)
        delta = 1;
    if (delta)
        player.angle = playerAngle = (playerAngle + delta + 360) % 360;
    var a = (playerAngle + 90) / 360 * 2 * Math.PI; // angle of the background movement/scrolling, in radians
    // move the background by playerSpeed along the a angle
    starfield.tilePosition.x += playerSpeed * Math.cos(a);
    starfield.tilePosition.y += playerSpeed * Math.sin(a);
}

Try at Phaser sandbox

当然它有效,但即使像线性运动这样简单的东西也需要一些数学知识。其他事情需要更多的数学和物理知识。我不想手动实现这些事情。

那么有没有办法将Phaser Physics与tilePosition结合使用?

1 个答案:

答案 0 :(得分:1)

我的建议是重新思考整件事。主要想法是使玩家精灵固定,但要使其成为动态的#34;启用物理。要获得所需的效果,只需让相机跟随播放器精灵(没有死区)。这样,玩家仍然位于中心,并且经典地管理tileprite。