![]() ![]() ![]() into a single draw call is the main secret to how PixiJS can run so blazingly fast. WebGL rendering speed scales roughly with the number of draw calls made. Converting a project from individual source images to shared sprite sheets can cut your download time in half, at no cost in quality. 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. I considered lot of times to rewrite it, but unfotunately I currently have no time for it.PixiJS Guides Spritesheets and Why You Should Use Them I do not update it anymore (only if I really need it). Piece of "JSON - TP+Properties" export: ,Īs said before. (this one is old, lot of new export options were added) Here are two tutorials for old version, but most of it is still valid: xml - I created this when importing into Unity and creating prefabs automatically, or there are some animation features from my old mobile games exported into binary export) there are also other features, but these may work only under special circumstances (for example there is export of atlas metadata into. Second is with additional properties (anchor + custom), there are multiple export options - for Phaser are relevant two: "JSON - Texture Packer" and "JSON TP+Properties". you can set scale for individual sprites and for whole atlas (= you can easily rescale graphics and reexport atlas), you can add additional custom properties (number, point, rectangle) to sprites in atlas, You can drag them to change it - for Phaser I am exporting additional property "anchor" along with every frame (I wrote tutorial on it here: ), all sprites are imported with anchor 0.5, 0.5 by default. you can import individual images or images drawn in grid (they are cut from it) (there are some rules for the grid), ![]() xml file with some parameters and pathes to individual images (you can change them later in drawing program, and just reexport atlas), I made it long time ago and code inside is real mess.But I am using it for all my games (from Android/iOS to HTML5:Īlso the name is mess as it originally named PicOpt and then I renamed it to Spritor. ![]()
0 Comments
Leave a Reply. |