Adam's Lair Forum

game development and casual madness
It is currently 2017/04/25, 08:31

All times are UTC + 1 hour [ DST ]




Post new topic Reply to topic  [ 10 posts ] 
Author Message
 Post subject: [UI] YAUI
PostPosted: 2016/09/21, 13:57 
Forum Addict
Forum Addict
User avatar

Joined: 2013/09/19, 14:31
Posts: 821
Location: Italy
Role: Hobbyist


Aka Yet Another UI Plugin (name to be defined.. suggestions?).

So, after my almost-meltdown of last week, I decided to sit down at the drawing table again and start with Yet Another UI system.
This time though, I decided to leave out all the GameObject related stuff, no scaling, no rotation, just pure and simple overlay-based UI. It's so simple that it's fixed at using VisibilityGroup 30 and ScreenOverlay. You can't even change that :mrgreen:

The interface is declared by code (pretend you are writing your Form1.Designer.cs file by hand) and it currently supports full screen management and automatic resizing of the controls, depending on the layout component they are put inside and if set to behave so.

There are 4 kind of layout components:
  • DockPanel - usual Top, Left, Right, Bottom, Center, with multiple controls in a peripheral section; only one can be in the Center
  • StackPanel - Horizontal and Vertical
  • GridPanel - percent-based; also supports Row and Column span
  • CanvasPanel - freeform positioning, will not resize your controls

