精灵表管理

一月 16, 2024

如果要在Babylon中使用精灵图Sprite，必须使用SpriteManager和SpritePackedManager两个管理器来进行新建和管理，即使只有一个小小的精灵图，这个步骤也逃不掉。他们通过将一个精灵图Sprite的多个实例集中在一个位置，来优化GPU资源。

1、一致性精灵表管理Sprite Manager

1
2
3

// Create a sprite manager

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

参数：

名称：管理器的名称

图片URL链接：大多数时候会使用背景透明的png图片。

管理器的负载：相当于在管理器中可允许的最大精灵图示例数量，在上例中，我们创建了一棵树的2000个实例。

单元格尺寸，就像图片大小一样，指定精灵图的大小，刚才我们也说到过，一致性精灵表的精灵图有完全一样的大小，这里就是指定这个大小，可以设置一个数字代表宽高一样，也可以设置一个对象单独指定宽高。（没有在这里指定也不要紧，可以通过 spriteManager.cellWidth 和 spriteManager.cellHeight 来单独指定）

场景Scene实例，决定管理器添加到哪里。

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

2、选中精灵图

开启精灵图的选中属性：sprite.isPickable = true;

再启用spriteManager的选中属性：spriteManager.isPickable = true;

然后我们就能通过 scene.pickSprite 方法来选中他们了：

var pickResult = scene.pickSprite(this.pointerX, this.pointerY);

if (pickResult.hit) {

 pickResult.pickedSprite.angle += 0.5;

}

 也可以使用multiPickSprite方法获取鼠标下的所有精灵图：

var pickResult = scene.multiPickSprite(this.pointerX, this.pointerY);

for (var i = 0; i \< pickResult.length; i++) {

 pickResult[i].pickedSprite.angle += Math.PI / 4;

}

默认情况下，选中操作将使用精灵图的边界矩形 bounding rectangle（由于性能原因），也就是靠近精灵图的大概一个区域就能够选中，不够精确。时候我们需要精确的选中操作怎么办？那就是设置使用精灵图的alpha值，也就是透明度，来进行选中（值来自于精灵图的纹理）。但是要注意的是，这个方法只在alpha大于0.5的情况下才能选中精灵。

3、压缩精灵表管理Sprite Packed Manager

1	var spm = new BABYLON.SpritePackedManager("spm", "pack1.png", 4, scene);

参数包括：

名称：管理器的名称

图片URL链接：大多数时候会使用背景透明的png图片。

管理器的负载：相当于在管理器中可允许的最大精灵图示例数量，上例中最多包含4个实例

场景Scene实例，决定管理器添加到哪里。

初始化的时候，也可以直接使用现有Json对象，让它作为参数传递到管理器中。例如：

1	var spm = new BABYLON.SpritePackedManager("spm", "pack1.png", 4, scene, JSONObject);

4、创建精灵图实例

只创建SpriteManager和SpritePackedManager两个管理器还不够，我们还需要创建一个精灵图的实例来链接到管理器。创建一个实例的代码如下所示：

1	var sprite = new BABYLON.Sprite("sprite", manager);

使用一致性精灵表spritesheet和SpriteManager实例的情况下，可以通过指定cellIndex索引来决定引用哪一个精灵图，cellIndex在精灵表中的计数是从左到右，自上而下的。代码示例如下：

1
2
3

var sprite = new BABYLON.Sprite("sprite", manager);

sprite.cellIndex = 2; //指定第二个精灵图

使用压缩精灵表packed spritesheet和SpritePackedManager的情况下，我们能使用上面提到的cellIndex或者精灵图sprite的名称cellRef，来指定使用哪个精灵图。代码示例如下：

var sprite = new BABYLON.Sprite("sprite", manager);

sprite.cellRef = "spot.png";

 也可以更改精灵图的大小，方向或水平翻转： 

sprite.size = 0.3;

sprite.angle = Math.PI/4;

sprite.invertU = -1;

 自从Babylon.js v2.1版本开始，还可以对精灵图的宽和高进行设置： 

sprite.width = 0.3;

sprite.height = 0.4;

 还可以像操作其他3D物体一样操作精灵图： 

sprite.position.y = -0.3;

5、精灵图动画

1	var spm = new BABYLON.SpritePackedManager("spm", "pack1.png", 4, scene);

参数包括：

名称：管理器的名称

图片URL链接：大多数时候会使用背景透明的png图片。

管理器的负载：相当于在管理器中可允许的最大精灵图示例数量，上例中最多包含4个实例

场景Scene实例，决定管理器添加到哪里。

初始化的时候，也可以直接使用现有Json对象，让它作为参数传递到管理器中。例如：

1	var spm = new BABYLON.SpritePackedManager("spm", "pack1.png", 4, scene, JSONObject);

查看评论