Спрайты не отображаются без ошибок - PullRequest
Новая
       43

Спрайты не отображаются без ошибок

0 голосов
/ 02 ноября 2019

Я пытаюсь загрузить несколько спрайтов и отобразить их в PIXI.js. Имена файлов содержатся в манифесте JSON, который я получаю, а затем передаю загрузчику. Несмотря на успешную загрузку (я вижу запросы, сделанные в инспекторе), они никогда не отображаются на этапе PIXI. Код содержится в двух файлах.

background.js: 

import * as PIXI from 'pixi.js';
import axios from 'axios';

const loader = PIXI.Loader.shared;
const ticker = PIXI.Ticker.shared;

const paintMovingSprite = ({ resource, container, surfaceWidth, surfaceHeight }) => {

  let texture = new PIXI.Sprite(resource.texture);

  let ratio = (surfaceHeight / texture.height / 3) * Math.random();
  texture.width = texture.width * ratio + 50;
  texture.height = texture.height * ratio + 50;

  texture.x = Math.random() * surfaceWidth - texture.width / 2;
  texture.y = Math.random() * surfaceHeight - texture.height / 2;


  return texture;

};

const renderBackground = ({ fileNames, surfaceWidth, surfaceHeight }) => {

  return new Promise((resolve, reject) => {

    const container = new PIXI.Container();

    loader.add(fileNames).load((_, resources) => {
      Object.keys(resources).forEach(resource => {

        container.addChild(
          paintMovingSprite({ resource, surfaceWidth, surfaceHeight })
        );
      });

      const testG = new PIXI.Graphics();
      testG.beginFill(0xFFFF00);
      testG.lineStyle(5, 0xFF0000);
      testG.drawRect(0, 0, 300, 200);
      console.log(container);

      container.addChild(testG);
      return resolve(container);
     });
  });
};

export { renderBackground };

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

import * as PIXI from 'pixi.js';
import axios from 'axios';

import * as Menu from './menu.js';
import * as Background from './background.js';


PIXI.utils.sayHello();

const app = new PIXI.Application({
  width: window.innerWidth,
  height: window.innerHeight,
  backgroundColor: 0xffffff,
  autoResize: true,
});

document.body.appendChild(app.view);

/* config */
app.renderer.backgroundColor = 0x33ff3f;
app.stage.sortableChildren = true;

let fileNames = null; 

const renderPage = () => {

  axios.get('assets/asset-data.json').then((resp) => {
    fileNames = resp.data['mix12'];


  Background.renderBackground({
       fileNames, 
       surfaceWidth: app.renderer.width,
       surfaceHeight: app.renderer.height,
    }).then(container => {
      // container object here looks correct and contains all the children
      app.stage.addChild(container);
    });
  });

};

renderPage();

Я новичок в фреймворке, поэтому, возможно, упускаю что-то элементарное.

Спасибо.

1 Ответ

0 голосов
/ 03 ноября 2019

Ошибка в вашем коде, кажется, здесь: 

      Object.keys(resources).forEach(resource => {

        container.addChild(
          paintMovingSprite({ resource, surfaceWidth, surfaceHeight })
        );
      });

resource - это просто ключ - это не фактический ресурс, который вам нужен здесь - это будет: resources[resource].

Лучше просто переименовать resource в key, чтобы мы могли видеть, что происходит: 

      Object.keys(resources).forEach(key => {

        let resource = resources[key];

        container.addChild(
          paintMovingSprite({ resource, surfaceWidth, surfaceHeight })
        );
      });

Подробнее об Object.keys(myObj).forEach(... см. Здесь: Как пройти через простой объект JavaScriptс объектами в качестве членов?

Также в следующий раз, когда у вас возникнут проблемы с использованием какой-либо функции из PIXI (или любой другой библиотеки), я бы посоветовал попробовать использовать эту функцию в простейшем возможном примере кода. Я имею в виду: нелегко понять / отладить что-то, что «спрятано» под несколькими слоями Обещаний и обратных вызовов (функции со стрелками) и т. Д.:)

...