3.1 前景贴纸

一、实现效果参考

二、能力说明

位于画面最上级的2D图片，可通过替换图片的纹理与序列帧等美术素材，来营造各种节日氛围，凸显流行热点，或制造意想不到的玩法。

三、视频教程

点击跳转

四、使用方法

1、新建工程，点击特效信息栏右上角“➕”，在“2D”中，选择“前景贴纸”

2、第一次创建时，会同时生成正交摄像机与2D画板。前景贴纸的本质为2D图片，若想素材在3D场景中正确显示，需要在2D画板上渲染绘制与正交摄像机照射显示，所以不要破坏默认的父子结构。

3、正交相机小贴士

• 在3D场景中，想要实现3D图片的效果，则可使用透视相机，但要实现2D图片的效果，则需使用正交相机。

• 当使用正交相机的时候，屏幕上的投影的大小和位置不会因为距离而变化。在此情况下，2D仅有XY坐标系中，没有Z轴的概念，也不会受到Z轴的影响。下图则为2D的坐标系，中心点为画面中央（0,0）点。

4、了解到2D图片的坐标关系后，我们可以进一步学习控制2D图片坐标关系位置的通用组件“2D变换”，这是所有2D素材默认添加的组件。

1. 位置2D

• 节点位置属性，值 (x, y) 对应横纵坐标，像素单位，使用 IF 坐标系；
• 比如 (0, 0) 表示在屏幕中心，屏幕宽高为 720 * 1280 时，(360, 640) 标识在屏幕右上角；

2. 旋转

• 2D 节点旋转属性，值 rotate 代表旋转角度，单位角度，正值代表顺时针旋转，负值代表逆时针旋转；
• 比如 30 表示顺时针旋转 30°，-60 表示逆时针旋转 60°；

3. 缩放

• 2D 节点缩放属性，值 (x, y) 代表横向、纵向缩放系数；
• 比如 (1, 1) 表示不缩放；(2, 2) 表示等比缩放 2 倍；

4. 尺寸

• 2D 尺寸属性，用于描述 2D 节点的矩形区域，像素单位，只有在节点上挂载渲染组件；
• 比如 IFSprite2d 或 IFLabel 时，该值存在意义，表示渲染对象的宽高；

5. 中心点

• 2D 锚点属性，值（x, y） 用于确定使用渲染组件矩形区域上的哪个位置来设定 Position2d；该值也会影响 Rotation 和 Size 的渲染效果；
• 取值范围：(0~1.0, 0~1.0)，默认在渲染组件中心，取值为 (0.5, 0.5)；

6. 水平翻转

• 翻转属性，勾选代表左右翻转

7. 垂直翻转

• 翻转属性，勾选代表上下翻转

8. 自动排序

• 默认勾选，会根据创建顺序自动向后排列图层顺序；

9. 图层顺序

• 取消“自动排序”方可操作，可以自定义图层顺序；

5、那么如何2D图片的美术素材呢，可以看到参数中还默认添加了“2D图片”的组件。

1. 尺寸模式

• 有“图片原始大小”与“自定义大小”两种，默认前者。只是一种模式，无功能强绑定关系；
• 当调整2D变换组件中的“尺寸”时，尺寸模式会自动变更为“自定义大小”；

2. 序列帧

• 默认不勾选，点选后将资源类型从2D静态图片变为序列帧，下方会添加“序列帧组件”，详情看序列帧教程【像塑专业版】2D序列帧教程

3. 纹理

• 下拉列表中展示所有导入进资源库的png静态图片素材
• 也可以点击下方“本地添加/拖入”按钮，快捷将电脑内的静态图片素材导入省去先导入资源库的流程；

4. 透明度

• 默认100%，不透明，可左右拖动滑杆调整；
• 0%为完全透明；

5. 颜色

• 改变图片的色相，点击色块打开颜色板，可以更直观的选择颜色；
• 也可以使用右下角的吸管工具，选择希望表现的颜色；
• 选中一个颜色后，右边自动生成其16进制颜色代码，当然通过输入颜色代码的方式也可以改变颜色；

6. 跟随模式

• 各种贴纸类型的区别核心就在于跟随模式，前景贴纸默认不跟随，位于2D坐标系的哪里就固定在那里；
• 切换跟随模式可以快速将贴纸类型变更；

7. 填充类型

• 图片在其矩形边界尺寸里的填充展示方式，默认正常；
• 平铺，素材保持自己原始尺寸，以规则排列的方式填满自定义尺寸的边界；

• 九宫格，将图片按“井”字划分九份，常做切图使用；

• 填充，可调参使图像从哪里开始显示，或者显示多少；

• 填充，一种矩形遮罩；
• 圆形，一种圆形遮罩；

• 透视变形，可以直接拖拽图片的四个端点进行2D透视变形效果，也可以直接调参；

五、注意事项

1、前景贴纸覆盖面积普遍较大，所以一定要注意素材的使用规范，避免包体资源量过大。