使用容器对象作为遮罩

Question

这是一款2D游戏。

我正在尝试移动另一个对象内的对象，并使其在离开容器对象边界后消失（就像在 Web 开发中将属性溢出设置为hidden的div一样）。

注意：我可以移动对象，这不是问题。但我不能让父对象表现得像一个容器。

请参阅片段以进行澄清。

.blue {

  width: 400px;

  height: 400px;

  background: blue;

  position: relative;

}

.red {

  width: 200px;

  height: 70px;

  background: red;

  position: relative;

  left: 50px;

  top: 50px;

  overflow: hidden;

}

.yellow {

  width: 20px;

  height: 20px;

  background: yellow;

  position: relative;

  left: 75px;

  top: 20px;

}

<div class="blue">

  <div class="red">

    <div class="yellow"></div>

  </div>

</div>

蓝色方块代表场景。红色矩形是容器对象。黄色方块是嵌套对象。我想要实现的是：向上移动黄色方块，直到它不再位于红色矩形的可见区域内而看不见为止。

不幸的是，尽管嵌套在红色矩形对象中，但每当我向上移动它时，黄色正方形对象在场景中仍然可见（蓝色正方形）。

我是一个统一的 JR，我知道这个问题非常愚蠢，但我还没有找到（或者至少我是这么认为的）关于如何解决这个问题的答案。

Answer 1

如果是 2D 使用精灵蒙版。如果在 3D 中，我认为如果您使用多个相机，您可以实现这一点。创建另一个仅渲染红色和黄色方块的相机。并将相机大小调整为红色正方形。

Answer 2

我想Sprite Masks这就是你要找的。这是如何使用它们的手册：精灵面具