RS_Fog.js

//================================================================
// RS_Fog.js
// ---------------------------------------------------------------
// The MIT License
// Copyright (c) 2018 biud436
// ---------------------------------------------------------------
// Free for commercial and non commercial use.
//================================================================
/*:
 * @target MV
 * @plugindesc This plugin allows you to deal with FOG like RPG Maker XP <RS_Fog>
 * @author biud436
 *
 * @param fog
 * @type struct<Fog>[]
 * @desc
 * @default
 *
 * @help
 *
 * The demo game is available at https://www.dropbox.com/s/p7qg1r1eo9vihjb/Fog.zip?dl=1
 * it is completely worked fine in the RPG Maker MV v1.6.2
 *
 * ============================================================================
 * Note Tags
 * ============================================================================
 *
 * To use fog like RPG Maker XP,
 * Make sure that sets up the note tags in event editor, as follows.
 *
 * <fogId:1>
 * <fogName:001-Fog01>
 * <fogOpacity:64>
 * <fogZoom:100>
 * <fogBlend:20>
 * <fogSX:1> - if the positive value is, it will move to left.
 * <fogSY:1> - if the positive value is, it will move to up.
 * <fogSwitchId:1>
 * <fogVariableId:1>
 *
 * all images must be placed in img/fogs folder.
 *
 * Blend type 20 means a subtract blend.
 * Once created, the fog image will not be removed until the map is changed.
 *
 * if switch #1 is ON, the fog will show up on the screen.
 *
 * ============================================================================
 * Note Tags (Short)
 * ============================================================================
 *
 * <MAP FOG : id>
 *
 * ============================================================================
 * Change Log
 * ============================================================================
 * 2018.11.14 (v1.0.0) - First Release.
 * 2018.11.16 (v1.0.1) - Added the opacity mode.
 * 2021.01.09 (v1.0.2) :
 * - Fixed the bug that causes an error when using the erase event command.
 * 2023.08.12 (v1.0.3) :
 * - Fixed the issue that causes an error when starting the game.
 */
/*~struct~Fog:
 *
 * @param fogId
 * @text Id
 * @type number
 * @desc Specify the id.
 * @default 1
 *
 * @param fogName
 * @text Name
 * @desc Specify the filename.
 * @default 001-Fog01
 * @require 1
 * @dir img/fogs/
 * @type file
 *
 * @param fogOpacity
 * @text Opacity
 * @type number
 * @desc Specify the opacity is the value between 0 and 255
 * @default 64
 * @min 0
 * @max 255
 *
 * @param fogZoom
 * @text Zoom
 * @type number
 * @desc Specify the zoom percent value is the value between 0 and 100
 * @default 100
 * @min 0
 * @max 400
 *
 * @param fogBlend
 * @text Blend Type
 * @type select
 * @desc Set up the blend type.
 * @default 20
 * @option NORMAL
 * @value 0
 * @option ADD
 * @value 1
 * @option MULTIPLY
 * @value 2
 * @option SCREEN
 * @value 3
 * @option OVERLAY
 * @value 4
 * @option DARKEN
 * @value 5
 * @option LIGHTEN
 * @value 6
 * @option COLOR_DODGE
 * @value 7
 * @option COLOR_BURN
 * @value 8
 * @option HARD_LIGHT
 * @value 9
 * @option SOFT_LIGHT
 * @value 10
 * @option DIFFERENCE
 * @value 11
 * @option EXCLUSION
 * @value 12
 * @option HUE
 * @value 13
 * @option SATURATION
 * @value 14
 * @option COLOR
 * @value 15
 * @option LUMINOSITY
 * @value 16
 * @option NORMAL_NPM
 * @value 17
 * @option ADD_NPM
 * @value 18
 * @option SCREEN_NPM
 * @value 19
 * @option SUBTRACT
 * @value 20
 *
 * @param fogSX
 * @text SX
 * @type number
 * @desc Set up the X axis velocity.
 * if the positive value is, it will move to left.
 * @default 1
 *
 * @param fogSY
 * @text SY
 * @type number
 * @desc Set up the Y axis velocity.
 * if the positive value is, it will move to up.
 * @default 0
 *
 * @param fogSwitchId
 * @text Switch
 * @type switch
 * @desc We must turn on the switch to active the fog. Specify the switch id.
 * @default 1
 *
 * @param fogVariableId
 * @text Variable
 * @type variable
 * @desc Specify the variableId
 * @default 1
 *
 */
