Project1

标题: 【插件】地图显示小地图 [打印本页]

---

作者: 过眼云烟    时间: 2015-11-23 22:19
标题: 【插件】地图显示小地图
这个插件的写法借鉴了rpg maker web 上的Hajime Hoshi的MiniMap的算法。
我的初衷是模仿空之轨迹系列的小地图，国外已经有好几个版本的小地图了，但是都不智能。
如果玩家用默认的插件画出来的地图歪瓜裂枣，我的这个插件意在帮助玩家在自动绘制
的基础之上可以根据自己需求进行调整，绘制出诸如场景出入口，旅馆，一般建筑，教堂，武器店等，
让玩家一目了然。同时该小地图会在人物对话或者事件执行或者打开开关的时候自动隐藏，不会永远
傻儿吧唧的在那里不解风情的。

接下来的版本会考虑配合我的世界地图插件和迷雾探索插件的，敬请期待。

最后，诚挚的感谢我的好友高须小龙提供的图片素材，他亲自做的哦~~~

效果1：只要你有耐心，城镇中的不同建筑物颜色都可以标记出来


效果2：更智能的提醒玩家出入口位置


修正方法：利用区块region id功能


请将这个文件放在pictures目录下

JAVASCRIPT 代码复制下载

//=============================================================================
// MrLiu_MiniMap.js
//=============================================================================
/*:
* @plugindesc 在RMMV游戏的地图界面上显示小地图
* @author MrLiu-过眼云烟
 * @param NotShowMiniMap
 * @desc 开启此开关则不显示小地图，多用于剧情等特殊场景。
 * @default 49
 *
* @help 这个插件的写法借鉴了rpg maker web 上的Hajime Hoshi的MiniMap的算法
* 使用方法是在地图的备注中加入<mini_map> 就会自动显示小地图，您可以通过打开开关
* 或者NPC对话或者事件页运行的时候会自动隐藏。您可自行修改本插件78行--110行对应的区块
* 颜色。实现您在小地图上的修改。能够更智能的画出您满意的小地图。请将minimap.png文件
* 放在picture目录下，UI图片制作者是我的好友高须小龙，在此对他致以诚挚的感谢。
* 目前我已经创建的图块颜色对应如下：1.边界[255,255,255,255] 2.通行补充[95, 147, 207, 212] 3不可通行补充[128, 128, 128, 192]4.场景出入口[255,256,75,50]
* 5.一般建筑[11,43,68,206] 6.商店[74,135,65,112]7.冒险者工会[144,9,24,255]8.教会[140,90,53,26]9.旅馆[40,32,47,25]
* 您可进行随意修改。
*/
 
 
 
 
var parameters = PluginManager.parameters('MrLiu_MiniMap');
var notShowSwitch = Number(parameters['NotShowMiniMap']);
 
 
(function() {
    var miniMapBitmaps = {};
 
    var MINI_MAP_MARGIN = 50;
    var MINI_MAP_SIZE = 150;//184;
    var POSITION_RADIUS = 4;
    var COLORS = {
        'walk':     [95, 147, 207, 212],
        'mountain': [255, 255, 255, 0],//224
        'other':    [128, 128, 128, 0],//192
    };
    Bitmap.prototype.replacePixels = function(pixels) {
        var imageData = this._context.createImageData(this.width, this.height);
        imageData.data.set(pixels);
        this._context.putImageData(imageData, 0, 0);
        this._setDirty();
    };
 
    function isWater(gameMap, x, y) {
        if (gameMap.isOverworld()) {
            var tileId = gameMap.autotileType(x, y, 0);//regionId
            if ([0, 1, 2, 3, 7].some(function(id) {
                return id === tileId;
            })) {
                return true;
            }
        }
        return gameMap.isShipPassable(x, y);
    }
 
    var Scene_Map_onMapLoaded = Scene_Map.prototype.onMapLoaded;
    Scene_Map.prototype.onMapLoaded = function() {
        Scene_Map_onMapLoaded.call(this);
        if (!$dataMap.meta.mini_map) {
            return;
        }
        if ($gameMap.mapId() in miniMapBitmaps) {
            return;
        }
        var pixels = new Uint8Array(4 * $dataMap.width * $dataMap.height);
        var p = 0;
        for (var j = 0; j < $dataMap.height; j++) {
            for (var i = 0; i < $dataMap.width; i++) {
                var color = null;
                if ($gameMap.checkPassage(i, j, 0x0f)) {
                    color = COLORS['walk'];
                } else if (!isWater($gameMap, i, j)) {
                    color = COLORS['mountain'];
                                }else {
                    color = COLORS['other'];
                }
/*1.边界[255,255,255,255] 2.通行补充[95, 147, 207, 212] 3不可通行补充[128, 128, 128, 192]4.场景出入口[255,256,75,50]
5.一般建筑[11,43,68,206] 6.商店[74,135,65,112]7.冒险者工会[144,9,24,255]8.教会[140,90,53,26]9.旅馆[40,32,47,255]
 
*/
                                switch($gameMap.regionId(i, j)) {
                                        case 0:
                                                break;
                                        case 1:
                                                color = [255,255,255,212];
                                                break;
                                        case 2:
                                                color = [95, 147, 207, 212];
                                                break;
                                        case 3:
                                                color = [128, 128, 128, 212];
                                                break;
                                        case 4:
                                                color = [125,256,75,212];
                                                break;
                                        case 5:
                                                color = [11,43,68,212];
                                                break;
                                        case 6:
                                                color = [74,135,65,212];
                                                break;
                                        case 7:
                                                color = [144,9,24,212];
                                                break;
                                        case 8:
                                                color = [140,90,53,212];
                                                break;
                                        case 9:
                                                color = [40,32,47,212];
                                                break;
                                        case 10:
                                                color = [74,135,65,212];
                                                break;                                                                                                                                                                                                                                                                                                                                                
                                };
 
                                //console.log($gameMap.regionId(i, j));
                pixels[p]   = color[0];
                pixels[p+1] = color[1];
                pixels[p+2] = color[2];
                pixels[p+3] = color[3];
                p += 4;
            }
        }
        var bitmap = new Bitmap($dataMap.width, $dataMap.height);
        bitmap.replacePixels(pixels);
        miniMapBitmaps[$gameMap.mapId()] = bitmap;
    };
 
    var Spriteset_Map_createUpperLayer = Spriteset_Map.prototype.createUpperLayer;
    Spriteset_Map.prototype.createUpperLayer = function() {
        Spriteset_Map_createUpperLayer.call(this);
        this.createMiniMap();
    };
 
    Spriteset_Map.prototype.createMiniMap = function() {
                this._miniMapUI = new Sprite();
                this._miniMapUI.bitmap = ImageManager.loadPicture('minimap');
        this.addChild(this._miniMapUI);
                this._miniMapSprite = new Sprite();
                this.addChild(this._miniMapUI);
                this._miniMapSprite = new Sprite();
        this._miniMapCurrentPositionSprite = new Sprite();
        var positionBitmap = new Bitmap(POSITION_RADIUS * 2, POSITION_RADIUS * 2);
        positionBitmap.drawCircle(POSITION_RADIUS, POSITION_RADIUS, POSITION_RADIUS, '#ff0000');
        this._miniMapCurrentPositionSprite.bitmap = positionBitmap;
        this.addChild(this._miniMapSprite);
        this.addChild(this._miniMapCurrentPositionSprite);
    };
 
    var Spriteset_Map_update = Spriteset_Map.prototype.update;
    Spriteset_Map.prototype.update = function() {
        Spriteset_Map_update.call(this);
        this.updateMiniMap();
    };
 
    Spriteset_Map.prototype.updateMiniMap = function() {
        var miniMapBitmap = miniMapBitmaps[$gameMap.mapId()];
        if (!miniMapBitmap ||($gameMap._interpreter.isRunning()) || ($gameSwitches.value(notShowSwitch) == true)) {
            this._miniMapSprite.visible = false;
            this._miniMapCurrentPositionSprite.visible = false;
                        this._miniMapUI.visible = false;
            return;
        }
        var size = Math.max(miniMapBitmap.width, miniMapBitmap.height);
        var miniMapScale = MINI_MAP_SIZE / size;
        var miniMapX = Graphics.width - miniMapBitmap.width * miniMapScale - MINI_MAP_MARGIN;
        var miniMapY = MINI_MAP_MARGIN;;//Graphics.height - miniMapBitmap.height * miniMapScale - MINI_MAP_MARGIN;
        this._miniMapSprite.bitmap = miniMapBitmap;
        this._miniMapSprite.x = miniMapX;
        this._miniMapSprite.y = miniMapY;
        this._miniMapSprite.scale.x = miniMapScale;
        this._miniMapSprite.scale.y = miniMapScale;
        this._miniMapCurrentPositionSprite.x = miniMapX + ($gamePlayer.x * miniMapScale) - POSITION_RADIUS;
        this._miniMapCurrentPositionSprite.y = miniMapY + ($gamePlayer.y * miniMapScale) - POSITION_RADIUS;
                this._miniMapUI.visible = true;
        this._miniMapSprite.visible = true;
        this._miniMapCurrentPositionSprite.visible = true;
    };
 
})();

