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

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。

代码复制

HighLayerCharacterSprite EventID true       #开启以EventID为ID的事件的高层角色sprite

HighLayerCharacterSprite EventID true       #开启以EventID为ID的事件的高层角色sprite

代码复制

HighLayerCharacterSprite EventID false       #关闭以EventID为ID的事件的高层角色sprite

HighLayerCharacterSprite EventID false       #关闭以EventID为ID的事件的高层角色sprite

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

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

代码复制

<Enable High Layer Character Sprite>       #开启这个事件的高层角色sprite

<Enable High Layer Character Sprite>       #开启这个事件的高层角色sprite

代码复制

<Disable High Layer Character Sprite>       #关闭这个事件的高层角色sprite

<Disable High Layer Character Sprite>       #关闭这个事件的高层角色sprite

注意事项：

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

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

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

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

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

插件内容：

Ver 0.10

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

andrewx

汪汪 发表于 2016-1-5 20:45
......对mv的地图太不熟悉了,求教几个语句
   为什么这里是 -shadowBits
    lowerTiles.push(-shadowBits) ...

(this._isTableTile(upperTileId1) && !this._isTableTile(tileId1))
这一部分是绘制柜台图块下面那一块，因为按照F1所说，（柜台图块）绘制时，底部的12像素会有向下的偏移。也就是桌子边和腿那一部分会延伸到下面一块tile，当然如果下面的图块是墙壁类（A3A4会产生自动阴影的）或者本身还是柜台，则不会往下延伸。用tableEdgeVirtualId + upperTileId1后，下面绘制的时候如果发现tileId大于tableEdgeVirtualId，就知道应该绘制柜台边缘（以及这一块本来的内容）了。

shadowBits就是一个tile上四个位置阴影的分布，按照右下-左下-右上-左上的顺序的四个比特位。然后根据比特位的值生成对应阴影的图像。这里用负值，下面在绘制的时候遇到tileId<0的就知道是阴影了。

那个OverpassPosition 我也不清楚，我查到的_isOverpassPosition只能返回false，总感觉是永远执行不到的语句块ORZ

汪汪

......对mv的地图太不熟悉了,求教几个语句
   为什么这里是 -shadowBits
    lowerTiles.push(-shadowBits);

   (this._isTableTile(upperTileId1) && !this._isTableTile(tileId1))  这个什么意思,实现什么效果?

    if (this._isTableTile(upperTileId1) && !this._isTableTile(tileId1)) {
      
        if (!Tilemap.isShadowingTile(tileId0)) {   这句又是要干啥..................
            lowerTiles.push(tableEdgeVirtualId + upperTileId1);  完全看不懂这个要做啥
        }
    }
   这是啥东西.....  
  this._isOverpassPosition

(想通过sprite实现 tilemap中....)

andrewx

死伤殆尽 发表于 2016-1-3 22:28
其实细究起来第一张截图的房子阴影也有问题，然后角色应该也不止能走进去一格……
以前用XP画地图时碰到这 ...

对的，是不止一格，按理说墙壁多高就应该能往下几格，然而这默认地图就给房顶这个元件做了一格的星形通行，也是很奇怪。

如果用了半透明遮挡的话最后那张图尽管露不出头也是能看到角色位置，实际跑起来感觉还是可以的。

MV这次地图图块数据在同一格内做了六层，0是A类基础图块，1是A类装饰图快，2,3是B~E类图块叠加，4是阴影bit，5是区域id，而这个默认阴影bit又是编辑器自动算出来的，如果要改算法大概要对编辑器本身动刀了。另外自动阴影对于常用Shift画地图的简直是摧残啊Orz

我对V系地图编辑器都是垃圾这句话不能同意更多，这次所谓的六层地图数据依然被xp完爆。且不论自动原件没了解析窗口，当我发现v系自动元件精度从3*3变成了2*2，我真想骂这tm什么鬼。。。

死伤殆尽

其实细究起来第一张截图的房子阴影也有问题，然后角色应该也不止能走进去一格……
以前用XP画地图时碰到这种地方的处理我一般都被迫抛弃常识不管多高的墙后面永远设成只能走进一格
就游戏性的角度来考虑还是能接受的……

楼主加油吧，期待你想出能解决这个问题的方法

死伤殆尽

andrewx 发表于 2016-1-2 22:43
我在墙壁同行插件里的算法是对于同一纵列连续墙壁自动元件，如果从上面数有n块顶部元素，那么从下面数n块 ...