/*:ko
 * @target MV
 * @plugindesc 포그 플러그인 <RS_Fog>
 * @author biud436
 *
 * @param fog
 * @text 포그 설정
 * @type struct<Fog>[]
 * @desc 미리 설정한 포그 값을 불러올 수 있습니다.
 * @default
 *
 * @help
 * 데모 게임은 다음 링크에서 내려받을 수 있습니다.
 *
 * https://www.dropbox.com/s/p7qg1r1eo9vihjb/Fog.zip?dl=1
 *
 * 데모 게임은 RPG Maker MV v1.6.2 버전에서 잘 동작하였습니다.
 *
 * ============================================================================
 * 노트 태그 / Note Tags
 * ============================================================================
 *
 * RPG Maker XP의 포그 그래픽을 그대로 사용할 수 있습니다.
 * 이벤트 편집기에서 다음 노트 태그를 차례로 설정하세요.
 *
 * 노트 태그는 병렬 이벤트가 아니더라도 읽어냅니다.
 *
 * <fogId:1>
 * <fogName:001-Fog01>
 * <fogOpacity:64>
 * <fogZoom:100> - 100%를 뜻합니다.
 * <fogBlend:20>
 * <fogSX:1> - 주의 : 양수 값이면 위쪽으로 이동합니다.
 * <fogSY:1> - 주의 : 양수 값이면 왼쪽으로 이동합니다.
 * <fogSwitchId:1>
 * <fogVariableId:1>
 *
 * 모든 이미지는 img/fogs 폴더에 위치해야 합니다.
 *
 * 블렌드 타입 20은 감산 타입이며,
 * 포그는 한 번 생성되면 맵에서 사라지지 않습니다.
 *
 * 포그 그래픽은 맵 로딩 초반에 무조건 로드됩니다.
 *
 * 위 노트 태그 예제에서는 1번 스위치를 ON해야 포그가 표시됩니다.
 * 1번 스위치를 OFF하면 포그가 렌더링되지 않습니다.
 *
 * 간단 노트 태그를 사용하지 않더라도,
 * 배포 시 기본 포그 설정을 해주셔야 미사용 이미지/오디오 파일로 인식하지 않습니다.
 *
 * 포그 ID 값은 화면에 보이는 순위를 정하는 Z 값처럼 취급됩니다.
 *
 * ============================================================================
 * 간단 노트 태그 / Note Tags (Short)
 * ============================================================================
 * 미리 포그 값을 플러그인 매개변수로 설정을 해놨다면 다음 노트 태그를 활용하여
 * 간단하게 포그를 활성화할 수 있습니다.
 *
 * <MAP FOG : 1>
 *
 * 단, 해당 포그와 연계된 활성화 스위치 값을 ON 상태로 바꿔야 화면에 나오게 됩니다.
 *
 * ============================================================================
 * 버전 로그 / Change Log
 * ============================================================================
 * 2018.11.14 (v1.0.0) - First Release.
 * 2018.11.16 (v1.0.1) - Added the opacity mode.
 * 2021.01.09 (v1.0.2) :
 * - Fixed the bug that causes an error when using the erase event command.
 * 2023.08.12 (v1.0.3) :
 * - Fixed the issue that causes an error when starting the game.
 */