//=============================================================================


// MrLiu_MiniMap.js


//=============================================================================


/*:


* @plugindesc 在RMMV游戏的地图界面上显示小地图


* @author MrLiu-过眼云烟


 * @param NotShowMiniMap


 * @desc 开启此开关则不显示小地图，多用于剧情等特殊场景。


 * @default 49


 *


* @help 这个插件的写法借鉴了rpg maker web 上的Hajime Hoshi的MiniMap的算法


* 使用方法是在地图的备注中加入<mini_map> 就会自动显示小地图，您可以通过打开开关


* 或者NPC对话或者事件页运行的时候会自动隐藏。您可自行修改本插件78行--110行对应的区块


* 颜色。实现您在小地图上的修改。能够更智能的画出您满意的小地图。请将minimap.png文件


* 放在picture目录下，UI图片制作者是我的好友高须小龙，在此对他致以诚挚的感谢。


* 目前我已经创建的图块颜色对应如下：1.边界[255,255,255,255] 2.通行补充[95, 147, 207, 212] 3不可通行补充[128, 128, 128, 192]4.场景出入口[255,256,75,50]


* 5.一般建筑[11,43,68,206] 6.商店[74,135,65,112]7.冒险者工会[144,9,24,255]8.教会[140,90,53,26]9.旅馆[40,32,47,25]


* 您可进行随意修改。


*/


 


 


 


 


