PIXI.js doesn't render my sprite.

[Sphynxinator]

Hi all. My PIXI.js code doesn't render my sprite. What is the problem? I checked the all file directions and all of them are correct. I get just only black screen. Here is my code:

 

let visibleObjects = [];

let pixelDimensionWidth = 1.0;
let pixelDimensionHeight = 1.0;

let Sprite = PIXI.Sprite;
let Application = PIXI.Application;
let Rectangle = PIXI.Rectangle;
let resources = PIXI.loader.resources;
let loader = PIXI.loader;

let player = {};

function getWidth() {
	if(mainContainer != null) {
		return mainContainer.offsetWidth;
	} else {
		return 0;
	}
}

function getHeight() {
	if(mainContainer != null) {
		return mainContainer.offsetWidth / 2;
	} else {
		return 0;
	}
}

function resizeCanvas() {
	if(app != null) {
		app.renderer.resize(getWidth(), getHeight());
		pixelDimensionWidth = mainContainer.offsetWidth/100.0;
		pixelDimensionHeight = mainContainer.offsetHeight/100.0;
	}

	for(let i=0; i<visibleObjects.length; i++) {
		if(visibleObjects[i] != null) {
			if(visibleObjects[i].hasOwnProperty('xPercent') && visibleObjects[i].hasOwnProperty('sprite')) {
				visibleObjects[i].sprite.x = visibleObjects[i].xPercent * pixelDimensionWidth;
			}
			if(visibleObjects[i].hasOwnProperty('yPercent') && visibleObjects[i].hasOwnProperty('sprite')) {
				visibleObjects[i].sprite.y = visibleObjects[i].yPercent * pixelDimensionHeight;	
			}
			if(visibleObjects[i].hasOwnProperty('widthPercent') && visibleObjects[i].hasOwnProperty('sprite')) {
				visibleObjects[i].sprite.width = visibleObjects[i].widthPercent * pixelDimensionWidth;
			}
			if(visibleObjects[i].hasOwnProperty('heightPercent') && visibleObjects[i].hasOwnProperty('sprite')) {
				visibleObjects[i].sprite.height = visibleObjects[i].heightPercent * pixelDimensionHeight;
			}
		}
	}
}

let mainContainer = document.getElementById('main-container');
let canvasContainer = document.getElementById('canvas-container');

let app = new Application({

	width: getWidth(),
	height: getHeight(), 
	antialias: false,
	resolution: 1,
	autoResize: true,

});

canvasContainer.appendChild(app.view);

window.addEventListener("resize", resizeCanvas);

loader
  .add([
    "images/games/test/objects.png",
    "images/games/test/buttons.png",
    "images/games/test/control.png",
  ])
  .load(setup);

function setup() {
	player = {
		id: "player",
		rectangle: new Rectangle(0, 1, 6, 6),
		texture: resources["images/games/test/objects.png"].texture,
		sprite: new Sprite(this.texture),
		xPercent: 50.0,
		yPercent: 50.0,
		widthPercent: 3.0,
		heightPercent: 6.0,
	};

	player.texture.baseTexture.scaleMode = PIXI.SCALE_MODES.NEAREST;
	player.texture.frame = player.rectangle;
	visibleObjects.push(player);
	app.stage.addChild(player.sprite);

	resizeCanvas();

	/*objectCoin = new Sprite(PIXI.loader.resources["/images/games/test/objects.png"].texture);

	buttonTouch = new Sprite(PIXI.loader.resources["/images/games/test/buttons.png"].texture);
	buttonKeyboard = new Sprite(PIXI.loader.resources["/images/games/test/buttons.png"].texture);

	controlLeft = new Sprite(PIXI.loader.resources["/images/games/test/control.png"].texture);
	controlRight = new Sprite(PIXI.loader.resources["/images/games/test/control.png"].texture);
	controlUp = new Sprite(PIXI.loader.resources["/images/games/test/control.png"].texture);
	controlDown = new Sprite(PIXI.loader.resources["/images/games/test/control.png"].texture);*/
}

 

Thank you. I'm new to the forum by the way.

 

[ivan.popelyshev]

var a = { texture: 123, sprite: this.texture } 
console.log(a.sprite)

In your case, "this" is window. It doesnt have texture.

[Sphynxinator]

18 minutes ago, ivan.popelyshev said:

var a = { texture: 123, sprite: this.texture } 
console.log(a.sprite)

In your case, "this" is window. It doesnt have texture.

Thank you. Then how can I access the texture property?

[ivan.popelyshev]

6 hours ago, Sphynxinator said:

Thank you. Then how can I access the texture property?

var tex = resources["images/games/test/objects.png"].texture;
player = {
   texture: tex,
   sprite: new Sprite(tex)
}

 

[Sphynxinator]

Thank you so much.