我知道，所以我才说只能走进去一格的系统预设细想起来是有问题的
但这个预设又是为了确保默认设置下角色在被墙壁遮盖时能至少露出一个头顶
虽然VX开始的地图编辑器功能弱化导致连一格都走不进去
但自动阴影的算法也跟着这个预设走
然后这又导致了自动阴影在很多情况下违和感十分严重
而VX系的地图图层功能又无法在没有自动阴影的情况下解决地图阴影问题
因此VX Ace开始增加了阴影笔这个功能用来修改自动生成的阴影

这样解释之后不知道你能不能理解VX系地图编辑器在这方面有多混乱
如果要针对其中一点下手的话，其他牵连到的要素也要一并解决才行
屏蔽自动阴影其实没有太大必要，毕竟这方面的问题靠阴影笔也能解决就是了……
改造自动阴影的算法又不知道可行性有多少……

顺带一提RM默认地图图块素材的光线基本上预设是从左向右直射的，不需要去考虑什么斜方向阳光

总而言之还是那句话，我不是针对MV，但VX系的地图编辑器真的都是垃圾啊！

andrewx

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

在这个思路基础上想到可以不管tile的分层而是直接多创建一层upperLayer并添加对其的更新，这样似乎兼容性更好一点点

JAVASCRIPT 代码复制

Tilemap.prototype._createLayers = function() {
        var width = this._width;
        var height = this._height;
        var margin = this._margin;
        var tileCols = Math.ceil(width / this._tileWidth) + 1;
        var tileRows = Math.ceil(height / this._tileHeight) + 1;
        var layerWidth = tileCols * this._tileWidth;
        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();
        this._lowerLayer.move(-margin, -margin, width, height);
        this._lowerLayer.z = 0;
 
        this._upperLayer = new Sprite();
        this._upperLayer.move(-margin, -margin, width, height);
        this._upperLayer.z = 4;
 
        for (var i = 0; i < 4; i++) {
                this._lowerLayer.addChild(new Sprite(this._lowerBitmap));
                this._upperLayer.addChild(new Sprite(this._upperBitmap));
        }
 
        this.addChild(this._lowerLayer);
        this.addChild(this._upperLayer);
 
        // 更改原始upperLayer的z值为0，并添加半透明的upperLayerNew
        this._upperLayer.z = 0;
        this._upperLayerNew = new Sprite();
        this._upperLayerNew.move(-margin, -margin, width, height);
        this._upperLayerNew.z = 4;
        this._upperLayerNew.opacity = 200;
        for (var i = 0; i < 4; i++) {
                this._upperLayerNew.addChild(new Sprite(this._upperBitmap));
        }
        this.addChild(this._upperLayerNew);
};
 
Tilemap.prototype._updateLayerPositions = function(startX, startY) {
        var m = this._margin;
        var ox = Math.floor(this.origin.x);
        var oy = Math.floor(this.origin.y);
        var x2 = (ox - m).mod(this._layerWidth);
        var y2 = (oy - m).mod(this._layerHeight);
        var w1 = this._layerWidth - x2;
        var h1 = this._layerHeight - y2;
        var w2 = this._width - w1;
        var h2 = this._height - h1;
 
        for (var i = 0; i < 2; i++) {
                var children;
                if (i === 0) {
                        children = this._lowerLayer.children;
                } else {
                        children = this._upperLayer.children;
                }
                children[0].move(0, 0, w1, h1);
                children[0].setFrame(x2, y2, w1, h1);
                children[1].move(w1, 0, w2, h1);
                children[1].setFrame(0, y2, w2, h1);
                children[2].move(0, h1, w1, h2);
                children[2].setFrame(x2, 0, w1, h2);
                children[3].move(w1, h1, w2, h2);
                children[3].setFrame(0, 0, w2, h2);
        }
 
        // 增加对upperLayerNew的更新
        var children = this._upperLayerNew.children;
        children[0].move(0, 0, w1, h1);
        children[0].setFrame(x2, y2, w1, h1);
        children[1].move(w1, 0, w2, h1);
        children[1].setFrame(0, y2, w2, h1);
        children[2].move(0, h1, w1, h2);
        children[2].setFrame(x2, 0, w1, h2);
        children[3].move(w1, h1, w2, h2);
        children[3].setFrame(0, 0, w2, h2);
};

