animationphaser-framework2d-gamesframes

Use big spritesheet with 300 images Phaser.js


Framework: Phaser.js version 3 Symfony 5 Langage: Javascript, HTML5, CSS3

Hello, I'm learning Phaser.js 3; I would like to create smooth animations (25fps) with lots of frames in my spritesheet. Is it possible to use large spritesheets to create animations without writing the name of each frame each time? If I have 230 frames, I cannot write the name of each frame... Thank you in advance for your answer


Solution

  • Yes it should be possible, you can generate the names with generateFrameNames or generateFrameNumbers, here is the link to the documentation, and here an example.

    Or you can use a configuration file (json) to define the animations, like shown in this example. for this there are texture packer tools, for example this one http://free-tex-packer.com/, that can help.

    btw.: If you want smooth animations, and havn't created the spritesheets already, may be (spine-)bones animations might be a easy and space saving option, here is two example from the official website http://phaser.io/examples/v3/view/spine/basic-spineboy and http://phaser.io/examples/v3/view/spine/batch-test

    Here a short video highlights the benefits of bones for phaser games https://www.youtube.com/watch?v=sq6mnix8eAg , it is very basic and not very technical