and at the moment the following Controls are complete:
  • Button
  • CheckButton
  • Separator (well, it's just a placeholder so it was quite easy :mrgreen: )
  • TextBox

To avoid having to deal with events, which might break the flow of the engine, everything is collected and pushed back in the OnUpdate phase; you can react to mouse and keyboard via delegates (multicast supported!).

This is the result of my first 4 days of work.. how it looks in the editor:
Image
don't mind the checkerboards around.. they are just unskinned controls

How it works (in less than 15 seconds :mrgreen: ):
Gfycat Video - Click to Play. [Source]

notice that the UI is resized to fit the window, as it was stretched to fill the editor before, and some controls are resized as a consequence while others retain the same size

And the code required to obtain that (don't get scared, there's a lot all around the place but it's quite simple and easy to read I believe)
Code:
public class TestUI : UI
{
  [DontSerialize]
  private DockPanel _root;
  [DontSerialize]
  private StackPanel _sp;
  [DontSerialize]
  private CheckButton _check;
  [DontSerialize]
  private Button _btn;

  protected override ControlsContainer CreateUI()
  {
    ContentRef<Appearance> panelAppearance = ContentProvider.RequestContent<Appearance>(@"Data\UI\Panel\Appearance.Appearance.res");
    ContentRef<Appearance> textBoxAppearance = ContentProvider.RequestContent<Appearance>(@"Data\UI\TextBox\Appearance.Appearance.res");
    ContentRef<Appearance> buttonAppearance = ContentProvider.RequestContent<Appearance>(@"Data\UI\Button\Appearance.Appearance.res");

    _root = new DockPanel() {
      Size = new Size(500, 500),
      Position = new Vector2(200, 100)
    };

    _sp = new StackPanel() {
      Size = new Size(100, 100),
      Docking = DockPanel.Dock.Center,
      Stacking = StackPanel.Stack.Vertical,
      Margin = new Border(5),
      Appearance = panelAppearance
    };
    _sp.AddChild(new Button() {
      Size = new Size(50, 50),
      Docking = DockPanel.Dock.Top,
      StretchToFill = false
    });
    _sp.AddChild(new Separator() {
      Size = new Size(5)
    });
    _sp.AddChild(new Button() {
      Size = new Size(60, 60),
      Docking = DockPanel.Dock.Bottom,
      Appearance = buttonAppearance
    });
    _sp.AddChild(new Button() {
      Size = new Size(20, 20),
      Docking = DockPanel.Dock.Bottom,
      StretchToFill = false
    });
    _sp.AddChild(new Separator() {
      Size = new Size(5)
    });
    _sp.AddChild(new Button() {
      Size = new Size(50, 50),
      Docking = DockPanel.Dock.Bottom,
      Appearance = buttonAppearance,
      Status = Control.ControlStatus.Disabled
    });

    DockPanel dp = new DockPanel() {
      Size = new Size(200, 100),
      Docking = DockPanel.Dock.Left
    };
    dp.AddChild(new Button() {
      Size = new Size(20, 50),
      Docking = DockPanel.Dock.Left
    });
    dp.AddChild(new Button() {
      Size = new Size(50, 50),
      Docking = DockPanel.Dock.Right
    });
    dp.AddChild(_sp);

    GridPanel gp = new GridPanel() {
      Docking = DockPanel.Dock.Center,
      Margin = new Border(4),
      Rows = new float[] { .5f, .5f },
      Columns = new float[] { .2f, .6f, .2f }
    };
    gp.AddChild(new Button());
    gp.AddChild(_check = new CheckButton() {
      Size = new Size(100, 100),
      Grid = new GridPanel.GridInfo() { Row = 1, ColSpan = 2 },
      StretchToFill = false,
      Appearance = buttonAppearance,
      Glyph = ContentProvider.RequestContent<Material>(@"Data\UI\Panel\Base.Material.res"),
      GlyphAlignment = Alignment.Bottom,
      GlyphMargin = new Border(12),
      Text = "ClickMe!",
      TextAlignment = Alignment.Top,
      TextMargin = new Border(5),
      Font = ContentProvider.RequestContent<Font>(@"Data\OpenSans.Font.res"),
      FontColor = ColorRgba.White
    });
    gp.AddChild(new Button() {
      Grid = new GridPanel.GridInfo() { Row = 1, Column = 2 }
    });

    _root.AddChild(_btn = new Button() {
      Size = new Size(200, 100),
      Docking = DockPanel.Dock.Top,
      StretchToFill = false,
      Appearance = buttonAppearance,
      MouseButtonEventHandler = (button, args) => //delegate here
        {
          if (args.Button == Duality.Input.MouseButton.Left && args.IsPressed)
          {
            Duality.Log.Game.Write("CLICK!");
          }
        }
    });

    _root.AddChild(dp);
    _root.AddChild(new TextBox() {
      Size = new Size(200, 50),
      Docking = DockPanel.Dock.Bottom,
      Font = ContentProvider.RequestContent<Font>(@"Data\OpenSans.Font.res"),
      Appearance = textBoxAppearance,
      FontColor = ColorRgba.Red,
      TextAlignment = Alignment.BottomRight,
      TextMargin = new Border(5)
    });
    _root.AddChild(new Button() {
      Size = new Size(50, 100),
      Docking = DockPanel.Dock.Right
    });
    _root.AddChild(new Button() {
      Size = new Size(50, 100),
      Docking = DockPanel.Dock.Right,
      StretchToFill = false
    });
    _root.AddChild(gp);

    return _root;
  }

  protected override void OnUpdate()
  {
    base.OnUpdate();

    _sp.Visible = _check.Checked;
  }
}


Well, that's it for now.
Next stop: RadioButtons and Scrollbars.

Comments? suggestions? requests? ^^

_________________
Come on Duality's Discord channel. It's entertaining and productive! :mrgreen:


Last edited by SirePi on 2016/09/21, 14:32, edited 1 time in total.

Top
 Profile  
 
 Post subject: Re: [WIP][UI] YAUIP
PostPosted: 2016/09/21, 14:18 
Forum Adept
Forum Adept

Joined: 2015/07/08, 16:41
Posts: 414
Role: Gamer
Whoa, this looks neat. This'll allow UI to be quickly put up in Duality games, I'm sure. It seems quite extensible, which is good, too.

As for the name, the current name, YAUI, sounds pretty good. But hey, you ask for suggestions, you're going to get them:
  • Interphase
  • YewEye
  • Cobble
I didn't say they would be particularly good suggestions, though.


Top
 Profile  
 
 Post subject: Re: [WIP][UI] YAUIP
PostPosted: 2016/09/21, 15:10 
Veteran Member
Veteran Member
User avatar

Joined: 2015/10/04, 15:48
Posts: 153
Location: Germany
Role: Hobbyist
Wow! That is really awesome!

Do you have plans to serialize the UI in a xml-format?
So you could create the layout without coding... just define xml-tags and attributes ;)

Great work! Keep going! :+1: xD :1+:

_________________
Twitter | GitHub | Join Duality on Discord | itch.io


Top
 Profile  
 
 Post subject: Re: [WIP][UI] YAUIP
PostPosted: 2016/09/21, 17:02 
Forum Addict
Forum Addict
User avatar

Joined: 2013/09/19, 14:31
Posts: 821
Location: Italy
Role: Hobbyist
Cross wrote:
Do you have plans to serialize the UI in a xml-format?
So you could create the layout without coding... just define xml-tags and attributes ;)


Well, I have been thinking of that, but I am not sure that it gives you everything you need to manage a UI..

I mean, with xml I need to define the xsd schema, and you need a xml-aware editor; both these conditions need to be met in order to have an editing support even slightly comparable to Intellisense.

