fix GIF parsing for certain gif formats

[eonarheim]

Discussed in #3170

^{Originally posted by ambmcmdmem626 August 7, 2024}
Version: 0.29.3

Premise

I want to implement a loading screen with the following GIF (20ms x 85 frames) and Gif.toAnimation():

Main Topic

When I checked the operation of the animation in the Excalibur sandbox, it displayed as follows
(A different animation was displayed from this GIF.):

Untitled.video.-.Made.with.Clipchamp.mp4

Additionally, I have confirmed that the image(animation) displays correctly when using sandbox/tests/gif/sword.gif.

Could this be due to a setting issue?
* I will continue my investigation and will update you as soon as I find out more!

Also, below are the code and network tabs for reference.

The code

* This is almost the same as sandbox/tests/gif/animatedGif.ts

/// <reference path="../../lib/excalibur.d.ts" />

var game = new ex.Engine({
  canvasElementId: 'game',
  width: 600,
  height: 400,
  displayMode: ex.DisplayMode.FitScreen,
  antialiasing: false
});

game.currentScene.camera.zoom = 2;

var gif: ex.Gif = new ex.Gif('./snake_loading.gif', ex.Color.Transparent); // changed path and color
var loader = new ex.Loader([gif]);
game.start(loader).then(() => {
  var actor = new ex.Actor({ x: game.currentScene.camera.x, y: game.currentScene.camera.y, width: gif.width, height: gif.height });
  actor.graphics.add(gif.toAnimation(20)); // 500 → 20
  game.add(actor);
});

Network

* The GIF(focused) was retrieved correctly, but I think the data:image was not retrieved as intended.

↓ Gif.ts:570

Excalibur/src/engine/Resources/Gif.ts

Line 570 in 76f65bd

img.src = c.toDataURL();