Project1

标题: 【RMMV】美化地图专用:Overlay Mapping by 思维伯克 v1.3 [打印本页]

作者: swebok    时间: 2015-10-24 22:28
标题: 【RMMV】美化地图专用:Overlay Mapping by 思维伯克 v1.3
本帖最后由 swebok 于 2017-2-11 23:52 编辑

(反正也没有人看)因为一些原因重新找出了之前写的代码,修正了一些bug之后更新到了v1.3版。详细请见帖子后半部分的更新log。

在XP/VX/VA中使用遮罩描绘地图上瘾的同学,到了RMMV中没有相关脚本怎么行?于是在MV到货后,捣鼓了几个小时的代码,1.0版本的Overlay Mapping诞生了。

先来张图


具体功能和VA中的Yami Script Ace - Overlay Mapping基本相同,唯一区别在于light和shadow整合成了同一个图层(light),并且所有的图像都必须是png格式(YSA的light和shadow使用图像的加法和减法用jpg实现的)。
由于MV有脚本管理器,所以请将脚本放入工程目录中 js/plugins文件夹后,打开脚本管理器添加该脚本。如下图所示:



开关和变量编号在此设置,在游戏中修改开关为ON即启用对应图层;修改变量的值对应启用第几号图层。
使用方法在脚本的help里有简短说明,可以参考该说明操作。

