Unity UI How to handle GUI and Input in Unity 2018

I am about to setup a system for User Input and GUI for upcoming projects as I have reoccurring issues. I hope that you can give me some advice or even link to existing Assets that can help, but I rather want to make it on my own and keep it slim. Here are the issues I have:

GUI
Since UnityGUI came out I was never quite happy with it. The GUI system in general is fine but the default elements are sometimes hard to work with. So I planned to make some custom UI Elements but I wonder if that is even feasible. One example are toggles I have that need to change color of a lable as well. It also proved better to use Buttons which color I change instead of Toggle elements.
But then I end up having an additional custom toggle script next to my button.

More things I have issues with:
Default settings, automatic navigation is always on as well as Raycast target which is bad for simple Lables or images.

Each element has its own settings like hover color switches of a button or color and font style of text. If you want to change something later in development you are basically screwed. Maybe I can make buttons in a way that they refer to a global preset file or add scripts to Text elements which change font and color on Awake(). As I use localization I already have to add scripts to Text elements anyway.

Nested Prefabs might also be helpful to make a set of elements like Buttons which can easily be adjusted.

UserInput Events. There are only OnClick() and OnValueChange() events and mostly those are enough. But sometimes this doesn’t work out, for instance the ToggleGroup is quite weird, it will call OnValueChange() twice once for each toggle that has changed and this can make it hard to manage.
Maybe toggles should have an OnSelected() event.

I’d rather have a toggle group that simply returns the ID or reference to the active toggle.

Another issue is that you don’t have an event that actually handles user input. For instance I have sliders which change value not only by the user but there is no way to differentiate if the value was changed by the user or by script.

I wonder if we will see changes in Unity 2018 and if others have similar issues but solutions.


User Input Manager

Key bindings
I already have script that allows binsing keys and combinations to individual actions. Is there anything available in Unity meanwhile?

Multiple Input Devices (Touch control)
I more often have to deal with Touch input and therefore I want to build an input system that allows me to simply make use of both Mouse and Touch inputs without too much trouble. I’d like to put as much logic on the InputManager as possible.

Pointers
One idea is to make Pointer classes or variables, like Pointer1, 2 etc. which has values like position and press states.

The mouse will mostly be Pointer1 but might also become Pointer2. One example for this is press and drag actions. The main advantage of having something like this is that whether the user is using the mouse or a finger it will just work. Also the script using it does not need to handle those things.

Another idea would be to make something like a ScrollDelta variable which would be changed by the scroll wheel and by a two finger gesture.

On the other hand the camera script could also refer to something like TwoFingerDelta and the scrollwheel separately to make it less restricted.


I will make a list of things I need personally but I would be happy if you can give me some suggestions and share experiences if you ever did something similar. Maybe link to existing articles that cover this topic, whether or not it is related to Unity.


And a general question, do you think it is better to make use of Events like OnPointer1Released() or using bool Pointer1Released? Using the latter makes code easier to handle, e.g. everything happens in Update() in fixed order but also leads to unnecessary if statements that are false 99.99% of the time.

 

For this problem I made a solution and put it on the Asset Store. My Asset Better UI not only solves this problem but a lot more which you didn't even mentioned, like resizing stuff depending on the resolution (e.g. font sizes).

hmm... that would be something cool. But the default settings are written into the code of the components itself. I don't know a way or asset how to solve this right now.

I have thought about that too for a while... and I also thought about writing some nice tools for it... but I didn't (yet). I would call such a feature "themes" or "skins". Unfortunately, I have not much time for such projects right now, but I would love to do this

you can always add an

EventTrigger

component if you need more events. For toggles there is a bool passed to the registered method which specifies whether the toggle was turned on or not. You should always check against that bool.

AFAIK the

StandaloneInputModule

of the UI can handle everything... I am pretty sure that both work out of the box and even at the same time

 

I will take a look, at least it seems to be possible to make custom Elements based on existing once, I never really tried. Having extended view behaviours is already a great help.

