Ruminate Example

Example interface:

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

You might also need to add these to the content pipeline, the zip file also includes the 'xnb' files so you can copy the content to the 'bin/Windows/x86/Debug/Content' folder.

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(GameTime time) {
     gui.Update(time);
 }

 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 = "this can change"},
              new Label(10, 90, "Just a label")
          }
      });
 }

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);

A more detailed example, which could be in the Update section of your Game1.cs:

if (newState.IsKeyDown(Keys.Tab)) {
     if (index + 1 == currentScreens.Length) {
         index = 0;
         } 
     else {
         index++;
     }
     currentScreen =  currentScreens[index];
     currentScreen.Init(this);
}

Enums

This is best used with Game states, if you create a public enum in the declaration section of Game1.cs:

public enum GameState {
    MainMenu,
    GamePlay,
    EndOfGame
}

Now create a public variable set to one of the enum values in the declaration section of Game1.cs:

public GameState state = GameState.MainMenu;

You can use this enum value to load the appropriate screen.

Switching Screens

In the code for your screen declare:

Game1 parentGame;

in the Init method add:

parentGame = game;

Now a button could set:

parentGame.GameState=Game1.GameState.GamePlay;

This is assuming the enum created is called GameState, and one of the options is GamePlay. Making the enum and the variable which uses it public means each screen could access and change the state of the parent game.

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; })
         }),