feat:support .gif #795
feat:support .gif #795
Conversation
Summary of ChangesHello @ahzvenol, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! 此拉取请求旨在扩展PIXI.js在 Highlights
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
这个 PR 通过 GifResource 为 PIXI 添加了对 .gif 格式文件的支持，实现相当完整，涵盖了 GIF 的加载、播放、停止和循环。代码整体结构清晰，但在一些细节上还有提升空间。例如，代码中残留了一些用于调试的 console.log 语句。为了增强代码的健壮性，建议使用显式 null 检查来代替非空断言。当前的实现会预先解码并缓存所有 GIF 帧，对于较大的 GIF 文件可能导致高内存占用。最后，为了更好的可维护性，建议使用 PIXI 公共的 extensions.add() API 来注册自定义资源，而不是直接操作其内部数组。
| const ctx = canvas.getContext('2d')!; | ||
| const patchCanvas = document.createElement('canvas'); | ||
| const patchCtx = patchCanvas.getContext('2d')!; |
There was a problem hiding this comment.
此处（第83和85行）使用了非空断言 ! 来获取 CanvasRenderingContext2D。虽然对于新创建的 canvas 元素，getContext('2d') 通常不会返回 null，但为了代码的健壮性，建议进行显式的 null 检查并抛出错误，以防在某些意外情况下（如浏览器不支持2D上下文）导致运行时错误。
| for (const frame of gifFrames) { | ||
| const { dims, delay = defaultDelay, disposalType = 2, patch } = frame; | ||
| const { width, height, left, top } = dims; | ||
|
|
||
| patchCanvas.width = width; | ||
| patchCanvas.height = height; | ||
| const patchData = new ImageData(new Uint8ClampedArray(patch), width, height); | ||
| patchCtx.putImageData(patchData, 0, 0); | ||
|
|
||
| ctx.drawImage(patchCanvas, left, top); | ||
| const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height); | ||
|
|
||
| this._frames.push({ start: time, end: (time += delay), imageData }); | ||
|
|
||
| if (disposalType === 2) ctx.clearRect(0, 0, canvas.width, canvas.height); | ||
| else if (disposalType === 3 && prevFrame) ctx.putImageData(prevFrame, 0, 0); | ||
|
|
||
| prevFrame = imageData; | ||
| } |
There was a problem hiding this comment.
当前的实现方式会将GIF的每一帧都解码为 ImageData 并存储在内存中。对于大型或长时长的GIF文件，这可能会导致非常高的内存占用。例如，一个800x600的30帧GIF可能会占用接近60MB的内存。建议考虑一种更节省内存的策略，比如只在需要渲染某一帧时才动态地生成该帧的 ImageData。这虽然会增加一些CPU开销，但可以显著降低内存峰值。
| const frame = findFrame(this._frames, this._currentTime); | ||
|
|
||
| if (frame) { | ||
| this.source.getContext('2d')!.putImageData(frame.imageData, 0, 0); |
There was a problem hiding this comment.
此处也使用了非空断言 !。建议进行显式的 null 检查，以确保在获取 2d 上下文失败时能够优雅地处理错误。
| import { v4 as uuid } from 'uuid'; | ||
| import { cloneDeep, isEqual } from 'lodash'; | ||
| import * as PIXI from 'pixi.js'; | ||
| import { INSTALLED } from 'pixi.js'; |
There was a problem hiding this comment.
为了使用 PIXI 的公共扩展 API，建议将此处的 INSTALLED 导入更改为 extensions。这将与 extensions.add(GifResource) 一起使用，以更稳健的方式注册自定义资源。
| import { INSTALLED } from 'pixi.js'; | |
| import { extensions } from 'pixi.js'; |
| // @ts-ignore | ||
| window.PIXI = PIXI; | ||
|
|
||
| INSTALLED.push(GifResource); |
There was a problem hiding this comment.
此处直接操作了 PIXI 的内部 INSTALLED 数组来注册 GifResource。这依赖于 PIXI 的内部实现，可能在未来版本中失效。推荐使用 PIXI v6+ 的公共扩展 API extensions.add() 来注册资源。这需要对 GifResource.ts 做一些小的修改，以使其符合扩展的格式，从而提高代码的健壮性和可维护性。
建议在 GifResource.ts 中添加：
import { ExtensionType } from 'pixi.js';
// ...
public static readonly extension = {
type: ExtensionType.Resource,
priority: 2, // or other appropriate priority
};| INSTALLED.push(GifResource); | |
| extensions.add(GifResource); |
|
有一个小小的问题，WebGAL现在的资源加载方式，不太方便直接拿到资源并对其进行配置，如这里的 |
Co-authored-by: HardyNLee <hardy--lee@outlook.com>
|
@HardyNLee 通过继承Sprite固定使用Gif资源，然后属性代理内部resource属性来实现？WebGAL这边状态管理有些复杂，也不知道具体怎么做合适，这个Pr我就不继续扩展下去了 |
HardyNLee
left a comment
HardyNLee
left a comment
There was a problem hiding this comment.
引入了 gifuct-js ，实现 GifResource 使 PIXI 支持 gif 格式。
- 没有非兼容更改
- 对已有代码改动较小，以增为主
- 与 PIXI.Loader 工作得很好，立绘和背景都能用
有关但不紧要的点
- 有调整 gif 选项的接口，但没有实现通过 webgal script 设置
- 现在也是能用 gif 的，调整选项也许可以放到另外的 PR 实现
- 由于资源是会被 WebGAL 复用的，因此可能有调整一个 gif，却影响了所有使用这个资源的场景对象的表现
- 或许播放选项与更新逻辑应该从 gif 资源中抽离出来
综上所述，此 PR 很好的完成了 Pixi 对 gif 的支持，尽管暂时没有办法让用户调整播放选项，但功能上现在是可用的。
3 participants
通过添加GifResource实现了PIXI对.gif格式文件的支持