脚本内容如下:
JAVASCRIPT 代码复制
  1. //=============================================================================
  2. // Overlay.js
  3. //=============================================================================
  4. /*:
  5.  * @plugindesc Overlay Mapping script by SWEBOK v1.3
  6.  * @author SWEBOK
  7.  *
  8.  * @param Light Switch
  9.  * @desc Turn on/off light layer
  10.  * @default 1
  11.  *
  12.  * @param Parallax Switch
  13.  * @desc Turn on/off parallax layer
  14.  * @default 2
  15.  *
  16.  * @param Ground Switch
  17.  * @desc Turn on/off ground layer
  18.  * @default 3
  19.  *
  20.  * @param Light Variable
  21.  * @desc Switch to another light
  22.  * @default 1
  23.  *
  24.  * @param Parallax Variable
  25.  * @desc Switch to another parallax
  26.  * @default 2
  27.  *
  28.  * @param Ground Variable
  29.  * @desc Switch to another ground
  30.  * @default 3
  31.  *
  32.  * @help This plugin does not provide plugin commands.
  33.  *
  34.  * Last Updated: 02/11/2017
  35.  *     v1.0 - 10/24/2015 - first release.
  36.  *     v1.1 - 10/27/2015 - upper tilemap layer problem solved
  37.  *     v1.2 - 07/10/2016 - add map note tag settings, remove load pic error process
  38.  *     v1.3 - 02/11/2017 - fixed a problem about ground pic wrong position
  39.  *
  40.  * This script will automatically load map's overlay by map's note, and a map can have more than
  41.  * one image per layer, so you don't have to create two or more map just for day/night or
  42.  * when an event occur.
  43.  *
  44.  * Create a folder in img and name it overlay.
  45.  * Put all of your overlay into img/overlay.
  46.  * Your overlay file will have the name set in map's note + "-" + Number.
  47.  * Number is 1, 2, 3, ... using for Overlay Variables.
  48.  *
  49.  * Example: img/overlay/ground2-1.png
  50.  *
  51.  * Map note example:
  52.  *        <OVERLAY>
  53.  *                LIGHT = light1
  54.  *                PARALLAX = par1
  55.  *                GROUND = ground1
  56.  *        </OVERLAY>
  57.  *
  58.  * when variable are 1, the map loads light1-1.png, par1-1.png, ground1-1.png from overlay folder.
  59.  *
  60.  * Tips:
  61.  * All pictures must be .png
  62.  * Do not use "=" in the names of pictures
  63.  */
  64.  
  65. (function() {
  66.         var parameters = PluginManager.parameters('Overlay');
  67.         var lightSwitch = Number(parameters['Light Switch'] || 1);
  68.         var parallaxSwitch = Number(parameters['Parallax Switch'] || 2);
  69.         var groundSwitch = Number(parameters['Ground Switch'] || 3);
  70.         var lightVariable = Number(parameters['Light Variable'] || 1);
  71.         var parallaxVariable = Number(parameters['Parallax Variable'] || 2);
  72.         var groundVariable = Number(parameters['Ground Variable'] || 3);
  73.  
  74.         Game_Map.prototype.processMapNotetags = function () {
  75.                 var note1 = /<(?:OVERLAY)>/i;
  76.                 var note2 = /<\/(?:OVERLAY)>/i;
  77.  
  78.                 var notedata = $dataMap.note.split(/[\r\n]+/);
  79.  
  80.                 this.layerNameEval = '';
  81.                 var layerNameEval = false;
  82.                 this._layerName = ['', '', ''];
  83.  
  84.  
  85.                 for (var i = 0; i < notedata.length; i++) {
  86.                         var line = notedata[i];
  87.                         console.log(line);
  88.                         if (line.match(note1)) {
  89.                                 layerNameEval = true;
  90.                         } else if (line.match(note2)) {
  91.                                 layerNameEval = false;
  92.                         } else if (layerNameEval) {
  93.                                 this.layerNameEval = line;
  94.                                 var layerClass = this.layerNameEval.split('=')[0].trim();
  95.                                 var index = 1;
  96.                                 if (index != -1) {
  97.                                         switch (layerClass) {
  98.                                                 case 'LIGHT':
  99.                                                         this._layerName[0] = this.layerNameEval.split('=')[1].trim();
  100.                                                         break;
  101.                                                 case 'PARALLAX':
  102.                                                         this._layerName[1] = this.layerNameEval.split('=')[1].trim();
  103.                                                         break;
  104.                                                 case 'GROUND':
  105.                                                         this._layerName[2] = this.layerNameEval.split('=')[1].trim();
  106.                                                         break;
  107.                                         }
  108.                                         console.log(this.layerNameEval.split('=')[1].trim());
  109.                                 }
  110.                         }
  111.                 }
  112.         };
  113.  
  114.         ImageManager.loadOverlay = function(filename, hue) {
  115.                 return this.loadBitmap('img/overlay/', filename, hue, false);
  116.         };
  117.  
  118.         Spriteset_Map.prototype.initialize = function() {
  119.                 Spriteset_Base.prototype.initialize.call(this);
  120.                 this.processMapNotetags();
  121.         };
  122.  
  123.         Spriteset_Map.prototype.createLowerLayer = function() {
  124.                 Spriteset_Base.prototype.createLowerLayer.call(this);
  125.                 this.createParallax();
  126.                 this.createTilemap();
  127.                 this.createOverlayGround();
  128.                 this.createCharacters();
  129.                 this.createOverlayParallax();
  130.                 this.createShadow();
  131.                 this.createOverlayLight();
  132.                 this.createDestination();
  133.                 this.createWeather();
  134.         };
  135.  
  136.         Spriteset_Map.prototype.update = function() {
  137.                 Spriteset_Base.prototype.update.call(this);
  138.                 this.updateTileset();
  139.                 this.updateParallax();
  140.                 this.updateTilemap();
  141.                 this.updateOverlayGround();
  142.                 this.updateOverlayParallax();
  143.                 this.updateShadow();
  144.                 this.updateOverlayLight();
  145.                 this.updateWeather();
  146.         };
  147.  
  148.         Spriteset_Map.prototype.processMapNotetags = function() {
  149.                 $gameMap.processMapNotetags();
  150.         };
  151.  
  152.         Spriteset_Map.prototype.createOverlayGround = function() {
  153.                 this._overlayGround = new TilingSprite();
  154.                 this._overlayGround.move(0, 0, Graphics.width, Graphics.height);
  155.                 // 2017.2.11 create new layer in tilemap for overlay ground, z = 1
  156.                 var groundLayer = new Sprite();
  157.                 this._tilemap.addChild(groundLayer);
  158.                 groundLayer.z = 1;
  159.                 groundLayer.addChild(this._overlayGround);
  160.         };
  161.  
  162.         Spriteset_Map.prototype.createCharacters = function() {
  163.                 this._characterSprites = [];
  164.                 $gameMap.events().forEach(function(event) {
  165.                         this._characterSprites.push(new Sprite_Character(event));
  166.                 }, this);
  167.                 $gameMap.vehicles().forEach(function(vehicle) {
  168.                         this._characterSprites.push(new Sprite_Character(vehicle));
  169.                 }, this);
  170.                 $gamePlayer.followers().reverseEach(function(follower) {
  171.                         this._characterSprites.push(new Sprite_Character(follower));
  172.                 }, this);
  173.                 this._characterSprites.push(new Sprite_Character($gamePlayer));
  174.                 for (var i = 0; i < this._characterSprites.length; i++) {
  175.                         this._tilemap.addChild(this._characterSprites[i]);
  176.                 }
  177.         };
  178.  
  179.         Spriteset_Map.prototype.createOverlayParallax = function() {
  180.                 this._overlayParallax = new TilingSprite();
  181.                 this._overlayParallax.move(0, 0, Graphics.width, Graphics.height);
  182.                 this._baseSprite.addChild(this._overlayParallax);
  183.         };
  184.  
  185.         Spriteset_Map.prototype.createOverlayLight = function() {
  186.                 this._overlayLight = new TilingSprite();
  187.                 this._overlayLight.move(0, 0, Graphics.width, Graphics.height);
  188.                 this._baseSprite.addChild(this._overlayLight);
  189.         };
  190.  
  191.  
  192.         Spriteset_Map.prototype.updateOverlayGround = function() {
  193.                 var gndSwitch = $gameSwitches.value(groundSwitch);
  194.                 if (gndSwitch) {
  195.                         var groundIndex = $gameVariables.value(groundVariable);
  196.                         if (this._overlayGroundName !== $gameMap._layerName[2] + '-' + groundIndex) {
  197.                                 this._overlayGroundName = $gameMap._layerName[2] + '-' + groundIndex;
  198.                                 if ($gameMap._layerName[2] !== '') {
  199.                                         this._overlayGround.bitmap = ImageManager.loadOverlay(this._overlayGroundName);
  200.                                 } else {
  201.                                         this._overlayGround.bitmap = ImageManager.loadEmptyBitmap();
  202.                                 }
  203.                         }
  204.                         if (this._overlayGround.bitmap) {
  205.                                 this._overlayGround.origin.x = $gameMap.displayX() * $gameMap.tileWidth();
  206.                                 this._overlayGround.origin.y = $gameMap.displayY() * $gameMap.tileHeight();
  207.                         }
  208.                 }
  209.                 else {
  210.                         if (this._overlayGroundName !== '') {
  211.                                 this._overlayGroundName = '';
  212.                                 this._overlayGround.bitmap = ImageManager.loadEmptyBitmap();
  213.                         }
  214.                 }
  215.         };
  216.  
  217.         Spriteset_Map.prototype.updateOverlayParallax = function() {
  218.                 var parSwitch = $gameSwitches.value(parallaxSwitch);
  219.                 if (parSwitch) {
  220.                         var parIndex = $gameVariables.value(parallaxVariable);
  221.                         if (this._overlayParallaxName !== $gameMap._layerName[1] + '-' + parIndex) {
  222.                                 this._overlayParallaxName = $gameMap._layerName[1] + '-' + parIndex;
  223.                                 if ($gameMap._layerName[1] !== '') {
  224.                                         this._overlayParallax.bitmap = ImageManager.loadOverlay(this._overlayParallaxName);
  225.                                 } else {
  226.                                         this._overlayParallax.bitmap = ImageManager.loadEmptyBitmap();
  227.                                 }
  228.                         }
  229.                         if (this._overlayParallax.bitmap) {
  230.                                 this._overlayParallax.origin.x = $gameMap.displayX() * $gameMap.tileWidth();
  231.                                 this._overlayParallax.origin.y = $gameMap.displayY() * $gameMap.tileHeight();
  232.                         }
  233.                 }
  234.                 else {
  235.                         if (this._overlayParallaxName !== '') {
  236.                                 this._overlayParallaxName = '';
  237.                                 this._overlayParallax.bitmap = ImageManager.loadEmptyBitmap();
  238.                         }
  239.                 }
  240.         };
  241.  
  242.         Spriteset_Map.prototype.updateOverlayLight = function() {
  243.                 var liSwitch = $gameSwitches.value(lightSwitch);
  244.                 if (liSwitch) {
  245.                         var lightIndex = $gameVariables.value(lightVariable);
  246.                         if (this._overlayLightName !== $gameMap._layerName[0] + '-' + lightIndex) {
  247.                                 this._overlayLightName = $gameMap._layerName[0] + '-' + lightIndex;
  248.                                 if ($gameMap._layerName[0] !== '') {
  249.                                         this._overlayLight.bitmap = ImageManager.loadOverlay(this._overlayLightName);
  250.                                 } else {
  251.                                         this._overlayLight.bitmap = ImageManager.loadEmptyBitmap();
  252.                                 }
  253.                         }
  254.                         if (this._overlayLight.bitmap) {
  255.                                 this._overlayLight.origin.x = $gameMap.displayX() * $gameMap.tileWidth();
  256.                                 this._overlayLight.origin.y = $gameMap.displayY() * $gameMap.tileHeight();
  257.                         }
  258.                 }
  259.                 else {
  260.                         if (this._overlayLightName !== '') {
  261.                                 this._overlayLightName = '';
  262.                                 this._overlayLight.bitmap = ImageManager.loadEmptyBitmap();
  263.                         }
  264.                 }
  265.         };
  266. })();


以下链接为JS文件:
Overlay.zip (1.74 KB, 下载次数: 1214, 售价: 1 星屑)
以下链接为范例工程:
OverlayMappingBySWEBOK_v1_1.zip (2.15 MB, 下载次数: 2266, 售价: 1 星屑)
PS: 1. 为了节省空间,已将所有自带audio和img文件全部删除,请在使用前补齐所有文件。
      2. 范例工程修改了默认字体,如果有显示上的问题请在脚本管理器中关掉。
      3. 该js脚本将load image时缺失文件报错处理改为了显示一个空bitmap,需要还原报错处理的童鞋删除该部分代码即可~
      4. (注意)由于脚本更新到v1.3版本,最好在最新版本MV下新建工程再制作(为了创建PixiJSv4的库文件)。原范例工程不另外上传v1.3版,直接将贴中代码替换overlay.js,再将地图标签设置为该脚本帮助内的example即可。

更新履历:
    - 2015/10/24 v1.0 新规作成
    - 2015/10/27 v1.1 解决人物行走图在星号地形之上的问题。(将人物行走图的创建图层改回tilemap,然后将ground的创建放在tilemap.lowerlayer上)
    - 2016/07/10 v1.2 添加地图标签设置,移除图像错误处理。
    - 2017/02/11 v1.3 解决了ground图形位置错误的问题。另外,使用pixiJSv4的版本的话,图像不会模糊(简单来说就是该更新MV了)。

