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