Assets XGUI - UI WYSIWYG, Visual Coding and Code generation.

XGUI is an amazing new Editor Extension for UI Creation

​

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

Spoiler: 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

Spoiler: 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

 

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

 

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.

 

Price ?

 

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.

 

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.

 

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!

 

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.

 

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

 

Hello @Blueberry

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.

 

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

 

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

 

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.

 

@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 ?

 

@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.

 

@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.

 

Nice! This looks to be a great asset!

 

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.

 

This looks really cool - any chance of a video?

 

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!




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.

 

Hey Everyone,

As @puzzlekings has requested, here is a short video about XGUI (yes, the name has changed).

Hope you all enjoy.

 

That plugin looks quite handy dude!

Seems like it could save a massive load of time!!

 

Looking good! This asset has huge potential!

 

This looks like a huge workflow improvement that will certainly save me some serious time working on editor ui.

 

Hey Everyone,

First I wanted to say a quick thanks to @awesomedata , @roryo and @PassivePicasso for the encouraging words.
Its always nice to know other people find what you are working on to be interesting/potentially useful to them, and helps gives motivation to get things done a nice boost.

Second, it was pointed out to me that I left out something very important from the first video. The code Generation! So I am in the process of working on another video that will take care of two birds with one stone. It will show me building a much more interesting UI using the editor as well as show the generation of code once you have completed your layout.

 

Hey Everyone,

So in the process of creating the video about Code Generation, I decided it would be a good idea to show off creating a UI that was a little more "useable" then me just throwing a bunch of random elements up and saying "look it works!!!!".

So I decided to record creating a layout, and then the code generation process as two separate videos.

Here is a video showing me using XGUI to recreate a portion of the "Layout Details" panel from its own editor.

Coming up shortly is the code generation video.

 

Hey Everybody,

Sorry it took a little longer then anticipated, but here is the second video in the Layout & Code Generation video's. This one goes over the code generation.

Hope you all enjoy.
Would love to hear some feedback.

 

Hey Everybody,

Just a quick update on how things are going. No exciting visuals in this one, just lots of text.

Recent Changes

• DataSources have been hooked in to the Content field of all gui elements. You can now target a GUI's local/instance fields and properties as well as those on static classes. Targeting of methods to come soon.
• Created "Add Layout Field" Interface
• You can now add Fields/Properties to a layout.
• Layouts fields/properties are properly saved/loaded
• Layout field/properties are properly generated in the code.
• Update all UI elements to properly set background and content colors in generated code before their display.
• Add Pre & Post code fields to gui elements allowing you to specify code that should be output before and after the element is displayed.
• Element Pre & Post code properly saves/loads.
• Element Pre&Post code is properly generated in the code.
• Added "Visibility" toggle to all gui elements which can be controlled in the hierarchy window. Turning off an elements visibility also prevents it from generating in the code.
• Changed Layout Detail & Element Inspector windows to use a "tabbed" interface displaying each panel of data to help reduce the clutter as the number of windows is starting to add up.
• Started work on custom GUISkin for the XGUI interface.
• Started work on a field wrapper class to streamline some of the backend code.
• Style searching in the Element inspector is now case insensative.
• You can now use cntrl-c and control-v to copy and paste elements in the hierarchy window.
• Create GUI window - The entire informational panel for each type now acts like a button, which is the visual impression it gives.
• Create GUI window now shows up in a utility window instead of a dockable window.
• Create GUI Window - Folder field now displays as a label instead of a text field as you can not actually edit the text and must use the bottom to select a folder.
• fixed misc errors in code generation that caused compile issues.

Theres more, but im not always the best at documenting things when i change them, or in general.

Upcoming changes

• Code Elements - Similar to GUI elements these code elements will be able to be placed in the layouts hierarchy and some of them will even be able to contain children elements (GUI, or CODE). These code elements will help you further design the layout of your interface by allowing you to insert specific bits of code (life if blocks), as well as arbitrary code blocks.
  
  
• Templates - This ones been on my plate for awhile, but I wanted to make sure I was close to done fiddling with the underlying data structures before I started on this. I think I am at that point.
  
  
• Experimental 2017 UIElements Support - This should in theory actually be ridiculously easy to implement as the entire concept is almost identical to the way I handle unity's current GUI system in order to generate the WYSIWYG view.

 

Hey Folks,

Just another small update for those of you interested in this project.

Here is the new list of supported GUI elements.

GUI / GUILayout Elements (13 Total)

• Area, Button
• Draw Texture
• FlexibleSpace
• Horizontal Layout (Begin / End Horizontal)
• Horizontal Slider
• Label
• Password Field
• ScrollView (Begin / End ScrollView)
• Text Area
• Text Field
• Toggle
• Vertical Layout (Begin / End Vertical)
• Vertical Slider