/*~struct~Fog:ko
 *
 * @param fogId
 * @text 포그 아이디
 * @type number
 * @desc
 * @default 1
 *
 * @param fogName
 * @text 포그 명
 * @desc
 * @default 001-Fog01
 * @require 1
 * @dir img/fogs/
 * @type file
 *
 * @param fogOpacity
 * @text 포그 투명도
 * @type number
 * @desc
 * @default 64
 * @min 0
 * @max 255
 *
 * @param fogZoom
 * @text 포그 확대 축소율
 * @type number
 * @desc 100%가 기본 값입니다.
 * @default 100
 * @min 0
 * @max 400
 *
 * @param fogBlend
 * @text 블렌드 타입
 * @type select
 * @desc 포그 스프라이트의 블렌드 모드를 설정하는 기능입니다.
 * @default 20
 * @option 일반
 * @value 0
 * @option ADD
 * @value 1
 * @option MULTIPLY
 * @value 2
 * @option 스크린
 * @value 3
 * @option 오버레이
 * @value 4
 * @option DARKEN
 * @value 5
 * @option LIGHTEN
 * @value 6
 * @option COLOR_DODGE
 * @value 7
 * @option COLOR_BURN
 * @value 8
 * @option HARD_LIGHT
 * @value 9
 * @option SOFT_LIGHT
 * @value 10
 * @option DIFFERENCE
 * @value 11
 * @option EXCLUSION
 * @value 12
 * @option HUE
 * @value 13
 * @option SATURATION
 * @value 14
 * @option COLOR
 * @value 15
 * @option LUMINOSITY
 * @value 16
 * @option NORMAL_NPM
 * @value 17
 * @option ADD_NPM
 * @value 18
 * @option SCREEN_NPM
 * @value 19
 * @option 감산
 * @value 20
 *
 * @param fogSX
 * @text 포그 X축 속도
 * @type number
 * @desc 양수일 경우 왼쪽 방향이고, 음수일 경우 오른쪽 방향입니다.
 * @default 1
 *
 * @param fogSY
 * @text 포그 Y축 속도
 * @type number
 * @desc 양수일 경우 위쪽이고, 음수일 경우 아래쪽입니다.
 * @default 1
 *
 * @param fogSwitchId
 * @text 포그 활성 스위치
 * @type switch
 * @desc 포그를 활성화 하려면 특정 스위치를 켜야 합니다. 스위치 ID 값을 지정하세요.
 * @default 1
 *
 * @param fogVariableId
 * @text 포그 제어 변수
 * @type variable
 * @desc Specify the variable that contorls the opacity
 * @default 1
 *
 */

function Scene_LoadFog(...args) {
    this.initialize.call(this, ...args);
}