第一次接触JavaScript,有些东西不太熟悉,如有问题请多多包涵,结合该脚本的使用反馈会进行不定期更新~
作者: FHNBHJ    时间: 2015-10-24 22:33
救命恩人啊!!!
作为ULDS狂魔感受到了世界的爱意……
MV!开坑!
作者: swebok    时间: 2015-10-24 22:41
FHNBHJ 发表于 2015-10-24 22:33
救命恩人啊!!!
作为ULDS狂魔感受到了世界的爱意……
MV!开坑!

刚刚发现help中有个词没修改成MV的样式,等到下次更新再说吧(抄帮助文字的时候没修改全的锅...)
作者: 1243852    时间: 2015-10-25 11:21
我去,,MV已经发售了??????有中文么?
作者: 无名小兵    时间: 2015-10-25 19:55
swebok 发表于 2015-10-24 22:41
刚刚发现help中有个词没修改成MV的样式,等到下次更新再说吧(抄帮助文字的时候没修改全的锅...) ...

插件很美 树更美  能伸手不
作者: 千葉玖濑    时间: 2015-10-26 19:10
发现打开菜单后光效就会消失,之后怎么改变变量开关都没有效果……
作者: swebok    时间: 2015-10-26 19:53
千葉玖濑 发表于 2015-10-26 19:10
发现打开菜单后光效就会消失,之后怎么改变变量开关都没有效果……

