Ellpeck/MLEM
1
0
Fork 0
mirror of https://github.com/Ellpeck/MLEM.git synced 2024-05-23 17:13:38 +02:00
Code Issues Projects Releases Wiki Activity

added checkboxes and radio buttons and did some changes to the demo

Browse source
This commit is contained in:
Ellpeck 2019-08-13 21:23:20 +02:00
parent 4bd18fd171
commit c114d775d4
12 changed files with 169 additions and 86 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
Examples/Content/Fonts/TestFont.spritefont
View file

@ -11,7 +11,7 @@ with.
<!--
Modify this string to change the font that will be imported.
-->
<FontName>BitPotionExt</FontName>
<FontName>Arial</FontName>
<!--
Size is a float value, measured in points. Modify this value to change

BIN
Examples/Content/Textures/Test.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1 KiB

After

Width:  |  Height:  |  Size: 896 B

52
Examples/GameImpl.cs
View file

@ -28,66 +28,70 @@ namespace Examples {
var style = new UntexturedStyle(this.SpriteBatch) {
Font = new GenericSpriteFont(LoadContent<SpriteFont>("Fonts/TestFont")),
TextScale = 0.2F,
TextScale = 0.1F,
PanelTexture = this.testPatch,
ButtonTexture = new NinePatch(new TextureRegion(this.testTexture, 24, 8, 16, 16), 4),
TextFieldTexture = new NinePatch(new TextureRegion(this.testTexture, 24, 8, 16, 16), 4),
ButtonHoveredColor = Color.LightGray,
TextFieldHoveredColor = Color.LightGray
ScrollBarBackground = new NinePatch(new TextureRegion(this.testTexture, 8, 0, 4, 8), 1, 1, 2, 2),
ScrollBarScrollerTexture = new NinePatch(new TextureRegion(this.testTexture, 12, 0, 4, 8), 1, 1, 2, 2),
CheckboxTexture = new NinePatch(new TextureRegion(this.testTexture, 24, 8, 16, 16), 4),
CheckboxCheckmark = new TextureRegion(this.testTexture, 24, 0, 8, 8),
RadioTexture = new NinePatch(new TextureRegion(this.testTexture, 16, 0, 8, 8), 3),
RadioCheckmark = new TextureRegion(this.testTexture, 32, 0, 8, 8)
};
var untexturedStyle = this.UiSystem.Style;
this.UiSystem.Style = style;
this.UiSystem.GlobalScale = 5;
var root = new Panel(Anchor.Center, new Vector2(100, 80), Point.Zero, false, true, new Point(5, 10));
var root = new Panel(Anchor.Center, new Vector2(80, 100), Point.Zero, false, true, new Point(5, 10));
this.UiSystem.Add("Test", root);
root.AddChild(new Paragraph(Anchor.AutoLeft, 1, "This is a test text that is hopefully long enough to cover at least a few lines, otherwise it would be very sad."));
root.AddChild(new Paragraph(Anchor.AutoLeft, 1, "This is a small demo for MLEM.Ui, a user interface library that is part of (M)LEM (L)ibrary by (E)llpeck for (M)onoGame."));
var image = root.AddChild(new Image(Anchor.AutoCenter, new Vector2(20, 20), new TextureRegion(this.testTexture, 0, 0, 8, 8)) {IsHidden = true});
root.AddChild(new Button(Anchor.AutoCenter, new Vector2(1, 15), "Test Button") {
root.AddChild(new Button(Anchor.AutoCenter, new Vector2(1, 10), "Toggle Image") {
OnClicked = (element, button) => {
if (button == MouseButton.Left)
image.IsHidden = !image.IsHidden;
}
});
root.AddChild(new Button(Anchor.AutoCenter, new Vector2(1, 15), "Change Style") {
root.AddChild(new Button(Anchor.AutoCenter, new Vector2(1, 10), "Change Style") {
OnClicked = (element, button) => {
if (button == MouseButton.Left)
this.UiSystem.Style = this.UiSystem.Style == untexturedStyle ? style : untexturedStyle;
},
PositionOffset = new Point(0, 1),
HasCustomStyle = true,
Texture = this.testPatch,
HoveredColor = Color.LightGray
});
root.AddChild(new TextField(Anchor.AutoLeft, new Vector2(1, 15)));
root.AddChild(new VerticalSpace(3));
root.AddChild(new Button(Anchor.AutoLeft, new Vector2(15), "+") {
root.AddChild(new Paragraph(Anchor.AutoCenter, 1, "Text input:", true));
root.AddChild(new TextField(Anchor.AutoLeft, new Vector2(1, 10)) {PositionOffset = new Point(0, 1)});
root.AddChild(new VerticalSpace(3));
root.AddChild(new Paragraph(Anchor.AutoLeft, 1, "Zoom in or out:"));
root.AddChild(new Button(Anchor.AutoLeft, new Vector2(10), "+") {
OnClicked = (element, button) => {
if (element.Root.Scale < 2)
element.Root.Scale += 0.1F;
}
});
root.AddChild(new Button(Anchor.AutoInline, new Vector2(15), "-") {
root.AddChild(new Button(Anchor.AutoInline, new Vector2(10), "-") {
OnClicked = (element, button) => {
if (element.Root.Scale > 0.5F)
element.Root.Scale -= 0.1F;
}
},
PositionOffset = new Point(1, 0)
});
root.AddChild(new Button(Anchor.AutoInline, new Vector2(30, 15), "Woop") {
PositionOffset = new Point(2, 0),
OnClicked = (element, button) => CoroutineHandler.Start(Woop(element))
});
}
private static IEnumerator<Wait> Woop(Element element) {
var angle = 0;
var startScale = element.Root.Scale;
while (angle < 180) {
element.Root.Scale = startScale + (float) Math.Sin(MathHelper.ToRadians(angle));
angle++;
yield return new WaitSeconds(0.01F);
}
root.AddChild(new VerticalSpace(3));
root.AddChild(new Checkbox(Anchor.AutoLeft, new Vector2(1, 10), "Checkbox 1!"));
root.AddChild(new Checkbox(Anchor.AutoLeft, new Vector2(1, 10), "Checkbox 2!") {PositionOffset = new Point(0, 1)});
root.AddChild(new VerticalSpace(3));
root.AddChild(new RadioButton(Anchor.AutoLeft, new Vector2(1, 10), "Radio button 1!"));
root.AddChild(new RadioButton(Anchor.AutoLeft, new Vector2(1, 10), "Radio button 2!") {PositionOffset = new Point(0, 1)});
}
protected override void Draw(GameTime gameTime) {

53
MLEM.Ui/Elements/AutoScaledText.cs
View file

@ -1,53 +0,0 @@
using System;
using Microsoft.Xna.Framework;
using Microsoft.Xna.Framework.Graphics;
using MLEM.Extensions;
using MLEM.Font;
using MLEM.Ui.Style;
namespace MLEM.Ui.Elements {
public class AutoScaledText : Element {
private IGenericFont font;
private float textScale;
private string text;
public string Text {
get => this.text;
set {
this.text = value;
this.SetAreaDirty();
}
}
public Color Color = Color.White;
public AutoScaledText(Anchor anchor, Vector2 size, string text, IGenericFont font = null) : base(anchor, size) {
this.Text = text;
this.font = font;
this.IgnoresMouse = true;
}
public override void ForceUpdateArea() {
base.ForceUpdateArea();
this.textScale = 0;
Vector2 measure;
do {
this.textScale += 0.1F;
measure = this.font.MeasureString(this.Text) * this.textScale;
} while (measure.X <= this.DisplayArea.Size.X / this.Scale && measure.Y <= this.DisplayArea.Size.Y / this.Scale);
}
public override void Draw(GameTime time, SpriteBatch batch, float alpha, Point offset) {
var pos = this.DisplayArea.Location.ToVector2() + this.DisplayArea.Size.ToVector2() / 2 + offset.ToVector2();
this.font.DrawCenteredString(batch, this.Text, pos, this.textScale * this.Scale, this.Color * alpha, true, true);
base.Draw(time, batch, alpha, offset);
}
protected override void InitStyle(UiStyle style) {
base.InitStyle(style);
this.font = style.Font;
}
}
}

6
MLEM.Ui/Elements/Button.cs
View file

@ -10,13 +10,11 @@ namespace MLEM.Ui.Elements {
public NinePatch Texture;
public NinePatch HoveredTexture;
public Color HoveredColor;
public AutoScaledText Text;
public Paragraph Text;
public Button(Anchor anchor, Vector2 size, string text = null) : base(anchor, size) {
if (text != null) {
this.Text = new AutoScaledText(Anchor.Center, Vector2.One, text) {
IgnoresMouse = true
};
this.Text = new Paragraph(Anchor.Center, 1, text, true);
this.AddChild(this.Text);
}
}

77
MLEM.Ui/Elements/Checkbox.cs Normal file
View file

@ -0,0 +1,77 @@
using Microsoft.Xna.Framework;
using Microsoft.Xna.Framework.Graphics;
using MLEM.Extensions;
using MLEM.Input;
using MLEM.Textures;
using MLEM.Ui.Style;
namespace MLEM.Ui.Elements {
public class Checkbox : Element {
public NinePatch Texture;
public NinePatch HoveredTexture;
public Color HoveredColor;
public TextureRegion Checkmark;
public Paragraph Label;
private bool checced;
public bool Checked {
get => this.checced;
set {
if (this.checced != value) {
this.checced = value;
this.OnCheckStateChange?.Invoke(this, this.checced);
}
}
}
public CheckStateChange OnCheckStateChange;
public Checkbox(Anchor anchor, Vector2 size, string label, bool defaultChecked = false) : base(anchor, size) {
this.checced = defaultChecked;
this.OnClicked += (element, button) => {
if (button == MouseButton.Left)
this.Checked = !this.Checked;
};
if (label != null) {
this.Label = new Paragraph(Anchor.CenterRight, 0, label, true);
this.AddChild(this.Label);
}
}
protected override Point CalcActualSize(Rectangle parentArea) {
var size = base.CalcActualSize(parentArea);
if (this.Label != null)
this.Label.Size = new Vector2((size.X - size.Y) / this.Scale, 1);
return size;
}
public override void Draw(GameTime time, SpriteBatch batch, float alpha, Point offset) {
var tex = this.Texture;
var color = Color.White * alpha;
if (this.IsMouseOver) {
if (this.HoveredTexture != null)
tex = this.HoveredTexture;
color = this.HoveredColor * alpha;
}
var boxDisplayArea = new Rectangle(this.DisplayArea.Location, new Point(this.DisplayArea.Height)).OffsetCopy(offset);
batch.Draw(tex, boxDisplayArea, color, this.Scale);
if (this.Checked)
batch.Draw(this.Checkmark, boxDisplayArea, Color.White * alpha);
base.Draw(time, batch, alpha, offset);
}
protected override void InitStyle(UiStyle style) {
base.InitStyle(style);
this.Texture = style.CheckboxTexture;
this.HoveredTexture = style.CheckboxHoveredTexture;
this.HoveredColor = style.CheckboxHoveredColor;
this.Checkmark = style.CheckboxCheckmark;
}
public delegate void CheckStateChange(Checkbox box, bool checced);
}
}

11
MLEM.Ui/Elements/Element.cs
View file

@ -338,6 +338,17 @@ namespace MLEM.Ui.Elements {
return lastChild;
}
protected IEnumerable<Element> GetSiblings(bool hiddenAlso) {
if (this.Parent == null)
yield break;
foreach (var child in this.Parent.Children) {
if (!hiddenAlso && child.IsHidden)
continue;
if (child != this)
yield return child;
}
}
public virtual void Update(GameTime time) {
foreach (var child in this.SortedChildren)
child.Update(time);

1
MLEM.Ui/Elements/Paragraph.cs
View file

@ -29,6 +29,7 @@ namespace MLEM.Ui.Elements {
this.text = text;
this.font = font;
this.centerText = centerText;
this.IgnoresMouse = true;
}
protected override Point CalcActualSize(Rectangle parentArea) {

35
MLEM.Ui/Elements/RadioButton.cs Normal file
View file

@ -0,0 +1,35 @@
using Microsoft.Xna.Framework;
using MLEM.Input;
using MLEM.Ui.Style;
namespace MLEM.Ui.Elements {
public class RadioButton : Checkbox {
public string Group;
public RadioButton(Anchor anchor, Vector2 size, string label, bool defaultChecked = false, string group = "") :
base(anchor, size, label, defaultChecked) {
this.Group = group;
// don't += because we want to override the checking + unchecking behavior of Checkbox
this.OnClicked = (element, button) => {
if (button == MouseButton.Left) {
this.Checked = true;
foreach (var sib in this.GetSiblings(true)) {
if (sib is RadioButton radio && radio.Group == this.Group)
radio.Checked = false;
}
}
};
}
protected override void InitStyle(UiStyle style) {
base.InitStyle(style);
this.Texture = style.RadioTexture;
this.HoveredTexture = style.RadioHoveredTexture;
this.HoveredColor = style.RadioHoveredColor;
this.Checkmark = style.RadioCheckmark;
}
}
}

2
MLEM.Ui/Elements/ScrollBar.cs
View file

@ -11,7 +11,6 @@ namespace MLEM.Ui.Elements {
public NinePatch Background;
public NinePatch ScrollerTexture;
public Color HoveredColor;
public Point ScrollerOffset;
public Point ScrollerSize;
private float maxValue;
@ -78,7 +77,6 @@ namespace MLEM.Ui.Elements {
base.InitStyle(style);
this.Background = style.ScrollBarBackground;
this.ScrollerTexture = style.ScrollBarScrollerTexture;
this.HoveredColor = style.ScrollBarHoveredColor;
}
public delegate void ValueChanged(Element element, float value);

9
MLEM.Ui/Style/UiStyle.cs
View file

@ -14,7 +14,14 @@ namespace MLEM.Ui.Style {
public Color TextFieldHoveredColor;
public NinePatch ScrollBarBackground;
public NinePatch ScrollBarScrollerTexture;
public Color ScrollBarHoveredColor;
public NinePatch CheckboxTexture;
public NinePatch CheckboxHoveredTexture;
public Color CheckboxHoveredColor;
public TextureRegion CheckboxCheckmark;
public NinePatch RadioTexture;
public NinePatch RadioHoveredTexture;
public Color RadioHoveredColor;
public TextureRegion RadioCheckmark;
public IGenericFont Font;
public float TextScale = 1;

7
MLEM.Ui/Style/UntexturedStyle.cs
View file

@ -16,7 +16,12 @@ namespace MLEM.Ui.Style {
this.TextFieldHoveredColor = Color.LightGray;
this.ScrollBarBackground = GenerateTexture(batch, Color.LightBlue);
this.ScrollBarScrollerTexture = GenerateTexture(batch, Color.Blue);
this.ScrollBarHoveredColor = Color.LightGray;
this.CheckboxTexture = GenerateTexture(batch, Color.LightBlue);
this.CheckboxHoveredColor = Color.LightGray;
this.CheckboxCheckmark = GenerateTexture(batch, Color.Blue).Region;
this.RadioTexture = GenerateTexture(batch, Color.AliceBlue);
this.RadioHoveredColor = Color.LightGray;
this.RadioCheckmark = GenerateTexture(batch, Color.CornflowerBlue).Region;
this.Font = new EmptyFont();
}