![]() That is then loaded into a TPS file (which stays at the top) and all the rest of the art assets are squished in place by TexturePacker and the texture coordinates are exported to a LUA file, as well as a final 2048x2048 PNG sprite sheet. We then take that extruded PNG and use 'convert' to combine the extruded STRUCTURE, TALL, and BIG grids into one perfectly-aligned PNG. First we use 'convert' ( ImageMagick) to chop up our structure tiles PNG into 64圆4 tiles, which are put into a TexturePacker TPS file that extrudes them to 66圆6 and recombines them into a new PNG image. But those all need to be aligned perfectly on the sprite sheet, so we have STRUCTURE, TALL, and BIG grids all in that order vertically. We need to keep these files as-is so they are feasible to edit, and they also have the added benefit of working easily with Tiled Map Editor. To solve this you have to "extrude" the tiles by cloning a border around them, as you can see done past this red line:īut we also have larger tiles that might be drawn in the game world, tall tiles (64x128) and big tiles (128x128). To reduce draw calls, we put ALL of this stuff onto one sprite sheet! Further compounding the confusion is the fact that OpenGL has a flaw where it can't draw tiles beside each other without introducing texture coordinate artifacts, namely black lines or thin transparent spaces between the tiles. The HUD is light on assets so we threw these in too, as the HUD is drawn over top every frame. This is where the biggest problem lies, because in addition to these grid tiles, we have a wide variety of characters, items, and effects placed throughout the world tiles, which can be moving, appearing or disappearing between any frame. Mostly straightforward, nothing too fancy there.įor our second sheet, our "upright" game world environment consists of 64圆4 isometric tiles, usually used for diagonal walls, cubes, and a variety of other physical obstacles. We put these on a typical XCF grid in GIMP and stuffed them into our first sprite sheet. We managed to get this to average 7 draw calls per frame after implementing this solution:įirst of all, for our first sheet, the "floor" of our game world is made of 64x32 interlocking isometric tiles. But our draw calls were often upwards of 200 per frame, which isn't a ton but was still hurting mobile performance, even though desktop seemed fine. We have some grids in our world so some of those PNG are grid-like image compilations. When we first built our game we just loaded up each PNG image and put it into memory. So while this been-there-done-that solution was pursued, there is still a lot of interesting things to go over regarding it, since we had to automate some complex tricks to combine our art. One of the ways to speed this up is a commonly known solution of "sprite sheets", which are large collections of images combined into one big image and then cleverly divided up by texture coordinates. Specifically, speed due to graphics displayed onscreen. Tech Used: GIMP, TexturePacker, ImageMagick, Tiled, PNG, BashĪbout midway through our game we met an obstacle that was hurting on mobile: speed. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |