PixiJS 视差滚动背景和静态精灵答案

【问题标题】：PixiJS Parallax Scrolling Background and Static SpritesPixiJS 视差滚动背景和静态精灵
【发布时间】：2019-05-19 12:10:08
【问题描述】：

我正在为一个学校项目在 PixiJS 中开发一个视差横向卷轴游戏，我在让事情正常工作方面遇到了一些麻烦。从本质上讲，我有三个背景（使用从 PIXI.extras.TilingSprite 扩展的类），当用户按下任一箭头键时，它们以不同的速度滚动和一个播放器（以完全不同的方式移动）。我还在使用 Pixi Viewport 扩展程序 (https://github.com/davidfig/viewport)，以便在玩家之后获得一个漂亮而清晰的游戏视图。它看起来很棒（尽管我需要用着色器修复一些问题等等），但现在我正在尝试将静态精灵添加到游戏中，不幸的是这并没有像我想象的那样工作。这是它在游戏中的外观的 GIF：

Example 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 专家），所以我非常感谢能帮助我获得最佳帮助的建议。

【问题讨论】：

标签： javascript html sprite parallax pixi.js

【解决方案1】：

你希望它看起来如何？

现在我看到背景层正在从怪物身边移动，所以看起来怪物实际上是在向右移动，对吗？

好吧，所有的视差背景实际上都在向左移动，所以整个“世界”都在向左移动。现在，怪物根本没有移动（只是视口扩展相机在移动，这就是怪物在屏幕上移动的原因）但由于一切都向左移动，因此静态精灵似乎向右移动是有道理的。

你移动背景相对于玩家的移动。也许你应该对怪物做同样的事情，让它像背景一样以介于第一层和第二层之间的速度移动。

【讨论】：