AndreasLoew 23 Posted October 30, 2018 Report Share Posted October 30, 2018 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 marcioramos, themoonrat, ivan.popelyshev and 4 others 5 2 Quote Link to post Share on other sites
ivan.popelyshev 1094 Posted October 30, 2018 Report Share Posted October 30, 2018 Pinned. AndreasLoew and karlbot 2 Quote Link to post Share on other sites
johnnycash 1 Posted March 13, 2019 Report Share Posted March 13, 2019 What if I want to have multiple different color characters? How can I change the color of the character in this case with PIXI? Quote Link to post Share on other sites
eXponeta 2 Posted May 11, 2019 Report Share Posted May 11, 2019 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 Quote Link to post Share on other sites
ivan.popelyshev 1094 Posted May 12, 2019 Report Share Posted May 12, 2019 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 Quote Link to post Share on other sites
Critters 2 Posted April 28, 2020 Report Share Posted April 28, 2020 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 1 Quote Link to post Share on other sites
ivan.popelyshev 1094 Posted April 28, 2020 Report Share Posted April 28, 2020 yep, its outdated, in v5 anims are inside spritesheet, and there's no "extras" Quote Link to post Share on other sites
mkadzis23 0 Posted May 28, 2020 Report Share Posted May 28, 2020 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. Quote Link to post Share on other sites
Yehor Yekaterynin 1 Posted May 29, 2020 Report Share Posted May 29, 2020 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? Quote Link to post Share on other sites
ivan.popelyshev 1094 Posted May 29, 2020 Report Share Posted May 29, 2020 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 karlbot 1 Quote Link to post Share on other sites
Yehor Yekaterynin 1 Posted May 31, 2020 Report Share Posted May 31, 2020 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 ivan.popelyshev 1 Quote Link to post Share on other sites
Recommended Posts
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.