EditorGUI / EditorGUILayout Elements (26 Total)

• Bounds Field
• Color Field
• Curve Field
• Double Field
• Float Field
• Foldout
• Int Field
• Int Popup
• Int Slider
• knob
• Layer Field
• Long Field
• Min Max Slider
• Object Field
• Popup
• Property Field
• Rect Field
• Separator
• Slider
• Space
• Tag Field
• Text Area
• Text Field
• Vector2 Field
• Vector3 Field
• Vector4 Field

There are still a few random ones I noticed I missed after completing these, but that is almost the complete set of GUI functionality now supported. Woohoo!

I still need to go back through and manually verify that I didn't mess up anywhere in the stuff for the code generation for each of them but this is a major step in the direction of an actual release.

At this point you should be able to design a moderately functional Editor Window all from within the WYSIWYG editor and have it work in the Live Preview without ever having to write a line of code.

So the next step is for me to start testing out the code generation and verifying that all that does what its supposed to, in the mean time I plan to send a copy over to my tester so he can play with it and give me some feedback on everything and help ensure that the WYSIWYG part of all the elements are working properly.

I also plan to make another video and post it in the next couple days showing off the layout fields and data sources in action.


To Do list, in no particular order

• Element Scale & Rotation - Allow you to adjust the scale and rotation of GUI Elements.
• Element Animations (2017 AnimatedValues look useful)
• Element Templates - Save sections of a layout as a template which you can quickly import
• Code Elements - Insert things like "if" blocks and setting/getting variables values in to the Layout.
• Experimental 2017 UIElements Support - Still have only given this a brief look.

Well that's everything for now folks. Ill work on getting some screenshots and the video together today and try to get them up.

Thanks, hope you all enjoy.

 

This is awesome! I've always wished the Unity team would spend an update cleaning up and making it easier to understand and use these features, but with this it makes it super easy! Keep it up!

Hopefully see this on Asset Store eventually!

 

Hey Everyone,

Just wanted to give you all a nice quick screenshot of how the Editor is looking currently since its been awhile since I've shown off any screenshots. I am just starting to work on adding little touches of color through out the interface to help distinguish things quickly.



On the far left of the screen you can see the Layout Details, Layout Hierarchy, and Element Inspector Panels.
On the left of the center area you can see the Toolbar with all the supported GUI elements

The Live Preview area is directly next to the toolbar in the middle (showing off a nice Test GUI).

On the right hand side of the screen is the improved GUI Skin Inspector (Yes the name of the style is OopsLabel) and on the bottom in the middle is the Built In Icon Viewer.


So there ya go, a nice screenshot.

A video of things in action to come soon.

 

When will this come out,,can not wait any longer................................................

 

Hey @PaperColor,

Soon, is the goal. I am currently working on Documentation which I have slacked on, a lot. I still have to go through the code generation for all the elements (i know there are a few i plain skipped), and fix any errors that around found during testing. Once those are done, I will submit a version to the asset store where it is then up to the powers the be to do their thing.

There is a slew of things I would like to get in before the first release actually goes live, but i know i will have a bit of time between submission and actual approval to work on adding more features.

 

Very excited about this...keep up the good work!

 

Hey thanks @pixelsteam,

The positive comments help keep my motivation going.

This week was extraordinarily busy with work, and then updating some other assets that I have available so I did not get as much time to work on XGUI as i would of liked this week. However tomorrow I am looking forward to a solid day of binge coding which should hopefully finish up adding in the "code block" elements which are intended to help you flesh out the functionality of the design.

 

​

Hey Everyone,

Just wanted to let you all know that XGUI is still alive and well. Development slowed briefly while I helped get another one of our projects on track, as well as update some of our other assets that are currently live. The other project is firmly on track now and our other asset packages have all been brought up to date, so development on XGUI can resume at full speed.

With that in mind XGUI is now far enough along in its development where the first versions is scheduled to be uploaded to the asset store Friday evening. It is not 100% feature complete yet, but all the features that are in are 100% working. The initial asset review process is anywhere from 2-4+ weeks its looking like. So it seems best to get the ball rolling on getting the packaged submitted, and using the time it takes to get reviewed to continue to work on bringing new features to XGUI. Once the package has had its first approval, update submission reviews take place at a much quicker rate (usually).

The current focus in development is to finish up working on code elements.

Thanks everyone for your interest, and keep your eyes open for more updates coming soon.

 

@SixThreeZero_Studios : good news, and good luck for the launch !

 

Just a quick screenshot to tease.

​

XGUI has gotten a its own GUISkin, which can easily be edited using Skin Inspector, which comes in XGUI.

 