Tilemap.prototype._createLayers = function() {


        var width = this._width;


        var height = this._height;


        var margin = this._margin;


        var tileCols = Math.ceil(width / this._tileWidth) + 1;


        var tileRows = Math.ceil(height / this._tileHeight) + 1;


        var layerWidth = tileCols * this._tileWidth;


        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();


        this._lowerLayer.move(-margin, -margin, width, height);


        this._lowerLayer.z = 0;


 


        this._upperLayer = new Sprite();


        this._upperLayer.move(-margin, -margin, width, height);


        this._upperLayer.z = 4;


 


        for (var i = 0; i < 4; i++) {


                this._lowerLayer.addChild(new Sprite(this._lowerBitmap));


                this._upperLayer.addChild(new Sprite(this._upperBitmap));


        }


 


        this.addChild(this._lowerLayer);


        this.addChild(this._upperLayer);


 


        // 更改原始upperLayer的z值为0，并添加半透明的upperLayerNew


        this._upperLayer.z = 0;


        this._upperLayerNew = new Sprite();


        this._upperLayerNew.move(-margin, -margin, width, height);


        this._upperLayerNew.z = 4;


        this._upperLayerNew.opacity = 200;


        for (var i = 0; i < 4; i++) {


                this._upperLayerNew.addChild(new Sprite(this._upperBitmap));


        }


        this.addChild(this._upperLayerNew);


};


 


Tilemap.prototype._updateLayerPositions = function(startX, startY) {


        var m = this._margin;


        var ox = Math.floor(this.origin.x);


        var oy = Math.floor(this.origin.y);


        var x2 = (ox - m).mod(this._layerWidth);


        var y2 = (oy - m).mod(this._layerHeight);


        var w1 = this._layerWidth - x2;


        var h1 = this._layerHeight - y2;


        var w2 = this._width - w1;


        var h2 = this._height - h1;


 


        for (var i = 0; i < 2; i++) {


                var children;


                if (i === 0) {


                        children = this._lowerLayer.children;


                } else {


                        children = this._upperLayer.children;


                }


                children[0].move(0, 0, w1, h1);


                children[0].setFrame(x2, y2, w1, h1);


                children[1].move(w1, 0, w2, h1);


                children[1].setFrame(0, y2, w2, h1);


                children[2].move(0, h1, w1, h2);


                children[2].setFrame(x2, 0, w1, h2);


                children[3].move(w1, h1, w2, h2);


                children[3].setFrame(0, 0, w2, h2);


        }


 


        // 增加对upperLayerNew的更新


        var children = this._upperLayerNew.children;


        children[0].move(0, 0, w1, h1);


        children[0].setFrame(x2, y2, w1, h1);


        children[1].move(w1, 0, w2, h1);


        children[1].setFrame(0, y2, w2, h1);


        children[2].move(0, h1, w1, h2);


        children[2].setFrame(x2, 0, w1, h2);


        children[3].move(w1, h1, w2, h2);


        children[3].setFrame(0, 0, w2, h2);


};

andrewx

死伤殆尽 发表于 2016-1-2 22:05
这个插件的想法好
但是楼主你有没有发现最后一张截图里，角色和宝箱的位置，跟右边的阴影位置是矛盾的？
虽 ...

我在墙壁同行插件里的算法是对于同一纵列连续墙壁自动元件，如果从上面数有n块顶部元素，那么从下面数n块不能通行。实际上正方体斜上方透视不也是这样的么，顶面宽度=底面宽度，允许行走的部分正好等于墙壁正面高度。

本身VX之后墙壁根本就不给通行，xp也只是墙壁往下一格，但我觉得不是很科学。

对于阴影...你可以认为是光线与地面135度夹角投影后偏移了，但是系统又画不出斜向的阴影什么的。说真的，自动阴影这个设计蠢爆了，又不智能又丑。你可以试着画一个顶面一格，正面多格的柱子，你会发现自动阴影还是那么愚蠢地产生一条。。。。
我都准备开插件全程屏蔽这东西。。。。

死伤殆尽

这个插件的想法好
但是楼主你有没有发现最后一张截图里，角色和宝箱的位置，跟右边的阴影位置是矛盾的？
虽然细究起来有点问题，但软件预设墙体上方是只可以往下走进一格的
再结合角色高度啊等等问题，我觉得这些需要统合起来考虑一下

andrewx

汪汪 发表于 2016-1-2 19:28
[fold][/fold]忽然想到一个缺点.............人物太高的话....会很奇怪吧(话说,本来人物很高就会很奇怪好 ...

是说满两格及更高的角色会被切头吗？噫这是痛处
附带插件里面有个CP_Large_Sprite_Fix可以解决，但是用了以后帧速明显会拖慢。。。。。