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

andrewx · 发表于 2016-1-2 10:19:16

加入我们，或者，欢迎回来。

您需要登录才可以下载或查看，没有帐号？注册会员

x

本帖最后由 andrewx 于 2016-1-2 10:37 编辑

各位新年快乐噜~
这次是为了练习处理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也会重叠在一起…这个目前感觉无解，如果有解决思路可以留言，谢~

图块通行增强插件

Fix插件

插件内容：

Ver 0.10

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

夏末渐离 · 发表于 2016-1-2 10:25:29

哎哟不错喔

汪汪 · 发表于 2016-1-2 11:52:37

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

夏末渐离 · 发表于 2016-1-2 13:56:11

本帖最后由夏末渐离于 2016-1-2 14:09 编辑

关于副作用，想到一个笨方法

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

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

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

andrewx · 发表于 2016-1-2 14:51:54

汪汪发表于 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 15:04:58

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

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

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

夏末渐离 · 发表于 2016-1-2 15:53:57

本帖最后由夏末渐离于 2016-1-2 15:55 编辑

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

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

andrewx · 发表于 2016-1-2 17:11:16

本帖最后由 andrewx 于 2016-1-2 17:16 编辑

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

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

汪汪 · 发表于 2016-1-2 18:20:10

本帖最后由汪汪于 2016-1-2 18:48 编辑

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

缺点,不能控制单独的事件......

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[i];
            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);
};
})();

(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[i];


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


};


})();

andrewx · 发表于 2016-1-2 18:56:01

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

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

帐号		自动登录	找回密码
密码			注册会员

[原创发布] 【自用·测试】图块遮挡角色半透明

加入我们，或者，欢迎回来。

评分

评分

点评

点评