Learning Pixi v3

[chrstffr]

I've just started to learn how to Pixi, but it seems like bad timing. So little tutorials using the new methods and practices that it's hard to keep track of what doesn't work anymore and figure out if my attempts are in error.

 

Take this for example: https://github.com/kittykatattack/learningPixi

 

Right now I'm stuck at https://github.com/kittykatattack/learningPixi#make-a-sprite-from-a-tileset-sub-image

 

This method doesn't seem available anymore: 

//Tell the texture to use that rectangular section

texture.setFrame(rectangle);

 

 

 

So if you don't need a texture-atlas-json-file (or you don't want to load yet another resource), say if you're texture concists of sprites 64x64 pixels. How would you go about it then?

 

There are numerous things missing in the new documentation. I'm almost at the point at, "Huh, guess I'm going to be learning v2 instead", though it feels like the wrong way to go about it.

[xerver]

If you run an app with code that uses `.setFrame(rect)` it will log a message telling you to instead use the frame property `.frame = rect`.

This is due to our deprecation file:

https://github.com/GoodBoyDigital/pixi.js/blob/master/src/deprecation.js

Are you not getting that message, or did you not look into the console?

[chrstffr]

Not getting that deprecation message. I got a few before and changed my code accordingly.

 

Instead I get this:

 

Uncaught TypeError: tileTexture.setFrame is not a function

 

But I think I figured out why I don't get the deprecation message.

 

According to the tutorial I set my TextureCache to the tileset.png.

var tileTexture = PIXI.TextureCache["images/tileset.png"];

Then I get this message:

 

 

The TextureCache class has been moved to utils.TextureCache, please use utils.TextureCache from now on.

 

So I changed it to:

var tileTexture = PIXI.utils.TextureCache["images/tileset.png"];

No more deprecation message and I can handle the texture, but that's when I get the setFrame.

I guess you can't do it like that.

 

The documentation for PIXI.utils seem to be missing.

 

EDIT:

 

Ok! Now I got it! Attaching my whole script if someone else get stuck on the same thing. :-)

var stage = new PIXI.Container();var renderer = PIXI.autoDetectRenderer(800, 600, {backgroundColor : 0x1099bb});document.body.appendChild(renderer.view);var loader = PIXI.loader;loader.add('tiles', 'images/tileset.png');loader.once('complete', onComplete);loader.load();function onComplete() {	var tileTexture = PIXI.utils.TextureCache["images/tileset.png"];	var rectangle = new PIXI.Rectangle(192, 128, 64, 64);	tileTexture.frame = rectangle;	var rocket = new PIXI.Sprite(tileTexture);	stage.addChild(rocket);	renderer.render(stage);}