Videogamers0 / MGUI

UI framework for MonoGame game engine.
MIT License
62 stars 7 forks source link

MGUI with Monogame and Nez #10

Open rufreakde opened 3 weeks ago

rufreakde commented 3 weeks ago

So I use Nez since its a nice addon to Monogame and works great with dotnet6. And I wanted to use MGUI as it has to many features to easy setup UI inside of the game. Since it took me some minutes to understand how to integrate the both I thought lets share it here :)

Guide

This is what I needed to do to get this to work:

  1. Follow the Setup guide.
  2. My vscode solution explorer looked afterwards like this: image
  3. and my game project file had the following entry
    <ItemGroup>
    <ProjectReference Include="..\MGUI\MGUI.Core\MGUI.Core.csproj" />
    <ProjectReference Include="..\MGUI\MGUI.Shared\MGUI.Shared.csproj" />
    </ItemGroup>
  4. I changed the MGUI project TargetFramework to:
    <PropertyGroup>
    <TargetFramework>net6.0</TargetFramework>
    ...
  5. Updated the Game cs file as follows:
using System;
using System.Collections.Generic;
using engine;
using MGUI.Core.UI; // add
using MGUI.Core.UI.Brushes.Fill_Brushes; //add
using MGUI.Shared.Rendering; //add
using Microsoft.Xna.Framework;
using Microsoft.Xna.Framework.Graphics;
using Nez;
using Nez.Sprites;
using Nez.UI;

namespace modwars;

public class Game1 : Nez.Core, IObservableUpdate // Add IObservableUpdate 
{
    protected GameManager GameManager = new();
    protected List<string> AvailableGameScenes = new();

    protected MGDesktop UIMainScreen; //add
    protected MainRenderer UIMainRenderer; //add

    public event EventHandler<TimeSpan> PreviewUpdate; //add
    public event EventHandler<EventArgs> EndUpdate; //add

    protected override void Initialize()
    {
        base.Initialize();

        // TODO all the setup on gamestart here
        // first scene
        Core.DebugRenderEnabled = true;
        AvailableGameScenes = GameManager.SetupScenes("BuilderUiTestScene"); // my function to setup scenes

        // TEST UI CODE FROM TUTORIAL
        this.UIMainRenderer = new(new GameRenderHost<Game1>(this));
        this.UIMainScreen = new(this.UIMainRenderer);

        MGWindow Window1 = new(UIMainScreen, 50, 50, 500, 200);
        Window1.TitleText = "Sample Window with a single [b]Button[/b]: [color=yellow]Click it![/color]";
        Window1.BackgroundBrush.NormalValue = new MGSolidFillBrush(Color.Orange);
        Window1.Padding = new(15);
        MGButton Button1 = new(Window1, button => { button.SetContent("I've been clicked!"); });
        Button1.SetContent("Click me!");
        Window1.SetContent(Button1);

        this.UIMainScreen.Windows.Add(Window1);
    }

    protected override void Update(GameTime gameTime) // add and keep order of functions
    {
        PreviewUpdate?.Invoke(this, gameTime.TotalGameTime);

        base.Update(gameTime);

        UIMainScreen.Update();

        EndUpdate?.Invoke(this, EventArgs.Empty);
    }

    protected override void Draw(GameTime gameTime) // add and keep order of functions
    {
        base.Draw(gameTime);

        // TODO: Add your drawing code here
        UIMainScreen.Draw();
    }
}
rufreakde commented 3 weeks ago

Result

image