有没有大佬能解决：Rect width exceeds maximum margin

Creator 3.x
#1

cocos 版本： 3.8.4
目标平台： 目前是编辑器预览
问题详细描述：我先用TexturePackerGUI 将一百多张图打包成图集（100.plist和100.png）,然后放到resources/cAni文件夹内，创建一个100.anim,将图集中的序列帧放到100.anim中，当我通过代码resources.loadDir(‘cAni’, AnimationClip=>{其他逻辑代码}); 加载anim的时候 就会报错：
[PreviewInEditor] Rect width exceeds maximum margin: 118/ 229 2
[PreviewInEditor] Rect width exceeds maximum margin: 100/ 253 2
[PreviewInEditor] Rect width exceeds maximum margin: 101/ 253 2
[PreviewInEditor] Rect width exceeds maximum margin: 103/ 123 2
[PreviewInEditor] Rect width exceeds maximum margin: 102/ 123 2
[PreviewInEditor] Rect width exceeds maximum margin: 104/ 133 2
[PreviewInEditor] Rect width exceeds maximum margin: 105/ 133 2
[PreviewInEditor] Rect width exceeds maximum margin: 106/ 137 2
[PreviewInEditor] Rect width exceeds maximum margin: 107/ 137 2
[PreviewInEditor] Rect width exceeds maximum margin: 101/ 151 2
[PreviewInEditor] Rect width exceeds maximum margin: 100/ 151 2
[PreviewInEditor] Rect width exceeds maximum margin: 103/ 147 2
[PreviewInEditor] Rect width exceeds maximum margin: 104/ 449 2
[PreviewInEditor] Rect width exceeds maximum margin: 102/ 147 2
[PreviewInEditor] Rect width exceeds maximum margin: 105/ 449 2
[PreviewInEditor] Rect width exceeds maximum margin: 106/ 595 2
[PreviewInEditor] Rect width exceeds maximum margin: 111/ 301 2
[PreviewInEditor] Rect width exceeds maximum margin: 108/ 149 2 好像与加载的.anim 数量有关，数量少时候不太会报错，数量多就会，难道和内存缓存有关？

#2

图超2048了？

#3

有部分图集大小超了，图集中的小图没超， 但是这个报错是随机，比如说 我运行两次，同样的代码，加载同样100个.anim文件， 有时候报十几次错， 有时候报二十几次错，有时候不报错，就很奇怪。

#4

简单播放帧动画还要用animation，是不是有点。。。。
用个脚本岂不是更方便呢？

//************************

// Create By 流云

// Time: 2021.01.18

// Desc: 帧动画组件

//************************

import { Component, director, game, Sprite, SpriteFrame, _decorator } from “cc”;

const { ccclass, property } = _decorator;

/**

  • 帧动画组件

  • 使用方法：

  • 1.挂载该组件到节点上

  • 2.在编辑器中，将需要播放的帧动画拖入Frames数组中

  • 3.设置PlayOnload为true，即可在节点加载时自动播放

  • 4.设置Duration为每帧的时间，默认为0.1秒

  • 5.设置IsAllsyn为true，即可保持同步播放

  • 6.设置Loop为true，即可循环播放

  • 7.代码中可以通过play方法来播放动画，stop方法来停止动画

  • 8.也可以通过代码设置Frames数组来动态改变帧动画

*/

@ccclass

