12 Babylonjs基础入门 精灵图

在本教程中，我们将学习如何使用精灵图。精灵图是2D的图像/动画，并且始终朝向相机，我们将使用它来显示带有alpha通道（透明度）的图像。
如今，精灵通常用于显示动画角色和例子，以及模拟像树木这样的复杂3D对象。

接下来，我们将实现以上效果：

精灵管理器

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

// 创建一个精灵管理器
var spriteManagerTrees = new BABYLON.SpriteManager("treesManager", "Assets/Palm-arecaceae.png", 2000, 800, scene);

创建精灵管理器时，你必须要确定一些参数：

• Name: 精灵管理器的名称
• 图像的路径 (大多数情况下，使用的都是包含透明通道的图像格式，比如png).
• 精灵管理器的容量: 此管理器的最大实例的个数（在我们的案例中，我们可以创建2000个实例）
• 单元格的大小，与图像的大小相对应。就是精灵可以显示图像的大小的内容。请注意，这个值可以使有宽度和高度属性组成的数字对象或数字（稍后还可以通过spriteManager.cellWidth和spriteManager.cellHeight修改）
• 场景对象，将精灵添加到的场景
  再举一个例子：

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

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

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

创建一个精灵

现在我们有了管理器，我们可以创建精灵添加到管理器上。创建实例非常简单：

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

精灵会直接显示出来。
如果你要向此实例添加参数，可以像处理其他网格一样操作它：

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;

精灵动画

精灵的一个优点就是动画。你只需加载一个包含所有动画图像的大图像文件。请注意你的管理器上指定的方形像素大小（例如64像素）。
这是一个完整的精灵图像：

根据内容（步行，摔倒，跳跃）40多个动画位置组成了一组动画。Babylon.js的引擎会在多行上自动读取精灵。注意，图片必须要把动作平铺，并且每一个动作都只占用相应的大小。
如果要开始动画，只需调用此函数：

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

通过这些参数调用playAnimation即可实现动画播放，我们的动画播放器将从第0帧到43帧按顺序进行动画处理。第三个参数指当前动画是否循环。最后一个参数是帧之间的切换时间（毫秒）。
最后，如果你想只显示一个特定的图像（例如最后一个站立的效果），只需要调用：

player.cellIndex = 44;

最后，我们可以从后面地址查看此案例：点击这里