While you can create a spritesheet using pretty much any image editing software, if you want to make it easier on yourself, you can consider TexturePacker which is what I used. In a future tutorial we’ll explore the sprite atlas option for more optimized spritesheets and animations. We used a spritesheet, not a sprite atlas.We used a uniformly spaced and sized sheet of sprite images that have not been optimized.Just a few points to reiterate on regarding the approach that we used. You just saw how to animate a spritesheet in a Phaser 3.x powered game. There are other animation events, but for this example knowing when to remove our sprite makes SPRITE_ANIMATION_COMPLETE a great choice. Just to reiterate, we probably could have used setTimeout, but since functionality in Phaser 3.x exists, it probably makes sense to use that instead. Within this index.html file, include the following code: On your computer, create a new directory with an index.html file in it. So what do we have to do to accomplish this effect? Create a Phaser 3.x Project with HTML and JavaScriptīefore we look at creating, using, and animating a spritesheet, let’s focus on getting started with some boilerplate Phaser 3.x code. These are both animations with several frames within the same spritesheet. We also have a crude looking explosion that triggers after a certain amount of time. We have a crude looking plane that looks like it is flying, hence the jet-stream behind it. We have two things happening in the above image. To get a better idea of what we hope to accomplish in this tutorial, take a look at the following animated image: In this tutorial, we’re going to see how to animate 2D sprites in a Phaser 3.x game using simple spritesheets with JavaScript. Loading one image file is less resource intensive than loading several image files, and when it comes to smooth performance in games, how you manage your resources can make or break your game. One of the main benefits to spritesheets, beyond them being easy to animate in modern game development frameworks, is they are easy on the computing resources. You could develop complex logic that swaps images on a sprite every time the render function updates, or you could work from a single spritesheet and iterate over the frames in that spritesheet. There are a few ways to accomplish animations in game development. They are going to want vibrant animations that add a certain realism to the game-play experience, even with it being 2D. No one wants to play a game with a static unappealing image that moves around on the screen. When it comes to 2D game development, sprite animations are going to be a critical part of the game experience.
0 kommentar(er)
