Help Needed: Can't display sprite in Angular app

[WrongWayJerry]

Hi,

I am following the "getting started instructions" for drawing a sprite and it does not display. There are no errors. I can get a rectangle to draw. Here is the code:

import { Component, OnInit, ViewChild } from '@angular/core'; declare var PIXI: any; // instead of importing pixi like some tutorials say to do use declare

@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent implements OnInit { title = 'my-pixi-app'; @ViewChild('pixiContainer') pixiContainer; // this allows us to reference and load stuff into the div container

public pApp: any; // this will be our pixi application

ngOnInit() {

this.pApp = new PIXI.Application({
  width: 256,
  height: 256,
  antialias: true,
  transparent: false,
  resolution: 1,
}); // this creates our pixi application

this.pixiContainer.nativeElement.appendChild(this.pApp.renderer.view); // this places our pixi application onto the viewable document

this.pApp.renderer.backgroundColor = 0x061639;

//load an image and run the `setup` function when it's done
PIXI.loader
 .add("catImage", "./assets/res/cat.png")
  .on("progress", loadProgressHandler)
  .load(setup(this.pApp));

let rectangle = new PIXI.Graphics();
rectangle.lineStyle(4, 0xFF3300, 1);
rectangle.beginFill(0x66CCFF);
rectangle.drawRect(0, 0, 64, 64);
rectangle.endFill();
rectangle.x = 170;
rectangle.y = 170;
this.pApp.stage.addChild(rectangle);

// This `setup` function will run when the image has loaded
function setup(pApp: any) {

  // Create the cat sprite
  let cat = new PIXI.Sprite(PIXI.loader.resources.catImage.texture);

  // Change the sprite's position
  cat.x = 96;
  cat.y = 96;

  // Add the cat to the stage
  pApp.stage.addChild(cat);
}

function loadProgressHandler(loader, resource) {

  // Display the file `url` currently being loaded
  console.log("loading: " + resource.url);

  // Display the percentage of files currently loaded
  console.log("progress: " + loader.progress + "%");

  // If you gave your files names as the first argument 
  // of the `add` method, you can access them like this
  console.log("loading: " + resource.name);
}

} }

[WrongWayJerry]

I was able to figure out the problem. The setup code, for some reason, was being called before the loading was complete. I changed the code a bit and added a "bind" which solved the problem. Here is the new code:

import { Component, OnInit, ViewChild } from '@angular/core'; declare var PIXI: any; // instead of importing pixi like some tutorials say to do use declare

@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent implements OnInit { title = 'my-pixi-app'; @ViewChild('pixiContainer') pixiContainer; // this allows us to reference and load stuff into the div container

public pApp: any; // this will be our pixi application

//Aliases Application = PIXI.Application; loader = PIXI.loader; resources = PIXI.loader.resources; Sprite = PIXI.Sprite;

ngOnInit() {

this.pApp = new this.Application({
  width: 256,
  height: 256,
  antialias: true,
  transparent: false,
  resolution: 1,
}); // this creates our pixi application

this.pixiContainer.nativeElement.appendChild(this.pApp.view); // this places our pixi application onto the viewable document

this.pApp.renderer.backgroundColor = 0x061639;

//load an image and run the `setup` function when it's done
this.loader
  .add("catImage", "assets/res/cat.png")
  .on("progress", loadProgressHandler)
  .load(setup.bind(this));

let rectangle = new PIXI.Graphics();
rectangle.lineStyle(4, 0xFF3300, 1);
rectangle.beginFill(0x66CCFF);
rectangle.drawRect(0, 0, 64, 64);
rectangle.endFill();
rectangle.x = 170;
rectangle.y = 170;
this.pApp.stage.addChild(rectangle);

// This `setup` function will run when the image has loaded
function setup() {
  console.log("setup: start");

 // Create the cat sprite
  let cat = new this.Sprite(this.resources.catImage.texture);

  // Change the sprite's position
  cat.x = 96;
  cat.y = 96;

  // Add the cat to the stage
  this.pApp.stage.addChild(cat);

  console.log("setup: complete");
};

function loadProgressHandler(loader, resource) {

  // Display the file `url` currently being loaded
  console.log("loading: " + resource.url);

  // Display the percentage of files currently loaded
  console.log("progress: " + loader.progress + "%");

  // If you gave your files names as the first argument 
  // of the `add` method, you can access them like this
  console.log("loading: " + resource.name);
}

} }