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

我正在尝试使用top-down perspective制作游戏，该游戏中，玩家精灵固定在屏幕中央，并且背景沿与玩家方向相反的方向移动（滚动），因此会影响玩家的移动效果。

我从以下示例开始：Invaders（用于背景滚动）和Asteroids Movement（用于精灵移动）。前者使用TileSprite及其tilePosition属性对背景进行垂直滚动。这对于在固定方向（垂直或水平）上线性滚动很有用。但就我而言，我需要在任何方向进行工具滚动（即移动）。此外，像小行星示例一样，我还需要诸如加速和阻力之类的物理特性。所以我想将Arcade Physics应用于TileSprite。但是，似乎Arcade Physics无法与TileSprite一起使用。或者，更确切地说，它不符合我的预期。

我已经尝试为TileSprite启用Arcade Physics，因为它与Sprites一起使用。这是代码：

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结合使用？

最佳答案

我的建议是重新考虑整个事情。主要思想不是使播放器精灵固定，而是在启用物理功能的情况下使其“动态”。要获得理想的效果，只需使摄像机跟随播放器精灵（无死区）即可。这样，玩家就可以保持居中，并经典地管理磁贴。

关于javascript - 是否可以将Phaser物理应用于TileSprite的滚动位置？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39103808/