在本教程中，我們將學習如何使用精靈圖。精靈圖是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;
最後，我們可以從後面地址查看此案例：點擊這裏