SampleImplementation

For this stage, we will duplicate the larger example from the Dear Imgui readme so you can see some of the inherent differences in Monogame from the parent project.

If you have not already configured your game for the MonoGame.ImGuiNet project, you should start with the Project Setup page and then come back here.

Add the Renderer

First, we must add the following 4 sections of code to the basic Game1.cs.

1. Declare a new variable for the ImgGuiRenderer to the class variables of Game1.cs:

public class Game1 : Game
{
    private GraphicsDeviceManager _graphics;
    private SpriteBatch _spriteBatch;
    public static ImGuiRenderer GuiRenderer;

2. Instance the GuiRenderer in the Initialise method:

protected override void Initialize()
{
    GuiRenderer = new ImGuiRenderer(this);

    base.Initialize();
}

3. Rebuild the font atlas in the LoadContent method:

protected override void LoadContent()
{
    _spriteBatch = new SpriteBatch(GraphicsDevice);

    GuiRenderer.RebuildFontAtlas();
}

4. Call the layout methods after base.Draw in the Draw method:

protected override void Draw(GameTime gameTime)
{
    GraphicsDevice.Clear(Color.CornflowerBlue);

    base.Draw(gameTime);

    GuiRenderer.BeginLayout(gameTime);

    GuiRenderer.EndLayout();
}

Think of these last two calls in the same way as MonoGame's _spriteBatch.Begin and _spriteBatch.End All of our actual drawing of Dear ImGui's elements will happen between these two lines.

Add a test tool

Now we're ready to add our actual functional and informative elements to the Gui so we can do things. Our first tool will be very simple. Add the following two lines between GuiRenderer.BeginLayout and GuiRenderer.EndLayout:

ImGui.Begin("My First Tool");

ImGui.End();

With those two lines, you should now be able to run the game and have a simple window that can be moved, resized and minimised as follows:

Populate the tool

ImGui.Begin and ImGui.End can also be thought of in a similar manner to MonoGame's _spriteBatch.Begin and _spriteBatch.End - but everything inside them will "belong to that specific tool.

We will first add a menu and simple method of "closing" the tool.

To do so, you will need to add a new private bool _toolActive; to Game1.cs's class variables and initialise it to true. Then modify the code inside GuiRenderer.BeginLayout and GuiRenderer.EndLayout as follows:

if (_toolActive)
{
    ImGui.Begin("My First Tool", ref _toolActive, ImGuiWindowFlags.MenuBar);
    if (ImGui.BeginMenuBar())
    {
        if (ImGui.BeginMenu("File"))
        {
            if (ImGui.MenuItem("Open..", "Ctrl+O")) { /* Do stuff */ }
            if (ImGui.MenuItem("Save", "Ctrl+S")) { /* Do stuff */ }
            if (ImGui.MenuItem("Close", "Ctrl+W")) { _toolActive = false; }
            ImGui.EndMenu();
        }
        ImGui.EndMenuBar();
    }
    ImGui.End();
}

The resulting tool should now have a menu bar with three options and a exit button. The exit button and the "Close" option on the File menu should close the tool (but there is currently no way to re-open it without restarting the game!)

Now for "the rest of the owl".

Note that, in it's current state, there seems to be noticable friction between the ImguiNet's use of System.Numerics and MonoGame's native types such as Vector4 and Color so the following code is a bit clunky but it does work.

Firstly, you will need to add System.Numerics.Vector4 _colorV4; to Game1.cs's class variables. Then in Initialise set it as follows:

_colorV4 = Color.CornflowerBlue.ToVector4().ToNumerics();

And then change the call to GraphicsDevice.Clear at the start of Game1.cs's Draw method as follows:

GraphicsDevice.Clear(new Color(_colorV4));

Then add the following code just before the call to ImGui.End() but after the if statement controlling the menu bar:

// Edit a color stored as 4 floats
ImGui.ColorEdit4("Color", ref _colorV4);

// Generate samples and plot them
var samples = new float[100];
for (var n = 0; n < samples.Length; n++)
    samples[n] = (float) Math.Sin(n * 0.2f + ImGui.GetTime() * 1.5f);
ImGui.PlotLines("Samples", ref samples[0], 100);

// Display contents in a scrolling region
ImGui.TextColored(new Vector4(1, 1, 0, 1).ToNumerics(), "Important Stuff");
ImGui.BeginChild("Scrolling", new System.Numerics.Vector2(0), true);
    for (var n = 0; n < 50; n++)
        ImGui.Text($"{n:0000}: Some text");
ImGui.EndChild();

Running the game now, should show the full demo tool as follows:

The whole code

Below is what should now be your entire Game1.cs for reference:

public class Game1 : Game
{
    private GraphicsDeviceManager _graphics;
    private SpriteBatch _spriteBatch;

    public static ImGuiRenderer GuiRenderer;

    System.Numerics.Vector4 _colorV4;
    bool _toolActive;

    public Game1()
    {
        _graphics = new GraphicsDeviceManager(this);
        Content.RootDirectory = "Content";
        IsMouseVisible = true;
        _graphics.PreferredBackBufferWidth = 1280;
        _graphics.PreferredBackBufferHeight = 720;
    }

    protected override void Initialize()
    {
        GuiRenderer = new ImGuiRenderer(this);

        _toolActive = true;
        _colorV4 = Color.CornflowerBlue.ToVector4().ToNumerics();

        base.Initialize();
    }

    protected override void LoadContent()
    {
        _spriteBatch = new SpriteBatch(GraphicsDevice);

        GuiRenderer.RebuildFontAtlas();
    }

    protected override void Update(GameTime gameTime)
    {
        if (GamePad.GetState(PlayerIndex.One).Buttons.Back == ButtonState.Pressed || Keyboard.GetState().IsKeyDown(Keys.Escape))
            Exit();

        base.Update(gameTime);
    }

    protected override void Draw(GameTime gameTime)
    {
        GraphicsDevice.Clear(new Color(_colorV4));

        _spriteBatch.Begin();
        _spriteBatch.End();

        base.Draw(gameTime);

        GuiRenderer.BeginLayout(gameTime);

        if (_toolActive)
        {
            ImGui.Begin("My First Tool", ref _toolActive, ImGuiWindowFlags.MenuBar);
                if (ImGui.BeginMenuBar())
                {
                    if (ImGui.BeginMenu("File"))
                    {
                        if (ImGui.MenuItem("Open..", "Ctrl+O")) { /* Do stuff */ }
                        if (ImGui.MenuItem("Save", "Ctrl+S")) { /* Do stuff */ }
                        if (ImGui.MenuItem("Close", "Ctrl+W")) { _toolActive = false; }
                        ImGui.EndMenu();
                    }
                    ImGui.EndMenuBar();
                }

            // Edit a color stored as 4 floats
            ImGui.ColorEdit4("Color", ref _colorV4);

            // Generate samples and plot them
            var samples = new float[100];
            for (var n = 0; n < samples.Length; n++)
                samples[n] = (float) Math.Sin(n * 0.2f + ImGui.GetTime() * 1.5f);
            ImGui.PlotLines("Samples", ref samples[0], 100);

            // Display contents in a scrolling region
            ImGui.TextColored(new Vector4(1, 1, 0, 1).ToNumerics(), "Important Stuff");
            ImGui.BeginChild("Scrolling", new System.Numerics.Vector2(0), true);
                for (var n = 0; n < 50; n++)
                    ImGui.Text($"{n:0000}: Some text");
            ImGui.EndChild();
            ImGui.End();
        }

        GuiRenderer.EndLayout();
    }
}