let width = 480;
let height = 240;
let sprites = {};
let xpos = 16;

// create app
let app = new PIXI.Application({
  width: width,
  height: height,
  antialias: true,
  backgroundColor: 0xeeeeee
});

// add canvas to HTML document
document.body.appendChild(app.view);

// use the pre-created instance offered by pixi
const loader = PIXI.Loader.shared;

// check loader' signals
loader.onProgress.add((loader, resource) => {
  // called once for each file
  console.log("progress: " + loader.progress + "%");
});
loader.onError.add((message, loader, resource) => {
  // called once for each file, if error
  console.log("Error: " + resource.name + " " + message);
});
loader.onLoad.add((loader, resource) => {
  // called once per loaded file
  console.log(resource.name + " loaded");
});
loader.onComplete.add((loader, resources) => {
  // called once all queued resources has been loaded
  // triggered before load method callback
  console.log("loading complete!");
});

// add resources to load and process
loader
  /*
  // another format
  .add([
    {
      name: "coffee",
      url: "https://i.ibb.co/M547g7R/coffee-cup.png",
      crossOrigin: "anonymus"
    }
  ])
  */
  .add("coffee", "https://i.ibb.co/M547g7R/coffee-cup.png")
  .add("muffin", "https://i.ibb.co/MPQS7xP/muffin.png")
  .add("ice-cream", "https://i.ibb.co/k3xfjZM/ice-cream.png")
  .add("lollipop", "https://i.ibb.co/kKCYwmX/lollipop.png")
  .load((loader, resources) => {
    // this callback function is optional
    // it is called once all resources have loaded.
    // similar to onComplete, but triggered after
    console.log("all assets loaded OK");
  })
  .use((resource, next) => {
    // middleware to process each resource
    sprites[resource.name] = new PIXI.Sprite(resource.texture);
    sprites[resource.name].y = 16;
    sprites[resource.name].x = xpos;

    app.stage.addChild(sprites[resource.name]);
    xpos += 72;
    next(); // <- mandatory
  });

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.3.0/pixi.min.js