var parameters = PluginManager.parameters('MrLiu_MiniMap');


var notShowSwitch = Number(parameters['NotShowMiniMap']);


 


 


(function() {


    var miniMapBitmaps = {};


 


    var MINI_MAP_MARGIN = 50;


    var MINI_MAP_SIZE = 150;//184;


    var POSITION_RADIUS = 4;


    var COLORS = {


        'walk':     [95, 147, 207, 212],


        'mountain': [255, 255, 255, 0],//224


        'other':    [128, 128, 128, 0],//192


    };


    Bitmap.prototype.replacePixels = function(pixels) {


        var imageData = this._context.createImageData(this.width, this.height);


        imageData.data.set(pixels);


        this._context.putImageData(imageData, 0, 0);


        this._setDirty();


    };


 


    function isWater(gameMap, x, y) {


        if (gameMap.isOverworld()) {


            var tileId = gameMap.autotileType(x, y, 0);//regionId


            if ([0, 1, 2, 3, 7].some(function(id) {


                return id === tileId;


            })) {


                return true;


            }


        }


        return gameMap.isShipPassable(x, y);


    }


 


    var Scene_Map_onMapLoaded = Scene_Map.prototype.onMapLoaded;


    Scene_Map.prototype.onMapLoaded = function() {


        Scene_Map_onMapLoaded.call(this);


        if (!$dataMap.meta.mini_map) {


            return;


        }


        if ($gameMap.mapId() in miniMapBitmaps) {


            return;


        }


        var pixels = new Uint8Array(4 * $dataMap.width * $dataMap.height);


        var p = 0;


        for (var j = 0; j < $dataMap.height; j++) {


            for (var i = 0; i < $dataMap.width; i++) {


                var color = null;


                if ($gameMap.checkPassage(i, j, 0x0f)) {


                    color = COLORS['walk'];


                } else if (!isWater($gameMap, i, j)) {


                    color = COLORS['mountain'];


                                }else {


                    color = COLORS['other'];


                }


/*1.边界[255,255,255,255] 2.通行补充[95, 147, 207, 212] 3不可通行补充[128, 128, 128, 192]4.场景出入口[255,256,75,50]


5.一般建筑[11,43,68,206] 6.商店[74,135,65,112]7.冒险者工会[144,9,24,255]8.教会[140,90,53,26]9.旅馆[40,32,47,255]


 


*/


                                switch($gameMap.regionId(i, j)) {


                                        case 0:


                                                break;


                                        case 1:


                                                color = [255,255,255,212];


                                                break;


                                        case 2:


                                                color = [95, 147, 207, 212];


                                                break;


                                        case 3:


                                                color = [128, 128, 128, 212];


                                                break;


                                        case 4:


                                                color = [125,256,75,212];


                                                break;


                                        case 5:


                                                color = [11,43,68,212];


                                                break;


                                        case 6:


                                                color = [74,135,65,212];


                                                break;


                                        case 7:


                                                color = [144,9,24,212];


                                                break;


                                        case 8:


                                                color = [140,90,53,212];


                                                break;


                                        case 9:


                                                color = [40,32,47,212];


                                                break;


                                        case 10:


                                                color = [74,135,65,212];


                                                break;                                                                                                                                                                                                                                                                                                                                                


                                };


 


                                //console.log($gameMap.regionId(i, j));


                pixels[p]   = color[0];


                pixels[p+1] = color[1];


                pixels[p+2] = color[2];


                pixels[p+3] = color[3];


                p += 4;


            }


        }


        var bitmap = new Bitmap($dataMap.width, $dataMap.height);


        bitmap.replacePixels(pixels);


        miniMapBitmaps[$gameMap.mapId()] = bitmap;


    };


 


    var Spriteset_Map_createUpperLayer = Spriteset_Map.prototype.createUpperLayer;


    Spriteset_Map.prototype.createUpperLayer = function() {


        Spriteset_Map_createUpperLayer.call(this);


        this.createMiniMap();


    };


 


    Spriteset_Map.prototype.createMiniMap = function() {


                this._miniMapUI = new Sprite();


                this._miniMapUI.bitmap = ImageManager.loadPicture('minimap');


        this.addChild(this._miniMapUI);


                this._miniMapSprite = new Sprite();


                this.addChild(this._miniMapUI);


                this._miniMapSprite = new Sprite();


        this._miniMapCurrentPositionSprite = new Sprite();


        var positionBitmap = new Bitmap(POSITION_RADIUS * 2, POSITION_RADIUS * 2);


        positionBitmap.drawCircle(POSITION_RADIUS, POSITION_RADIUS, POSITION_RADIUS, '#ff0000');


        this._miniMapCurrentPositionSprite.bitmap = positionBitmap;


        this.addChild(this._miniMapSprite);


        this.addChild(this._miniMapCurrentPositionSprite);


    };


 


    var Spriteset_Map_update = Spriteset_Map.prototype.update;


    Spriteset_Map.prototype.update = function() {


        Spriteset_Map_update.call(this);


        this.updateMiniMap();


    };


 


    Spriteset_Map.prototype.updateMiniMap = function() {


        var miniMapBitmap = miniMapBitmaps[$gameMap.mapId()];


        if (!miniMapBitmap ||($gameMap._interpreter.isRunning()) || ($gameSwitches.value(notShowSwitch) == true)) {


            this._miniMapSprite.visible = false;


            this._miniMapCurrentPositionSprite.visible = false;


                        this._miniMapUI.visible = false;


            return;


        }


        var size = Math.max(miniMapBitmap.width, miniMapBitmap.height);


        var miniMapScale = MINI_MAP_SIZE / size;


        var miniMapX = Graphics.width - miniMapBitmap.width * miniMapScale - MINI_MAP_MARGIN;


        var miniMapY = MINI_MAP_MARGIN;;//Graphics.height - miniMapBitmap.height * miniMapScale - MINI_MAP_MARGIN;


        this._miniMapSprite.bitmap = miniMapBitmap;


        this._miniMapSprite.x = miniMapX;


        this._miniMapSprite.y = miniMapY;


        this._miniMapSprite.scale.x = miniMapScale;


        this._miniMapSprite.scale.y = miniMapScale;


        this._miniMapCurrentPositionSprite.x = miniMapX + ($gamePlayer.x * miniMapScale) - POSITION_RADIUS;


        this._miniMapCurrentPositionSprite.y = miniMapY + ($gamePlayer.y * miniMapScale) - POSITION_RADIUS;


                this._miniMapUI.visible = true;


        this._miniMapSprite.visible = true;


        this._miniMapCurrentPositionSprite.visible = true;


    };


 


})();

