babylon101

精灵


精灵

在本教程中,我们将学习如何操作Sprites。精灵是2D图像/动画,我们将使用它们来显示带有alpha通道的图像。精灵总是面对镜头。

如今,精灵通常用于显示动画角色和粒子,以及模拟像树木这样的3D复杂对象。

Elements

最后结果

我怎样才能做到这一点 ?

精灵管理器

如果你想使用精灵,你需要创建一个“精灵管理器”来优化GPU资源,方法是在一个地方将精灵的多个实例分组。即使您想创建一个精灵,该管理器也是必需的。你只需要写:

// Create a sprite manager
var spriteManagerTrees = new BABYLON.SpriteManager("treesManager", "Assets/Palm-arecaceae.png", 2000, 800, scene);

创建精灵管理器时,您必须确定一些参数:

  • 名称:此经理的名称。
  • 2D图像URL(大多数情况下,您需要使用包含Alpha通道的图像格式,如.PNG)。
  • 此管理器的容量:此管理器中的最大实例数(在我们的示例中,我们可以创建2000个树实例)。
  • 单元格大小,与图像大小相对应,如下所示。请注意,cellSize可以是由宽度和高度属性组成的数字或对象(稍后您还可以指定spriteManager.cellWidth和spriteManager.cellHeight)
  • 实际场景,我们将添加此经理。

再举一个例子,看一下这个片段:

var spriteManagerPlayer = new BABYLON.SpriteManager("playerManager","Assets/Player.png", 2, {width: 64, height: 64}, scene);

这次,我们只想要2个实例,我们说我们的精灵大小是64x64。这是我们的图像:

Elements

精灵的每个图像必须包含在64像素的正方形中,不能再少。

创建一个实例

现在我们有了我们的经理,我们可以创建链接到该经理的精灵实例。创建实例非常简单:

var player = new BABYLON.Sprite("player", spriteManagerPlayer);

Voilà,你有你的精灵显示!

如果要向此实例添加参数,可以像处理任何其他网格一样操作它:

player.position.y = -0.3;

但是因为它是一个精灵,你可以使用特定的参数:你可以改变它们的大小或方向:

player.size = 0.3;
player.angle = Math.PI/4;
player.invertU = -1;

从Babylon.js v2.1开始,您可以定义精灵的宽度和高度:

player.width = 0.3;
player.height = 0.4;

您可以继续使用player.size,在这种情况下,宽度和高度将是相同的。

精灵动画

精灵的一个优点是动画。您只需要加载一个包含所有动画图像的大图像文件,一个接一个。请注意遵守您在管理器中指定的方形像素大小(例如64像素)。

这是一个完整的精灵图像:

Elements

根据情况(步行,跳跃......),这将使我们的球员在40多个位置动画。Babylon的引擎会在多行上自动读取精灵,因此引擎可以为你工作:)

如果要开始动画,只需调用此函数:

player.playAnimation(0, 43, true, 100);

通过使用这些参数调用“playAnimation”,我们的播放器将从第0帧到第43帧进行动画处理。第三个参数指示此动画是否循环。最后一个参数是帧之间的延迟(它越小,动画越快)。

最后,如果你想去一个特定的图像(例如最后一个,当角色没有移动时),只需要调用:

player.cellIndex = 44;

您可以通过访问Babylon.js Playground精灵演示来玩本教程中使用的场景和代码。

下一步

了解了精灵,所以现在是时候继续使用它们在3D中的经典效果: 粒子.

进一步阅读

网格概述