export default class ZClips extends Component {

@property(SpriteFrame)

public Frames: SpriteFrame[] = [];

@property

public PlayOnload = false;

@property

public Duration = 0.1;

@property

private IsAllsyn = false;//保持同步

/*示例用法：场景中有10个金币道具，每个金币都有同样的帧动画，但有可能因为加载的原因，并不一定

10个金币同时play，就会出现看起来有些金币动画先播，有些后播，10个金币动画不整齐，如果将IsAllsyn设置

为true，会将帧索引以全局游戏时间为标准，不管谁先播，谁后播，在同一时间，10个金币的ZClips都会计算得到同一个

Frames的索引，保证10个金币的动画一致整齐

*/

@property

private Loop = false;

@property

private clear = false;

private _sp: Sprite;

private _playing = false;

private _total_time = 0;

private _default_sp = null;

onLoad() {

    this._sp = this.node.getComponent(Sprite);

    if (!this._sp)

        this._sp = this.node.addComponent(Sprite);

    else {

        this._default_sp = this._sp.spriteFrame;

    }

    if (this.PlayOnload) {

        this.play(this.Loop, this.Duration, this.IsAllsyn);

    }

}

update(dt) {

    let self = this;

    if (self._playing && self.Frames.length > 0) {

        self._total_time += dt;

        let index = Math.floor(self._total_time / self.Duration) % self.Frames.length;

        if (self.IsAllsyn)

            index = Math.floor(game.totalTime / 1000 / self.Duration) % self.Frames.length;

        if (self.Loop || index < self.Frames.length) {

            self._sp.spriteFrame = self.Frames[index];

        }

        if (index >= self.Frames.length - 1 && !self.Loop)

            self.stop();

    }

}

/**

 * 播放

 * @param loop 是否循环（不传入使用编辑器赋的默认值，传入覆盖默认值）

 * @param duration 每帧多少秒

 * @param isAllsyn 保持同步

 * @returns

 */

play(loop = null, duration = null, isAllsyn = null) {

    if (this._playing) return;

    this._total_time = 0;

    this._playing = true;

    if (isAllsyn != null) this.IsAllsyn = isAllsyn;

    if (loop != null) this.Loop = loop;

    if (duration != null) this.Duration = duration;

}

stop() {

    this._playing = false;

    if (this._default_sp) {

        this._sp.spriteFrame = this._default_sp;

        return;

    }

    if (this.clear) this._sp.spriteFrame = null;

}

}

#5

感谢回答，但是你这个是最基本的用法，我弄不了那么多节点， 我一共有170个角色动画，每个角色动画有几百帧组成，类似于梦幻那样的角色动画，包含行走 施法 攻击等动作，都是要通过动态加载实现的，不是能直接挂节点上。 不管我是用图集 还是用原始的图片作为animation的spriteFrame, 也不管我是将多个animation挂在在节点上还是通过动态加载，只要数量够多，必然报错[PreviewInEditor] Rect width exceeds maximum margin: 118/ 229 2
[PreviewInEditor] Rect width exceeds maximum margin: 100/ 253 2
[PreviewInEditor] Rect width exceeds maximum margin: 101/ 253 2
[PreviewInEditor] Rect width exceeds maximum margin: 103/ 123 2
[PreviewInEditor] Rect width exceeds maximum margin: 102/ 123 2
[PreviewInEditor] Rect width exceeds maximum margin: 104/ 133 2

#6

这里，把图集的最大尺寸设置成小于等于2048

#7

那就是图集的问题了，不过你这么多帧的动画，更适合用这个脚本，动态加载精灵，动态设置帧数组

#8

图太大了，用脚本读图太慢了主要是，会卡顿，必须提前预载才行

#9

我测试了，这个是个Bug, 不管我换什么样的图片，只要.anim够多，百分百出这个bug!
目前复现Bug项目文件已经上传：通过网盘分享的文件：NewProject.7z
链接: https://pan.baidu.com/s/18OZ1mf_Nhyq6-34gaKjFlA 提取码: 8888

#10

你单个动画的图集能有多大呢，如果你单个动画的图集都很大，那就是设计的问题了，找策划和美术。单个动画用个自动图集就行了，100个动画也就只有100张图了，单个图集不要太大，每次加载只加载单个动画的图集，用完了释放一下。
看你又发了个帖子，既然怀疑是animation的问题，可以换别的方式是否能跑起来

#11

你下载我的项目测试包试下就知道了，和图片大小没关系，只要.anim数量够多必然报错，这个应该是编辑器预览的问题

#12
  1. 恭喜你成功把我cocos卡炸了
  2. 楼上说的挺好的，换个方式更合理
  3. image