/*: * @target MZ * @plugindesc Customizable grid overlay for RPG Maker MZ. Shows a grid on the map with configurable options such as color, opacity, coordinates display, etc * @author Undermax Games | Maxii1996 * @url https://undermax.itch.io/ * * @param Grid Width * @text Grid Cell Width * @desc Width of each grid cell in pixels. * @default 48 * @type number * * @param Grid Height * @text Grid Cell Height * @desc Height of each grid cell in pixels. * @default 48 * @type number * * @param Grid Opacity * @text Grid Opacity * @desc Opacity of the grid lines (0-255). * @default 128 * @type number * * @param Grid Color * @text Grid Line Color * @desc Color of the grid lines (CSS color format). * @default #ffffff * @type string * * @param Fill Grid * @text Fill Grid * @desc Whether to fill the grid cells with a background color. * @default false * @type boolean * * @param Fill Color * @text Fill Color * @desc Background color for the grid cells (CSS color format). * @default #000000 * @type string * * @param Fill Opacity * @text Fill Opacity * @desc Opacity of the background fill (0-255). * @default 64 * @type number * * @param Show Coordinates * @text Show Coordinates * @desc Whether to display X:Y coordinates in the center of each cell. * @default false * @type boolean * * @param Coordinates Color * @text Coordinates Color * @desc Color of the coordinates text (CSS color format). * @default #ff0000 * @type string * * @param Coordinates Size * @text Coordinates Size * @desc Font size of the coordinates text. * @default 12 * @type number * * @param Highlight Impassable * @text Highlight Impassable Tiles * @desc Whether to highlight impassable tiles with a different color. * @default false * @type boolean * * @param Impassable Color * @text Impassable Tile Color * @desc Color used to highlight impassable tiles (CSS color format). * @default #ff0000 * @type string * * @param Impassable Opacity * @text Impassable Tile Opacity * @desc Opacity of the impassable tile highlight (0-255). * @default 128 * @type number * * @command ToggleGrid * @text Toggle Grid * @desc Toggles the visibility of the grid overlay on the map. * * @help * This plugin displays a customizable grid overlay on the map during gameplay. * */ (() => { const pluginName = "MapGridOverlay"; const parameters = PluginManager.parameters(pluginName); const gridWidth = Number(parameters['Grid Width'] || 48); const gridHeight = Number(parameters['Grid Height'] || 48); const gridOpacity = Number(parameters['Grid Opacity'] || 128); const gridColor = String(parameters['Grid Color'] || '#ffffff'); const fillGrid = parameters['Fill Grid'] === 'true'; const fillColor = String(parameters['Fill Color'] || '#000000'); const fillOpacity = Number(parameters['Fill Opacity'] || 64); const showCoordinates = parameters['Show Coordinates'] === 'true'; const coordinatesColor = String(parameters['Coordinates Color'] || '#ff0000'); const coordinatesSize = Number(parameters['Coordinates Size'] || 12); const highlightImpassable = parameters['Highlight Impassable'] === 'true'; const impassableColor = String(parameters['Impassable Color'] || '#ff0000'); const impassableOpacity = Number(parameters['Impassable Opacity'] || 128); let gridVisible = false; PluginManager.registerCommand(pluginName, "ToggleGrid", () => { gridVisible = !gridVisible; }); const _Spriteset_Map_createLowerLayer = Spriteset_Map.prototype.createLowerLayer; Spriteset_Map.prototype.createLowerLayer = function () { _Spriteset_Map_createLowerLayer.call(this); this.createGridOverlay(); }; Spriteset_Map.prototype.createGridOverlay = function () { this._gridSprite = new Sprite(new Bitmap(Graphics.width, Graphics.height)); this._gridSprite.opacity = gridOpacity; this._gridSprite.visible = gridVisible; this.addChild(this._gridSprite); this.refreshGrid(); }; Spriteset_Map.prototype.isTileImpassable = function (tileX, tileY) { const x = tileX; const y = tileY; if (!$gameMap.isPassable(x, y, 2) && !$gameMap.isPassable(x, y, 4) && !$gameMap.isPassable(x, y, 6) && !$gameMap.isPassable(x, y, 8)) { return true; } const events = $gameMap.eventsXy(x, y); for (const event of events) { if (event._priorityType === 1 && !event.isThrough()) { return true; } } return false; }; Spriteset_Map.prototype.refreshGrid = function () { const bitmap = this._gridSprite.bitmap; bitmap.clear(); if (gridVisible) { const width = Graphics.width; const height = Graphics.height; const dx = $gameMap.displayX() * $gameMap.tileWidth(); const dy = $gameMap.displayY() * $gameMap.tileHeight(); const startX = -Math.floor(dx % gridWidth); const startY = -Math.floor(dy % gridHeight); for (let x = startX; x < width; x += gridWidth) { for (let y = startY; y < height; y += gridHeight) { const tileX = Math.floor((x + dx) / gridWidth); const tileY = Math.floor((y + dy) / gridHeight); if (highlightImpassable && this.isTileImpassable(tileX, tileY)) { bitmap.paintOpacity = impassableOpacity; bitmap.fillRect(x, y, gridWidth, gridHeight, impassableColor); } else if (fillGrid) { bitmap.paintOpacity = fillOpacity; bitmap.fillRect(x, y, gridWidth, gridHeight, fillColor); } bitmap.paintOpacity = gridOpacity; bitmap.fillRect(x, y, 1, gridHeight, gridColor); bitmap.fillRect(x, y, gridWidth, 1, gridColor); if (showCoordinates) { bitmap.fontSize = coordinatesSize; bitmap.textColor = coordinatesColor; const text = `${tileX}:${tileY}`; bitmap.drawText(text, x, y, gridWidth, gridHeight, 'center'); } } } bitmap.fillRect(startX + Math.floor(width / gridWidth) * gridWidth, startY, 1, height, gridColor); bitmap.fillRect(startX, startY + Math.floor(height / gridHeight) * gridHeight, width, 1, gridColor); } }; const _Spriteset_Map_update = Spriteset_Map.prototype.update; Spriteset_Map.prototype.update = function () { _Spriteset_Map_update.call(this); if (this._gridSprite) { this._gridSprite.visible = gridVisible; this.refreshGrid(); } }; })();