A pixi.js guide?

[Barsik_The_CaT]

I've got a task in my university to make a basic game using pixi.js. When I tried to do some basic stuff(load a texture from a tileset and make it move) with This guide turned out it is completely outdated and author omits PIXI prefix pretty often. Basically, even if I copy-paste the code it gives me errors with something being not defined, etc.
Is there an up-to-date guide for pixi.js? Learning a library through documentation is hard AF.

[Hachi]

Last time i followed guides, that one was most thorough (my knowledge is outdated). But I dont think there is anything better yet, but you can at least check the pixis own examples, you might get something out of them: https://pixijs.github.io/examples/#/basics/basic.js

And my suspicion would be that most of the info is still correct at kittykatattacks tutorials, but they just dont work directly copy pasting as few really fundemantal things might have changed

[themoonrat]

For basic things, it's always worth checking out the examples page: https://pixijs.github.io/examples/

[Barsik_The_CaT]

I still don't see a way to crop out a sprite from tileset in those examples, and the code I scrapped from different threads and documentation page does not work.

[Barsik_The_CaT]

An example copy/pasted from kittykatattack
 

PIXI.loader
      .add("pictures/Mech1Walk.png")
      .load(setup);

    function setup() {
      var texture = PIXI.TextureCache["pictures/Mech1Walk.png"];
      var rectangle = new PIXI.Rectangle(1, 1, 64, 64);
      texture.frame = rectangle;
      var robot = new PIXI.Sprite(texture);
      robot.x = 100;
      robot.y = 100;
      stage.addChild(robot);
      renderer.render(stage);
    }
Gives me an error:

pixi.min.js:8 Uncaught DOMException: Failed to execute 'texImage2D' on 'WebGLRenderingContext': The cross-origin image at (location of .png file)

[Barsik_The_CaT]

Going this way:

var spritesheet = PIXI.BaseTexture.fromImage("pictures/Mech1Walk.png");
    var spritetext = new PIXI.Texture(spritesheet, new PIXI.Rectangle(1, 1, 64, 64));
    var mahsprite = new PIXI.Sprite(spritetext);
    stage.addChild(mahsprite);
    renderer.render(stage);

Gives me a blank canvas without my texture, though no errors in the console

Edited November 10, 2016 by Barsik_The_CaT
Some typos

[Exca]

Are you running the page from local file system? (file://something in url).

If yes, then the browser cant load the image due to security reasons. You need to run the browser either with local file system allowed or run the page through web server or use a proxy solution like fiddler.

[raenset]

On 9/11/2016 at 1:28 PM, Barsik_The_CaT said:

I've got a task in my university to make a basic game using pixi.js. When I tried to do some basic stuff(load a texture from a tileset and make it move) with This guide turned out it is completely outdated and author omits PIXI prefix pretty often. Basically, even if I copy-paste the code it gives me errors with something being not defined, etc.
Is there an up-to-date guide for pixi.js? Learning a library through documentation is hard AF.

There is an excellent little book about Pixi.js by Rex Van Der Spuy published by Apress. 

[Barsik_The_CaT]

On 13.11.2016 at 7:06 PM, raenset said:

There is an excellent little book about Pixi.js by Rex Van Der Spuy published by Apress. 

How old is it? Won't I encounter the same problem I encountered with Kittikatattack's guide?

P.S.
Just checked it, it's a really great book that also explains the changes in different versions of pixi.js
Thanks for advice!

Edited November 16, 2016 by Barsik_The_CaT
just got extra information and wanted to thank a person

[ivan.popelyshev]

>  pixi.min.js:8 Uncaught DOMException: Failed to execute 'texImage2D' on 'WebGLRenderingContext': The cross-origin image at (location of .png file)

That's not pixi problem. You are trying to serve files from static file system, right? No web-server?

Examples from that tutorial are working, the guide is accurate enough.

[Barsik_The_CaT]

On 20.11.2016 at 2:35 AM, ivan.popelyshev said:

>  pixi.min.js:8 Uncaught DOMException: Failed to execute 'texImage2D' on 'WebGLRenderingContext': The cross-origin image at (location of .png file)

That's not pixi problem. You are trying to serve files from static file system, right? No web-server?

Examples from that tutorial are working, the guide is accurate enough.

No, they're not. If they are, try making a sprite from a tileset subimage using the frame property of texture
(spoilers: there is no such object, because you have to use PIXI. texture, and good luck making a sprite with syntax that is completely different from one in the example)