【自用·测试】图块遮挡角色半透明

andrewx

各位新年快乐噜~
这次是为了练习处理sprite写的插件，能实现被图块遮挡的角色呈现半透明的效果，帮助玩家确认被遮挡的角色的位置。原理很简单，就是为所有的角色（包括主角，跟随队友，事件，交通工具）在与高层图块相同的层级（z = 4）上建立半透明的sprite。感谢@汪汪 之前提供的思路。

截图：



食用方法：

1. 安装：直接在插件管理器中启用。

2. 设定参数：

Default Opacity Rate:
图块上半透明角色sprite的不透明度将为Opacity Rate与角色原本的不透明度的乘积。此处设定的是默认的Opacity Rate。
有效参数是[0, 1]之间的小数。
本参数默认值为0.2。

Opacity Percentage Variable ID:
你也可以使用一个游戏内变量来动态地控制高层角色sprite。本参数接收一个游戏内变量的ID，sprite的不透明度将由该变量的值决定。由于RM中内建游戏变量只能是整数，所以变量里的有效值为百分比的整数部分，即在[0, 100]之间的整数。实际Opacity Rate将为该值除以100。
如果你使用变量控制不透明度，那么Default Opacity Rate将被忽略。记得调节相应的变量数值以使高层sprite生效。
该参数设定为0表示不启用这项功能。
本参数默认值为0。

Enable by Default:
设定高层角色sprite是否默认起效。如果设定为false，那么默认不会显示任何高层角色sprite。你需要使用下面的插件指令或事件注释标签来手动开启。
本参数默认值为true。

3. 插件指令：
插件指令可以临时调整某角色上是否显示高层sprite。

[pre lang=""]HighLayerCharacterSprite EventID true       #开启以EventID为ID的事件的高层角色sprite[/pre]

[pre lang=""]HighLayerCharacterSprite EventID false       #关闭以EventID为ID的事件的高层角色sprite[/pre]

其中EventID为-1时代表主角和跟随队友，0为当前事件，或者其他具体事件ID。

4. 事件注释标签
通过设置事件注释标签可以修改某事件默认是否显示高层角色sprite。
注意这里的事件注释标签不是事件窗口上方的备注（Note）区，而是事件执行内容内通过流程控制->注释（comment）指令加入的注释内容。使用事件注释而非备注可以允许你为同一个事件的不同页面定义不同的高层角色sprite的可见性。你可以在注释指令里使用如下标签（包括尖括号）：

[pre lang=""]<Enable High Layer Character Sprite>       #开启这个事件的高层角色sprite[/pre]
[pre lang=""]<Disable High Layer Character Sprite>       #关闭这个事件的高层角色sprite[/pre]



注意事项：

对于事件，插件指令和事件注释标签的效果将持续到地图切换，对于主角和队友效果则切换地图后依然持续。

插件指令和事件注释标签的效果会互相覆盖。

当某事件的某一页被激活，该页面的事件注释标签就会被执行，假如该页没有定义标签，那么高层角色sprite的可见性维持不变。

副作用：角色重叠的话半透明的sprite也会重叠在一起…这个目前感觉无解，如果有解决思路可以留言，谢~

配合图块通行增强插件和OverpassTile插件（自带）及其Fix插件一同食用效果更佳~

