AndreasLoew

PixiJS: SpriteSheet Tutorial

Recommended Posts

PixiJS tutorial: How to create sprite sheets and animations

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

 

 

 

Share this post


Link to post
Share on other sites

 

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

Share this post


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

 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

img.png

Share this post


Link to post
Share on other sites

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?
image.thumb.png.b96ee1919f89b50f32dcd21afd487115.png 

Share this post


Link to post
Share on other sites
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?
image.thumb.png.b96ee1919f89b50f32dcd21afd487115.png 

Its usual double-pixi-in-node_modules-problem

remove node_modules

remove package.lock

npm install everything again

Share this post


Link to post
Share on other sites

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

 

Share this post


Link to post
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.

Guest
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.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.