Sprites fail to render without any errors

Question

I'm trying to load multiple sprites and display them in PIXI.js. The filenames are are contained in a JSON manifest, which I fetch, then pass to loader. Despite loading successfully (I can see requests being made in inspector), they are never shown on PIXI stage. The code is contained in two files.

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

The interesting thing here is that the test rectangle graphic renders successfully and the container contains all the children it should (one per image).

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();

I'm new to the framework, so might be missing something rudimentary.

Thanks.

domis86 · Answer 1 · 2019-11-03T00:36:03.100

Bug in your code seems to be here:

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

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

resource is just a key - it is not actual resource that you want here - it would be: resources[resource].

Better lets just rename resource to key so we see whats going on:

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

        let resource = resources[key];

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

See more explanation about Object.keys(myObj).forEach(... here: How to loop through a plain JavaScript object with the objects as members?

Also next time you have some problem using some feature from PIXI (or any other library) i would suggest to try using said feature in the simplest sample code possible. I mean: is not easy to understand/debug something that is "hidden" underneath few layers of Promises and callbacks (arrow functions) etc :)

Sprites fail to render without any errors

1 Answers1