diff --git a/Demos/GameImpl.cs b/Demos/GameImpl.cs index 664e52c..d058cbc 100644 --- a/Demos/GameImpl.cs +++ b/Demos/GameImpl.cs @@ -24,6 +24,7 @@ namespace Demos { static GameImpl() { GameImpl.Demos.Add("Ui", ("An in-depth demonstration of the MLEM.Ui package and its abilities", game => new UiDemo(game))); + GameImpl.Demos.Add("Text Formatting", ("A demonstration of MLEM's text formatting system", game => new TextFormattingDemo(game))); GameImpl.Demos.Add("Easings", ("An example of MLEM's Easings class, an adaptation of easings.net", game => new EasingsDemo(game))); GameImpl.Demos.Add("Pathfinding", ("An example of MLEM's A* pathfinding implementation in 2D", game => new PathfindingDemo(game))); GameImpl.Demos.Add("Animation and Texture Atlas", ("An example of UniformTextureAtlases, SpriteAnimations and SpriteAnimationGroups", game => new AnimationDemo(game))); diff --git a/Demos/TextFormattingDemo.cs b/Demos/TextFormattingDemo.cs new file mode 100644 index 0000000..3445b33 --- /dev/null +++ b/Demos/TextFormattingDemo.cs @@ -0,0 +1,81 @@ +using System; +using Microsoft.Xna.Framework; +using Microsoft.Xna.Framework.Graphics; +using MLEM.Font; +using MLEM.Formatting; +using MLEM.Formatting.Codes; +using MLEM.Startup; +using MLEM.Textures; + +namespace Demos { + public class TextFormattingDemo : Demo { + + private const string Text = + "MLEM's text formatting system allows for various formatting codes to be applied in the middle of a string. Here's a demonstration of some of them.\n\n" + + "You can write in bold, italics, with an underline, strikethrough, or with a drop shadow whose color and offset you can modify in each application of the code.\n\n" + + "You can apply custom colors to text, including all default MonoGame colors and inline custom colors.\n\n" + + "You can also use animations like a wobbly one, as well as create custom ones using the Code class.\n\n" + + "You can also display icons in your text!\n\n" + + "Additionally, the text formatter has various APIs for interacting with the text, like custom behaviors when hovering over the text, and more."; + private const float Scale = 0.5F; + private const float Width = 0.9F; + + private TextFormatter formatter; + private TokenizedString tokenizedText; + private GenericFont font; + + public TextFormattingDemo(MlemGame game) : base(game) {} + + public override void LoadContent() { + this.Game.Window.ClientSizeChanged += this.OnResize; + + // creating a new text formatter as well as a generic font to draw with + this.formatter = new TextFormatter(); + // GenericFont and its subtypes are wrappers around various font classes, including SpriteFont, MonoGame.Extended's BitmapFont and FontStashSharp + // supplying a bold and italic version of the font here allows for the bold and italic formatting codes to be used + this.font = new GenericSpriteFont( + Demo.LoadContent("Fonts/TestFont"), + Demo.LoadContent("Fonts/TestFontBold"), + Demo.LoadContent("Fonts/TestFontItalic")); + + // adding the image code used in the example to it + var testTexture = Demo.LoadContent("Textures/Test"); + this.formatter.AddImage("grass", new TextureRegion(testTexture, 0, 0, 8, 8)); + + // tokenizing our text and splitting it to fit the screen + // we specify our text alignment here too, so that all data is cached correctly for display + this.tokenizedText = this.formatter.Tokenize(this.font, TextFormattingDemo.Text, TextAlignment.Center); + this.tokenizedText.Split(this.font, this.GraphicsDevice.Viewport.Width * TextFormattingDemo.Width, TextFormattingDemo.Scale, TextAlignment.Center); + } + + public override void DoDraw(GameTime time) { + this.GraphicsDevice.Clear(Color.Black); + this.SpriteBatch.Begin(samplerState: SamplerState.PointClamp); + + // we draw the tokenized text in the center of the screen + // since the text is already center-aligned, we only need to align it on the y axis here + var size = this.tokenizedText.Measure(this.font) * TextFormattingDemo.Scale; + var pos = new Vector2(this.GraphicsDevice.Viewport.Width / 2, (this.GraphicsDevice.Viewport.Height - size.Y) / 2); + this.tokenizedText.Draw(time, this.SpriteBatch, pos, this.font, Color.White, TextFormattingDemo.Scale, 0); + + this.SpriteBatch.End(); + } + + public override void Update(GameTime time) { + // update our tokenized string to animate the animation codes + this.tokenizedText.Update(time); + } + + public override void Clear() { + base.Clear(); + this.Game.Window.ClientSizeChanged -= this.OnResize; + } + + private void OnResize(object sender, EventArgs e) { + // re-split our text if the window resizes, since it depends on the window size + // this doesn't require re-tokenization of the text, since TokenizedString also stores the un-split version + this.tokenizedText.Split(this.font, this.GraphicsDevice.Viewport.Width * TextFormattingDemo.Width, TextFormattingDemo.Scale, TextAlignment.Center); + } + + } +} diff --git a/Demos/UiDemo.cs b/Demos/UiDemo.cs index 86ec24a..89efc7f 100644 --- a/Demos/UiDemo.cs +++ b/Demos/UiDemo.cs @@ -8,7 +8,6 @@ using Microsoft.Xna.Framework.Graphics; using MLEM.Extensions; using MLEM.Font; using MLEM.Formatting; -using MLEM.Formatting.Codes; using MLEM.Input; using MLEM.Misc; using MLEM.Startup; @@ -93,12 +92,7 @@ namespace Demos { this.root.AddChild(new VerticalSpace(3)); // a paragraph with formatting codes. To see them all or to add more, check the TextFormatting class - this.root.AddChild(new Paragraph(Anchor.AutoLeft, 1, "Paragraphs can also contain formatting codes, including colors and text styles. The names of all MonoGame Colors can be used, as well as the codes Italic, Bold, Drop Shadow'd and mixed formatting. You can also add additional fonts for things like\nvoid Code() {\n // Code\n}\nEven inline custom colors work!")); - - // adding some custom image formatting codes - this.root.AddChild(new Paragraph(Anchor.AutoLeft, 1, "Additionally, you can create custom formatting codes that contain images and more!")); - this.UiSystem.TextFormatter.AddImage("Grass", image.Texture); - this.root.AddChild(new Paragraph(Anchor.AutoLeft, 1, "Defining text animations as formatting codes is also possible, including wobbly text at different intensities. Of course, more animations can be added though.")); + this.root.AddChild(new Paragraph(Anchor.AutoLeft, 1, "Paragraphs can also contain formatting codes, including colors and text styles. For more info, check out the text formatting demo!")); this.root.AddChild(new VerticalSpace(3)); this.root.AddChild(new Paragraph(Anchor.AutoCenter, 1, "Multiline text input:", true)); diff --git a/Media/Formatting.png b/Media/Formatting.png index 9a7d41b..6b81827 100644 Binary files a/Media/Formatting.png and b/Media/Formatting.png differ