PixiJS視差滾動背景和靜態精靈

Question

我正在為學校項目開發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

您希望它看起來如何？

現在，我看到背景層正在移動經過怪物，所以看起來怪物實際上正在向右移動，對嗎？

好吧，所有視差背景實際上都在向左移動，因此整個“世界”都在向左移動。 現在，怪物根本沒有移動（只是視口擴展攝影機在移動，這就是怪物在屏幕上移動的原因），但是由於一切都在向左移動，因此可以認為靜態精靈似乎在向右移動。

您相對於玩家移動背景。 也許您應該對怪物做同樣的事情，使其像背景一樣在第一層和第二層之間移動。