excaliburjs / Excalibur

🎮 Your friendly TypeScript 2D game engine for the web 🗡️
https://excaliburjs.com
BSD 2-Clause "Simplified" License
1.82k stars 189 forks source link

fix GIF parsing for certain gif formats #3172

Closed eonarheim closed 3 months ago

eonarheim commented 3 months ago

Discussed in https://github.com/excaliburjs/Excalibur/discussions/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()`](https://github.com/excaliburjs/Excalibur/blob/76f65bdac4befc8e092f35fd3fb6dd92ea7ff119/src/engine/Resources/Gif.ts#L102-L113): ![snake_loading](https://github.com/user-attachments/assets/ad12bec6-ac4b-424c-8740-8d673a502486) ### 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.): https://github.com/user-attachments/assets/6d65b27b-0aed-4b78-9274-7c04df84274e Additionally, I have confirmed that the image(animation) displays correctly when using [`sandbox/tests/gif/sword.gif`](https://github.com/excaliburjs/Excalibur/blob/main/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`](https://github.com/excaliburjs/Excalibur/blob/main/sandbox/tests/gif/animatedGif.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. ![image](https://github.com/user-attachments/assets/ff6bf1d9-9a91-47da-b8c0-b914556eed36) ↓ [Gif.ts:570](https://github.com/excaliburjs/Excalibur/blob/76f65bdac4befc8e092f35fd3fb6dd92ea7ff119/src/engine/Resources/Gif.ts#L570) https://github.com/excaliburjs/Excalibur/blob/76f65bdac4befc8e092f35fd3fb6dd92ea7ff119/src/engine/Resources/Gif.ts#L570