Need help with Spritesheets and Pixi.js

[Sawamara]

Hello there!

I decided to migrate my whole work-in-progress to Pixi JS, well, mostly because it is amazing, and I have put off learning it for waaay to long.
 

However, my problem is this: the way pixiJs seems to handle spritesheets, it is REALLY not feasible for me. Let me tell you why.

I am building an RPG where dozens (or more likely: hundreds) of spritesheets will be stored. I really, really do not want to overcomplicate JSON calls and make big, big files.

Currently, a spritesheet has N lines for N numbers of animations. The only thing that is "strict" is that each line has equal values of width and height. Some animations require more space, therefore they are having a larger "global" width value, but that is it.

 

So currently, my code goes like this:

 

switch (monster.name) case "randomName1": {   monster.anim1 = { frames: 10, width: 40*size, height: 40*size, startY: 240*size, specialRules: [[]], }   monster.anim2 = { frames: 14, width: 60*size, height: 50*size, startY: 320*size, specialRules: [[]],}} break;

So after this initail setup, now I know how long each animation lasts (frames), and the drawing/update determines the x,y,w,h values that determine the EXACT rectangle position in the spritesheet that is to be used as the monster's current frame in the animation.

I can write a converter that converts this type of code into TONS of frames (preferably: monster.anim1.frames), but I really should not make JSON files out of it when my code  can make it on the loading of the battles.

So my question is this: please, please, help me understand how exactly pixi.js handles these spritesheets.

The things I gathered so far:

 

- I can load a texture, display something, then change its frame by setFrame, BUT then the change is not visible. If I take it off (removeChild), THEN change rect, then addChild again, the change is indeed visible. So I could make a code that, at each frame change ("animation phase changes"), takes the sprite off from stage render, then makes this change, then puts it back. Question is, is this something that is good performance? I also have parts of the game where multiple objects use the same image. However, I have no idea that under this system, how that would work. Should I have to make new textures for each (20-25) objects that share the same imagesheet? (PNG files, rectangles of paintings, usual stuff)

So can someone tell me precisely how to define this? Because then I go and see that I should look for "texture.fromFrames", but THAT does not specifiy and image data. The image is not there. There I see AssetLoader, that has a meta tag, that has an image specified, yaay. But can I circumvent the process within javascript, and have it not require JSON files?

Thank you in advance. I am feeling down just by thinking about all this, whether I am missing something crucial.

[xerver]

You can create a texture-per-frame and change the texture each time you set a new frame of you animations, which is the way the built-in MovieClip works.

 

Basically:

 

 

var baseTexture = new PIXI.BaseTexture(yourSpriteSheetImage);var frame1 = new PIXI.Texture(baseTexture, new PIXI.Rectangle(0, 0, 16, 16)),    frame2 = new PIXI.Texture(baseTexture, new PIXI.Rectangle(16, 0, 16, 16));// etc..

[Sawamara]

Thank you! This indeed was what I was looking for! Had to look around because initially, I was confused how to setup the sprite itself (in the other thread where a question similar was taken, you suggested that the frame1 was going to be the default (or first) texture assigned to the Sprite, and indeed, that worked! So thank you. This means that you have one more strong pixi.js-convert from now on

One tiny thing, though. Instead of this:

this.btexture = new PIXI.BaseTexture("warrior-sprites_2x.png");

I had to use this:
 

this.btexture = PIXI.Texture.fromImage("warrior-sprites_2x.png").baseTexture;

I have no idea how or why, but nothing showed up on the code if I opened with the first option. The second, however, worked.

[xerver]

Because the constructor for BaseTexture takes a source (image or canvas) not a string.

 

You don't need to create a texture, just to get a base texture. You can just create the base texture from the image url:

this.btexture = PIXI.BaseTexture.fromImage("warrior-sprites_2x.png");

[Sawamara]

 

Because the constructor for BaseTexture takes a source (image or canvas) not a string.

 

You don't need to create a texture, just to get a base texture. You can just create the base texture from the image url:

this.btexture = PIXI.BaseTexture.fromImage("warrior-sprites_2x.png");

 

 I see. Thank you