刚才我测试了一下并没有发现这样的问题,请问一下您是如何操作的?还有同时使用了哪些脚本?
作者: 过眼云烟    时间: 2015-10-27 19:10
报个错误,使用该脚本后星号地形会出现问题,主角永远在最上层
作者: c1996d    时间: 2016-1-11 03:26
感谢分享。看到外站也有差不多的玩意http://forums.rpgmakerweb.com/in ... allaxground-layers/
(不过不懂鸟语真是蛋疼
(树木的素材是来自VS的吗。为什么我找不到。求给一份
作者: robber31    时间: 2016-1-12 13:45
好插件啊
..

作者: aaaassss123    时间: 2016-1-12 15:03
每个地图能不能对应不同的光照或者阴影效果吗?要通过事件来实现还是别的手段?
作者: 大云梦泽    时间: 2016-1-12 18:24
我我..我伸手,我想要,可以给我吗0.0
刚学会用RM,能教我怎么装吗
作者: 寂静的夜里    时间: 2016-2-25 19:30
本帖最后由 寂静的夜里 于 2016-2-25 19:32 编辑

ground 会有点偏左上 这是怎么回事?
做的测试↓(虽然柱子应该是par)

作者: asd6067789    时间: 2016-3-3 22:19
本人適用後發現,圖片無法固定在畫面耶?
是我自己有問題嗎?

Noname.jpg (58.51 KB, 下载次数: 17)

Noname.jpg

作者: asvssk    时间: 2016-3-4 11:35
回头试试,先赞一下
作者: summer依恋    时间: 2016-3-5 23:02
本帖最后由 summer依恋 于 2016-3-5 23:10 编辑

初次接触,请问哪里有具体学习方法吗
用ps绘制吗?素材那里去找呢
作者: rianggi    时间: 2016-3-7 00:49
多谢LZ分享。。。。。。。。。。
作者: 米大湿    时间: 2016-3-8 10:08
楼主 这个插件能实现图片滚动吗 比如说做雾飘动的效果
作者: zldwr12300    时间: 2016-6-21 20:04
寂静的夜里 发表于 2016-2-25 19:30
ground 会有点偏左上 这是怎么回事?
做的测试↓(虽然柱子应该是par)

我也发现了相同的问题,请问你现在解决了吗?
作者: 7pakinek    时间: 2016-7-10 12:48
感谢分享,下载来看看
作者: 柳岳枫    时间: 2016-7-28 22:29
本帖最后由 柳岳枫 于 2016-7-30 23:02 编辑

感谢楼主发布! 同问这个能实现移动吗。
作者: 空城KUUJYOU    时间: 2016-8-28 15:28
感觉非常不错的插件啊
作者: flybike    时间: 2016-10-7 15:17
请问下lz,我在lz的范例下运行正常,但是在自己的工程里却出现了typeError:cannot read property ‘addChild’ of undefined报错,请问有什么解决办法吗?
作者: HellSeraphim    时间: 2017-3-10 01:13
你好,麻烦问下为什么我的插件一打开进入游戏后就提示 “TypeError”  "Cannot read property 'addChild' of undefined",麻烦您有空之后能看下,谢谢
作者: andersen2    时间: 2017-7-30 20:41
还是喜欢这种方式。
作者: 867ken010    时间: 2017-8-2 20:19
這插件太棒了
趕快來試試
謝謝大大分享
作者: suwan    时间: 2017-8-15 14:19
用不了,会报错。楼主还有在吗?
作者: zr369000    时间: 2018-3-11 17:17
谢谢楼主!
作者: 526396987    时间: 2018-3-14 23:48
感谢楼主提供!但是测试的时候好像会出bug哦!
作者: 火焰骑士    时间: 2018-3-17 20:20
效果发一下
作者: qq1139116843    时间: 2018-3-18 16:47
怎么用啊。下好了不知道该怎么用
作者: 灵境追寻-小熊    时间: 2018-3-22 21:16
想要这个插件呢~~楼主~~
作者: Mztck    时间: 2018-3-24 22:23
真的感谢楼主,这个很实用。谢谢
作者: qw5539123    时间: 2018-4-9 21:25
弱弱的问一下,如果增加图层的话,怎么把最开始的地图提取出来
作者: qw5539123    时间: 2018-4-9 21:50
“TypeError”  "Cannot read property 'addChild' of undefined"这个是怎么回事,哭死了,明明你的就用的很好
作者: xieritian    时间: 2018-4-10 16:42
666666感谢大神
作者: babywolf1984    时间: 2018-4-13 18:58
“TypeError”  "Cannot read property 'addChild' of undefined"  +1
作者: wsy676061429    时间: 2018-5-19 19:27
太需要了!!!!!!!!!!!!!!!!!!!!
作者: SagaAngle    时间: 2018-5-20 21:12
大佬,这个森林树木的图块是自己画的吗
作者: mjc2568103    时间: 2018-11-2 14:38
感谢你的分享,
作者: 终鱼    时间: 2018-11-3 22:31
“TypeError”  "Cannot read property 'addChild' of undefined+1,难受的不得了
作者: hiten227    时间: 2018-11-30 04:09
感谢楼主分享 好贴果断收藏
作者: Mochidraw    时间: 2019-1-1 21:24
本帖最后由 Mochidraw 于 2019-1-1 22:06 编辑

请问我使用后
图片位置也放正确,名称也没错
但是图片就是显示不出来(有更新到1.3)


已解决
作者: 相林    时间: 2019-1-3 23:55
这个太有用了 感谢
作者: 无言默默    时间: 2020-2-19 13:36
我好像用不来。。。。
作者: yoienxp    时间: 2020-3-28 18:25
感谢分享已收藏
作者: 一只阿闲    时间: 2020-4-30 15:42
十分感谢,正在尝试运用
作者: 小怪兽奇奇侠    时间: 2020-6-21 22:04
使用website2apk安卓打包后在手机运行app,首次进入某地图时该插件无法发挥作用(遮挡层加载不出来,我的地面层和远景图一样,我推测地面层也没加载出来,加载出来的只是远景图),进入第二个场景后加载出来的是上一个场景的遮挡层和地面层。但是打开菜单关闭菜单后会好。再第二次进入第一个场景时图像加载正常。这是什么原因?
作者: 415774111    时间: 2021-5-21 14:21
已买,希望好用
作者: az1051647181    时间: 2022-3-16 15:16
希望可以使用吧
作者: az1051647181    时间: 2022-3-21 00:00
感谢大佬




欢迎光临 Project1 (https://rpg.blue/) Powered by Discuz! X3.1