【CocosCreator入门】CocosCreator组件 | LabelOutline（文本描边）组件 | LabelShadow（文本阴影） 组件

        Cocos Creator 是一款流行的游戏开发引擎，具有丰富的组件和工具，其中LabelOutline组件可以在Cocos Creator中的文本标签（Label）周围添加一个描边效果；LabelShadow组件可以在Cocos Creator中的文本标签（Label）周围添加一个阴影效果。

---

目录

一、 LabelOutline（文本描边）组件

①组件属性

②组件使用

③脚本示例

二、LabelShadow（文本阴影） 组件

①组件属性

②组件使用

③脚本示例

---

一、 LabelOutline（文本描边）组件

①组件属性

属性	功能说明
Color	描边的颜色
Width	描边的宽度

②组件使用

• 创建一个文本标签：首先，在场景编辑器中创建一个文本标签。您可以选择任何字体、大小和颜色来设置此标签。

• 添加LabelOutline组件：从节点检查器中，选择要应用轮廓效果的文本标签节点，并向其添加LabelOutline组件。

• 配置LabelOutline属性：在属性检查器中，您可以找到LabelOutline组件的所有属性。其中最重要的是color、width属性。分别设置轮廓的颜色、宽度即可。

• 预览结果：保存场景并运行游戏，您将看到带有轮廓效果的文本标签。

③脚本示例

        在使用LabelOutline组件时，需要将其附加到需要添加描边效果的文本节点上，并设置相应的属性值。例如，以下代码将文本节点的字体添加白色描边效果：

let labelNode = new cc.Node();
let labelComponent = labelNode.addComponent(cc.Label);
labelComponent.string = "Hello, World!";
let outlineComponent = labelNode.addComponent(cc.LabelOutline);
outlineComponent.color = cc.Color.WHITE;
outlineComponent.width = 2;

二、LabelShadow（文本阴影） 组件

①组件属性

属性	功能说明
Color	阴影的颜色
Offset	字体与阴影的偏移
Blur	阴影的模糊程度

②组件使用

• 创建一个文本标签：首先，在场景编辑器中创建一个文本标签。您可以选择任何字体、大小和颜色来设置此标签。

• 添加LabelShadow组件：从节点检查器中，选择要应用文本阴影效果的文本标签节点，并向其添加LabelShadow组件。

• 配置LabelShadow属性：在属性检查器中，您可以找到LabelShadow组件的所有属性。其中最重要的是color、Offset和Blur属性。分别设置阴影的颜色、偏移和模糊程度即可。

• 预览结果：保存场景并运行游戏，您将看到带有轮廓效果的文本标签。

③脚本示例

        在使用LabelShadow组件时，需要将其附加到需要添加描边效果的文本节点上，并设置相应的属性值。例如，以下是一个示例代码，展示如何通过代码设置阴影效果：

// 获取文本标签节点
let labelNode = cc.find('Canvas/Label');

// 添加LabelShadow组件
let labelShadow = labelNode.addComponent(cc.LabelShadow);

// 设置阴影颜色为黑色，偏移量为(2, -2)，模糊半径为3
labelShadow.color = cc.Color.BLACK;
labelShadow.offset = new cc.Vec2(2, -2);
labelShadow.blurRadius = 3;

---

        总之，LabelOutline组件和LabelShadow组件是Cocos Creator引擎中的一个非常实用的组件，可以帮助我们为文本标签添加美观的阴影效果。通过调整属性并适度使用，我们可以让游戏UI更加精美和专业化。