Phaser works with .gif?

Phaser 3
1

Hey guys, for animation i know it works with sprite and all.

But phaser accept .gif files ?

2

You can load a .gif, but it’ll only show the first frame if it’s animated. You’ll have to create a spritesheet from it if you want to play an animation. This is a limitation of the canvas API and WebGL.

3

There are converters that take gifs and generate spritesheets from them.

2 Likes
4

Thanks for the infos guys.

Have some good programs to organize spritesheet and make a correct save to it?

or u guys make it?

The last time i do something to create a gif i organized all in the inkscape

5

https://www.leshylabs.com/apps/sstool/

Very simple to use sprite sheet creating tool, save the png and change text to JSON Hash and save, can create full atlas’s or single sprite sheet.

6

@Villan thanks :slight_smile:

7

Sure it’s true that html canvas doesn’t support gif out of the box. But it paints pixels, and gifs have pixels. The rest is just deciding how close to the metal you want to go. Fortunately, the fine folks at phaser and the minds behind gifuct-js have created pretty sizable black-boxes that you can piece together without having to get too deep in the weeds.

In the below, I took the gif parsing and rendering logic from gifuct-js/demo.js at master · matt-way/gifuct-js · GitHub and I took the sprite creation logic from Phaser - Examples - Create Animation From Canvas Texture

function gifTest(){ //unseen imports of parseGIF() and decompressFrames() from gifuct-js above ^^
    let request=new XMLHttpRequest()
    let url='https://example.com/thisGifLocationIsFake'
    request.open("GET",url,true)
    request.responseType="arraybuffer"
    request.onload= function(event){
        let arrayBuffer=request.response
        if (arrayBuffer){
            let rawGifData=parseGIF(arrayBuffer)
            let frames=decompressFrames(rawGifData,true)
            let ancillaryCanvas=primaryGameScene.textures.createCanvas('frames',frames[0].dims.width*frames.length,frames[0].dims.height)
            let ancillaryContext=ancillaryCanvas.context
            for (let i=0;i<frames.length;i++){
                let thisFramesImageData=ancillaryContext.createImageData(frames[i].dims.width,frames[i].dims.height)
                thisFramesImageData.data.set(frames[i].patch)
                ancillaryContext.putImageData(thisFramesImageData,frames[i].dims.width*i,0)
                ancillaryCanvas.add(i,0,frames[i].dims.width*i,0,frames[i].dims.width,frames[i].dims.height)
            }
            ancillaryCanvas.refresh()
            primaryGameScene.anims.create({
                key:'animatedGif',
                frames:primaryGameScene.anims.generateFrameNumbers('frames',{start:1,end:frames.length}),
                frameRate:Math.floor(1000/frames[0].delay),
                repeat:-1
            })
            let animatedGif=primaryGameScene.add.sprite(200,200,'frames').play('animatedGif')
        }
    }
    request.send(null)
}