Skip to content
George Michaelides edited this page May 12, 2015 · 28 revisions

Gem Gui is a customizable Gui engine for rendering controls in MonoGame.

Controls

You can create controls via the GemGui instance

     GemGui(Game game,
            AggregationTarget aggregationTarget = AggregationTarget.All,
            ControlTarget controlTarget = ControlTarget.Irrelevant,
            IConfigurationResolver resolver = null)

Example

   var gui = new GemGui(this);
   var button = gui.Button(int x,
                           int y, 
                           int sizeX,
                           int sizeY, 
                           Style style);

Each control implements the abstract class AControl which has the following properties and methods

  Rendering.Sprite Sprite { get; set; }
  IText Text { get; set; }
  ViewEvents Events { get; set; }
  RenderParameters RenderParameters { get; set; }
  IRenderStyle Style { get; set; }
  Settings.Options Options { get; set; }
  Region Region { get; set; }
  Padding Padding { get; set; }   

  virtual void Align(Region viewPort)
  virtual void Update(double deltaTime)
  virtual void Render(SpriteBatch batch, RenderTemplate template)

  IDisposable AddTransformation(ITransformation transformation)

Styles

 The control's style is controlled by the IRenderStyle instance.

 public interface IRenderStyle
 {
    void Focus(AControl styeControl);
    void Default(AControl styeControl);
    void Hover(AControl styeControl);
    void Clicked(AControl styeControl);

    void Render(SpriteBatch batch);
 }

When instantiating a new control, u can use the Styles.Style enum to specify the style.

You can define your own style by implementing the IRenderStyle interface, or by using the already defined ones: TransparentControlStyle() and NoStyle().

The TransparentControlStyle changes the control's alpha channel when an event is fired. By changing the TransparentControlStyle's properties you can make your own effect.

    [DefaultValue(1.0f)]
    public float FocusAlpha { get; set; }

    [DefaultValue(0.8f)]
    public float HoverAlpha { get; set; }

    [DefaultValue(0.6f)]
    public float DefaultAlpha { get; set; }

    [DefaultValue(4.0f)]
    public float AlphaLerpStep { get; set; }

###Transform a control

You can easily transform a control (region render parameters) by adding an intance of ITransformation.

 IDisposable AddTransformation(ITransformation transformation)

The disposable holds the reference to the list and the current transformation. Disposing it causes the effect to stop.

There are two predefined transformations.

  • The PredicateTransformation is instantiated with a predicate that causes the transformation to expire and an action that performs the actual transformation.

       public PredicateTransformation(Predicate<AControl> expirationPredicate, 
                                      Action<double, AControl> transformer)
    
    
       button.AddTransformation(new PredicateTransformation(
                                control=> control.Region.Position.X==0.0f,
                                (deltaTime,control)=> control.RegionPosition.X--);
    
  • The TimedTransformation is instantiated with a value that indicates how long the transformation occurs in seconds before it expires and an action that performs the actual transformation.

      public TimedTransformation(double duration, 
                                 Action<double, AControl> transformer)
    

Text

Each control has an optional IText instance which represents the controls' readable label. The IText has the following members

    event EventHandler<TextEventArgs> OnTextChanged;
    Region Region { get; set;  }
    Padding Padding { get; set; }
    SpriteFont Font { get;  }
    string Value { get; set; }        
    IRenderStyle RenderStyle { get; set; }        
    RenderParameters RenderParameters { get; set; }
    Alignment.AlignmentContext Alignment { get; set; }

The AlignmentContext has the text to control alignment properties. Alignment is performed when a control changes size or manualy.

    IHorizontalAlignable HorizontalAlignment { get; set; }
    IVerticalAlignable VerticalAlignment { get; set; }
    IAlignmentTransition Transition { get; set; }

The Alignments can be instantiated buy a static property in the HorizontalAlignment / VerticalAlignment class. Defaults are the Manual alignments.

IAlignmentTransition describes how a transition is performed when an alignment occurs. It can be either FixedTransition() which the text takes the alignment position directly, or SmoothTransition() which makes the text "move" towards the aligned position.

Additionally you can implement IVerticalAlignable / IHorizontalAlignable for your own alignment logic.

The alignment takes into account the IText's padding.

###Events

Events can respond to touch / mouse / keyboard / gamepad. It is decided by the AggregationTarget passed to the GemGui's constructor. If the hardware doesn't support it then nothing happens.

    event GotFocus;
    event LostFocus;
    event Clicked;
    event GotMouseCapture;
    event LostMouseCapture;

[Flags]
enum AggregationTarget
{
    None = 0,
    Mouse = 1,
    Keyboard = 2,
    GamePad = 4,
    Touch = 8,
    All = Mouse | Keyboard | GamePad | Touch
}

###Options

    [DefaultValue(true)]
    bool IsVisible { get; set; }

    [DefaultValue(true)]
    bool IsEnabled { get; set; }

    [DefaultValue(true)]
    bool IsHoverEnabled { get; set; }

    [DefaultValue(true)]
    public bool IsFocusEnabled { get; set; }

###RenderParameters

A style has render style parameters an instance of IControlDrawable and ITextDrawable which renders using spriteBatch and render instructions upon multiple events

    [DefaultValue(Vector2.Zero)]
    public Vector2 Origin { get; set; }

    [DefaultValue(Color.White)]
    public Color Color { get; set; }

    [DefaultValue(Vector2.One)]
    public Vector2 Scale { get; set; } 
   
    [DefaultValue(1.0f)]
    public float Transparency { get; set; }  
  
    [DefaultValue(1.0f)]
    public float Layer { get; set; }

    [DefaultValue(0.0f)]
    public float Rotation { get; set; }

    [DefaultValue(SpriteEffects.None)]
    public SpriteEffects SpriteEffect { get; set; }

###Sprites

A Control may hold multiple sprites. Each sprite instance defines two properties and a private readonly sprite container.

     Texture2D Texture { get;} }
     Rectangle? SourceRectangle { get; }

You can add a new sprite to the container by using

    bool Add(string spriteId,
             Texture2D texture,
             Rectangle? sourceRectangle = null)

and switch to the new sprite with

    bool SwitchSprite(string spriteId = "default")

Clone this wiki locally