2D自由形态光

Author: Charley

本篇文档仅介绍自由形态光的特有属性,灯光的通用属性介绍在灯光基类文档中,如未阅读,请点击此处查看:<<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

(图2-1)

除了层级面板的添加,也可以先创建一个节点,然后从组件列表上,找到“2D灯光” -> “2D自由形态光”,为节点直接添加该组件。

2.2 多边形顶点

除了通用的灯光属性外,2D自由形态光有两个特有的属性,其一是“多边形顶点”,通过该属性,用户可以自由控制灯光的形态。

添加自由形态光的组件后,IDE默认设置了一个矩形灯光形状,开发者可以通过顶点数据列表按钮查看和编辑顶点。如图2-2所示:

2-2

(图2-2)

矩形灯光的效果如图2-3所示。

2-3

(图2-3)

除了在顶点列表中修改顶点数据外,我们还可以点击“编辑形状”按钮,进行可视化的顶点形状编辑。如动图2-4所示,

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)

Copyright ©Layabox 2025 all right reserved,powered by LayaAir Engine更新时间: 2025-01-08 21:33:09

results matching ""

    No results matching ""