XGUI - UI WYSIWYG, Visual Coding and Code generation.

Community Showcases
1

3172660--266964--forum_header.png
3172660--266964--forum_header.png785×200 5.12 KB

XGUI is an amazing new Editor Extension for UI Creation

3172660--266966--CodeGeneration.png
3172660--266966--CodeGeneration.png785×500 40.7 KB

XGUI is a child born out of pure hatred and loathing for the tedious process of creating Editor UI’s (Editor windows, Custom Inspectors, etc) for our own projects. Creating Editor UI’s is a time consuming process that is anything but streamlined and can take days to create a UI you are 100% happy with.

XGUI removes the tedious repetition from the process by providing you with a WYSIWYG UI editor that allows you to design your UI and make changes in real time without having to write code, or reload it. Simply point, click, and fill in the details. Then when you are happy with your design and wish to finalize it you are able to export it to actual c# code.

XGUI is also capable of creating UI’s that can be displayed at runtime by strictly using the GUI and GUILayout Elements. This is especially handy for creating quick diagnostic panels and editor controls for during testing.

Current Features

  • No Coding Required
  • WYSIWYG UI Editor
  • Dependancy free code generation when your done.
  • WYSIWYG window is a fully functional representation of your UI.
  • Create Editor Windows
  • Create Custom Inspector Windows
  • Create Scene View UIs
  • Create Runtime MonoBehavior UIs
  • Supports GUI and GUILayout Elements
  • Supports EditorGUI and EditorGUILayout elements
  • Code Elements allow you to program your logic in the editor.
  • 50 different UI and Code Elements
  • Extendable Element System - Write your own elements
  • Template System allows you to create customized templates for each of the UI types.

There are a lot of features listed here, but I wanna touch on a few important ones. Exported Code, and Creating your own GUI Element Plugins.

Exported Code
Exported Code Overview

XGUIs core functionality is the ability to export your layout as actual c# code for you to use.

The code exported by XGUI is highly optimized and attempts to create as little “garbage” for the collector as possible when displaying UI’s by generating code to create and caching things like styles, colors, etc.

Creating your own GUI Element Plugins
Plugin Overview Besides the included GUIElements you can write your own plugins which XGUI will find when it loads and display in the toolbar. These plugins can define their own code to be displayed in the live preview, and the code that is generated when exported.

This Post is currently being updated to reflect the most recent information.

Dont forget to [Watch This Thread]( XGUI - UI WYSIWYG, Visual Coding and Code generation. watch-confirm)

3172660--266965--InteractiveWYSIWYG.png
3172660--266965--InteractiveWYSIWYG.png785×500 292 KB

8 Likes
[ XGUI ] - Interactive WYSIWYG Editor, Visual Logic Programming, Dependency Free Code Generation
Are there no inspector/editor window layout makers/editors in which you can release what you make?
[ XGUI ] - Interactive WYSIWYG Editor, Visual Logic Programming, Dependency Free Code Generation
2

Hey … it looks interesting … is that on asset store ? … I would give a try to that …

3

Hello @antoripa ,

Its not currently on the asset store yet. I am thinking that I will be posting the first version t the asset store by the end of the weekend, and then of course the unknown amount of waiting for Unity to review it.

2 Likes
4

Price ?

5

Im not sure yet, and I am open to suggestions or input on the subject.

I find myself going back and forth between what I think is a reasonable price from a developers perspective after unity takes their cut, and what I think is reasonable from an independent developers perspective, so outside input would be appreciated.

1 Like
6

Hey Everyone,

Spent the day working on Editor Architect some trying to polish it up to submit it to the asset store, of course I ended up adding a few features as well.

  • Fixed editor so that Layout data persists through code reloads in the editor. The data structure is not able to be serialized by Unity for several reasons, so I had to come up with a work around.
  • Cleaned up the GUI overall to make it more user friendly.
  • GUI elements now have a grouping classification which is used when displaying them so you know which elements are available for runtime, or runtime and editor.
  • You can now set/override the text color for all states of a GUI element (normal, active, hover, and focused).
  • You can now set/override the background image for all states of a GUI element.
  • Added ability to set/override the styles font.
  • Added ability to set/override the styles font size.
  • Added ability to set/override the padding of the base style.
  • Added ability to set/override the margin of the base style.

I have also been pondering some other cool ideas such as “Event & Animation” modules. Though im trying to focus on wrapping up whats already there.

All of the above features are working in the WYSIWYG editor, however all these little additions need to be reflected in the code generator still which isnt to much work and i should have it wrapped up by tomorrow night. However between that and wrapping up the documentation (why does documentation take 10 times longer to write then the code?) it will be another day or so before I get it pushed to the asset store for review.

I am however considering releasing a demo version of the software that lacks the ability to export the code, though saving and loading of layouts would still be in there so in the event they do end up buying the software they can load up layouts they made in the demo version.

Here is another screenshot in which you can see some of the changes to the UI.

3174395--241910--screenshot_002.jpg
3174395--241910--screenshot_002.jpg1229×781 164 KB

7

Very cool !! – This would make the creation of complex interfaces (i.e. tabbed views), a LOT simpler to lay out!

If all it takes is hooking my controls up to some generated code on the backend to make it functional, I’m totally getting this! :slight_smile:

8

Hey @awesomedata
Thanks for your interest, and yes, all you have to do once you have designed your layout is export the code for it, and then hook up your back end logic and you are good to go.

I do have plans at some point in the future to set it up so you can type your back-end logic code in the editor itself so that when you “Export” the code, everything is hooked up and done for you. That is a little ways off though as i want to finish setting it up to support all the native GUI elements from GUI, GUILayout, EditorGUI and EditorGUILayout as well as a few smaller features before i move on to adding more complex features.

