Adding Gif to phaser

Phaser 3
1

Hello,
I’m trying to add gif to phaser game.
Currently I’m using gifuct-js

 import { parseGIF, decompressFrames } from 'gifuct-js'

var promisedGif = fetch('http://matt-way.github.io/gifuct-js/images/horses.gif')
      .then(resp => resp.arrayBuffer())
      .then(buff => {
          var gif = parseGIF(buff)
          var frames = decompressFrames(gif, true);
          let ancillaryCanvas = this.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()
          this.anims.create({
              key: 'animatedGif',
              frames: this.anims.generateFrameNumbers('frames', { start: 1, end: frames.length }),
              frameRate: Math.floor(1000 / frames[0].delay),
              repeat: -1
          })
          let animatedGif = this.add.sprite(200, 200, 'frames').play('animatedGif')
      });

I get this warning :
Screenshot 2022-05-17 132814
along with black screen

If I decrease the width value in createCanvas like:

let ancillaryCanvas = this.textures.createCanvas('frames', 16000, frames[0].dims.height)

The gif will work but last few frame turn blur
Screenshot 2022-05-17 133127
along with generateFrameNumbers: Frame 56 missing from texture: frames warning.

2

Fixed this issue when url was changed but not sure why this happens.

3

I think you would use { start: 1, end: frames.length - 1 }.

It might be easier to convert the image outside of Phaser.

4

Even if I do the above change and use http://matt-way.github.io/gifuct-js/images/horses.gif this .gif, the screen will stay black. Only after changing the .gif to low frame rate the gif starts to work.
Is this issue because of frame rate issue?

5

That was to address the Frame 56 missing warning.

It’s possible the canvas is just too large.

document.body.appendChild(ancillaryCanvas.canvas);
6

Thanks for the reply

Why do we add this to the code and it would be helpful if you mention where exactly should I add it.
When I tried doing it I got frames of the gif below the black screen(which should be the gif playing).

Screenshot 2022-05-19 140631
Screenshot 2022-05-19 1406311901×887 74.8 KB

7

Is there anyway I can fix this problem?

9

It’s so you can see the whole image.

You can try using a canvas like 4096 × 4096 and put the frames in rows and columns. Or even use multiple canvases.

Or use https://jacklehamster.github.io/utils/gif2sprite/.

horses.med64
horses.med642814×2520 1.83 MB

1 Like
10

So I can alter the for loop to get this image.
How to use multiple canvas?
Thank you.

11

This really helped Thanks.

Currently I’m facing a problem of gif not converting to frames properly.
I think it’s because of plugin. Is there a way to fix this?

Screenshot 2022-05-20 112308
Screenshot 2022-05-20 112308820×463 447 KB

12

if I have 10 frames as separate canvas each. How do I animate them?

13

You don’t need multiple canvases for one image unless you can’t fit all the frames within 4096 × 4096 or so.

Why not just use gif2sprite?

14

I get the gif as link from the users and need to display it. So I need to do it in code itself.

What I meant was that each frame is stored as separate canvas.

Can you explain about this or give a example code?. Right now I store each frames as canvas like frames[0], frames[1]. I don’t know how to animate this.

15

Like animation/animation from png sequence. I don’t think you should use one canvas per frame though, it’s inefficient.

1 Like