使用Sprite混合2D和3D
更新时间: 2025-04-08 15:50:26
使用3D引擎并不意味着你就不应该包含一些2D内容，实际上2D内容可以是重要的组成部分
# Sprite
Sprite是一个始终面向摄像头的2d图形对象，在Babylonjs中创建Sprite,我们需要执行几个步骤
- 首先要创建一个SpriteManager实例
const wizardManager = new BABYLON.SpriteManager(
'wizardManager', // 名字
'/wizard.png', // 图片路径
1, // 精灵数量
250 // 图片尺寸
)
1
2
3
4
5
6
2
3
4
5
6
- 第二步是创建实际的sprite
const wizard = new BABYLON.Sprite('wizard', wizardManager)
1
现在sprite显示出来了，它永远都对着摄像头
精灵不仅仅是为了这个而设计的，它实际存在的目的是为了制作整个带有静态和动画元素的2d墙，我们使用sprite manager 和sprite packet manager和sprite map做到这一点
# spriteManager
spriteManager是我们设置图像的地方，但是如果要设置一个动画图像，我们需要设置特殊的spreadsheet图像，本质上是一张精灵表
比如高亮的这八张代表了巫师奔跑时不同的姿势
需要注意的是，每个单元格的宽度和高度应该相同，背景一般都是透明的或者和scene的背景相同
回到代码，首先让sprite sheet代替图片，再将animation应用到sprite上
const wizardManager = new BABYLON.SpriteManager(
'wizardManager',
'/wizard_spritesheet.png',
5,
{
width: 250,
height: 500
}
)
const wizard = new BABYLON.Sprite('wizard', wizardManager)
const wizard2 = new BABYLON.Sprite('wizard2', wizardManager)
wizard2.position.x = -2
wizard2.cellIndex = 15 // sprite在不执行动画的时候显示这个index代表的单元格
wizard2.invertV = true // 垂直翻转
wizard2.invertU = true // 水平翻转
wizard.width = 2 // 宽度放大2倍
wizard.height = 2 // 高度放大2倍
wizard.size = 3 // 整体放大3倍
wiard.playAnimation(
0, // 动画起始帧
7, // 动画结束帧
true, // 是否循环
100 //
)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
注意，sprite实际会受到深度的影响，因此sprite靠相机越近会看起来越大
可以在inspector中导出json然后直接加载
const wizManager = BABYLON.SpriteManager.ParseFromFileAsync('wizManager','/spriteManager.json').then(manager => {
})
1
2
3
2
3