TEXTUREPACKER LAST FRAME HOW TO

I’m not sure if this method is more optimized for a game environment versus the setTimeout way to do things, but since it existed in Phaser, I thought it would probably be best. In the above code we are using a Phaser timer to delay a function for three seconds. On your computer, create a new directory and within it create an index.html file with the following markup: We’re going to start by creating a fresh project to work with. Create a New Phaser 3.x Project for the Game However, this time the approach is different. Both the plane and the explosion are part of the same spritesheet and has the same end result as what we saw in the previous tutorial. After a certain amount of time, the plane explodes and shows an explosion animation. In the above image we have a plane that is animated with jet-stream lines. To get an idea of what we hope to accomplish, take a look at the following animated image:

TEXTUREPACKER LAST FRAME HOW TO

In this tutorial we’re going to see how to take a sprite atlas, composed of a compressed spritesheet and map information, and animate it within a Phaser 3.x game. To know the information of each frame, we need an atlas which is like a map. Since the images are of different sizes and positions, we can no longer iterate over them like we did in the previous example because we don’t know where one frame ends and another begins. We have numerous frames in a single image file, the difference being that all of the padded white-space has been removed. We can improve upon this process with what’s known as a sprite atlas.Ī sprite atlas is still a spritesheet. Wasted space in an image means we’re now working with a larger image in resolution and in file size. However, because each frame in the spritesheet was the same size, we had a lot of empty space padded between each of the frames. This allowed us to iterate over the frames kind of like an array. In this previous tutorial, the spritesheet had each frame being composed of the same resolution image. The process was quite simple, but not very optimized. You might recall that I recently wrote a tutorial titled Animate Spritesheets in a Phaser Game where I created two different sprite animations from a single spritesheet.

Texturepacker last frame