2D自由形态光
Author: Charley
本篇文档仅介绍自由形态光的特有属性,灯光的通用属性介绍在灯光基类文档中,如未阅读,请点击此处查看:<<2d灯光与网格>>2d灯光与网格>。
一、应用场景
2D自由形态光(FreeformLight2D) 是一种支持自定义光源形状的2D灯光类型。通过设置多个顶点位置,开发者可以自由定义光源的几何形态,从而实现非规则的光照效果,如图1-1所示。这种灯光类型非常适合表现复杂或不规则的光影场景,提供了极大的灵活性和创作空间。
(图1-1)
例如以下应用场景:
1.1 非规则光源
适用于模拟非标准形状的光源,如裂缝中透出的光线、不规则的光芒等。
1.2 动态光影效果
在需要动态调整光源形状的场景中,自由形态光可以通过修改顶点实时生成变化的光影效果,例如模拟水波的光影变化或动态的魔法阵光芒。
1.3 场景氛围渲染
用于增强场景氛围,如模拟树叶间隙投射的斑驳光影、复杂窗格透射的光线等,增加环境的沉浸感和细节表现。
二、在LayaAir-IDE中使用
2.1 添加自由形态光
2D自由形态光可以直接在层面板中右键添加,“2D灯光” -> "2D自由形态光",如图2-1所示。
(图2-1)
除了层级面板的添加,也可以先创建一个节点,然后从组件列表上,找到“2D灯光” -> “2D自由形态光”,为节点直接添加该组件。
2.2 多边形顶点
除了通用的灯光属性外,2D自由形态光有两个特有的属性,其一是“多边形顶点”,通过该属性,用户可以自由控制灯光的形态。
添加自由形态光的组件后,IDE默认设置了一个矩形灯光形状,开发者可以通过顶点数据列表按钮查看和编辑顶点。如图2-2所示:
(图2-2)
矩形灯光的效果如图2-3所示。
(图2-3)
除了在顶点列表中修改顶点数据外,我们还可以点击“编辑形状”按钮,进行可视化的顶点形状编辑。如动图2-4所示,
(动图2-4)
在编辑模式时,可以拖拽黄色顶点方块改变顶点位置,按住键盘Ctrl+鼠标左键点击线段,可以增加顶点。按住键盘Alt+鼠标左键点击顶点可以将其删除。
编辑完成后点击空白区域,就会退出编辑模式。
2.3 衰减范围
衰减范围用于控制光线从中心向外逐渐减弱直至完全消失的距离,值越小光线衰减得越快,光照范围越小,适合局部光源效果;值越大光线衰减得越慢,光照范围越大,适合覆盖更大区域的场景。取值范围为0-10。效果如动图2-5所示。
(动图2-5)
三、通过代码使用
如果我们需要通过代码动态添加顶点和设置衰减范围,甚至是使用引擎灯光基类中的API,我们也准备了一个脚本示例供大家参照。
示例代码如下:
const { regClass } = Laya;
@regClass()
export class LightEffectDemo extends Laya.Script {
declare owner: Laya.Sprite;
private lightComp: Laya.FreeformLight2D;
private rotateSpeed: number = 2; // 增加旋转速度
private scaleTime: number = 0;
private scaleSpeed: number = 3; // 增加缩放速度
private intensity: number = 1.8; // 定义灯光强度
onAwake(): void {
// 获取 FreeformLight2D 组件
this.lightComp = this.owner.getComponent(Laya.FreeformLight2D);
//灯光的顶点通常建议是在IDE中可视化配置,这里是为了演示如何通过代码动态设置顶点数据,方便动态调整灯光形状的需求。
/**设置自由光的顶点数据,形成美观的多边形形态**/
const polygon = new Laya.PolygonPoint2D();
polygon.addPoint(0, -150); // 上
polygon.addPoint(20, -30); // 上右内侧
polygon.addPoint(150, -30); // 右上
polygon.addPoint(30, 10); // 右上内侧
polygon.addPoint(100, 150); // 右下
polygon.addPoint(10, 30); // 下内侧
polygon.addPoint(-100, 150); // 左下
polygon.addPoint(-30, 10); // 左下内侧
polygon.addPoint(-150, -30); // 左上
polygon.addPoint(-20, -30); // 左上内侧
this.lightComp.polygonPoint = polygon;
// 增加灯光强度和设置灯光颜色
this.lightComp.falloffRange = 3; // 增大衰减范围
this.lightComp.color = new Laya.Color(1.0, 0.9, 0.6, 1); // 设置灯光颜色
this.lightComp.intensity = this.intensity; // 应用灯光强度
}
onUpdate(): void {
// 实现灯光旋转动画
this.lightComp.lightRotation += this.rotateSpeed * Laya.timer.delta / 1000;
// 实现灯光缩放动画
this.scaleTime += Laya.timer.delta / 1000 * this.scaleSpeed;
const scale = 1 + Math.sin(this.scaleTime) * 0.5; // 增加缩放变化幅度
this.lightComp.lightScale.setValue(scale, scale);
}
}
运行的效果如动图3-1所示,
(动图3-1)