MrLiu_MiniMap.rar

2015-11-23 22:17 上传

点击文件名下载附件

36.97 KB, 下载次数: 1789

---

作者: 墨凌羽    时间: 2015-11-24 00:01
实时绘制？

---

作者: buchongfu    时间: 2015-11-24 06:53
太好了，希望大神能写个MV版的XAS插件

---

作者: longshili    时间: 2015-11-24 16:24
改了宽屏分辨率minimap.png没有和地图对齐，在屏幕中间，谢谢修复

---

作者: ytqlovehjl    时间: 2015-12-4 19:49
大哥还是厉害。。

---

作者: barrysandy    时间: 2015-12-29 22:57
这个JavaScript脚本咋个用的？

---

作者: np5jx61    时间: 2015-12-30 14:02
能不能改成按M或某个键开启关闭地图啊。

---

作者: dujian15    时间: 2016-1-4 21:49
楼主您好，您的插件真的很不错，很适合做一些迷宫类的游戏。

对于脚 本新手来说，想做一些简单的改进，如在菜单scene里新增一个窗口，在窗口当中显示小地图。

不知楼主是否可以提供菜单版本，或者能够提供一些简单的修改思路，万分感谢。

---

作者: 1379490374    时间: 2016-1-22 14:37
插件怎么用呀？放在js文件夹没用

