Jump to content

Learning Pixi v3


Recommended Posts

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



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.
Link to comment
Share on other sites

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.




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);}
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...