PixiJS Parallax Scrolling Background и статические спрайты

Question

Я работаю над игрой Parallax Sidescroller в PixiJS для школьного проекта, и я немного беспокоюсь о том, чтобы заставить вещи работать должным образом. По сути, у меня есть три фона (с использованием класса, который расширяется от PIXI.extras.TilingSprite), который прокручивает на разных скоростях, и игрок (движется совершенно другим способом), когда пользователь нажимает любую из клавиш со стрелками. Я также использую расширение Pixi Viewport ( https://github.com/davidfig/viewport), чтобы получить хороший и чистый вид игры, следующий за игроком. Выглядит отлично и все (несмотря на некоторые проблемы, которые мне нужно исправить с помощью шейдеров, а что нет), но сейчас я пытаюсь добавить в игру статические спрайты, и это, к сожалению, не работает так, как я думал, что будет. Вот как выглядит GIF в игре:

Пример GIF

Прошу прощения за ужасное качество, мне пришлось перепрыгнуть через несколько обручей, чтобы записать этот материал и сделать его в формате GIF.

Вот соответствующие классы, которые я сделал до сих пор:

class Monster extends PIXI.Sprite
{
    constructor(texture, x, y)
    {
        super(texture);
        this.anchor.x = 0.5;
        this.x = x;
        this.y = y;
    }
}

class ParallaxLayer extends PIXI.extras.TilingSprite{
    constructor(texture, deltaX = 0.5){
        super(PIXI.loader.resources[texture].texture, viewport.worldWidth, viewport.worldHeight);
        this.vx = 0;
        this.viewportX = 0;
        this.deltaX = deltaX;
        this.filters = [];
        this.setViewportX(-680);
        this.x = -680;
    }
    setViewportX(newViewportX){
        if (newViewportX > 0)
        {
            let distanceTravelled = newViewportX - this.viewportX;
            this.viewportX = newViewportX;
            this.tilePosition.x -= (distanceTravelled * this.deltaX);
        }

    }
    getViewportX(){
        return this.viewportX;
    }
}

И вот код, который работает в моем игровом цикле для перемещения фона параллакса и игрока:

   // changes 'x' tile position (parallax scrolling effect
    for (var i = 0; i < bgTilingSprites.length; i++) 
    {
        if (bgTilingSprites[i].vx != 0)
        {
            let scale = bgTilingSprites[i].tileScale.x;
            let speed = deltaTime * scale * bgTilingSprites[i].vx;
            bgTilingSprites[i].setViewportX(bgTilingSprites[i].viewportX + ((i+1) * speed));
            //bgTilingSprites[i].tilePosition.x -= (i + 1) * speed;


            // it's "fix" a tilisprite position bug
            var width = bgTilingSprites[i].texture.width * scale; 
            if (bgTilingSprites[i].tilePosition.x >= width) 
            {
                //bgTilingSprites[i].tilePosition.x -= width;
                bgTilingSprites[i].setViewportX(width);
            }
            else if (bgTilingSprites[i].tilePosition.x <= -width) 
            {
                //bgTilingSprites[i].tilePosition.x += width;
                bgTilingSprites[i].setViewportX(-width);
            }
        }
    }
    // If the player's x velocity is not 0
    if (player.vx != 0)
    {
        // Calculate player speed
        let playerSpeed = deltaTime * player.vx;
        // Increment player's position by their speed
        if (player.x > -675)
        {
            player.x += playerSpeed;
            // Animate the player
            if (player.playing != true)
            {
                player.texture = playerWalkFrames[0];
                player.play();
            }
        }
    }
    else
    {
        if (player.playing != false){
            player.gotoAndStop(0);
            player.texture = playerTexture;
            player.footstepToPlay = 0;
            player.footstepDelay = 0;
        }

    }

Если есть какая-либо другая информация, которая поможет мне решить эту проблему, я с радостью предоставлю. Я все еще очень плохо знаком со Stack Overflow (и я далеко не эксперт по JavaScript), поэтому я был бы очень признателен за совет, который помог бы мне получить наилучшую возможную помощь для этого.

Answer 1

Как вы хотите, чтобы это выглядело?

Прямо сейчас я вижу, что фоновые слои движутся мимо монстра, так что похоже, что монстр действительно движется вправо, верно?

Что ж, все фоны параллакса на самом деле движутся влево, поэтому весь "мир" движется влево. Теперь монстр не движется вообще (движется только камера расширения области просмотра, поэтому монстр движется на экране) Но поскольку все движется влево, имеет смысл, что статический спрайт будет двигаться вправо,

Вы перемещаете фон относительно движения игроков. возможно, вы должны сделать то же самое с монстром, заставить его двигаться как фоны со скоростью где-то между 1-м и 2-м слоем.