babylon101

Sprites

精灵

Table of contents 内容列表

Sprites 精灵

How can I do this ? 怎么做？

Sprite Manager 精灵管理器
Create An Instance 建立实例
Sprite Animation 精灵动画

Next Step 下一步

Further Reading 扩展阅读

Sprites

精灵

In this tutorial, we are going to learn how to manipulate Sprites. Sprites are 2D image/animation, and we will use them to display an image with alpha channel. Sprites always face the camera.

在这篇教程中，我们将学习如何操纵精灵。精灵是2D的图片或动画，我们将使用它们显示带有透明度通道的图片。精灵总是朝向相机。

Nowadays, sprites are often used to display animated characters, and for particles, and to simulate 3D complex objects like trees.

今天，精灵经常用来表现带有动画的角色，或者作为粒子效果，或者用来模拟3D复杂物体比如树。

Final result

最终效果

How can I do this ?

怎么做？

Sprite Manager

精灵管理器

If you want to use sprites, you need to create a “sprite manager” to optimize GPU resources by grouping in one place multiple instances of a sprite. This manager is mandatory, even if you want to create one sprite. You just have to write:

如果你想使用精灵，你需要建立一个“精灵管理器”对象，来将一类精灵的多重实例作为一个对象分配GPU资源。（这样即使建立很多个实例，资源消耗也是较低的，这里可以将“精灵”类比为Java中的“类”，实例则对应类的实例，从一个类可以实例化出大量具有共同特征的实例对象）。这个管理器是必须的，即使你只想建立一个精灵实例。你必须这样写：

// Create a sprite manager 建立一个精灵管理器

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

When creating a sprite manager, you have to decide a few parameters:

在建立精灵管理器时，你必须考虑一些参数：

Name: a name for this manager.

名字：这个管理器的名字

The 2D image URL (most of the time, you will want use an image format which contain alpha channel, like .PNG).

2D图片的URL（大多数时候，你可能希望使用具有透明度通道的图片格式，比如.PNG）

The capacity of this manager : the maximum number of instances in this manager (in our example, we could create 2000 instances of trees).

管理器的容量：管理器中实例的最大数量（在我们的例子里，我们可以为树建立2000个实例）

The cell size, corresponding to the size of your image, like we’ll see below. Please note that cellSize could be a number or an object made of a width and height properties (Later on you will be able to also specify spriteManager.cellWidth and spriteManager.cellHeight)

单元尺寸，对应你图片的尺寸，正如我们将在下面看到的。请注意单元尺寸可以是一个数值，也可以是一个由宽度和高度属性组成的对象（在后面你也可以设置spriteManager.cellWidth和spriteManager.cellHeight属性）

The actual scene, to which we will add this manager.

这个管理器将添加到的场景

To give another example, look at this snippet:

为了给出另一个例子，请看这个片段：

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

This time, we only want 2 instances, and we said that our sprite’s size is 64x64. Here is what our image looks like:

这一次，我们只需要两个实例，并且我们规定精灵的单元尺寸为64*64。这是我们的图片看起来的样子：

Each image of a sprite must be contained in a 64 pixel square, no more no less.

精灵的每一个图像都必须能被一个64*64的方框包围，不多不少。

（注意这里的“单元尺寸”既不是精灵在场景中显示的尺寸，也不是精灵纹理图片的尺寸，而是规定精灵纹理图片按多大尺寸分块）

Create An Instance

建立一个实例

Now that we have our manager, we can create instances of our sprite linked to this manager. Creating an instance is as simple as:

既然我们已经有了管理器，我们就可以建立链接到这个管理器的精灵的实例。建立一个实例是如此简单：

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

Voilà, you have got your sprite displayed!

给，你已经让你的精灵显示了出来！

If you want to add parameters to this instance, you can manipulate it like any other meshes:

如果你希望向你的实例添加参数，你可以像其他网格一样的操纵实例：

player.position.y = -0.3;

But because it’s a sprite, you may use specific parameters: you can change their size, or their orientation:

但是因为它是一个精灵实例对象，你还可以使用精灵特有的参数：你可以如此修改它们的尺寸或者朝向：

player.size = 0.3;

player.angle = Math.PI/4;

player.invertU = -1;

Starting with Babylon.js v2.1, you can define sprite's width and height:

