The number of files itself is a key driver of download speed, because each request requires a round-trip to the webserver, and browsers are limited to how many files they can download simultaneously. This means that the user's browser can request and download far fewer files for the same number of Sprites. While downloading a SpriteSheet's texture requires moving the same (or even slightly more!) number of bytes, they're grouped into a single file. SpriteSheets help your project in two ways.įirst, by speeding up the loading process. Each texture uses the same shared BaseTexture as its source. The SpriteSheet object then parses the JSON, and creates a series of Texture objects, one for each source image, setting the source rectangle for each based on the JSON data. These two files, in combination, can be passed into a SpriteSheet constructor. It then writes out a JSON file with that information. The sprite packer then collects the images, and creates a new combined image.Īs this image is being created, the tool building it keeps track of the location of the rectangle where each source image is stored. The first step is to collect the images you want to combine. The basic idea of a spritesheet is to pack a series of images together into a single image, track where each source image ends up, and use that combined image as a shared BaseTexture for the resulting Sprites. While somewhat more complex to create and use, they are a key tool in optimizing your project. Now that you understand basic sprites, it's time to talk about a better way to create them - the Spritesheet class.Ī Spritesheet is a media format for more efficiently downloading and rendering Sprites. PixiJS Guides Spritesheets and Why You Should Use Them
0 Comments
Leave a Reply. |