Heya, where can I get my hands on this? I have been looking all over for something like this and all I can find are ones that are several years old and not working anymore.

 

+1 I need this in my life.

As for pricing such a product, just know that some publishers commonly undersell some of their products, you don't need to do this, this is an incredible asset and should be priced as such IMHO.

 

First, let me say thank you for the kind words. When people leave comments like this, it keeps me motivated.

I actually ended up not submitting this to the asset store YET.

I am a bit of a perfectionist when it comes to my products being "intuitive" to use, and having the right "feel" and the last time I was ready to submit XGUI I made sure to step back and use it like a customer would, not like a developer testing. The great news is everything worked. However not everything felt as natural and easy to use as i felt it should, so i pulled it back from submission, and have been working on putting the final touches on. Which of course includes a bunch of features that were not originally going to make it into the original release.

I will attempt to make a more detailed post later today about some of the changes that have went in to XGUI in the last month so that everyone can see what is worth the wait

Also, while the asset store is currently experiencing extremely long wait times for new assets, when XGUI is ready for sale, it will be available IMMEDIATELY on my own site, so at-least you don't have to wait another month+ after I'm done for unity to review it.

I have put a good deal of thought into XGUI, and its nice to hear it appreciated, and that someone else thinks its incredible. As i said to MostHated it is these types of comments that keep my motivation going on this.

Pricing has been possibly the biggest debated aspect of this project for me, and honestly its only because its "for unity" and as you mentioned the general trend is that assets are under-priced which makes the number I have in my head feel way to high.

I really have lots of thoughts, and various pricing models, etc etc etc, and i think i will make a post just about this in hopes of getting some good feedback and conversation.

 

Can't wait, it looks awesome. Keep up the good work. : D

 

It almost works, lol. I tried the demo link in the first post and the preview layout looks like it should, but it wont export : (

** Edit, ah, nm I see now where that version won't export, which makes sense.

 

Oh yeah that demo is VERY out-dated at this point. Its a sickly shadow of what XGUI is now days.
Perhaps I should take the time to put together a new demo sometime in the near future.

 

Yes please. : D I will even preorder it if you make it export. : P I would gladly help test.

 

While I appreciate the enthusiasm and interest in XGUI and your and others offers to pre-order, after talking with other publishers I have decided that is something that might be best for me to stay away from. Do not worry though, the release of XGUI is near.

I've actually spent the past two days cleaning up some odds and ends, and re-setting the project up to be able to create demo's, so maybe with a little luck. I will post a new demo today. Ive also been creating a list of videos to make showing how to use XGUI.

Its close guys, its very very close.

 

Hey Everyone,

Finishing up the demo making sure everything works as expected before I post it.

Here are a couple teaser screenshots from a video I will be doing showing how to use XGUI. This is using the free Necromancer GUISkin available on the asset store.

Animated GIF Showing UI Functioning in the Live Preview Window


Full Editor Screen Capture

​

Keep an eye out for the demo going up later today, as well as more screen shots, and videos coming soon as well.

 

Awesome man, love the progress. : D

 

Hey Everybody,

So one of the things I have not gone over much is the "visual programming" side of XGUI that allows you to write the logic for your UI write in the XGUI Editor. One of the major components of that is Element properties and "Data Sources". So I figured I would give a brief write up about element properties, and the use of values, or data sources on them since they are the foundation of being able to write the logic in the editor.

If anyone has any questions feel free to ask.



Element Properties: Value or Data Source

Most Elements have various properties on them to control their look and or functionality.
The properties in most cases can either be set to a specific Value or they can be set to a Data Source. In some situations a particular property may require that it is a Value or Data Source, in which case you will not be able to switch it.

The main difference between the two is the actual behind the scenes functionality, and what happens when code is generated.

Value Based Properties

Properties that are Value based present an appropriate editor for the properties type for you to enter the value in. When a value based property is evaluated it will ALWAYS be the value entered in the editor. When code is generated for this element, the value entered in the editor is written out.

Example: If the Property was a Vector2 and you had selected it was Value based, you would see the standard Vector2 input field for you to enter the value.

Example of a Value Based Property​

Data Source Property

Properties that are based on a Data Source allow you to select where this element will retrieve this value from. This can be a variable on the layout, a method call on the layout, or a remote variable or method call. This means that when a property that uses a data source is evaluated, the value currently stored in the variable, or returned by the method call will be used. This allows the value for a property to dynamically change when evaluated. When code is generated for this element, the variable name, or method call will be written out. Data Sources are covered in more depth in their own section.

Example of an unset Data Source based Property​

​

 

Wow, this is some really exciting stuff! Can I use my own types for Data Sources?
I can see this really speeding up my workflow process!