Ruminate Example

Installation

Open the nuget package console (under tools) and run the command

Install-Package MonoGame.Framework.Gui -Version 1.0.1

Now you need to download the following zip file which contains the content folder for Ruminate, you need to extract this into the content folder of your project:

https://drive.google.com/file/d/0Bw-0YEA_JX9gcFEyY1F2aXVJbGs/view?usp=sharing

Setup

Click on project and create a new class, call it Screen.cs. Copy the following code:

using Microsoft.Xna.Framework;

namespace YourNameSpace {

    public abstract class Screen {

        public Color Color { get; set; }

        public abstract void Init(Game1 game);
        public abstract void OnResize();
        public abstract void Update(GameTime time);
        public abstract void Draw();
    }
}

Remember to use the original namespace from when you created the class.

Create a new screen

Create a new class from the project menu and name the class screen1. You need to add the following to the using section of the new class;

using Microsoft.Xna.Framework;
using Microsoft.Xna.Framework.Graphics;
using Ruminate.GUI.Content;
using Ruminate.GUI.Framework;

Edit the class declaration to make it a class of Screen:

class screen1: Screen{

}

Within the new class add the following variable:

 Gui gui;

Now copy the following methods into the class:

 public override void OnResize() {            
     gui.Resize();              
 }

 public override void Update() {
     gui.Update();
 }

 public override void Draw() {
     gui.Draw();
 }

the final method required is an Init method, create the following method:

 public override void Init(Game1 game) {

      Color = Color.White;

      var skin = new Skin(game.GreyImageMap, game.GreyMap);
      var text = new Text(game.GreySpriteFont, Color.Black);

      gui = new Gui(game, skin, text);
      gui.AddWidget(
          new Panel(10,10,300,300)
          {
              Children = new Widget[] {                                           
              new Button(10,10,"test"), 
              new SingleLineTextBox(10, 50, 120, 10) { Value = "Hello World"}
          }
      });
 }

This will create a panel of 300x300 at an XY of 10,10. This panel will contain a button and a single line text box. This is an example of how you could create an interface, more interface components are detailed below.

Displaying a screen

Add the following variables into your Game1.cs:

Screen currentScreen;

public SpriteFont GreySpriteFont;
public Texture2D GreyImageMap;
public string GreyMap;

In the LoadContent method of Game1.cs add the following to load the textures and imagemap:

GreyImageMap = Content.Load<Texture2D>(@"GreySkin\ImageMap");
GreyMap = File.OpenText(@"Content\GreySkin\Map.txt").ReadToEnd();
GreySpriteFont = Content.Load<SpriteFont>(@"GreySkin\Texture");

currentScreen = new Screen1();
currentScreen.Init(this);

In the update method of Game1.cs, enter the following code:

currentScreen.Update(gameTime);

in the draw method of Game1.cs, enter the following code:

currentScreen.Draw();

How can you use this

You could create a new class within your project for each screen you need to use. You could create an array of all the screens in your game:

Screen[] currentScreens = new Screen[] {                
                new MainMenu(),
                new InputTest(),          
                new LayoutTest(),
                new ButtonTest()
            };

You can create an instance of each screen in the elements of the array. So when you want to switch screens you can simply pass currentScreen a new value from the array and run the currentScreen.Init() again:

currentScreen = _currentScreens[index];
currentScreen.Init(this);

Other controls

new ToggleButton(0, 10, "Button")

new CheckBox(300, 10, "Check Box")

new RadioButton(300, 40, "GRP", "Group GRP")
new RadioButton(300, 70, "GRP", "Group GRP")]
new RadioButton(300, 100, "GRP", "Group GRP")

new ComboBox(300, 250, 131, "Holder Text", CardinalDirection.South, new List<ComboBox.DropDownItem> {
      new ComboBox.DropDownItem("Test 1"),
      new ComboBox.DropDownItem("Test 2"),
      new ComboBox.DropDownItem("Test 3"),
      new ComboBox.DropDownItem("Test 4"),
      new ComboBox.DropDownItem("Test 5")
                    }),

Using events

If you want to access the controls such change the value of a textbox or to read the value, you will need to declare the SingleLineTextBox within your screen first. So below Gui gui; in your subclass for a screen add:

SingleLineTextBox message;

you can then add:

message = new SingleLineTextBox(300, 180, 100, 10)

To your panel, in the above examples we have been assigning the SingleLineTextBox to anything, so we couldn't access it in our program. We can now add a button to change the message:

   new Button(410, 177, 100, "Change", delegate {
              message.Value = "Button Pressed";
              //You could add more lines to this button press event
              //You could even call a method
          }
    }),

An example for a combobox:

new ComboBox(300, 210, "Pick a Color", 2, CardinalDirection.North, new List<ComboBox.DropDownItem> { 
         new ComboBox.DropDownItem("Violet", null, delegate { Color = Color.Violet; }),
         new ComboBox.DropDownItem("Tomato", null, delegate { Color = Color.Tomato; }),
         new ComboBox.DropDownItem("YellowGreen", null, delegate { Color = Color.YellowGreen; }),
         new ComboBox.DropDownItem("LightSkyBlue", null, delegate { Color = Color.LightSkyBlue; })
         }),