从Babylon.js2.1版开始，你可以定义精灵的宽度与高度：

player.width = 0.3;

player.height = 0.4;

You can keep using player.size and in this case width and height will just be the same.

你仍然可以使用player.size属性，在这种情况下宽度和高度就将相等。

Sprite Animation

精灵动画

One of the advantages of sprites is animations. You only have to load one large image file which will contain all animation images, one next to another. Just be careful to respect the square pixel size that you have specified in your manager (e.g. 64 pixel).

精灵的一个优势是动画。你只需要加载一张包括了所有动画图像的大图片，其中的动画图像一个接一个的排列。只需要注意你在管理器中设置的方块像素尺寸（比如这里是64像素）。

Here is what a complete sprite image looks like:

这是一张完整的精灵图片看起来的样子：

This will animate our players in more than 40 positions, depending upon the situation (walking, jumping,…). Babylon's engine is automatically reading sprites on more than one line, so the engine does the work for you :)

这将让我们的角色在40多种动作中切换，取决于不同的情况（行走、跳跃。。。）。Babylon引擎会自动的读取超过一行的精灵图像，所以引擎已经替你做好了

If you want to begin the animation, simply call this function:

如果你想启动动画，只需要调用这个方法：（注意与前面教程中网格动画的区别）

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

By calling « playAnimation » with those parameters, our player will be animated from frame 0 to frame 43. The third parameter is indicating if this animation will loop or not. And the last parameter is the delay between the frames (the smaller it is, the faster the animation).

通过以这些参数调用« playAnimation »方法，我们的角色将执行从第0帧到第43帧的动画。第三个参数表明动画是否会循环。最后一个参数则是帧之间的延迟（这个值越小，动画越快）。

Finally, if you want to go to a specific image (e.g. the last one, when the character is not moving), just call:

最后，如果你想跳转到某一张特定的图像（比如在角色不运动时跳转到最后一张），只需要调用：

player.cellIndex = 44;

You can play with the scene and code used in this tutorial... by visiting the Babylon.js Playground sprites demo.

你可以测试这个教程中的场景和代码。。。通过访问这个Playground示例

var createScene = function () {

var scene = new BABYLON.Scene(engine);

// Create camera and light

var light = new BABYLON.PointLight("Point", new BABYLON.Vector3(5, 10, 5), scene);

var camera = new BABYLON.ArcRotateCamera("Camera", 1, 0.8, 8, new BABYLON.Vector3(0, 0, 0), scene);

camera.attachControl(canvas, true);

// Create a sprite manager to optimize GPU ressources

// Parameters : name, imgUrl, capacity, cellSize, scene

var spriteManagerTrees = new BABYLON.SpriteManager("treesManager", "textures/palm.png", 2000, 800, scene);

//We create 2000 trees at random positions

for (var i = 0; i < 2000; i++) {

var tree = new BABYLON.Sprite("tree", spriteManagerTrees);

tree.position.x = Math.random() * 100 - 50;

tree.position.z = Math.random() * 100 - 50;

tree.isPickable = true;

//Some "dead" trees

if (Math.round(Math.random() * 5) === 0) {

tree.angle = Math.PI * 90 / 180;

tree.position.y = -0.3;

}

//Create a manager for the player's sprite animation

var spriteManagerPlayer = new BABYLON.SpriteManager("playerManager", "textures/player.png", 2, 64, scene);

// First animated player

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

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

player.position.y = -0.3;

player.size = 0.3;

player.isPickable = true;

// Second standing player

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

player2.stopAnimation(); // Not animated

player2.cellIndex = 2; // Going to frame number 2

player2.position.y = -0.3;

player2.position.x = 1;

player2.size = 0.3;

player2.invertU = -1; //Change orientation

player2.isPickable = true;

// Picking

spriteManagerTrees.isPickable = true;

spriteManagerPlayer.isPickable = true;

scene.onPointerDown = function (evt) {

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

if (pickResult.hit) {

pickResult.pickedSprite.angle += 0.5;

}

};

return scene;

}

（以精灵技术为基础，可以制作一些2D动作游戏）

Next Step

下一步

Having learnt about sprites, so it’s time to move on to use them in a classic effect in 3D : particles.

学习了精灵之后，是时候更进一步将它们应用在一个经典的3D效果中了：粒子。

扩展阅读

Mesh Overview

网格概述