PixiJS: SpriteSheet Tutorial

[AndreasLoew]

I've just created a short tutorial for PixiJS that explains

• How to create & use sprite sheets with a few mouse clicks
• Use animations from sprite sheets (much easier than enumerating all sprites manually....)
• Optimize sprite sheets for smaller size and faster loading (up to 50%)
• Visually edit pivot points

The full tutorial including source code is available from here: How to create sprite sheets and animations for PixiJS

 

 

 

[ivan.popelyshev]

Pinned.

[johnnycash]

What if I want to have multiple different color characters?

How can I change the color of the character in this case with PIXI?

[eXponeta]

 

On 3/13/2019 at 4:59 PM, johnnycash said:

What if I want to have multiple different color characters?

How can I change the color of the character in this case with PIXI?

You can use tint (there is doubletint implementation in pixi-heaven), or multiple sprite-variants, or custom Filter with colors replacements behaviour. 

https://github.com/gameofbombs/pixi-heaven

[ivan.popelyshev]

On 3/13/2019 at 4:59 PM, johnnycash said:

What if I want to have multiple different color characters?

How can I change the color of the character in this case with PIXI?

if you know how to work with canvas2d, you can just use plain old getImageData to get pixels, change the color with FOR cycle and use pixijs v5 BufferResource to create it to texture. Or putImageData to canvas and BaseTexture.from() in v4/v5

 

[Critters]

The tutorial did not work for me, I had to make some tweaks, not sure why. Below are those tweaks applied to the code in the tutorial:

animatedCapguy = new PIXI.extras.AnimatedSprite(sheet.animations["capguy"]);

Got an error about "extras", so I dropped the ".extras" and it cleared the error:

animatedCapguy = new PIXI.AnimatedSprite(sheet.animations["capguy"]);

Then I got an error where it could not find "animations" as a property of "sheet"

So I changed this line:

let sheet = PIXI.loader.resources["images/spritesheet.json"];

to:

let sheet = PIXI.loader.resources["images/spritesheet.json"].spritesheet;

And that fixed the problem, animated sprites galore!

 

Again, not sure if the tutorial is outdated, or there's something unique about my setup, but figured i'd post it in case anyone else gets stuck

[ivan.popelyshev]

yep, its outdated, in v5 anims are inside spritesheet, and there's no "extras" 

[mkadzis23]

I'm trying to implement a spritesheet  for a set of building images that have the same theme. I've looked up videos that guide me through setting up a function to parse the spritesheet into separate image objects with PIXI.Rectangle. This syntactically worked but I'm having problems displaying the image. I have sprites/textures working normally with separate files but I don't want to make the image's accessibility dependent on the file directory name.

[Yehor Yekaterynin]

Hi, I updated PIXI from 5.2.1 to 5.2.4. I got an error on spritesheet loading, using PIXI.Loader.shared .  Variable texture is instance of Texture that stored in "@pixi/app/node_modules/@pixi/core/lib/core.es.js" module, while here we checking it with Texture that stored in "@pixi/loaders/node_modules/@pixi/core/lib/core.es.js" module. How can I fix it?
 

[ivan.popelyshev]

50 minutes ago, Yehor Yekaterynin said:

Hi, I updated PIXI from 5.2.1 to 5.2.4. I got an error on spritesheet loading, using PIXI.Loader.shared .  Variable texture is instance of Texture that stored in "@pixi/app/node_modules/@pixi/core/lib/core.es.js" module, while here we checking it with Texture that stored in "@pixi/loaders/node_modules/@pixi/core/lib/core.es.js" module. How can I fix it?
 

Its usual double-pixi-in-node_modules-problem

remove node_modules

remove package.lock

npm install everything again

[Yehor Yekaterynin]

Your solution worked out. Thank you for your great work, best wishes to you ❤️
P.S Герои короновируса (твиттер) были смешными

On 5/29/2020 at 9:06 PM, ivan.popelyshev said:

Its usual double-pixi-in-node_modules-problem

remove node_modules

remove package.lock

npm install everything again

 

[Skaboy]

Hi is it posible to use different size prites for the same animation sequance?

i mean some havy motion frames can be potentenaly packed in smaller size, i wonder is there an automatic way of reading deferent size sprits for the same sequance ? i seen game engines on pixi that do it 

[8Observer8]

Thanks for this great tutorial!

I have a problem with old TexturePackerPro 4.3.3 Could someone attach "spritesheet.json" and "spritesheet.png" from the tutorial? I want to compare them with my export.

Edited June 10, 2022 by 8Observer8

[seanytdawg]

I cannot understand why my spritesheet won't load. Using TexturePacker, I tried to mimic this tutorial as much as possible, but it just won't work. The only difference I can think of is that my app is an object-oriented, modular structure that uses npm and imports PIXI.js

I cannI cannot 

[ivan.popelyshev]

Do you, maybe, reuse it several times? in that case you need reset() or different loader