多个动画的动画偏移

Posted

技术标签:

【中文标题】多个动画的动画偏移【英文标题】:Animation offset for multiple animations 【发布时间】:2016-06-05 09:48:33 【问题描述】:

我正在使用TexturepackgerGUI 将多个动画打包到一个精灵表中。我用Spriter 生成这些动画。 TexturepackerGUI 带有一个方便的功能,可以输出一个可用于偏移动画的偏移字段,因此当精灵变大时,它不会从左向右移动。

但是多个动画呢?当我从步行动画移动到空闲或运行时,它仍然会移动位置,因为这些帧使用更大的精灵,因为我在Spriter 中移动和旋转我的部件更多。

解决此问题的一种方法是在Spriter 中输出固定大小,但这会浪费大量纹理空间,因为我必须使用最大精灵的矩形大小。

这是我的包/atlas 文件的外观:

idle_cycle_heavy
  rotate: false
  xy: 1602, 2
  size: 78, 95
  orig: 124, 121
  offset: 3, 20
  index: 20
idle_cycle_heavy
  rotate: false
  xy: 1682, 2
  size: 78, 95
  orig: 124, 121
  offset: 3, 20
  index: 21
//...
run_cycle_heavy
  rotate: false
  xy: 162, 507
  size: 78, 95
  orig: 116, 113
  offset: 22, 11
  index: 25
run_cycle_heavy
  rotate: false
  xy: 1636, 406
  size: 78, 97
  orig: 116, 113
  offset: 23, 13
  index: 18
//...

这里我使用偏移量来绘制。

public void draw(SpriteBatch batch) 
    TextureRegion currentFrame = getCurrentFrame();
    if (currentFrame == null) Gdx.app.log("Unit.java", "Could not find proper frame.");

    int posX = Math.round(((TextureAtlas.AtlasRegion) currentFrame).offsetX);
    int posY = Math.round(((TextureAtlas.AtlasRegion) currentFrame).offsetY);

    batch.draw(currentFrame, posX, posY);


/**
 * Gets the texture region of the current frame taking the unit state into account
 * @return the current TextureRegion
 */
private TextureRegion getCurrentFrame()

    frameTime += Gdx.graphics.getDeltaTime();

    if (unitState.equals(UnitState.Idle))
    
        return idleAnimation.getKeyFrame(frameTime);
    
    else if (unitState.equals(UnitState.Walking))
    
        return walkAnimation.getKeyFrame(frameTime);
    
    else if (unitState.equals(UnitState.Running))
    
        return runAnimation.getKeyFrame(frameTime);
    
    else if (unitState.equals(UnitState.Shooting))
    
        return shootAnimation.getKeyFrame(frameTime);
    
    return null;

我有点希望TexturePackerGui 中有一个选项可以让我根据最大的图像设置偏移量。

【问题讨论】:

【参考方案1】:

在又一个小时摆弄SpriterTexturePacker 之后,我找到了解决方案。问题的核心在于Spriter。 Spriter 能够根据当前导出的动画中的最大帧导出具有矩形大小的动画。遗憾的是,它无法为实体的所有动画执行此操作,他们确实应该添加。

一种快速的解决方法是在导出时创建一个自定义矩形,并使其变大,这样您的框架就不会被截断。然后用这个矩形大小导出每个动画。 TexturePackerGUI 可以选择修剪空白,并根据该数字提供偏移量。由于所有原始帧都位于初始矩形/图像内的正确位置,这解决了问题。我现在有一个紧凑的精灵表。

我真的很想看到Spriter 的功能实际上会自动执行此操作。它在当前导出的动画上提供了此选项,但对于想要导出/创建多个动画的任何人来说都是无用的。 Spriter 提供的另一个选项是设置animation export box size,在这里您可以将其克隆到所有其他实体/动画。这里的问题是大多数时候你不知道最大的帧是什么,并且必须查找具有最大精灵的帧,否则较大的帧将被切断。这就是为什么我只是将我的帧导出为 512x512 图像,所以我确保它们都适合。如果您保留图像,这会浪费大量空间,但可以删除它们并在再次需要时轻松生成。

【讨论】:

以上是关于多个动画的动画偏移的主要内容,如果未能解决你的问题,请参考以下文章

在给定偏移处开始动画

内容偏移动画损坏

ThreeJS纹理偏移动画

React Transition Group:偏移动画开始时间

UIScrollview 动画取决于内容偏移

UIBarButtonItem 刷新动画偏移