(V3) Access loaded sprites

[DxBlueIce]

Hi all,
first of all - I'm new to JavaScript and Pixi.js.

I guess it's a fairly stupid question, but I can't figure out how to do this properly.
 
I want to add all of my loaded/created tiles to an object called tiles as properties.

// Constructorvar Tilemap = function(mapWidth, mapHeight, tileSize) {  PIXI.Container.call(this);  this.mapWidth = mapWidth;  this.mapHeight = mapHeight;  this.tileSize = tileSize;  this.tiles = {    blacksmith: null  };  this.init();  this.drawMap();  this.drawGrid();};Tilemap.prototype = Object.create(PIXI.Container.prototype);Tilemap.prototype.init = function() {  this.interactive = true;  /*// tile images  this.blacksmithImgPath = "assets/blacksmith.png";  this.alchemistImgPath = "assets/alchemist.png";  this.bakeryImgPath = "assets/bakery.png";  this.farmImgPath = "assets/farm.png";  this.scholarImgPath = "assets/scholar.png";  this.grassImgPath = "assets/grass.png";  */  // load textures and create sprites/tiles  PIXI.loader.add('blacksmith', "assets/blacksmith.png")                .load(function (loader, resources) {                  this.tiles.blacksmith = new Tile(resources.blacksmith.texture);                });  //this.graphicsSelectedTile = new PIXI.Graphics();  this.graphicsSelectionRect = new PIXI.Graphics();  this.on('mousedown', this.onDown);};

The error message I get is: Uncaught TypeError: Cannot set property 'blacksmith' of undefined.

The line which causes it is: this.tiles.blacksmith = new Tile(resources.blacksmith.texture);

 

Why can't I access the object tiles inside the anonymous function?

[xerver]

The `this` keyword in the loader callback is not your Tilemap instance like you think. This is a common mistake in JS, since scoping is function-level and function context is seemingly arbitrary (compared to other languages).

 

You likely want one of these options:

// store your context and use it latervar self = this;PIXI.loader.add('blacksmith', "assets/blacksmith.png")    .load(function (loader, resources) {        self.tiles.blacksmith = new Tile(resources.blacksmith.texture);    });// OR// use the complete event, and pass your context to be bound to the function callPIXI.loader.add('blacksmith', "assets/blacksmith.png")    .on('complete', function (loader, resources) {        this.tiles.blacksmith = new Tile(resources.blacksmith.texture);    }, this)    .load();

In this instance, both options are more or less the same. Take your pick.

[DxBlueIce]

Thank you very much for answering so fast.

 

I'm having a hard time understanding JavaScripts concepts - some things just feel unnatural when you come from languages like Java etc.

[Bolko]

You should also have a look into .bind()

[DxBlueIce]

You should also have a look into .bind()

I thought I could do it without using bind() here.

 

I can't get it to work. Both examples don't work - still undefined.

class Tilemap extends PIXI.Container {  mapWidth:number;  mapHeight:number;  tileSize:number;  tiles:string[];  graphicsSelectionRect:PIXI.Graphics;  constructor(mapWidth:number, mapHeight:number, tileSize:number) {    super();    this.mapWidth = mapWidth;    this.mapHeight = mapHeight;    this.tileSize = tileSize;    this.init();    this.drawMap();    this.drawGrid();  }  init():void {    this.interactive = true;    /*// tile images    this.blacksmithImgPath = "assets/blacksmith.png";    this.alchemistImgPath = "assets/alchemist.png";    this.bakeryImgPath = "assets/bakery.png";    this.farmImgPath = "assets/farm.png";    this.scholarImgPath = "assets/scholar.png";    this.grassImgPath = "assets/grass.png";    */    // load textures and create sprites/tiles    var self = this;    PIXI.loader.add('blacksmith', "assets/blacksmith.png").load(function (loader, resources) {      self.tiles["blacksmith"] = new Tile(resources.blacksmith.texture);    });    this.graphicsSelectionRect = new PIXI.Graphics();    this.on('mousedown', this.onDown);    console.log(self.tiles["blacksmith"]);    console.log(this.tiles["blacksmith"]);  }...

[xerver]

Couple things here:

 

1) The load callback is asynchronous, but you are treating it as if it was synchronous. That is why you are getting `undefined` in your logs.

 

2) I'm suprised you don't get errors from typescript on this code, because how you are using tiles and what you say the type is don't match.

 

3) I don't see you initialize tiles anywhere so I am suprised that this code doesn't explode when the load callback executes.