The main issue I see is how to implement it without additional overhead for the build. If it is static then maybe in the Awake() method this could work, but a runtime solution would need another approach, e.g. if you want a dark and light theme.

Good to know.

Not sure if it does what I have in mind but I take a look.


Also I will investigate what the new Input system provides for us. But from what I see this is not about GUI right?

 

I think I already got something working to add styles. Not sure if this is a bug but in Unity 2018.1.2f1 I was even unable to multi edit Text objects. Anyway I got a system using Scriptable Objects and editor methods to change styles of custom GUI Element extensions such as Text. It even works with Project assets like Prefabs. I do it for myself but maybe I consider to make a real project out of it, I have a few other things in mind.
It would even work to load custom style scripts to define the styles, similar to css.

Another point I wonder, while I can use EventSystem.IsPointerOverGameObject() is there anything that tells me if an UI element is active? For example I could use the above to disable certain actions like Camera Movement on the MouseAxis while the mouse is over the UI, but when I for example drag a slider and I move the mouse out of the UI it still should not move the camera as another controll input is active.
So I need to tell if any UI element is currently active but maybe I even have to distingueish between certain elements as well.

Meanwhile I will also see what solutions are available to use things like xml, html or whatever script language to either build the UI or at least help in creating it. It all has pros and cons but overall it can be quite helpful to have a system like this. For instance Ubisoft created such a system for themselfes.

On the other hand while I worked with WPF and HTML I would not even call it a time saver, it only becomes valuable once you want to make slight adjustments on the layout. Again, if you want to move all headline text elements in your windows in Unity you can spend a day editing all your prefabs and scenes

At least I could also extend my style system to also support layout, like the RectTransform values.

 

nice that you have you skin system. I wonder what it is capable of regarding colors... (does it check for certain colors and replaces them or do you have a different approach)

regarding your question: I think

EventSystem.currentSelectedObject

is what you are looking for.

I created also a system for my needs for me:
It is a Layout system which stores layout-data objects which are connected to prefabs. I can add other data-objects to containers of the layout object as I need it. The Prefabs also have a Layout Component which is strongly connected to the data object. There I can define UnityEvents with name-IDs which can modify properties of the Layout (such as text, color, ...).
The Idea is that I can create the Layout Data objects in code and set the content for the unity events (like text) in the code. These Layout Data objects can exist without a visual representation. So, I can instantiate the prefabs for them at any time.
I needed this originally for popups which should not replace existing popups but wait until the previous popup has been closed. But I realized that I created a very mighty tool which I now use for all the UI of my current project. A nice side effect is that I could easily implement a navigation history (navigate back) easily.
The only downside (besides some little design mistakes I would like to change but would be too much refactoring now) is that it is not possible to retrieve certain values from the data object. to do this I need to register at the "creation" event of the prefab instantiation and then dig into the components of the instantiated object...
I'm talking and talking and only scratched the surface of this Layout framework... Probably it is too hard to understand the way I described it... but maybe you got my Idea and I could inspire you

 

I have a screenshot. It is still very basic and all started with Text which is my major concern. You can toggle each value to be used or not, if off then the value is not changed by the style. You can also add multiple styles. I can also think of other commands like additive, multiply or so for Colors and Font Size for instance.
Here I use 3 Text Styles, default, warning and headline. The colors of default text are defined by the object and are only overriden on the warning text.



What I do basically is search all objects of a type and see if they have a style of the one I currently changed, this could be done in runtime or when you have "Always Update" on it updates immediately.

Also basically each object has a custom Inspector.
Edit: As you can see i have LocalizedText, which extends StylizedText. Localized is obviously being used for getting text based on a key. I like to have an all in one approach and not using dozends of components for waht is actually one thing.

I don't quite understand your Layout System but good if it works for you. I will see what is possible without spending months developing something. At least adding LAyouts next to Styles of hte above example could already work. It would at least help for the most frequent things like relative position and padding.

We have many small projects that sometimes need rapid results and often turns form a prototype into a final product, this is why making changes quickly is important.