# Sprite组件
使用Sprite组件可以为实体添加精灵标签。
import { HorizontalOrigin, Sprite, TextAlign, VerticalOrigin } from '@tx3d/core';
// 加载GLTF模型
engine.loadGLTF( '../assets/models/Soldier/Soldier.glb', {
transform: {
position: [ 0, 0, 0 ],
rotation: [ 0, Math.PI, 0.0 ]
}
} ).then( ( entity ) => {
const sprite = entity.addComponent( Sprite, {
text: {
text: '示例',
fontStyle : 'bold',
fontFamily :'Arial',
fontSize: 64,
outline: false,
outlineColor: '#00ff00',
occluded: false,
fillStyle: '#ff0000',
} ,
size: [ 48, 48 ],
image: '../assets/jsons/panel/lottie/695-bouncy-mapmaker.json',
weight: 0, // 剔除权重（值越大被剔除的机率越大）
autoCulling: false, // 启用自动遮挡剔除
opacity : 1.0, // 透明度
sizeAttenuation: false, // 是否根据深度衰减
horizontalOrigin: HorizontalOrigin.CENTER,
verticalOrigin: VerticalOrigin.BOTTOM,
spriteAlign: TextAlign.RIGHT,
} )
} );
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
31
32
33
34
35
36
37
38
39
40
41
42
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
31
32
33
34
35
36
37
38
39
40
41
42
提示
Sprite组件初始化参数，详见SpriteParameters。
# 属性
🌏 width 标签宽度，只读
// 获取宽度
const width = sprite.width;
1
2
2
🌏 height 标签高度，只读
// 获取高度
const height = sprite.height;
1
2
2
🌏 weight 剔除权重
// 获取剔除权重
const weight = sprite.weight;
// 设置剔除权重
sprite.weight = 0.0;
1
2
3
4
5
2
3
4
5
🌏 opacity 透明度
// 获取透明度
const opacity = sprite.opacity;
// 设置透明度
sprite.opacity = 1.0;
1
2
3
4
5
2
3
4
5
🌏 occluded 是否可被遮挡
// 获取是否可被遮挡
const occluded = sprite.occluded;
// 设置不可被遮挡
sprite.occluded = false;
1
2
3
4
5
2
3
4
5
🌏 sizeAttenuation 是否随深度衰减
// 获取是否随深度衰减
const sizeAttenuation = sprite.sizeAttenuation;
// 设置不跟随深度衰减
sprite.sizeAttenuation = false;
1
2
3
4
5
2
3
4
5
🌏 text 设置文本内容
// 获取文本内容
const text = sprite.text;
// 设置文本内容
sprite.text = '修改';
1
2
3
4
5
2
3
4
5
🌏 fillStyle 文字颜色
// 获取文本颜色
const fillStyle = sprite.fillStyle;
// 设置文本颜色
sprite.fillStyle = '#ff0000';
1
2
3
4
5
2
3
4
5
🌏 verticalOrigin 竖直方向中心点位置
// 获取竖直方向中心点位置
const verticalOrigin = sprite.verticalOrigin;
// 设置竖直方向中心点位置
sprite.verticalOrigin = VerticalOrigin.TOP;
1
2
3
4
5
2
3
4
5
提示
竖直方向中心位置，详见VerticalOrigin。
🌏 horizontalOrigin 水平方向中心点位置
// 获取水平方向中心点位置
const horizontalOrigin = sprite.horizontalOrigin;
// 设置水平方向中心点位置
sprite.horizontalOrigin = HorizontalOrigin.RIGHT;
1
2
3
4
5
2
3
4
5
提示
水平方向中心位置，详见HorizontalOrigin。
🌏 spriteAlign 对齐方式
// 获取对齐方式
const spriteAlign = sprite.spriteAlign;
// 设置对齐方式
sprite.spriteAlign = TextAlign.LEFT;
1
2
3
4
5
2
3
4
5
提示
对齐方式，详见TextAlign。
🌏 outline 是否开启文字描边, 只写
// 开启描边
sprite.outline = true;
1
2
2
🌏 outlineColor 文字描边颜色, 只写
// 修改文本描边颜色
sprite.outlineColor = '#ff0000';
1
2
2
🌏 autoCulling 是否自动剔除
// 获取是否自动剔除
const autoCulling = sprite.autoCulling;
// 设置自动剔除
sprite.autoCulling = true;
1
2
3
4
5
2
3
4
5
# 接口
🌏 play播放lottie动画
// 播放lottie动画
sprite.play();
1
2
2
🌏 pause暂停播放lottie动画
// 暂停播放lottie动画
sprite.pause();
1
2
2
🌏 stop停止播放lottie动画
// 停止播放lottie动画
sprite.stop();
1
2
2
🌏 setSpeed播放lottie动画速度
// 设置播放lottie动画为2倍
sprite.setSpeed( 2 );
1
2
2
🌏 setDirection播放lottie动画方向
// 播放lottie动画方向为反向
sprite.setDirection( -1 );
1
2
2
注意
setDirection参数取值为+1或-1，其中+1正向播放，-1表示反向播放