ImGizmo2D 1.0.0

ImGizmo2D

Draggable 2D gizmos for Dear ImGui. C# port using Hexa.NET.ImGui.

I made this because ImGuizmo only does 3D, and every time I needed to drag a hitbox or position something in a 2D editor I had to write the same handle interaction code from scratch. So I just made it a library.

Info: This is a C# port of ImGizmo2D. The original project is written in C++. This port aims to provide the same functionality and API concepts for C# and Hexa.NET.ImGui. I ported even this README. I just made this public as a starting point from other people that might find this useful.

What it do

Drop-in 2D gizmos that render on any ImGui drawlist. You give it references to your data, it draws handles, user drags them, your data updates. That's it.

• Translate - move with free or axis-locked handles
• Rect - resizable box with corner handles
• Circle - center + radius edge handle
• Rotate - angle ring with drag handle
• Scale - per-axis scale with square handles
• Point - single draggable point
• Line - two endpoints
• Polygon - N draggable vertices

All gizmos support snap-to-grid, custom colors, and zoom/pan.

Usage

using ImGuizmo2D;

var drawList = ImGui.GetWindowDrawList();

// set up once per frame
ImGizmo2D.SetDrawList(drawList);
ImGizmo2D.SetViewRect(canvasPos, canvasSize);
ImGizmo2D.SetViewTransform(camX, camY, zoom);
ImGizmo2D.BeginFrame();

// use what you need
ImGizmo2D.Translate("player", ref pos.X, ref pos.Y);
ImGizmo2D.Rect("hitbox", ref x, ref y, ref w, ref h);
ImGizmo2D.Circle("range", ref cx, ref cy, ref radius);
ImGizmo2D.Rotate("turret", cx, cy, ref angle);
ImGizmo2D.Scale("sprite", x, y, ref sx, ref sy);

ImGizmo2D.EndFrame();

Every function returns bool - true if the value changed that frame.

Customization

ImGizmo2D.SetColors(idle, hover, active);  // 32-bit ImGui colors
ImGizmo2D.SetLineColor(col);
ImGizmo2D.SetFillColor(col);
ImGizmo2D.SetAxisColors(xCol, yCol);
ImGizmo2D.SetHandleRadius(8.0f);
ImGizmo2D.SetLineThickness(3.0f);
ImGizmo2D.SetSnapGrid(16.0f);             // 0 = no Snap

Query state

if (ImGizmo2D.IsActive())
    Console.WriteLine($"dragging: {ImGizmo2D.GetActiveId()}");

if (ImGizmo2D.IsHovered())
    // Don't pan camera while hovering a handle

Differences from the C++ version

There is an ImGizmo2D.EndFrame for two reasons:

• I like these kind of operations to have their counterpart defined always, even when it's not needed. Just for symmetry and ease of adoption if the functionality is filled in later.
• In ImGizmo2D.BeginFrame I added _context.DrawList.PushClipRect(_context.ViewOrigin, _context.ViewOrigin + _context.ViewSize, true); as I needed the clippend due to my usage. You might need to modify that.

Apart from that, I added the utility function public static uint Color(byte r, byte g, byte b, byte a) because Hexa.NET.ImGui lacks ImGuiCol32, so this helps creating colors easier.

Building the demo

Sorry I'm lazy to do a demo.

Needs Hexa.NET.ImGui and a configured ImGui backend.

License

MIT