NinePatch Margin Visualizer

🔭 Overview

The NinePatch Margin Visualizer is a Godot editor plugin designed to provide clear visual feedback for NinePatchRect nodes.

It solves common problems developers face when editing NinePatch textures: misunderstanding which areas of a texture are stretchable, confusing margin boundaries, and difficulty previewing how the texture behaves under resizing. This plugin offers a visual overlay in the inspector, making it immediately clear how each slice of the texture affects runtime stretching.

🚀 Features

• Inspector Integration

  • Seamlessly integrated into the Godot Editor Inspector.
  • Appears automatically whenever you select a NinePatchRect node, providing immediate context without cluttering your workspace.

• Smart Visualization

  • Stretch Regions: Features a "Show Stretch Regions" toggle that overlays a hatched pattern on the stretchable areas of your texture.
    • Blue Hatching: Indicates the central stretch region.
    • Green/Yellow Hatching: Distinction between horizontal and vertical stretch zones helps you instantly verify your margin settings.
  • Clear Boundaries: Draws precise lines indicating exactly where the patch margins slice your texture.

• Live Feedback

  • Real-time updates as you modify Patch Margin properties (Left, Top, Right, Bottom).
  • Instantly see how changes affect the stretchable and fixed regions of your UI element.

• Customizable UI

  • Expanded View: Toggle between a compact preview and a larger detailed view to inspect fine details.
  • Persistent Settings: Your preferences for view size and overlays are saved to EditorSettings, remembering your setup across sessions.

• Theme Aware

  • Automatically adapts to your Editor's theme colors.
  • High-contrast lines ensure visibility whether you are using a Light or Dark theme.

• Zero Runtime Cost

  • This is an Editor-Only plugin.
  • All logic is contained within the editor; absolutely no code or overhead is added to your exported game.

🌱 Installation

Method 1: Asset Library (Recommended)

1. Open the AssetLib tab in the Godot Editor.
2. Search for "NinePatch Margin Visualizer".
3. Click on the result and select Download.
4. Once downloaded, click Install to add the files to your project.
5. Go to Project -> Project Settings -> Plugins and enable the plugin.

Method 2: Manual Installation

1. Download the latest release.
2. Copy the addons/ninepatch_margin_visualizer folder into your project's addons/ directory.
3. Go to Project -> Project Settings -> Plugins.
4. Enable NinePatch Margin Visualizer.

🎮 Usage

1. Select any NinePatchRect node in your scene.
2. Look for the visualizer panel in the Inspector.
3. Use the checkboxes in the top-left corner of the preview to:
   • Toggle stretch-region overlays.
   • Switch between compact and expanded views.
4. Edit the NinePatchRect properties (Patch Margin); the preview will update live.

⚙️ Technical Details

This plugin uses an EditorInspectorPlugin to inject a custom control into the inspector whenever a NinePatchRect is edited.

• NinePatchMarginVisualizer (EditorInspectorPlugin): Handles the can_handle callback to detect NinePatchRect nodes and instantiates the preview control.
• NinePatchMarginPreview (EditorProperty): The custom control that handles the drawing logic. It listens for property changes on the edited object and triggers a redraw of the margin lines and hatch patterns.
• Smart Caching: Hatch patterns are generated procedurally to ensure they look crisp at any zoom level, but cached to minimize performance impact.

Note: This plugin is editor-only. It does not inject code into your exported game and has no impact on runtime performance.

🔎 Demo

A demo scene is included in demos/ninepatch_margin_visualizer/ for experimentation and testing. The demo shows a placeholder texture and allows live interaction with margin adjustments.

⚖️ License

This project is licensed under the MIT License - see the LICENSE file for details.