Overriding atlas resolution

when using TexturePacker and exported json file have defined scale other than 1 in meta part of the file.

READ MORE

Preloading web font into Pixi.js

Tutorial on how to preload web font directly from Google Fonts site into your Pixi project.
Font is not displayed for the first time page is loaded?

READ MORE

textureUnpacker

If you are looking for online version of tool, which allows you to deconstruct texture atlases created with TexturePacker (Pixi, Phaser), you just found it!
Simply load your JSON and PNG files and textureUnpacker will do the job. Supports trimmed and rotated sprites, too...

Grab the source code on GitHub

TRY IT NOW, IT'S FREE!

Sharp PIXI.Text

How to make your PIXI.Text look crisp at any screen resolution ?

- listen to window resize event
- grab new browser's window size
- calculate new font size for your PIXI.Text (don't forget to take window.devicePixelRatio into account)
- redraw the text

Easy, right? For better results round new font size and text position coordinates. See it in action by clicking button below and feel free to play with browser's window size

RUN THE DEMO

Pixi Horizontal stack

Easiest way to align Pixi elements horizontally (sprites in this example) is to extend Pixi.Container
Right click on demo page and view source to see how it's done.

RUN THE DEMO

Pixi.js + CSS Star Wars scroller

How to make 3D scrolling text effect with 2D rendering engine? Well, until it will be implemented into Pixi.js we can do it with little help of CSS and 3D transform.

Click button bellow to see it in action and feel free to grab the source code on GitHub

RUN THE DEMO

Newsletter

Subscribe to receive our latest posts and tutorials. No spam, unsubscribe at any time.

Keep in Touch

Want to ask something, have an idea for improvement or just want say hello? Then feel free to contact us