Search Unity

  1. Get the latest news, tutorials and offers directly to your inbox with our newsletters. Sign up now.
    Dismiss Notice

Generating UI controls from scripting and event-driven development made easy

Discussion in 'UGUI & TextMesh Pro' started by s-m-k, Jan 22, 2015.

  1. s-m-k


    Oct 26, 2013
    I can't find anything important about that in documentation apart from the sentence saying "In order to be able to easily instantiate UI elements dynamically, the first step is to create a prefab for the type of UI element (...)".

    Do I understand this correctly? Do I need PREFABS to create my UI elements? It sounds like pain in the ass, really. What about taking good parts from web browsers and just do it similar way, e.g.:

    Code (CSharp):
    1. Form form; //a component, single empty component
    3. void Awake() {
    4.     Panel panel = form.Append(new Panel());
    6.     Label label = panel.Append(new Label() {
    7.         caption = "Press the button:"
    8.     });
    10.     Button button = panel.Append(new Button() {
    11.         id = "my-button",
    12.         caption = "My Button"
    13.     });
    15.     panel.Append(new Label() {
    16.         classes = new string[] { "form-error", "another-css-like-class" },
    17.         caption = "Label with modified style."
    18.     });
    20.     form.Get("#my-button").On("click", (Element sender, Event event) => {
    21.             form.Get(".another-css-like-class").caption = "clicked my button!".
    22.     });
    24.     form.Get("label.form-error").On("mouseenter", errorMouseEnterHandler);
    25. }
    27. void errorMouseEnterHandler(Element element, Event event) {
    28.     Debug.Log(((Label)element).caption);
    29. }
    Wouldn't that be cool? I did a bunch of web coding myself and I know it would be cool and fast. You wouldn't need to render your whole GUI over and over again, you can completely separate your logic from presentation layer that way (advantage over legacy system) and that would allow you to write quick in-game GUIs nicely without the need of using prefabs (and with easy refactoring afterwards), which would be a nice addition to the new UI system.

    Looking at that code, you have absolutely no idea about how the form would look like in game. That would be a style's part. Something like simple CSS integrated with Unity, I guess? How I would see that in inspector:
    • panel
      • width: 640
      • height: 480
      • background:
        • color: black
        • Add new property (texture, textureAlign etc.)
      • Add new property
      • .form-error
        • textColor: red
        • Add new property
        • Add new child style
      • Add new child style
    • #my-button
      • textColor: black
      • Add new property
        • :hover
        • textColor: red
        • Add new property
        • Add new child style
      • Add new child style

    (I hope it's readable enough ;) )

    The only difficult part would be implementing the Get function with sufficient performance, but still, you would call them only once (at the start of your program) most of the time, so the rest of GUI would be super fast.

    Correct me if something like that is already possible with new UI, but that's the functionality I would like to see at least in the future (I think it would be also fun to implement). The ability to build forms with a few lines of code and css-like ids/classes might integrate nicely with templates stored in prefabs.
  2. SimonDarksideJ


    Jul 3, 2012
  3. s-m-k


    Oct 26, 2013
    Hmm, looks like it almost looks like what I've presented above (at least the Pub/Sub implementation). Anyway, I can't quickly find anything about styling/getting those forms/elements in a CSS-fashioned way, will look at it again when I have more time.

    Thanks for link, anyway.

    Anyway, I think we can just implement multiple tags instead of CSS classes (so an object could have several tags, like "enemy" and "boss", or "modal-window" and "error" etc.), that would be useful in-game too (I know there's some implementation of that feature in Asset Store). The GUI could be styled with something like:

    Code (CSharp):
    1. private void InnerGUIElementFunction() {
    2.      styleMe(StyleRules.GetRule(this)); //element's and its parent's tag list are matched to certain style rule
    3. }
    Or in-game:

    Code (CSharp):
    1. private void AttackEnemies() {
    2.      hero.SetTargets(GameObject.Get(".enemy.weak")); //select enemies (tag "enemy") who are also weak (tag "weak")
    3. }
    So, in other words, we could have something like CSS based on multiple tags functionality. We could code parent/children relations that way (.tag1 .tag2, .tag1 > .tag2, etc.). I think it's not too complicated and would save much time in both GUI design and game programming. Also, it's a standard borrowed from the web, so it shouldn't be hard to understand if you know it a little.
    Last edited: Jan 23, 2015