加载lottie动画，不显示，去掉其他所有Entity后，可以显示

[OrageKK]

请问这是什么原因，又如何解决，我要在我现有的Entity之上显示lottie的动画，然而设置lottieEntity.transform.setPosition(0, 0, 15); 没有效果，z值不论多大或小都无法显示

[eyworldwide]

@OrageKK 可以提供一个 codesandbox 的示例吗？或者提供一下代码

[OrageKK]

@eyworldwide https://github.com/orgs/galacean/discussions/110#discussioncomment-7311261

[OrageKK]

就是lottieEntity只能在scene.background 之上，无法在其他Entity上层，简单来说就是，lottieEntity的z轴位置无法调整，是固定的
这是一个简单的示例

import './index.css';
/**
 * @title Sprite Flip
 * @category 2D
 */
import { OrbitControl } from '@galacean/engine-toolkit-controls';
import {
  AssetType,
  Camera,
  Entity,
  Sprite,
  SpriteRenderer,
  Texture2D,
  WebGLEngine,
} from '@galacean/engine';
import { LottieAnimation } from '@galacean/engine-lottie';

// Create engine
WebGLEngine.create({ canvas: 'canvas' }).then((engine) => {
  engine.canvas.resizeByClientSize();

  // Create root entity.
  const rootEntity = engine.sceneManager.activeScene.createRootEntity();

  // Create camera.
  const cameraEntity = rootEntity.createChild('Camera');
  cameraEntity.transform.setPosition(0, 0, 50);
  cameraEntity.addComponent(Camera);
  cameraEntity.addComponent(OrbitControl);

  engine.resourceManager
    .load<Texture2D>({
      url: 'https://gw.alipayobjects.com/mdn/rms_7c464e/afts/img/A*KjnzTpE8LdAAAAAAAAAAAAAAARQnAQ',
      type: AssetType.Texture2D,
    })
    .then((texture) => {
      // Create origin sprite entity.
      const spriteEntity = new Entity(engine, 'spriteFlip');
      const spriteRenderer = spriteEntity.addComponent(SpriteRenderer);
      spriteRenderer.sprite = new Sprite(engine, texture);

      // Display normal.
      addFlipEntity(spriteEntity, -15, false, false);
      // Display flip x.
      addFlipEntity(spriteEntity.clone(), -5, true, false);
      // Display flip y.
      addFlipEntity(spriteEntity.clone(), 5, false, true);
      // Display flip x and y.
      addFlipEntity(spriteEntity.clone(), 15, true, true);
    });
  engine.resourceManager
    .load({
      urls: [
        'https://gw.alipayobjects.com/os/bmw-prod/b46be138-e48b-4957-8071-7229661aba53.json',
        'https://gw.alipayobjects.com/os/bmw-prod/6447fc36-db32-4834-9579-24fe33534f55.atlas',
      ],
      type: 'lottie',
    })
    .then((lottieEntity) => {
      lottieEntity.transform.setPosition(0, 0, 14); // 这种方式不能调整
      rootEntity.addChild(lottieEntity);
      const lottie = lottieEntity.getComponent(LottieAnimation);
      lottie.isLooping = true;
      lottie.play();
    });
  engine.run();

  /**
   * Add flip entity.
   */
  function addFlipEntity(
    entity: Entity,
    posX: number,
    flipX: boolean,
    flipY: boolean
  ): void {
    rootEntity.addChild(entity);
    entity.transform.setPosition(posX, 0, 0);
    const flipRenderer = entity.getComponent(SpriteRenderer);
    flipRenderer.flipX = flipX;
    flipRenderer.flipY = flipY;
  }
});

效果如下，如果我想让lottieEntity可以自由浮动在任何位置，如何操作呢，也许是我的使用有问题？如果像例子中的这种是一个开奖弹窗，我觉得它应该是遮罩在其他东西的上层才对

[eyworldwide]

@OrageKK 这里要明确一下，scene.background 语义上是背景的意思，背景永远在最底下。如果要对 精灵 （SpriteRenderer）和 Lottie（LottieAnimation） 做渲染排序有两种方法：

1. 通过设置 entity.transform 的 position 的 z 值，注意检查两个 z 值谁更大
2. 在上一种方法失效的情况下，通过设置SpriteRenderer 和 LottieAnimation 的 priority （渲染优先级）来实现排序

[OrageKK]

LottieAnimation并不存在priority，然后设置SpriteRenderer的priority也没有效果

[cptbtptpbcptdtptp]

这个问题应该已经解决了，开发者们请将 @galacean/engine-lottie 升至 1.0.0 版本或以上，设置 LottieAnimation. priority 属性即可修改 Lottie 动画的渲染优先级。