跳到主要内容

Sprite2D

就像Mesh之于 3D 渲染，Sprite是 2D 渲染的基础对象，也是位姿控制的基础节点。但Sprite不可以有自己的子节点，也就是说，add/removeChildren这类方法不存在于Sprite实例上。

示例​

使用方法​

Sprite是渲染的基础对象，因此必须加入 Scene 中，才能被感知渲染。它的绘制方式有两种：

  1. Graphics

每个Sprite均有一个Graphics实例。Graphics是 2D 绘制的基础，图形、线条、图片等所有 2D 对象均可以通过Graphics完成。

// 新建Sprite
const sp = new Sprite();

// 绘制一个左上角坐标(0,0)，宽50，高100的黑色矩形
sp.graphics.drawRect(0, 0, 50, 100, '#000');

// 将Sprite加入2D场景中
scene.addChildren(sp);

点击查阅具体如何使用Graphics。

  1. fromTexture

为了方便使用，.graphics.drawTexture方法被再次封装为.fromTexture方法，二者的使用方式完全相同，使用作用也完全相同。

常用能力​

遮罩 (Mask)​

遮罩(Mask)，用于显示或隐藏 Sprite 的部分。

在下面的内遮罩示例中，尝试移动光标，查看遮罩下的显示效果。

遮罩本身也是一个Sprite实例，它作为mask属性赋给另一个Sprite实例。需要注意的是，被赋予 mask 的Sprite实例必须同时设置遮罩模式，才能确保遮罩按预期正确渲染。

按照「显示」和「隐藏」的两种目的，可以将遮罩模式(maskMode)划分为：

  • 内遮罩 (InnerVisible): 遮罩图片的覆盖范围可见，其它部分隐藏；
  • 外遮罩 (OuterVisible): 遮罩图片的覆盖范围隐藏，其它部分可见。
// 创建Sprite和它的遮罩Sprite
const sp = new Sprite();
const maskSp = new Sprite();

// 指定maskSp为sp的遮罩
sp.mask = maskSp;

// 设置遮罩模式为内遮罩
sp.makMode = MaskMode.InnerVisible;

// 启动渲染
scene.addChildren(sp);
stage.loop(scene);

混合模式 (BlendMode)​

混合模式 (BlendMode)是指，当两个及以上Sprite叠加在一起时，按照何种方式将各自的像素混合处理，最终成像。

Tinoe 目前提供三种混合模式：

  • Normal: 正常渲染，即渲染顺序靠后的会覆盖掉靠前的；
  • Additive: 叠加渲染，即按照渲染顺序，一一叠加混合颜色；
  • Transparent: 透明渲染，即透明不可见，注意透明 Sprite 仍真实存在于渲染树中，参与碰撞、拾取等交互。
// 改变某sprite的混合模式
sp.blendMode = BlendMode.Transparent;

APIs​

Sprite