How pixi works in class ?

[IgosYee]

Hi, I try to create small game with some classes.

Can't find some information about this.
I think this is not a problem with Pixie, this is my ignorance of the js. Can someone explain me?

I want to create wheel which will rotate, and this should happen inside the class.

This code works fine:

class Main
{
	constructor()
	{
		this.app = new PIXI.Application();
		document.body.appendChild(this.app.view);

		this.wheel;

		PIXI.loader
	    	     .add('assets/images/tileset.json')
	    	     .load(this.onAssetsLoaded.bind(this));

		// this.app.stage.addChild(this.wheel);

		// this.app.ticker.add( (deltaTime) => this.enterFrame() );
		
	}

	onAssetsLoaded()
	{
	    this.wheel = PIXI.Sprite.fromFrame('wheel.png');

	    this.wheel.x = this.app.renderer.width / 2;
	    this.wheel.y = this.app.renderer.height / 2;
	    this.wheel.anchor.set(0.5);

	    this.app.stage.addChild(this.wheel);

	    this.app.ticker.add( (deltaTime) => this.enterFrame() );
	}

	enterFrame()
	{
		this.wheel.rotation += 0.1;
	}
}

var game = new Main();

But when I try to move the addChild and the ticker to the constructor, the results is an error:

class Main
{
	constructor()
	{
		this.app = new PIXI.Application();
		document.body.appendChild(this.app.view);

		this.wheel;

		PIXI.loader
	            .add('assets/images/tileset.json')
	            .load(this.onAssetsLoaded.bind(this));

		this.app.stage.addChild(this.wheel);

		this.app.ticker.add( (deltaTime) => this.enterFrame() );
		
	}

	onAssetsLoaded()
	{
	    this.wheel = PIXI.Sprite.fromFrame('wheel.png');

	    this.wheel.x = this.app.renderer.width / 2;
	    this.wheel.y = this.app.renderer.height / 2;
	    this.wheel.anchor.set(0.5);

	    // this.app.stage.addChild(this.wheel);

		// this.app.ticker.add( (deltaTime) => this.enterFrame() );
	}

	enterFrame()
	{
		this.wheel.rotation += 0.1;
	}
}

var game = new Main();

Error: 

Uncaught TypeError: Cannot read property 'parent' of undefined
    at Container.addChild (Container.js:70)
    at new Main (bunny.js:14)
    at bunny.js:40
addChild @ Container.js:70
Main @ bunny.js:14
(anonymous) @ bunny.js:40

 

What's the problem?

(sorry, something wrong with languages, i can't chang it )

[ivan.popelyshev]

The problem is that "this.wheel" is still undefined and you pass it to addChild. Its more about understanding javascript than about PIXI

[tywang2006]

wheel is only available when all assets is loaded. so you need to do

 

if(this.wheel) this.wheel.rotation += 0.1;

[Taz]

onAssetsLoaded() is called once the assets have finished loading, which is the perfect time to start creating sprites from the assets and adding them to stage and animating them with the ticker. Also since you're waiting for the assets to load before you start animating, you don't need to check if(this.wheel) since you know the sprite has been created already.

Using the sprite in the constructor would work if onAssetsLoaded() was called right away. Since it isn't called until the assets have finished loading, your code that creates the sprite hasn't run yet. That's why you get the error that it's undefined.

[IgosYee]

Ohh, thanks for answers!