How to Learn Pixi

[kaan]

Hi everyone,

I always had a dream of developing an online game, I even started developing a game 4 years ago, developed a map editor using html5 canvas, using rpgmaker tiles and a simple node.JS server, but decided to concentrate on another project instead, spent 4 years pushing that project to completion, now that there is not much left to do, I re-started my gaming project - Anyway, enough back story.

I can't seem to navigate Pixi well, I've followed https://github.com/kittykatattack/learningPixi which kick started my project, I've read several other tutorials, yet the docs (http://pixijs.github.io/docs/index.html) seem cryptic to me, they are hard to navigate and they didn't help me once up to now

Currently I want to change a Sprite's Texture or the Texture's Rectangle for example, so I can make a character walk by shifting the base texture, yet my google searches point me to .setSprite, I check the docs, the .setSprite isn't there, so I'm temporarily halted until I figure it out

My ultimate point and question is, is there a method to pixi that I'm missing?

It would be great if there were some stupidly simple examples of doing very simple things, doing them the right and intended way

[ivan.popelyshev]

28 minutes ago, kaan said:

Currently I want to change a Sprite's Texture or the Texture's Rectangle for example, so I can make a character walk by shifting the base texture, yet my google searches point me to .setSprite, I check the docs, the .setSprite isn't there, so I'm temporarily halted until I figure it out

My ultimate point and question is, is there a method to pixi that I'm missing?

https://pixijs.github.io/docs/

Texture regions are one of the best sides of PIXI.

1) Create a number of textures based on the same

var tex1 = new PIXI.Texture(baseTexture, new PIXI.Rectangle(...));
var tex2 = new PIXI.Texture(baseTexture, new PIXI.Rectangle(...));

sprite1.texture = tex1;
//after some time
sprite1.texture = tex1;

2) you can use MovieClip, http://pixijs.github.io/examples/index.html?s=basics&f=spritesheet.js&title=SpriteSheet%20Animation&v=

3) you can pack spritesheet with "TexturePacker" (paid) or "ShoeBox" (free), JSON HASH format is what you need. That way you wont have to create all these PIXI.Texture, loader will take care of that.

4) sometimes you can rotate and flip textures themselfes, no need to call sprite.scale.x=-1  http://pixijs.github.io/examples/index.html?s=demos&f=texture-rotate.js&title=Texture%20Rotate&v=dev

 

Remember that there's only one BaseTexture, while all these Textures are linked to it and do not contain actual data.

[Jambutters]

Yeah lol, I too am struggling myself with pixi. There are really not many resources for learning pixijs opposed to kittykatattacks tutorials and books....  A friend of mine, creator of (rainingchain.com) had to just read the documentation and experiment with it.

[ivan.popelyshev]

21 minutes ago, Jambutters said:

Yeah lol, I too am struggling myself with pixi. There are really not many resources for learning pixijs opposed to kittykatattacks tutorials and books....  A friend of mine, creator of (rainingchain.com) had to just read the documentation and experiment with it.

Examples and github are the best learning sources. Also, in case of html5 game engines, its better to clone the source and view it every time you want a question about performance. I had about 10 moments like "ok, i want to implement X this optimization in my game" and then found that PIXI already does X when its possible.

[ivan.popelyshev]

One more thing: read this forum. We havent compiled all good answers to cookbook yet, but we will do that.

[kaan]

Thanks for all the suggestions

I think this is a GEM: http://pixijs.github.io/examples/index.html?s=demos&f=dragging.js&title=Dragging&v= - what I was looking for was exactly this, simple short examples that achieve significant tasks

As a small suggestion, this examples page should be linked at both github and docs, in a very visible manner, even though I skimmed both github readme and the docs, I didn't come across this examples page, so probably a lot of other people miss these examples too

I will also check the source if I can, I have a hunch I might be making some unnecessary modifications too

[ivan.popelyshev]

36 minutes ago, kaan said:

Thanks for all the suggestions

I think this is a GEM: http://pixijs.github.io/examples/index.html?s=demos&f=dragging.js&title=Dragging&v= - what I was looking for was exactly this, simple short examples that achieve significant tasks

As a small suggestion, this examples page should be linked at both github and docs, in a very visible manner, even though I skimmed both github readme and the docs, I didn't come across this examples page, so probably a lot of other people miss these examples too

I will also check the source if I can, I have a hunch I might be making some unnecessary modifications too

There are some extra features in my fork: https://github.com/gameofbombs/ , one repo is examples and the other is source. You may need camera z-index, or basic 3d stuff, but its a bit buggy (i know that TilingSprite doesnt work there yet, for example)