---

作者: mitori10feet    时间: 2016-2-16 13:18
minimap 有辦法只顯示玩家附近的區域嗎？ 移動之後minmap繪製的區域會跟著改變

---

作者: summer依恋    时间: 2016-2-16 18:25
同7楼，但我比他还不堪，很久没做游戏加上才用mv，啥都不清楚了，能麻烦楼主给个具体实现的方法吗

---

作者: CFRoo    时间: 2016-3-5 20:16

np5jx61 发表于 2015-12-30 14:02
能不能改成按M或某个键开启关闭地图啊。

我不知道怎么调用M这个按键,我是用 上翻页 这个键来代替的,也是刚接触MV,根据楼主的思路...
我用最笨的办法 实现的 呼出/隐藏.....希望以后有大神能在 脚本上 实现...谢谢

---

作者: summer依恋    时间: 2016-3-11 23:06

CFRoo 发表于 2016-3-5 20:16
我不知道怎么调用M这个按键,我是用 上翻页 这个键来代替的,也是刚接触MV,根据楼主的思路...
我用最笨的办 ...

是这样吧？才找到按键，但很奇怪有时按一下就关，有时要按好多下，开也一样有时要按好几下

---

作者: 幽蓝天灵    时间: 2016-3-27 08:50
小地图的大小怎么改啊，感觉很大

---

作者: salvareless    时间: 2016-3-27 09:28

幽蓝天灵 发表于 2016-3-27 08:50
小地图的大小怎么改啊，感觉很大

脚本28行到30行有定义：
    var MINI_MAP_MARGIN = 0;  //距离右上角的边距
    var MINI_MAP_SIZE = 160;  //最长边的显示范围
    var POSITION_RADIUS = 2;  //主角所在位置点大小
修改它们就可以了。
只改变地图显示大小的话，改第二个，注意，这是定义最长边的长度用的，也就是说，规定了一个最大为160X160的框，来显示地图，如果长了或者高了都会自动缩小。

---

作者: salvareless    时间: 2016-3-27 09:55

summer依恋 发表于 2016-3-11 23:06
是这样吧？才找到按键，但很奇怪有时按一下就关，有时要按好多下，开也一样有时要按好几下
...

你们这公共事件写得= =也太…………这样写把，简洁很多。在你需要启动按键来控制小地图显示的时候打开11号开关就行了，也不会出现你们讨论的按了不显示或者按几下才显示的问题。它自己就能并行处理，也不用在每个地图都多放一个事件= =