(() => {
    const RS = window.RS || {};
    RS.Fog = RS.Fog || {};

    let parameters = $plugins.filter(i => {
        return i.description.contains('<RS_Fog>');
    });

    parameters = parameters.length > 0 && parameters[0].parameters;

    RS.Fog.jsonParse = function (str) {
        const retData = JSON.parse(str, (k, v) => {
            try {
                return RS.Fog.jsonParse(v);
            } catch (e) {
                return v;
            }
        });
        return retData;
    };

    RS.Fog.Params = RS.Fog.Params || {};

    RS.Fog.Params.fogs = [null].concat(RS.Fog.jsonParse(parameters.fog));

    //============================================================================
    // RS.Fog
    //============================================================================

    RS.Fog.parseInt = function (value) {
        return parseInt(value, 10) || 0;
    };

    /**
     * The blend modes is useful for game sprites.
     * But its modes will change little bit in the PIXI v5.
     * The PIXI official docs website has a list of 19 blend modes except of SUBTRACT.
     *
     * Unfortunately, In the PIXI v5, its modes will add more,
     * and it collides with blend mode I've added in the PIXI v5.
     * So I'll remove a specific blend mode I added as possible for stable.
     */
    RS.Fog.fogBlendModes = {
        NORMAL: 0,
        ADD: 1,
        MULTIPLY: 2,
        SCREEN: 3,
        OVERLAY: 4,
        DARKEN: 5,
        LIGHTEN: 6,
        COLOR_DODGE: 7,
        COLOR_BURN: 8,
        HARD_LIGHT: 9,
        SOFT_LIGHT: 10,
        DIFFERENCE: 11,
        EXCLUSION: 12,
        HUE: 13,
        SATURATION: 14,
        COLOR: 15,
        LUMINOSITY: 16,
        NORMAL_NPM: 17,
        ADD_NPM: 18,
        SCREEN_NPM: 19,
        SUBTRACT: 20 /** I will remove this in the future */,
    };

    RS.Fog.loadFog = function (filename, hue) {
        return ImageManager.loadBitmap('img/fogs/', filename, hue, true);
    };

    //============================================================================
    // Game_Temp
    //============================================================================

    const _Game_Temp_initialize = Game_Temp.prototype.initialize;
    Game_Temp.prototype.initialize = function () {
        _Game_Temp_initialize.call(this);
        this._preloadFog = [];
    };

    Game_Temp.prototype.addFog = function (src) {
        this._preloadFog.push(src);
    };

    //============================================================================
    // Game_Event
    //============================================================================

    Game_Event.prototype.readComments = function () {
        if (this._erased) {
            return;
        }

        const data = { note: '', meta: {} };

        if (this.findProperPageIndex() === -1) {
            return;
        }

        const list = this.list();

        list.forEach(param => {
            if ([108, 408].contains(param.code)) {
                data.note += `${param.parameters[0]}\r\n`;
            }
        });

        // 노트 태그를 추출합니다 (DataManager.extractMetadata의 변형입니다)
        let re = /<([^<>:]+)(:?)([^>]*)>/g;

        data.meta = {};

        for (;;) {
            // const [m,] = re.exec(data.note);
            const matches = re.exec(data.note);

            // const [m, key, sep, value] = re.exec(data.note);
            const [m, key, sep, value] = matches || [];

            if (m) {
                if (sep === ':') {
                    data.meta[key.trim()] = value;
                } else {
                    data.meta[key.trim()] = true;
                }
            } else {
                break;
            }
        }

        re = /<(?:MAP FOG)[ ]*:[ ]*(\d+)>/gim;

        for (;;) {
            const match = re.exec(data.note);
            if (match) {
                data.meta.mapFogId = parseInt(match[1], 10);
            } else {
                break;
            }
        }

        this.meta = data.meta;

        if (this.meta.mapFogId) {
            const _tempId = this.meta.mapFogId;
            const mapFogData = RS.Fog.Params.fogs[_tempId];
            this.meta = mapFogData;
        }

        const { fogName, fogId } = this.meta;

        if (!this._initFog && fogName && fogId) {
            $gameTemp.addFog(fogName);

            this._initFog = parseInt(this.meta.fogId, 10);
        }
    };

    const gameEventInitialize = Game_Event.prototype.initialize;
    Game_Event.prototype.initialize = function (mapId, eventId) {
        gameEventInitialize.call(this, mapId, eventId);
        this._initFog = false;
        this.readComments();
    };

    const gameEventRefresh = Game_Event.prototype.refresh;
    Game_Event.prototype.refresh = function () {
        gameEventRefresh.call(this);
        this.readComments();
    };

    //============================================================================
    // Game_Map
    //============================================================================

    const gameMapInitialize = Game_Map.prototype.initialize;
    Game_Map.prototype.initialize = function () {
        gameMapInitialize.call(this);
        this._fogX = [];
        this._fogY = [];
        this._fogSX = [];
        this._fogSY = [];
    };

    const gameMapSetDisplayPos = Game_Map.prototype.setDisplayPos;
    Game_Map.prototype.setDisplayPos = function (x, y) {
        gameMapSetDisplayPos.call(this, x, y);
        for (let i = 0; i < this._fogX.length; i++) {
            this._fogX[i] = this._parallaxX;
        }
        for (let i = 0; i < this._fogY.length; i++) {
            this._fogY[i] = this._parallaxY;
        }
    };

    const gameMapScrollDown = Game_Map.prototype.scrollDown;
    Game_Map.prototype.scrollDown = function (distance) {
        const lastY = this._displayY;
        gameMapScrollDown.call(this, distance);
        if (this.isLoopVertical()) {
            for (let i = 0; i < this._fogY.length; i++) {
                this._fogY[i] += distance;
            }
        } else if (this.height() >= this.screenTileY()) {
            for (let i = 0; i < this._fogY.length; i++) {
                this._fogY[i] += this._displayY - lastY;
            }
        }
    };

    const gameMapScrollLeft = Game_Map.prototype.scrollLeft;
    Game_Map.prototype.scrollLeft = function (distance) {
        const lastX = this._displayX;
        gameMapScrollLeft.call(this, distance);
        if (this.isLoopHorizontal()) {
            for (let i = 0; i < this._fogX.length; i++) {
                this._fogX[i] -= distance;
            }
        } else if (this.width() >= this.screenTileX()) {
            for (let i = 0; i < this._fogX.length; i++) {
                this._fogX[i] += this._displayX - lastX;
            }
        }
    };

    const _Game_Map_scrollRight = Game_Map.prototype.scrollRight;
    Game_Map.prototype.scrollRight = function (distance) {
        const lastX = this._displayX;
        _Game_Map_scrollRight.call(this, distance);
        if (this.isLoopHorizontal()) {
            for (let i = 0; i < this._fogX.length; i++) {
                this._fogX[i] += distance;
            }
        } else if (this.width() >= this.screenTileX()) {
            for (let i = 0; i < this._fogX.length; i++) {
                this._fogX[i] += this._displayX - lastX;
            }
        }
    };

    const gameMapScrollUp = Game_Map.prototype.scrollUp;
    Game_Map.prototype.scrollUp = function (distance) {
        const lastY = this._displayY;
        gameMapScrollUp.call(this, distance);
        if (this.isLoopVertical()) {
            for (let i = 0; i < this._fogY.length; i++) {
                this._fogY[i] -= distance;
            }
        } else if (this.height() >= this.screenTileY()) {
            for (let i = 0; i < this._fogY.length; i++) {
                this._fogY[i] += this._displayY - lastY;
            }
        }
    };

    Game_Map.prototype.addFog = function (id, sx, sy) {
        this._fogX[id] = 0;
        this._fogY[id] = 0;
        this._fogSX[id] = sx;
        this._fogSY[id] = sy;
    };

    Game_Map.prototype.removeFog = function (id) {
        delete this._fogX[id];
        delete this._fogY[id];
        delete this._fogSX[id];
        delete this._fogSY[id];
    };

    const _Game_Map_update = Game_Map.prototype.update;
    Game_Map.prototype.update = function (sceneActive) {
        _Game_Map_update.call(this, sceneActive);
        this.updateFogPosition();
    };

    Game_Map.prototype.fogX = function (id) {
        return (this._fogX[id] * this.tileWidth()) / 2;
    };

    Game_Map.prototype.fogY = function (id) {
        return (this._fogY[id] * this.tileHeight()) / 2;
    };

    Game_Map.prototype.updateFogPosition = function () {
        for (let i = 0; i < this._fogX.length; i++) {
            this._fogX[i] += this._fogSX[i] / this.tileWidth() / 2;
            this._fogY[i] += this._fogSY[i] / this.tileHeight() / 2;
        }
    };

    //============================================================================
    // Spriteset_Map
    //============================================================================

    Spriteset_Map.prototype.addSubtractBlendMode = function () {
        if (Graphics.isWebGL()) {
            const { gl } = Graphics._renderer;
            Graphics._renderer.state.blendModes[20] = [
                gl.ZERO,
                gl.ONE_MINUS_SRC_COLOR,
            ];
        }
    };

    Spriteset_Map.prototype.createFog = function () {
        this._fogContainer = new Sprite();
        this.addChild(this._fogContainer);

        /**
         * <fogId : 1>
         * <fogName : myFog>
         * <fogOpacity : 255>
         * <fogZoom : 100>
         * <fogBlend : 0>
         * <fogSX : 2>
         * <fogSY : 0>
         */
        $gameMap.events().forEach(event => {
            if (event.meta && (event.meta.fogName || event.meta.mapFogId)) {
                const sprite = new TilingSprite();
                sprite.move(0, 0, Graphics.width, Graphics.height);
                sprite.bitmap = RS.Fog.loadFog(event.meta.fogName);
                sprite.visible = false;

                let { meta } = event;

                if (event.meta.mapFogId) {
                    const data = RS.Fog.Params.fogs[event.meta.mapFogId];
                    meta = data;
                }

                sprite.fog = {
                    id: RS.Fog.parseInt(meta.fogId),
                    name: meta.fogName,
                    opacity: RS.Fog.parseInt(meta.fogOpacity),
                    zoom: RS.Fog.parseInt(meta.fogZoom),
                    blend: RS.Fog.parseInt(meta.fogBlend),
                    sx: RS.Fog.parseInt(meta.fogSX),
                    sy: RS.Fog.parseInt(meta.fogSY),
                    switcheId: RS.Fog.parseInt(meta.fogSwitchId),
                    variableId: RS.Fog.parseInt(meta.fogVariableId),
                };

                this._fogContainer.addChild(sprite);
                $gameMap.addFog(sprite.fog.id, sprite.fog.sx, sprite.fog.sy);
            }
        });

        this.on('removed', this.removeFog, this);
    };

    Spriteset_Map.prototype.removeFog = function () {
        if (!this._fogContainer) return;
        this._fogContainer.children.forEach(sprite => {
            const meta = sprite.fog;
            $gameMap.removeFog(meta.id);
        });
    };

    Spriteset_Map.prototype.updateFog = function () {
        if (!this._fogContainer) return;
        const removeChilds = [];

        this._fogContainer.children.forEach(sprite => {
            const meta = sprite.fog;
            const mode = $gameVariables.value(meta.variableId);
            const opacity = meta.opacity.clamp(0, 255);

            if (mode === 0) {
                sprite.opacity = opacity;
            } else if (mode === 1) {
                if (sprite.opacity > 0) {
                    sprite.opacity--;
                }
                if (sprite.opacity <= 0) {
                    sprite.opacity = 0;
                    $gameSwitches.setValue(meta.switcheId, false);
                    $gameVariables.setValue(meta.variableId, 0);
                }
            } else if (mode === 2) {
                if (sprite._opacityDirty) {
                    if (sprite.opacity < opacity) {
                        sprite.opacity++;
                    }

                    if (sprite.opacity >= opacity) {
                        sprite.opacity = opacity;
                        $gameVariables.setValue(meta.variableId, 0);
                        sprite._opacityDirty = false;
                    }
                } else {
                    sprite.opacity = 0;
                    $gameSwitches.setValue(meta.switcheId, true);
                    sprite._opacityDirty = true;
                }
            }

            sprite.visible = $gameSwitches.value(meta.switcheId);

            if (!sprite.bitmap || sprite.bitmap.width <= 0) {
                sprite.bitmap = RS.Fog.loadFog(meta.fogName);
            }

            sprite.origin.x = $gameMap.fogX(meta.id) || 0;
            sprite.origin.y = $gameMap.fogY(meta.id) || 0;

            sprite.blendMode = meta.blend;

            sprite.scale.x = meta.zoom / 100.0;
            sprite.scale.y = meta.zoom / 100.0;
        });

        this._fogContainer.children.sort((a, b) => {
            return a.fog.id - b.fog.id;
        });

        removeChilds.forEach(i => {
            this._fogContainer.removeChildAt(i);
        });
    };

    const _Spriteset_Map_createLowerLayer =
        Spriteset_Map.prototype.createLowerLayer;
    Spriteset_Map.prototype.createLowerLayer = function () {
        _Spriteset_Map_createLowerLayer.call(this);
        this.addSubtractBlendMode();
        this.createFog();
    };

    const _Spriteset_Map_update = Spriteset_Map.prototype.update;
    Spriteset_Map.prototype.update = function () {
        _Spriteset_Map_update.call(this);
        this.updateFog();
    };

    //============================================================================
    // Scene_Map
    //============================================================================

    const alias_Scene_Map_start = Scene_Map.prototype.start;
    Scene_Map.prototype.start = function () {
        alias_Scene_Map_start.call(this);
        if ($gameTemp._preloadFog && $gameTemp._preloadFog.length >= 1) {
            SceneManager.push(Scene_LoadFog);
        }
    };

    //============================================================================
    // Scene_LoadFog
    //============================================================================

    Scene_LoadFog.prototype = Object.create(Scene_Base.prototype);
    Scene_LoadFog.prototype.constructor = Scene_LoadFog;

    Scene_LoadFog.prototype.initialize = function () {
        Scene_Base.prototype.initialize.call(this);
        this._images = $gameTemp._preloadFog || [];
    };

    Scene_LoadFog.prototype.create = function () {
        Scene_Base.prototype.create.call(this);
        this.createBackground();
        this._images.forEach(src => {
            RS.Fog.loadFog(src);
        });
    };

    Scene_LoadFog.prototype.createBackground = function () {
        this._backgroundSprite = new Sprite();
        this._backgroundSprite.bitmap = SceneManager.backgroundBitmap();
        this.addChild(this._backgroundSprite);
    };

    Scene_LoadFog.prototype.isReady = function () {
        if (Scene_Base.prototype.isReady.call(this)) {
            return ImageManager.isReady();
        }

        return false;
    };

    Scene_LoadFog.prototype.start = function () {
        Scene_Base.prototype.start.call(this);
        $gameTemp._preloadFog = [];
        SceneManager.pop();
    };
})();