And you still need to code the xml by hand.
And (most important reason that made me put away the idea): how do you manage to link, for example, a button, with the code to be performed on click? I'm afraid it would need an awful amount of reflection to find the method, call it, then you find out that you gave it the wrong parameters, ...

So why not code c# directly, using an IDE, with Intellisense? Just rebuild your game plugin and you get your changes directly on screen.

Don't know.. I feel xml is too much "dangerous" compared to plain old c# code, in this case (usually I love xml :mrgreen: )

_________________
Come on Duality's Discord channel. It's entertaining and productive! :mrgreen:


Top
 Profile  
 
 Post subject: Re: [WIP][UI] YAUIP
PostPosted: 2016/09/21, 20:30 
Site Admin
Site Admin
User avatar

Joined: 2013/05/11, 22:30
Posts: 1948
Location: Germany
Role: Professional
Gotta say, you pick yourself up from the dust fast. xD This looks really neat. Especially the bit where you resized the window and the UI just snapped into its new size was a bit of a "whoa" effect.

I'm completely convinced by your decision to leave the object-based, visual approach in favor of a code-based UI definition with a strong focus on layouts. I've worked with the Qt framework for years and they do exactly the same, which I'm a bit of a fan of. (They do offer a visual editor / .ui file alternative, but I wouldn't recommend that and generally try to avoid it for various reasons.)

Also, I completely agree with your assessment of the XML serialization option. Don't do that. It's a lot of work and probably not much of a help in the end.

Good choice on the four layouts btw, though the docking one might not be needed that often when you can nest stuff inside a grid layout. In any case, really looking forward to your progress :+1: :D



Edit: Almost forgot! Care to share some details on how your resizing / layout logic works? Confused to see all those sizes in the sample code when they simultaneously appear to be defined by the layouts?

_________________
Blog | GitHub | Twitter (@Adams_Lair)


Top
 Profile  
 
 Post subject: Re: [WIP][UI] YAUIP
PostPosted: 2016/09/26, 20:47 
Forum Addict
Forum Addict
User avatar

Joined: 2013/09/19, 14:31
Posts: 821
Location: Italy
Role: Hobbyist
Added the following:
  • Collapsible visibility for controls (Visible, Hidden, Collapsed)
  • ScrollBars
  • ListBox
  • ToggleButtons
  • CheckButtons
  • RadioButtons

some are displayed here :mrgreen:
Gfycat Video - Click to Play. [Source]


Source code link in the first post

_________________
Come on Duality's Discord channel. It's entertaining and productive! :mrgreen:


Top
 Profile  
 
 Post subject: Re: [WIP][UI] YAUIP
PostPosted: 2016/10/25, 22:13 
Member
Member

Joined: 2016/06/30, 03:38
Posts: 58
Location: Portugal
Role: Hobbyist
if this was a burrito, it would be a neato burrito


Top
 Profile  
 
 Post subject: Re: [WIP][UI] YAUIP
PostPosted: 2016/11/29, 16:40 
Forum Addict
Forum Addict
User avatar

Joined: 2013/09/19, 14:31
Posts: 821
Location: Italy
Role: Hobbyist
Uploaded on NuGet!
Instructions and examples will follow in the next days.

_________________
Come on Duality's Discord channel. It's entertaining and productive! :mrgreen:


Top
 Profile  
 
 Post subject: Re: [WIP][UI] YAUIP
PostPosted: 2016/11/29, 20:15 
Site Admin
Site Admin
User avatar

Joined: 2013/05/11, 22:30
Posts: 1948
Location: Germany
Role: Professional
SirePi wrote:
Uploaded on NuGet!
Instructions and examples will follow in the next days.


And more gifs if there is new stuff! Visuals are important ^^

_________________
Blog | GitHub | Twitter (@Adams_Lair)


Top
 Profile  
 
 Post subject: Re: [WIP][UI] YAUIP
PostPosted: 2017/04/05, 18:35 
Forum Addict
Forum Addict
User avatar

Joined: 2013/09/19, 14:31
Posts: 821
Location: Italy
Role: Hobbyist
New version available

now included is a SpriteBox that lets you put an (animated) sprite somewhere in your UI
Also, fixed a lost focus event not firing, courtesy of afraidOfMight

_________________
Come on Duality's Discord channel. It's entertaining and productive! :mrgreen:


Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 10 posts ] 

All times are UTC + 1 hour [ DST ]


Who is online

Users browsing this forum: No registered users and 4 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum

Jump to:  
cron
Powered by phpBB® Forum Software © phpBB Group