哦哦，对了，RPGMaker有个很奇怪的情况，那就是做事件的时候所有跟按钮又关的判断，在它对应的操作结束的时候一定要加一句“等待6-12帧”，不然就算你迅速点一下按键，也有可能出现读取的时候认为你按了N下的情况。

---

作者: joepie    时间: 2016-4-4 22:24
不错 比外语的都好用！{:2_249:}

---

作者: ankxy    时间: 2016-4-5 10:27
云烟大佬必须要顶{:2_268:}

---

作者: garland    时间: 2017-2-14 09:48
厉害了我的哥

---

作者: peacomm    时间: 2017-2-16 19:35
感谢楼主，虽然现在我还用不到

---

作者: falling-    时间: 2017-11-24 23:45
想问下具体怎么调用开关啊

---

作者: holicgl    时间: 2017-11-25 02:45
绝了，很炫。。。

---

作者: falling-    时间: 2017-11-25 12:39

CFRoo 发表于 2016-3-5 20:16
我不知道怎么调用M这个按键,我是用 上翻页 这个键来代替的,也是刚接触MV,根据楼主的思路...
我用最笨的办 ...

求具体开关调用的方法~

---

作者: xbpk_9751    时间: 2017-12-9 20:23
好棒哦，支持下！！

---

作者: 526396987    时间: 2018-3-6 02:03
请问大佬，这个插件有局部放大功能吗？因为地图太大，导致显示的小地图过于压缩，显得太紧密了，如果可以根据角色的位置绘制周边一定范围内的地图就很好了~~
这样角色在一张地图的不同位置时，小地图也会跟着改变= =
准确说就是小地图随着人物的移动而移动
不过还是力挺，目前来说已经很完美了！

---

作者: hiten227    时间: 2018-11-30 04:53
感谢楼主分享

---

作者: 千城落水千城梦    时间: 2018-12-3 10:33
怎么用的在地图注释当中加入 <mini_map> 不能显示小地图

---

作者: 新手0123    时间: 2019-1-6 22:21
谢谢大佬，测试效果很棒

---

作者: mtqinglong    时间: 2019-1-11 23:19
大神！！！

---

作者: hero2589    时间: 2019-1-14 21:49
楼主这个插件可以拿去商用吗

---

作者: ccArtermices    时间: 2019-7-28 20:28
楼主，NotShowMiniMap不知道怎么用，可以告诉我怎么用吗？

---

作者: Q98486    时间: 2020-2-23 20:52
谢谢，是我心目中想要的地图

---

作者: 九重凛凛萌    时间: 2020-2-25 12:53
有点厉害额，羡慕中。。。。

---

作者: 宁静的小P    时间: 2020-3-12 12:15
大神就是大神，我是来膜拜的

---

作者: MAXHSS    时间: 2020-5-5 11:17
大佬，能修改透明度和位置吗？想把地图放右上角

---

作者: luzekai    时间: 2020-6-25 05:23
好                             

---

作者: dubenhan    时间: 2020-6-26 23:41
这也太棒了！！

---

作者: gyg6284507    时间: 2021-1-11 08:01
Minecraft的既视感

---

作者: 真邪王眼    时间: 2021-3-22 12:52
感谢大佬。太好了。牛逼。大叫牛逼

---

作者: zjzhp123    时间: 2021-3-23 19:09
想问问大佬，可以用这个插件实现任务地点提示吗？
比如本来是普通的地图，接了某个任务后，任务地点在小地图上会自动变红，提示我们要去那里。

---

作者: getme2    时间: 2021-5-31 06:11
這地圖功能挺好的呀~感謝大老

---

作者: wudicc1    时间: 2021-8-18 23:50
厉害厉害666

---

作者: liu374152774    时间: 2022-1-6 23:58

感谢分享~~！

---

作者: hmn1030    时间: 2022-2-18 18:35
感谢分享6666

---

作者: huire19992000    时间: 2023-4-3 03:20
非常感谢大佬分享！真的是很实用的功能

---

欢迎光临 Project1 (https://rpg.blue/)

Powered by Discuz! X3.1