Also keep your eyes open, in the next day or so Ill be posting a demo version of the app that features everything but the code export.

2 Likes
9

Is this still being developed? Does not seem like the demo version was released.

10

Hello @MrIconic

Yes this is still being developed. My day job unfortunately requires me to travel for work sometimes, and the next day after my last post i get sent on the road before i could get a chance to finish touching up the odds and ends before releasing a demo. I just got back in to town this morning, and spent the day catching up on some much needed relaxing.

Now that I’m back in town i hope to work on the little bit of polishing it needs tonight and tomorrow and put a demo version up tomorrow, assuming i can avoid any more feature creep.

11

Hello Everyone,

I have finished up cleaning up the demo version of Editor Architect.

There is currently no documentation, though I hope for the most part everything is self explanatory, and if there are sections that are not this will hopefully give me the feedback needed to make it more user friendly.

Once you have downloaded and installed the unitypackage to launch Editor Architect go to the “Window->Editor Architect->Editor” menu item and it will open up the Live Preview, Project View, GUI Toolbar, and Element Inspector windows.

Saving & Loading Layouts
Saving and loading of layouts works, and saved layouts should be compatible with future releases.

Exporting Of Code
Exporting of code is not available in the demo version

Screenshot of Editor Architect in Action

3191475--243718--Screenshot_003.png
3191475--243718--Screenshot_003.png1217×373 62.5 KB

3191475–243751–EditorArchitect_Demo.unitypackage (24.7 KB)

12

Quite excited about this - looking forward to giving it a go on my lunch break!

13

Thanks @Velcrohead ,

If you share the same hatred for creating GUI’s by hand that I Do, I think you will find Editor Architect to be exactly what the doctor prescribed. After you get a chance to check it out, any feedback would be greatly appreciated. Its easy to make an editor that make sense to me, but feedback from people testing the demo is what will make it useable for the masses.

Here are a couple tips.

  • If you use absolute positioning on a GUI Element you can hold down the control key and move it around in the Live Preview window to position it. There is a known issue with trying to drag a draggable element “across” another draggable element where it ends up switching which one you are dragging. This should be fixed in the next update.
  • -If you are using absolute positioning, you can hold the Shift key down over the live preview window and small ugly square show up that allow you to chance the size of the element.

Future Features

  • Finish Adding in the GUI, GUILayout, EditorGUI, and EditorGUILayout elements that are not in yet.
  • Duplicate GUI Elements - Right clicking on a GUI element in the hierarchy view brings up a context menu. From here you will be able to “duplciate” a GUI element and create an exact replica of it (and its children).
  • Enable/Disable GUI Elements - When a GUI Element is disabled, it will no longer be displayed in the live preview. Handy for when you are designing sections of a a GUI that are not always visible.
  • re-write of the dragging / resizing system for elements that use absolute positioning.

Hope you enjoy.

14

@SixThreeZero_Studios : your asset seems interesting. I gave a quick try to the demo, and I have a question : if I want to add a ‘Image’ widget, do I need to use a label and texture it, or do you have another way to do it ?

15

@Pode

Yes, currently the only way inthe demo to add an Image is a label. However in the current working version both GUI.DrawTexture and GUI.DrawTextureWithTexCoords are in and working.

Been a bit slow on posting an updated version as Im finishing up a small re-write of some of the underlying mechanics to make the system more flexible as well as keeping up with a few other assets we have released. Another week maybe an Ill have another updated version of the demo to release for people to test.

16

@SixThreeZero_Studios : thanks for the answer. Something that I was planning is an editor extension with some kind of special view. I’m not sure it can done the ‘traditional way’, so I don’t even know if it’s doable with Editor Architect.
I want to show a view ‘à la Powerpoint’ : the various panel of an app’s GUI, that can be seen in the Scene View usually, shown as a vertical (or horizontal) scrolling ribbon in a dedicated Editor view, with some added widgets.
That would help my designers to create their GUI quickly if they already have some background in Powerpoint and tools like that.

17

Nice! This looks to be a great asset!

18

Hey @Pode ,

I Think what you are wanting to do, might be possible. It is possible in unity to change the scale of the GUI before you draw some UI elements, draw the UI elements, then reset the scale. Using something like this, if you were to set it up so each “panel” or “view” was its own Layout in editor architect. I think I could set it up so that all open layouts are displayed at a much smaller scale in a ribbon like you suggested, maybe.

19

This looks really cool - any chance of a video?

20

Hey Everyone,

Just wanted to give you all an update on things and show off a screen shot of the new skin/style editor.

Initially I was avoiding using GUISkin’s an opting to generate the styles at run-time. The more I went down this path, the more I found myself mimicking a lot of what a GUISkin is, so it became rather obvious it was simply best to use a GUISkin and be done with it.

It was at this point I sat down and thought about what my issues with GUISkins were.

The number one thing to me was editing a skin and its children styles via the Inspector was downright awful, and unpleasant. The interface was hideous and unwieldy, and it lacked the ability to do basic things like duplicate entries, delete specific entries from the list, import styles from other Skins.

So once I determined what my issues were with the inspector and editing GUISkins, I aimed at fixing that.

So now we have a custom inspector for GUISkin’s that displays everything to us in a much friendlier format, and allows us to do things like duplicate styles, delete specific styles, and copy styles from other GUISkins!

3236046--248589--Skin&StyleEditor.png

Now that the changes to how I handle Styles have been completed, I can go ahead and move on to some more interesting aspects.

Most certainly, I will try to get one together in the next day or so and post it up.

1 Like