Editor Doc
Return to top
Fog
Edit

Fog ​

It takes about 15 minutes to read this article

This article outlines the concept of Fog, all its basic properties, and how to use it in the editor.

What is Fog? ​

Fog is a common weather phenomenon that simulates real-life fog. The surrounding environment is mainly displayed as a fuzzy effect through fog effect.

How to edit Fog? ​

The [Fog] object was found in the Object Manager - World list.

Fog effects can be adjusted to suit needs. Then click on the Fog object to edit the Fog in the Properties Panel (default lower right corner). Check Enable, and the fog effect will be displayed. The following expansion describes the specific Fog properties:

Enable ​

  • Property description: Enable the effect of Fog. When checked, fog effects will be displayed in the scene, and unchecked, there will be no fog effects in the scene.

  • Application: Because the Fog is a client effect, each client can display a completely different effect. In other words, we can make several different zones. When a player enters the desert zone, they will have a desert fog effect. When other players do not enter the desert, they will not activate the fog effect.

  • Implementation steps:

  • First, we place the trigger object in the scene, and then bind the following script to implement a desert environment area.

ts
@Component
export default class NewScript extends Script {

    fog: Fog

    /** When the script is instanced, this function is called before the first frame is updated */
    protected async onStart(): Promise<void> {
       
        //declare trigger
        let trigger = this.gameObject as Trigger;

        // When the character enters the trigger, the Fog is activated and set to desert fog.
        trigger.onEnter.add(() => {

            // Activate Fog
            Fog.enabled = true;
            // Fog Preset: Desert Fog
            Fog.setPreset(4)

        });

        // When the character enters the trigger, the Fog is activated and set to desert fog.
        trigger.onLeave.add(() => {

            // Turn off Fog
            Fog.enabled = false;

        });

    }
}
@Component
export default class NewScript extends Script {

    fog: Fog

    /** When the script is instanced, this function is called before the first frame is updated */
    protected async onStart(): Promise<void> {
       
        //declare trigger
        let trigger = this.gameObject as Trigger;

        // When the character enters the trigger, the Fog is activated and set to desert fog.
        trigger.onEnter.add(() => {

            // Activate Fog
            Fog.enabled = true;
            // Fog Preset: Desert Fog
            Fog.setPreset(4)

        });

        // When the character enters the trigger, the Fog is activated and set to desert fog.
        trigger.onLeave.add(() => {

            // Turn off Fog
            Fog.enabled = false;

        });

    }
}

Fog Preset ​

  • Description: The Fog provides convenient preset effects for user selection. Further Fog effects may be expanded.
Enumeration NameEnglish NameEnumeration ValueDescription
DefaultDefault0Default effect, moderate distance and concentration
NearFogNearFog1Close Fog, short distance
FarFogFarFog2Distance Fog, longer distance
Underground FogUndergroundFog3Environmental effects of dark underground caves.
DesertFogDesertFog4Environmental Effects of Desert Zones
  • Practical application: We can switch different Fog presets according to different environments, conveniently completing the switch of Fog, without having to set every parameter once. Fast restoration is also possible through preset functions.
  • Implementation steps:
  • First, let's add a few UI buttons to make it easy to switch Fog presets, although other implements are available. Then write UI scripts.
ts
export default class NewUIScript extends UIScript {

    /** Call non-template instances only once during game time */
    protected onStart() {

        // Find the corresponding preset 1 button
        const Preset1Btn = this.uiWidgetBase.findChildByPath('MWCanvas/Button_11') as UI.Button
        // Find the corresponding preset 2 button
        const Preset2Btn = this.uiWidgetBase.findChildByPath('MWCanvas/Button_12') as UI.Button
        // Find the corresponding preset 3 button
        const Preset3Btn = this.uiWidgetBase.findChildByPath('MWCanvas/Button_13') as UI.Button
        // Find the corresponding preset 4 button
        const Preset4Btn = this.uiWidgetBase.findChildByPath('MWCanvas/Button_14') as UI.Button
        // Find the corresponding preset 5 button
        const Preset5Btn = this.uiWidgetBase.findChildByPath('MWCanvas/Button_15') as UI.Button

        // Tap the button to send a preset event
        Preset1Btn.onPressed.add(() => {
            Event.dispatchToLocal("Preset1");
        });

        // Tap the button to send a preset event
        Preset2Btn.onPressed.add(() => {
            Event.dispatchToLocal("Preset2");
        });

        // Tap the button to send a preset event
        Preset3Btn.onPressed.add(() => {
            Event.dispatchToLocal("Preset3");
        });

        // Tap the button to send a preset event
        Preset4Btn.onPressed.add(() => {
            Event.dispatchToLocal("Preset4");
        });

        // Tap the button to send a preset event
        Preset5Btn.onPressed.add(() => {
            Event.dispatchToLocal("Preset5");
        });

    }

}
export default class NewUIScript extends UIScript {

    /** Call non-template instances only once during game time */
    protected onStart() {

        // Find the corresponding preset 1 button
        const Preset1Btn = this.uiWidgetBase.findChildByPath('MWCanvas/Button_11') as UI.Button
        // Find the corresponding preset 2 button
        const Preset2Btn = this.uiWidgetBase.findChildByPath('MWCanvas/Button_12') as UI.Button
        // Find the corresponding preset 3 button
        const Preset3Btn = this.uiWidgetBase.findChildByPath('MWCanvas/Button_13') as UI.Button
        // Find the corresponding preset 4 button
        const Preset4Btn = this.uiWidgetBase.findChildByPath('MWCanvas/Button_14') as UI.Button
        // Find the corresponding preset 5 button
        const Preset5Btn = this.uiWidgetBase.findChildByPath('MWCanvas/Button_15') as UI.Button

        // Tap the button to send a preset event
        Preset1Btn.onPressed.add(() => {
            Event.dispatchToLocal("Preset1");
        });

        // Tap the button to send a preset event
        Preset2Btn.onPressed.add(() => {
            Event.dispatchToLocal("Preset2");
        });

        // Tap the button to send a preset event
        Preset3Btn.onPressed.add(() => {
            Event.dispatchToLocal("Preset3");
        });

        // Tap the button to send a preset event
        Preset4Btn.onPressed.add(() => {
            Event.dispatchToLocal("Preset4");
        });

        // Tap the button to send a preset event
        Preset5Btn.onPressed.add(() => {
            Event.dispatchToLocal("Preset5");
        });

    }

}
  • Then we write a script that accepts events.
ts
@Component
export default class NewScript extends Script {

    fog:Fog

    /** When the script is instanced, this function is called before the first frame is updated */
    protected async onStart(): Promise<void> {

        this.fog = await GameObject.asyncFindGameObjectById("22F16EC4") as Fog

        Events.addLocalListener("Preset1", () => {
            // Fog Preset: Default
            Fog.setPreset(0)
        });

        Events.addLocalListener("Preset2", () => {
            // Fog Preset: Near Fog
            Fog.setPreset(1)

        });

        Events.addLocalListener("Preset3", () => {
            // Fog Preset: Far Fog
            Fog.setPreset(2)
        });

        Events.addLocalListener("Preset4", () => {
            // Fog Preset: Underground Fog
            Fog.setPreset(3)

        });

        Events.addLocalListener("Preset5", () => {
            // Fog Preset: Desert Fog
            Fog.setPreset(4)
        });

    }

}
@Component
export default class NewScript extends Script {

    fog:Fog

    /** When the script is instanced, this function is called before the first frame is updated */
    protected async onStart(): Promise<void> {

        this.fog = await GameObject.asyncFindGameObjectById("22F16EC4") as Fog

        Events.addLocalListener("Preset1", () => {
            // Fog Preset: Default
            Fog.setPreset(0)
        });

        Events.addLocalListener("Preset2", () => {
            // Fog Preset: Near Fog
            Fog.setPreset(1)

        });

        Events.addLocalListener("Preset3", () => {
            // Fog Preset: Far Fog
            Fog.setPreset(2)
        });

        Events.addLocalListener("Preset4", () => {
            // Fog Preset: Underground Fog
            Fog.setPreset(3)

        });

        Events.addLocalListener("Preset5", () => {
            // Fog Preset: Desert Fog
            Fog.setPreset(4)
        });

    }

}

Fog Density ​

  • Description: This is the overall density coefficient and the thickness of the visible fog layer.

  • Related interfaces:

ts
// Set the Fog density
Fog.density = 1;
// Set the Fog density
Fog.density = 1;

Fog Height ​

  • Description: The starting world height of the fog effect, which is the position of the Z-axis of the Fog. The lower the height, the fainter the fog effect. The higher the height, the thicker the fog effect.

  • Related interfaces:

ts
// Set the Fog height
Fog.height = 5000;
// Set the Fog height
Fog.height = 5000;

Fog height Falloff ​

  • Description: The fog effect gradually thickens from high to low. The value is an excessive effect to control the fog effect. The smaller the value, the softer the effect.

  • Related interfaces:

ts
// Set the fog height attenuation
Fog.heightFalloff = 0.7;
// Set the fog height attenuation
Fog.heightFalloff = 0.7;

Fog Scattering Color ​

  • Description: Set the inner scattering color of the fog, which is the main color of the fog.

  • Related interfaces:

ts
// Set the Fog color
Fog.inscatteringColor = new LinearColor(255, 0, 0);
// Set the Fog color
Fog.inscatteringColor = new LinearColor(255, 0, 0);

Fog Max Opacity ​

  • Property Description: Controls the maximum opacity of the fog. At a value of 1, the fog is completely opaque, and at a value of 0, the fog is virtually invisible.

  • Related interfaces:

ts
// Set Fog transparency
Fog.maxOpacity = 0.5;
// Set Fog transparency
Fog.maxOpacity = 0.5;

Start Distance ​

  • Description: Distance from the camera where the fog appears.

  • Related interfaces:

ts
// Initial distance of Fog
Fog.startDistance = 1000;
// Initial distance of Fog
Fog.startDistance = 1000;

Directional In-scattering Color ​

  • Description: The scattering color of directional light set in Fog is the main color of sunlight.

  • Related interfaces:

ts
// Directional In-scattering Color
Fog.directionalInscatteringColor = new LinearColor(0, 137, 60);
// Directional In-scattering Color
Fog.directionalInscatteringColor = new LinearColor(0, 137, 60);

Directional In-scattering Exponent ​

  • Description: The intensity of scattering influenced by the color of sunlight is controlled. The stronger the exponent, the larger the scattering range.

  • Related interfaces:

ts
// Set the Directional In-scattering Exponent
Fog.directionalInscatteringExponent = 20;
// Set the Directional In-scattering Exponent
Fog.directionalInscatteringExponent = 20;

Directional In-scattering Start Distance ​

  • Description: Initial distance of Directional In-scattering

  • Related interfaces:

ts
// Set the distance of Directional In-scattering
Fog.directionalInscatteringStartDistance = 20000;
// Set the distance of Directional In-scattering
Fog.directionalInscatteringStartDistance = 20000;

How to use Fog? ​

  • We can dynamically adjust the effects of the Fog through relevant interfaces and code.

Precautions ​

  • The Fog is rendered from the model mesh vertices, so try not to stretch a model too long to use it, it will result in the fog function recognising fewer vertices in the model and the fog will be less effective.