插件内容：
[fold=Ver 0.10]
[pre lang="javascript" line="1" file="AndrewX_TranslucentCharacterBehindTile.js"]
//=============================================================================
// AndrewX - Translucent Character Behind Tile
// AndrewX_TranslucentCharacterBehindTile.js
//=============================================================================
var AndrewX = AndrewX || {};
AndrewX.TCBT = AndrewX.TCBT || {};
//=============================================================================
/*:
* @plugindesc v0.10 Display a translucent character sprite when the character is behind a tile.
* @author AndrewX
*
* @param Default Opacity Rate
* @desc The default opacity rate for high layer character sprites. (Default: 0.2)
* @default 0.2
*
* @param Opacity Percentage Variable ID
* @desc Set a variable ID to use that variable to control opacity rate. Use 0 if you do not need this feature. (Default: 0)
* The real opacity rate will be the value of that variable divide by 100.
* @default 0
*
* @param Enable by Default
* @desc Set to "false" if you do not want high layer sprite to be displayed by default. (Default: true)
* @default true
*
* @help
* ============================================================================
* Introduction and Instructions
* ============================================================================
*
* This plugin will create high layer translucent sprites for characters
* (player, followers, events, vehicles), which are at the same layer as upper
* tiles (i.e. z = 4), so that when a character is covered by the tile, the
* high layer translucent sprite will indicate where he is.
*
* Usage:
* 1. Installed: Just enable the plugin in the Plugin Manager.
*
* 2. Setup parameters.
*  a. Default Opacity Rate:
*      The opacity for the high layer character sprites will be the product
*      of the character's original opacity and the opacity rate you set in
*      this plugin. This parameter is the default opacity rate.
*      Valid value will be a number in range [0, 1].
*      The default value for this parameter is 0.2.
*  b. Opacity Percentage Variable ID:
*      You can also use a variable to get dynamic control of the high layer
*      sprites' opacity. This parameter takes in a variable ID in your game,
*      and the opacity will be determined by the value of that variable.
*      Note: As in RM, builtin variables only support integers. Thus, the
*      valid value in the variable is a percentage number in range [0, 100].
*      The actual opacity rate will be the variable's value divide by 100.  
*      If you use the variable to control opacity, the Default Opacity Rate
*      will be ignored. Remember to adjust the variable you assigned to make
*      the sprites to work.
*      Use 0 if you do not need this feature.
*      The default value for this parameter is 0.
*  c. Enable by Default:
*      Whether the high layer sprites should work by default. If you set to
*      "false", no high layer character sprite will be displayed
*      automatically. You need to enable them manually by plugin commands or
*      event comment tags.
*      The default value for this parameter is true.
*      
* 3. Plugin Commands:
*  Use plugin commands to modify high layer character sprite's visibility of
*  an event temporarily:
*        
*      HighLayerCharacterSprite EventID true
*      # Enable high layer sprite for the event
*         
*      HighLayerCharacterSprite EventID false
*      # Disable high layer sprite for the event
*
*          EventID = number for specific event
*          EventID = 0 for "this" event
*          EventID = -1 for player and followers
*
* 4. Event Comment Tags
*  You can use event comment tags to set whether an event should display
*  high layer character sprite by default.
*  Event Comment Tags are set within comments in event contents of an event
*  page. This will enable you to set different translucent sprite visibilities
*  in different pages for the same event.
*  
*      <Enable High Layer Character Sprite>
*      # Enable high layer sprite for this event
*
*      <Disable High Layer Character Sprite>
*      # Disable high layer sprite for this event
*
*  To use these tags, in an event page, add Event Commands "Comment" in Flow
*  Control, and write the tag.
*
* NOTE:
*  1. For events, the effect of plugin commands and event comment tags will
*  last until the map is changed. For player and followers, the effect will
*  remain.
*  2. Plugin commands and event comment tags can override each other.
*  3. Every time an event page is triggered, the event comment tag within
*  this page will be evaluated. If there is no defined comment tag, the
*  visibility of the high layer character sprite will not be changed.
*
* ============================================================================
* Changelog
* ============================================================================
*
* Version 0.10:
* - Finished prototype
*
* ============================================================================
* Term of Use
* ============================================================================
*
* Free for use in non-commercial or commercial RMMV projects
* Please credit AndrewX
*
*/
//=============================================================================

(function() {

        var parameters = PluginManager.parameters('AndrewX_TranslucentCharacterBehindTile');
        var defaultOpacityRate = Number(parameters['Default Opacity Rate'] || 0);
        var opacityVariableId = Number(parameters['Opacity Percentage Variable ID'] || 0);
        var enableByDefault = parameters['Enable by Default'];

        AndrewX.TCBT.initMembers = Game_CharacterBase.prototype.initMembers;
        Game_CharacterBase.prototype.initMembers = function() {
                AndrewX.TCBT.initMembers.call(this);
                if (enableByDefault.toUpperCase() === 'FALSE') {
                        this._showHighLayerCharaSprite = false;
                } else {
                        this._showHighLayerCharaSprite = true;
                }
        };

        AndrewX.TCBT.createCharacters = Spriteset_Map.prototype.createCharacters;
        Spriteset_Map.prototype.createCharacters = function() {
                AndrewX.TCBT.createCharacters.call(this);
                this._highLayerCharaSprites = [];
                $gameMap.events().forEach(function(event) {
                        this._highLayerCharaSprites.push(new Sprite_Character(event));
                }, this);
                $gameMap.vehicles().forEach(function(vehicle) {
                        this._highLayerCharaSprites.push(new Sprite_Character(vehicle));
                }, this);
                $gamePlayer.followers().reverseEach(function(follower) {
                        this._highLayerCharaSprites.push(new Sprite_Character(follower));
                }, this);
                this._highLayerCharaSprites.push(new Sprite_Character($gamePlayer));
                for (var i = 0; i < this._highLayerCharaSprites.length; i++) {
                        this._tilemap.addChild(this._highLayerCharaSprites);
                }
        };

        AndrewX.TCBT.update = Spriteset_Map.prototype.update;
        Spriteset_Map.prototype.update = function() {
                AndrewX.TCBT.update.call(this);
                var characters = this._characterSprites;
                for (var i = 0; i < characters.length; i++) {
                        if (!this._highLayerCharaSprites) {
                                continue;
                        }
                        this._highLayerCharaSprites.z = 4;
                        var opacityRate;
                        if (opacityVariableId >= 1) {
                                opacityRate = $gameVariables.value(opacityVariableId) / 100;
                        } else {
                                opacityRate = defaultOpacityRate;
                        }
                        this._highLayerCharaSprites.opacity = characters.opacity * opacityRate;
                        if (characters._character._showHighLayerCharaSprite === true) {
                                this._highLayerCharaSprites.visible = characters.visible;
                        } else {
                                this._highLayerCharaSprites.visible = false;
                        }
                }
        };

        AndrewX.TCBT.pluginCommand = Game_Interpreter.prototype.pluginCommand;
        Game_Interpreter.prototype.pluginCommand = function(command, args) {
                AndrewX.TCBT.pluginCommand.call(this, command, args);
                if (command.toUpperCase() === 'HIGHLAYERCHARACTERSPRITE') {
                        if (eval(args[0]) < 0) {
                                if (args[1].toUpperCase() === 'TRUE') {
                                        $gamePlayer._showHighLayerCharaSprite = true;
                                        $gamePlayer.followers().reverseEach(function(follower) {
                                                follower._showHighLayerCharaSprite = true;
                                        }, this);
                                } else if (args[1].toUpperCase() === 'FALSE') {
                                        $gamePlayer._showHighLayerCharaSprite = false;
                                        $gamePlayer.followers().reverseEach(function(follower) {
                                                follower._showHighLayerCharaSprite = false;
                                        }, this);
                                }
                        } else {
                                subject = this.character(eval(args[0]));
                                if (args[1].toUpperCase() === 'TRUE') {
                                        subject._showHighLayerCharaSprite = true;
                                } else if (args[1].toUpperCase() === 'FALSE') {
                                        subject._showHighLayerCharaSprite = false;
                                }
                        }
                }
        };

        AndrewX.TCBT.setupPage = Game_Event.prototype.setupPage;
        Game_Event.prototype.setupPage = function() {
                AndrewX.TCBT.setupPage.call(this, arguments);
                if (this._pageIndex >= 0) {
                        for (var i = 0; i < this.list().length; i++) {
                                if ([108, 408].indexOf(this.list()['code']) >= 0) {
                                        var note = this.list()['parameters'][0];
                                        if (note.match(/<Disable High Layer Character Sprite>/i)) {
                                                this._showHighLayerCharaSprite = false;
                                        } else if (note.match(/<Enable High Layer Character Sprite>/i)) {
                                                this._showHighLayerCharaSprite = true;
                                        }
                                }
                        }
                }
        }
})();
[/pre]
[/fold]

自吐槽：为毛这么简单一个效果做这么多设定选项，根本不会有人调整这玩意儿。。。都说了是在练习插件的写法啦XD

夏末渐离

哎哟不错喔

汪汪

Default Opacity Rate:
图块上半透明角色sprite的不透明度将为Opacity Rate与角色原本的不透明度的乘积。此处设定的是默认的Opacity Rate。
有效参数是[0, 1]之间的小数。
本参数默认值为0.2。
对这种参数我觉得
设置为 0 - 255
在脚本里对这个数除以255
这样比较好.

夏末渐离

[fold=关于副作用，想到一个笨方法]
[pre lang="javascript"]
if (characters._character._showHighLayerCharaSprite === true&&characters._character.regionId()==1)
this._highLayerCharaSprites.visible = characters.visible;
[/pre]
[/fold]

原本想法是获取【可通过的高层图块的XY】，然后与角色们的当前XY值比较，相等则绘制半透明，不等则不绘制。

因为不懂如何获取【可通过的高层图块的XY】，而且每一帧都要获取角色们的XY值会觉得很卡。

便直接用地区ID判定，只能辛苦使用这个插件的人去设置【可通过的高层图块的地区ID】了。

andrewx

汪汪 发表于 2016-1-2 11:52
Default Opacity Rate:
图块上半透明角色sprite的不透明度将为Opacity Rate与角色原本的不透明度的乘积。此 ...

感谢提出建议，但是我使用0~1的比值是希望这个半透明的sprite的不透明度是基于角色实际不透明度计算得出的，比如Opacity Rate=0.2时，如果角色本身不透明度255，那么实际不透明度为51，如果角色的不透明度变成了100，那么半透明sprite的透明度则自动变为20。如果参数得当，就不会出现半透明sprite比角色原本sprite还明显的情况。
如果按照0~255来设置，会给使用者一种这是在设定半透明sprite的真实不透明度的印象，毕竟本身设置Opacity就是0~255这么设置的。

andrewx

夏末渐离 发表于 2016-1-2 13:56
[fold=关于副作用，想到一个笨方法]

if (characters._character._showHighLayerCharaSprite === true&&cha ...

感谢提供思路~确实可以这样避免平时角色重叠的问题，但是在高层图块后面重叠的话还是会糊在一起囧。其实我觉得Opacity Rate不设的太离谱重叠在一起影响也不是很大，而且不是有些人喜欢用事件来画一些地图上的大型或者可动元素比如树木什么的，留着这个副作用的话角色在这些元素后行走也会有半透明效果。

夏末渐离

andrewx 发表于 2016-1-2 15:04
感谢提供思路~确实可以这样避免平时角色重叠的问题，但是在高层图块后面重叠的话还是会糊在一起囧。其实 ...

在高层图块后面也糊在一起这点不仔细看还真看不出来。
毕竟事件作图，船只什么的跟角色们是处于同一层的所以无法区别对待实施透明化……
看来只能往this._highLayerCharaSprites.z 这项细分了。

andrewx

夏末渐离 发表于 2016-1-2 15:53
在高层图块后面也糊在一起这点不仔细看还真看不出来。
毕竟事件作图，船只什么的跟角色们是处于同一层的 ...

可以每次都根据事件的x，y去找该处的图块是否包含高层图块，然而这个高层图块的判定系统本身有，只是看图块是否含星形。但我在写墙壁后行走插件时用了自己新写的方法了加入了其他判定，使得A组图块也能被当成高层图块。因此实际上还是不知道图块到底被在绘制的时候被当成了高层还是低层ORZ。。。

汪汪

于是......针对副作用,
把高层元件做出半透明遮挡物就好了,
高层元件在显示时在人物下面,
高层元件的半透明遮挡在人物的上面,
这样人物不需要半透明了.
于是饶了以又绕回来了{:2_276:}


缺点,不能控制单独的事件......
[pre lang="javascript"](function() {


Tilemap.prototype._paintTiles = function(startX, startY, x, y) {
    var tableEdgeVirtualId = 10000;
    //现在x = 开始x + x
    var mx = startX + x;
    //现在y = 开始y + y
    var my = startY + y;
    //dx = 现在x * 图块宽(48)  除 层宽(912)的余数  -- 以层宽为基础的 现在图块坐标 x
    var dx = (mx * this._tileWidth).mod(this._layerWidth);
    //dy = 现在y * 图块高(48)  除 层高(720)的余数  -- 以层宽为基础的 现在图块坐标 y
    var dy = (my * this._tileHeight).mod(this._layerHeight);
    //层x
    var lx = dx / this._tileWidth;
    //层y
    var ly = dy / this._tileHeight;
    var tileId0 = this._readMapData(mx, my, 0);
    var tileId1 = this._readMapData(mx, my, 1);
    var tileId2 = this._readMapData(mx, my, 2);
    var tileId3 = this._readMapData(mx, my, 3);
    var shadowBits = this._readMapData(mx, my, 4);
    var upperTileId1 = this._readMapData(mx, my - 1, 1);
    var lowerTiles = [];
    var upperTiles = [];

    if (this._isHigherTile(tileId0)) {
        upperTiles.push(tileId0);
        lowerTiles.push(tileId0);
    } else {
        lowerTiles.push(tileId0);
    }
    if (this._isHigherTile(tileId1)) {
        upperTiles.push(tileId1);
        lowerTiles.push(tileId1);
    } else {
        lowerTiles.push(tileId1);
    }

    lowerTiles.push(-shadowBits);

    if (this._isTableTile(upperTileId1) && !this._isTableTile(tileId1)) {
        if (!Tilemap.isShadowingTile(tileId0)) {
            lowerTiles.push(tableEdgeVirtualId + upperTileId1);
        }
    }

    if (this._isOverpassPosition(mx, my)) {
        upperTiles.push(tileId2);
        upperTiles.push(tileId3);
        lowerTiles.push(tileId3);
        lowerTiles.push(tileId2);
    } else {
        if (this._isHigherTile(tileId2)) {
            upperTiles.push(tileId2);
            lowerTiles.push(tileId2);
        } else {
            lowerTiles.push(tileId2);
        }
        if (this._isHigherTile(tileId3)) {
            upperTiles.push(tileId3);
            lowerTiles.push(tileId3);
        } else {
            lowerTiles.push(tileId3);
        }
    }

    var lastLowerTiles = this._readLastTiles(0, lx, ly);
    if (!lowerTiles.equals(lastLowerTiles) ||
            (Tilemap.isTileA1(tileId0) && this._frameUpdated)) {
        this._lowerBitmap.clearRect(dx, dy, this._tileWidth, this._tileHeight);
        for (var i = 0; i < lowerTiles.length; i++) {
            var lowerTileId = lowerTiles;
            if (lowerTileId < 0) {
                this._drawShadow(this._lowerBitmap, shadowBits, dx, dy);
            } else if (lowerTileId >= tableEdgeVirtualId) {
                this._drawTableEdge(this._lowerBitmap, upperTileId1, dx, dy);
            } else {
                this._drawTile(this._lowerBitmap, lowerTileId, dx, dy);
            }
        }
        this._writeLastTiles(0, lx, ly, lowerTiles);
    }

    var lastUpperTiles = this._readLastTiles(1, lx, ly);
    if (!upperTiles.equals(lastUpperTiles)) {
        this._upperBitmap.clearRect(dx, dy, this._tileWidth, this._tileHeight);
        for (var j = 0; j < upperTiles.length; j++) {
            this._drawTile(this._upperBitmap, upperTiles[j], dx, dy);
        }
        this._writeLastTiles(1, lx, ly, upperTiles);
    }
};

Tilemap.prototype._createLayers = function() {
        //宽 856
    var width = this._width;
    //高 664
    var height = this._height;
    //页边 20
    var margin = this._margin;
    //图块列  19  大于等于 宽/图块宽 的最小整数 +1  
    var tileCols = Math.ceil(width / this._tileWidth) + 1;
    //图块行  15  大于等于 高/图块高 的最小整数 +1
    var tileRows = Math.ceil(height / this._tileHeight) + 1;
    //层宽 912
    var layerWidth = tileCols * this._tileWidth;
    //层高 720
    var layerHeight = tileRows * this._tileHeight;
    //下层位图
    this._lowerBitmap = new Bitmap(layerWidth, layerHeight);
    //上层位图
    this._upperBitmap = new Bitmap(layerWidth, layerHeight);
    this._layerWidth = layerWidth;
    this._layerHeight = layerHeight;

    /**--------------------------------------------------------------------------
     * Z coordinate:
     * 0 : Lower tiles  较下层图块
     * 1 : Lower characters  较下层人物
     * 3 : Normal characters  正常人物
     * 4 : Upper tiles   较上层图块
     * 5 : Upper characters  较上层人物
     * 6 : Airship shadow  飞艇影子
     * 7 : Balloon      气球
     * 8 : Animation    动画
     * 9 : Destination  目的地
     *--------------------------------------------------------------------------
     */

    //创建下层
    this._lowerLayer = new Sprite();
    //下层移动到 -20,-20
    this._lowerLayer.move(-margin, -margin, width, height);
    //下层z 为0
    this._lowerLayer.z = 0;

    //创建上层
    this._upperLayer = new Sprite();
    //上层移动到 -20,-20
    this._upperLayer.move(-margin, -margin, width, height);
    //上层z 为0
    this._upperLayer.z = 4;

    //添加4个子项精灵到层
    for (var i = 0; i < 4; i++) {
        this._lowerLayer.addChild(new Sprite(this._lowerBitmap));
        this._upperLayer.addChild(new Sprite(this._upperBitmap));
    }
    this._upperLayer.opacity=125//修改透明度在这里.目前没有添加在游戏里修改的方法,不过在 SceneManager_scene往下一级找children应该就能找到它.......我觉得.什么时候出一个children表就好看了.

    //添加下层  
    this.addChild(this._lowerLayer);
    //添加上层
    this.addChild(this._upperLayer);
};
})();[/pre]

andrewx

汪汪 发表于 2016-1-2 18:20
于是......针对副作用,
把高层元件做出半透明遮挡物就好了,
高层元件在显示时在人物下面,

试了下发现没法跟墙壁后行走插件兼容（必然），
果然是绕回来了，一开始我也想过这么做TvT