OpenGUI: Open source GUI framework for Unity

Discussion in 'Works In Progress' started by mrzapp, May 26, 2013.

  1. mrzapp

    mrzapp

    Member

    Joined:
    May 26, 2013
    Messages:
    133
    [​IMG]

    Open source GUI framework for Unity


    LATEST RELEASE
    (check this link often if you want the latest features)

    FAQ
    Documentation, tutorials and useful scripts
    Issue tracker
    Example project
    GitHub repo



    HEADS UP!
    v0.9-beta-23: OpenGUI now supports dynamic content scaling. Details in the wiki

    v0.9-beta-19: A new "size" parameter on the OGFont class will require you to update your fonts. Details in the wiki

    v0.9-beta-12: Improvements to widget selection in edit mode. You can now shift click to select multiple widgets. Selection is now also dependent on the draw order rather than z position.

    Participate
    Disclaimer
    Although OpenGUI is being improved upon regularly, it does still have some rough edges. It probably won't turn your computer into a suicidal toaster, but there are no guarantees.

    Web demo

    [​IMG]
    Last edited: Jul 19, 2014
  2. dev_peter

    dev_peter

    Member

    Joined:
    Aug 9, 2012
    Messages:
    35
    hi,
    i like the open source approach and the demo looks good. When I run the demo in unity everything is like expected in play mode but I can't see the elements in edit mode. Shouldn't they be visible?
  3. mrzapp

    mrzapp

    Member

    Joined:
    May 26, 2013
    Messages:
    133
    I should mention that it'll still be in the game view. Maybe that's the problem?
  4. mrzapp

    mrzapp

    Member

    Joined:
    May 26, 2013
    Messages:
    133
    Uploaded changes for touch support in OGScrollView and changed coordinates to Matrix4x4, so rotation is possible
  5. dev_peter

    dev_peter

    Member

    Joined:
    Aug 9, 2012
    Messages:
    35
    thanks for the reply. Would it be possible to add the possibility to view it in edit mode? Would speed up the development!
  6. The Ghost

    The Ghost

    Member

    Joined:
    Jul 7, 2012
    Messages:
    188
    This is nice, still checking it out.
  7. mrzapp

    mrzapp

    Member

    Joined:
    May 26, 2013
    Messages:
    133
    @The Ghost: Thanks, let me know if there are any problems
  8. mrzapp

    mrzapp

    Member

    Joined:
    May 26, 2013
    Messages:
    133
    @dev_peter: It does work in edit mode, it's just displayed in the game view. Unfortunately the edit view is off limits for OnGUI draw calls. What you can do is accommodate for it with an appropriate layout for GUI editing. This is the one I am using:
    [​IMG]
    Last edited: May 28, 2013
  9. mrzapp

    mrzapp

    Member

    Joined:
    May 26, 2013
    Messages:
    133
    Added component menus and tabs
  10. dev_peter

    dev_peter

    Member

    Joined:
    Aug 9, 2012
    Messages:
    35
    ah ok, thats fine! I'll tried it but couldn't see anything :) But I'm sure I did something wrong. Will try it again late. How are you dealing with mobile devices and different screensizes?
  11. mrzapp

    mrzapp

    Member

    Joined:
    May 26, 2013
    Messages:
    133
    [​IMG]

    All widget types inherit the same master class OGWidget, which has the "stretch" and "anchor" subclasses. With those you can position and resize any widget according to screen size with a "factor" property (for instance, set that to 0.5 and the widget only stretches to half the screen size). There is also a manual offset so you can stretch them to be something like the screen size minus 20 pixels/world units. That is basically all you need to accommodate for multiple screen sizes and ratios.

    I updated the original post with a link to a quick API reference i just did. It's not totally there yet, but it covers the basics.
    Last edited: May 28, 2013
  12. mrbroshkin

    mrbroshkin

    Member

    Joined:
    Aug 14, 2012
    Messages:
    17
  13. georetro

    georetro

    Member

    Joined:
    Jan 18, 2013
    Messages:
    164
    This looks really good! First thing I am going to do after getting back from school is install this.

    +1 to you.
  14. PerfectlyInsane

    PerfectlyInsane

    Member

    Joined:
    Aug 9, 2013
    Messages:
    29
    Hey this is pretty neat GUI

    You can copy text line carriage returns from notepad and they will appear with with carriage returns. This seems to work for text-fields.
    Haven't used any scripting yet to make changes. But should be fun.

    cheers!!!

    ;)
  15. mrzapp

    mrzapp

    Member

    Joined:
    May 26, 2013
    Messages:
    133
    Oh wow! I haven't been back here for a while, I've been making updates to the code, but I didn't think anyone was interested in it. When I am done with the features I think are missing from this (which is not a tremendous amount, but still quite a bit), I should merge it with your C# version.

    Thanks for the interest! :)

    EDIT: Latest package uploaded here.
    Last edited: Nov 22, 2013
  16. Bridin

    Bridin

    Member

    Joined:
    Aug 29, 2011
    Messages:
    544
    Pretty sweet! Thanks mrzapp.
  17. mrzapp

    mrzapp

    Member

    Joined:
    May 26, 2013
    Messages:
    133
    I've been spending some time starting this framework again from scratch (while trying to maintain backward compatibility).
    The reason is that I wanted to reduce draw calls and start moving away form the native GUI system and onto the low-level GL library, as OnGUI will inevitably be discarded at some point.

    Changes
    - Atlases (meaning all textures are drawn with the same draw call!)
    - Complete rewrite, meaning more stability
    - Custom inspectors to facilitate making skins

    To do
    - Scroll views don't clip the child objects very well yet.
    - All text is still truetype, so a draw call each. ( fixed! )

    I'm pretty hyped about this, because when I get the bitmap text going, this will essentially be a single drawcall GUI \o/

    If anyone wants to help me test this out, the code with example project can be cloned from the GitHub page. It's in the "testing" folder.
    Last edited: Nov 29, 2013
  18. elias_t

    elias_t

    Member

    Joined:
    Sep 17, 2010
    Messages:
    403
    Hi mrzapp.

    It looks very interesting.

    But I fear we cannot use your gui beacause you have it under gpl license.
  19. mrzapp

    mrzapp

    Member

    Joined:
    May 26, 2013
    Messages:
    133
    There we go, changed to Creative Commons Attribution 4.0 International :) I'll try to keep the 1.0 version backward compatible, but be prepared to make some changes, as there will be a new skinning system and a select few variable deprecations.
    Last edited: Nov 29, 2013
  20. gryff

    gryff

    New Member

    Joined:
    Apr 17, 2012
    Messages:
    360
    mrzapp: How goes the rewrite? I don't need an AI immeadiately , so I figure I might as well wait for the new version.

    cheers, gryff :)
  21. mrzapp

    mrzapp

    Member

    Joined:
    May 26, 2013
    Messages:
    133
    Hi gryff, sorry for the late response.
    It's not quite ready for prime time, still a few bugs, but it's certainly well under way.
    You can download the GitHub repo here and open the project "testing" to see it in action.

    New features:
    - Tiled sprites
    - 9-sliced sprites
    - Draw depth performance increased
    - Draw calls reduced
    - Centralised draw and update loops
    - Widgets only updating when "dirty"

    Still missing:
    - Workflow polishing
    - Debugging
    - Optimisations

    I am using it in my own project right now, and I am trying to iron out the bugs as I call them.
    I'd be very happy to have beta-testers, though :)
    Last edited: Dec 14, 2013
  22. ForgottenCheese

    ForgottenCheese

    Member

    Joined:
    Dec 1, 2013
    Messages:
    33
    With a label, is it possible to add a variable in the text, w/o creating a separate OnGUI function?

    Example:
    "Score: " + gameScore

    Would update the score every time the gameScore variable changes. Or do we just have to use a separate OnGUI function for that?
  23. mrzapp

    mrzapp

    Member

    Joined:
    May 26, 2013
    Messages:
    133
    label.text = "Score: " + gameScore;

    Should work without problems, yeah.
    Both in the OnGUI version and the upcoming GL version.
  24. Muber Gaming

    Muber Gaming

    Member

    Joined:
    Jan 24, 2014
    Messages:
    32
    Thank you for this wonderful asset mrzapp,

    it is a real time saver.

    I am not too familiar with the Creative Commons Attribution 4.0 International License.
    so before i can start using your great tool i would like to ask a question for you,

    If i were to use this tool in my project to facilitate me to build my gui and if i decide sell my whole game project as a startup kit in the future

    will i be able to include your tool in my unity package startup kit to the public for commercial purposes.

    so i guess the question is in short: could this tool be used/distributed commercially in a unity project startup kit.
    i am not saying as a standalone gui editor asset, but as a included tool in a game project kit?

    hopefully i am making myself clear.

    let me know.

    thanks again.
  25. Shkarface Noori

    Shkarface Noori

    Member

    Joined:
    Jun 10, 2013
    Messages:
    404
    thank you for this package... gonna test later
  26. mrzapp

    mrzapp

    Member

    Joined:
    May 26, 2013
    Messages:
    133
    Yes, anything goes :) Thanks for your feedback, I'm glad you like it. Are you using the new OpenGL version or the OnGUI version?
    Last edited: Feb 1, 2014
  27. mrzapp

    mrzapp

    Member

    Joined:
    May 26, 2013
    Messages:
    133
    @Shkarface: No problem. Let me know if you run into any issues.
  28. Muber Gaming

    Muber Gaming

    Member

    Joined:
    Jan 24, 2014
    Messages:
    32
    this feels better than NGUI for real and it is free,
    thank you very much.

    thanks for the clarification,
    So, OpenGui can be redistributed and altered for commercial or non commercial as longest there is a reference to the original author , right?
    something like MIT License?






    I am not sure yet,
    I am using:
    https://github.com/mrzapp/opengui

    i have not looked at the actual code yet, just checking out the example setup.
    is this the OpenGL version?

    can you point me to links for both versions so i can try them both to see what will be the difference?
    is it performance?



    thanks again
  29. mrzapp

    mrzapp

    Member

    Joined:
    May 26, 2013
    Messages:
    133
    Thanks a lot, I really appreciate it!

    The intention of this license is just that if you fork the project and release your own GUI framework based on it, you attribute me. If you just use it in your project, then there's no requirement to do so, although of course I'd be happy :)

    If you are using the latest package (UnityScript) from GitHub, it's the OpenGL version, which is still in beta, but will be continuously updated. It works in C# projects as well. The older version is based on OnGUI, and while it is still usable, it's a mess of draw calls and it's frozen in its current state, so I'd not recommend it at all :D There are links to both versions in the first post.
    Last edited: Feb 2, 2014
  30. Muber Gaming

    Muber Gaming

    Member

    Joined:
    Jan 24, 2014
    Messages:
    32
    @mrzapp

    great, so now i know i am using the unityscript openGL version of openGUI.

    but there is a couple of things i would like to handle, perhaps you can enlighten me on the best approach:

    1- how would i create containers ie: a rectangle which i can use to contain widgets ie: labels, sprites etc.. where all widgets positions added to this rectangle container be relative to its parent container instead of global space?

    2- how about sprites coloring and widgets alpha state.
    like we used to do in onGui:
    GUI.color.a = .5f;
    how can this be handled in openGL?

    can you provide a quick sample on how to handle this in ie: the button widget?


    will gladly appreciate it.

    thanks again for your time.
  31. mrzapp

    mrzapp

    Member

    Joined:
    May 26, 2013
    Messages:
    133
    The best practice is to use an empty GameObject as the container, with a scale of 1,1,1 and then use an OGSlicedSprite or OGSprite inside it as the background. It's demonstrated in the example project with the "TabContent" objects.

    Wow, I hadn't even thought of that. Good point! I just spent a little time writing a new shader "UnlitVertexColored.shader" and adding a "color" parameter to every widget type. I included it in the latest beta release, to be found here.

    To use it, simply change the shader on your atlas (the material used by the OGSkin) to "Unlit/Vertex Colored".

    There are a few new features worth taking note of. You can now select widgets by clicking them in the game view, for instance. But also that I've gone from a string based identification system to an enum based one, which solves a fair few bugs. This might screw up your defaults setup, but I've added a feature to automatically detect which styles belong where, if they are named sensibly.

    If you lose your defaults setup, select your skin, click "Manage defaults", then "Reset" and "Autodetect". If you named your styles according to the widget type and state, e.g. "ButtonActive" for the OGButton widget in the active state, then it should be found.

    I hope that solves it for you. Let me know if you have any other issues, or other features you'd like me to add, and I'll be happy to help. I did a quick tutorial on how to build your own widget from scratch here as well, just in case.
    Last edited: Feb 5, 2014
  32. Muber Gaming

    Muber Gaming

    Member

    Joined:
    Jan 24, 2014
    Messages:
    32
    Awesome

    that was a quick update, thank you very much.


    widget sprite colors now work great.

    here are a few of my wishlist for this awesome tool if you have the time.

    1- the reason i asked about containers was that i wanted to make a new "window" frame widget where all the widgets in this window will be child of the main window frame so i can drag around main window and all children will follow within, I tried your suggested approach and it does the job,
    but... not as i wanted, i wanted to make this window dragable but from a particular point not from everywhere.
    here is what i did:
    -created an empty game object set its scale to 1,1,1
    -created a new sprite widget as a child of the empty game object and added a sprite image from atlas to reflect as the main window frame then ticked the "is dragable" "is selectable" boxes. that way this window will be dragable ingame, so far so good.

    -then added all the widgets as children of this "window Sprite" widget so all the widgets will follow the main parent window when dragable by player.

    but.... my issue is that every time i right click anywhere this dragable window i created while ingame, the window will snap its position centering itself in my mouse position before i start dragging the window.
    what i really need is when i click on my dragable window it wont snap its position in its center, but better yet, my aim was to make this window to be dragable only when i click on the top right corner for example, or only when right click and drag from the top header only instead of the whole window frame without the window snapping its position.
    hopefully i am explaining myself.
    let me know if you have any good workaround this, will really appreciate your suggestion.


    2- and while we are at it, any chance to make a widget ie: window or scroll area to be resizable from ingame? i mean by clicking and draging out the bottom corner of the widget for instance?


    3- the scrollview widgets are great too, and was wondering if there is a scrollview example with a dragable scroll bar horizontal and or vertical? like the typical mouse click on the scrollbar to scroll down or horizontal etc..



    4- I read on the first post that you have written an API docs for openGUI but I can see the link, maybe i missed it, any chance you can post it again?



    5- how hard will be to implement a click and dragout to resize the widget while in the unity editor game view to resize the widgets instead of doing it manually from the Transform module from inspector? i know this may be a little work to do since the widgets are not meshes like other gui tools ie: ngui etc.. so one can not use the resize gizmo from sceneview since this is via the game view only. not sure if i am expressing myself correctly. but i think something like this feature will make openGUI pretty much upthere compared to the rest of the top paid commercial gui editors in the assetstore imo.


    6-in some widgets i notice there is a "Clip to" variable in the inspector, what exactly does this feature do?


    7- almost fogot, the parent game object after the Root, is "OGPage" what does this do exactly? is it some sort of panel? can there be more than one OGPage? I wonder this can be like a main container? can this regulate screen ratios, sizes or fixed resolutions, anchors?



    I hope i am not overwhelming you with all my list, and hoping if you have some time to give me some pointers or suggestions to achieve this, I will be very grateful.


    i guess this weekend i will focus on studying the source to get more acquainted with this tool, I am very happy with it so far.


    thanks again for your time.
    Last edited: Feb 6, 2014
  33. mrzapp

    mrzapp

    Member

    Joined:
    May 26, 2013
    Messages:
    133
    Interesting. This will require a new widget type and a few modifications to the anchor and stretch parameters, but it could be done. This would be the only GUI framework for Unity that I know of to support that natively, if I did that.

    I haven't gotten around to that yet, but it should be a fairly trivial addition. It'll be in a future release.

    Since I recently rewrote the whole codebase, the old API reference wasn't relevant anymore. I just rewrote it to reflect the newer version: here. It's manually written, as the codebase isn't that large, so it's done rather selectively. If you find something missing, I'd be happy to fix it.

    That's another feature I've been having on my list too. It's possible, and it'll be there as well. The missing features are listed in the issue tracker here

    An example of that would be that every widget inside a scroll view would have the scroll view object as the "clipTo" object. It just means that the widget will use the "clipTo" drawing rect to determine the borders beyond which they should not be displayed.

    The page component is for switching between screens. All you have to do is name it something like "MyPage" in the inspector and then use the function OGRoot.GoToPage("MyPage"); The "set current" button switches between pages manually. The API page for OGPage is here

    Don't worry about it, this is exactly what OpenGUI needs. If you feel like making quick fixes, I could make you a contributor on GitHub. It's just me and Acrobot in there right now, so it would be great adding more developers. I'll get cracking on the new features as soon as I can, as I think the features you're looking for would be very cool to have as part of the native package.
    Last edited: Feb 6, 2014
  34. Muber Gaming

    Muber Gaming

    Member

    Joined:
    Jan 24, 2014
    Messages:
    32
    thank you mrzapp,

    i sure will love to help. but first i need to get acquainted with openGUI code so i can be of use, I will study it for the next weeks and will let you know when i am ready so you can add me to the GitHub as contributor.


    BTW,
    I think i found a bug or maybe it is my setup, but some buttons style behaviors dont seem to work for me,

    the only 2 styles that seem to work correctly are Basic and Active.

    Hover and Disable dont seem to work from my end. perhaps you can corroborate and let me know.
    tested it ingame on mouse over the button and when disabled the button the Style behaviors dont see to kick in.


    regards
  35. mrzapp

    mrzapp

    Member

    Joined:
    May 26, 2013
    Messages:
    133
    Sure, just let me know your GitHub handle, when you feel like it.

    The 'disabled' style isn't in use yet, I forgot to add that to the issue tracker. I am adding the 'hover' style to the button right now. Otherwise, styles should work as intended for other widgets.
  36. Muber Gaming

    Muber Gaming

    Member

    Joined:
    Jan 24, 2014
    Messages:
    32
    thanks,
    may i ask what is wrong with the "disabled" button behavior?

    is it a bug whats keeping it to work, or it just has not been actually coded yet?
  37. mrzapp

    mrzapp

    Member

    Joined:
    May 26, 2013
    Messages:
    133
    It's just a task I've been putting off, but it's done now. I'll commit the changes later today, so you can grab it from GitHub. The beta-2 release should feature the changes we talked about.
  38. Muber Gaming

    Muber Gaming

    Member

    Joined:
    Jan 24, 2014
    Messages:
    32
    Awesome.

    cant wait for beta 2 :)

    keep us posted when available.

    thank you very much.
  39. Shkarface Noori

    Shkarface Noori

    Member

    Joined:
    Jun 10, 2013
    Messages:
    404
    have you tried having events for every action? i made a gui framework and its useless without action events, here is a little bit of what i mean:

    we have a component for fading image components
    you need actions for when the events happen like OnFadeInStart , OnFadeInFinish..etc and you have to be able to do any message calling and param passing. and i will be happy to help if needed as long as this will be Open-Source
  40. mrzapp

    mrzapp

    Member

    Joined:
    May 26, 2013
    Messages:
    133
    With a bit of adjustment, the OGTween component could be made to do that. I'll add it to the list.

    Thanks for your feedback, it would be a cool addition too :)
  41. NutellaDaddy

    NutellaDaddy

    Member

    Joined:
    Oct 22, 2013
    Messages:
    288
    Hey, you should start a tutorial series for this. I think that it would be a great thing to watch because I'm not very good with using it. Could you explain it a little more?
  42. mrzapp

    mrzapp

    Member

    Joined:
    May 26, 2013
    Messages:
    133
    Sure thing NutellaDaddy (best name ever!), I should expand on those. I've written a short one in the wiki here. When you say "watch", do you mean in video format?
    Last edited: Feb 8, 2014
  43. Muber Gaming

    Muber Gaming

    Member

    Joined:
    Jan 24, 2014
    Messages:
    32
    hi mrzapp
    i need some help,

    I been trying to move the new added widget color set to the OGSkin instead, but no success yet
    reason is that the current setup sets the color of the widget for all styles behaviors

    so what i need is to set color independently for each style behavior:
    basic, hover,active etc...
    similar like the text color for the button behavior style


    has you tried this yet.

    will gladly appreciate your input

    thanks
  44. mrzapp

    mrzapp

    Member

    Joined:
    May 26, 2013
    Messages:
    133
    Colours are now set per style, and there's mouse scaling + positioning functionality.
    The latter required a bit of hacking, so there's no undo/redo for that yet.

    Changes reflected in the latest GitHub repo commit, in the UnityScript/Example and UnityScript/src directories.
  45. Akira_san

    Akira_san

    Member

    Joined:
    Jul 1, 2013
    Messages:
    66
    This looks great and its open. A video tutorials would be great to have for beginners with OpenGUI.
  46. Muber Gaming

    Muber Gaming

    Member

    Joined:
    Jan 24, 2014
    Messages:
    32
    Thank you mrzapp,

    awesome features,
    ok, so OGPage can be used as an independent gui container? ie: inventory bag window, char portrait or char skills window etc.....

    and have each OGPage to "set to current" on a key binding to enable or disable each page on demand, right?

    now all i need to figure out if it is possible to have more than 1 OGPage gui active at any given time, it is possible , right?
    for instance to have an action bar OGPage active all the time and activate others ie: skill window etc... without affecting the actionbar gui from other page?





    yes it is, and its getting polished by the clock by mrzapp, imo with openGUI you wont need any of the insane priced gui tools outhere.
    openGUI does the job very well.
  47. frankyboy450

    frankyboy450

    Member

    Joined:
    Jan 21, 2011
    Messages:
    105
    Hello
    It's great that someone released a good GUI toolkit for free, Thanks for that.
    I imported the reccomended build (just added the OpenGUI folder into my assets folder) and that worked fine.
    When I add a button with the menu in the top, it says I have 2 draw calls, I tried adding more, and the draw calls keep rising...
    Is it supposed to do that?
  48. mrzapp

    mrzapp

    Member

    Joined:
    May 26, 2013
    Messages:
    133
    @Muber: Right. At runtime, you switch pages with OGRoot.GoToPage ( "MyPage" ), should be in the docs.

    As for having 2 pages displayed simultaneously, I'll add it to the list, it's not supported yet.
  49. mrzapp

    mrzapp

    Member

    Joined:
    May 26, 2013
    Messages:
    133
    @frankyboy: That's a bug. Try creating objects manually and adding components instead. The top menu was made for the older version, it hasn't caught up yet. I'll add it to the issue tracker.
  50. frankyboy450

    frankyboy450

    Member

    Joined:
    Jan 21, 2011
    Messages:
    105
    Ok.
    I made some empty gameobjects>called them MenuRoot, Page and Button and attached the different scripts to each one.
    The Button script looks like this in the inspector:
    [​IMG]

    The Hierarchy looks like this:
    [​IMG]

    and game like this:
    [​IMG]

    As you can see, there's still 2 draw calls for each button.
    Does it have something to do with me using the javascript version and writing code in C#? I don't think it is..

    Attached Files: