Question

我正在为学校项目开发PixiJS的视差侧滑游戏，而在使事情正常工作方面我也遇到了麻烦。本质上，我有三个背景（使用从PIXI.extras.TilingSprite扩展的类），它们以不同的速度滚动，而当用户按下任一箭头键时，则有一个播放器（以完全不同的方式移动）。我还使用了Pixi Viewport扩展程序（https://github.com/davidfig/viewport），以跟随玩家获得游戏的清晰画面。看起来不错，而且一切都很好（尽管我需要使用着色器解决一些问题，什么也不能解决），但是现在我正试图在游戏中添加静态精灵，但是不幸的是，它并没有像我想象的那样起作用。这是它在游戏中的外观的GIF：

Example GIF

请原谅糟糕的质量，我不得不跳了几圈才把这些镜头录制成GIF格式。

这是我到目前为止所做的相关课程：

max

这是在我的游戏循环中运行的用于移动视差背景和播放器的代码：

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;
    }
}

如果还有其他信息可以帮助我解决这个难题，我将很乐意提供。我对Stack Overflow还是很陌生（而且我还不熟悉JavaScript专家），所以我将不胜感激可以帮助我获得最佳帮助的建议。

Answer 1

您希望它看起来如何？

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

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

您相对于玩家移动背景。也许您应该对怪物做同样的事情，使其像背景一样在第一层和第二层之间移动。

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

Example GIF

1 个答案: