UI Design Menu Item | Scaling issue / distortion - best practice?
Hello there, I was wondering if somebody could help, please.
When an item from the menu is selected, I want a graphic - a PNG to appear in the middle of the screen. I have managed to achieve this although I will need to figure out how to the graphics to behave. I have set the sizing to manual and adjusted according to, 'hard -sizing' where I want the graphic to appear. This works to some extent, but when I change the size of the viewable window, the graphic can distort to some extent.
Can anybody recommend a way of getting this to work more effectively and not distort and warp in different browser windows? The web designer in me wants to scream at it. If it distorts as shown, it will equate to a broken element in my mini-game.
Here is an image on Imgur. Have a good bank holiday all.
Howdy, Stranger!
It looks like you're new here. If you want to get involved, click one of these buttons!
Comments
Is the Menu using "Adventure Creator" as its Source?
Switch over to Unity Ui Prefab, if so. With this mode, Menus are scaled based on the Canvas Scaler component, which offers a lot more flexibility in terms of how its elements react to screen changes.
Setting UI Scale Mode to Constant Physical Size will keep it from distorting at all, but you may need to play with it to have it still display correctly at lower resolutions. As this is a Unity component, however, resources on its usage can be found on the Unity forums.
Hello Chris,
Thank you for the suggestion.
I have switched to the Unity Ui Prefab, but I wonder if there is something else I have missed?
When I changed the source to Unity UI prefab, the UI / graphic disappeared. Do I / can I add a component for the canvas or is it something else I am missing? Or do I need to do something else to allow it to be compatible with AC?
I have attached an image for your reference.
https://imgur.com/a/hHIxyi8
Img
Thanks Chris,
Apologies for not being clear: with Unity UI mode, you supply a Canvas that already has the various visual components the make up the menu.
The key difference between the two modes is that "AC" menus handle both the visual and the logic, while "Unity UI" menus rely on the logic only - with the visuals being a part of the Canvas prefab.
Details on working in this mode can be found in the Manual's "Unity UI menus" chapter, and a tutorial can be found here.
Hello Chris, thank you for the tips. It sounds a bit more involved than I initially thought and will need to take my time to use/learn the Unity UI canvas. This sounds completely separate to the Adventure Creator system.
If that is so, I will I also need to hard code in C-sharp? Is there a way I can get AC to communicate with the Unity Ui menu?
Thanks,
p.s will read the link in full also.
No need for any scripting knowledge - Unity UI is effectively a set of pre-made components that allow for the creation of user interfaces.
Unity has some pretty good introductory tutorials, and I'd say this one should be enough to get you with the knowledge needed for working with it:
https://learn.unity.com/tutorial/working-with-ui-in-unity#5fa0d710edbc2a002009016b
If you're new to Unity UI, I'd say it'll be best to go through this first - the AC/UUI tutorial above should be a lot more clear once you then come back to it.
Thanks Chris. I have some rusty/memory knowledge of working with the Unity Ui but a reminder is welcome.
I have however embarked on your tutorial - "creating an Inventory Bar in Unity". I have got as far as getting the panel in the canvas to work - But I can't get the image to scale up and down with the screen size ( as if it were a responsive website )
I can get the image/panel to sit in the centre both on the vertical and horizontal axis but can get it to scale correctly... Any advice? Some devs seem to imply that I will either need to hardcode that function in or look at alternative tools such as the 'UI Tool Kit'
https://imgur.com/a/2AnwDbV
The link attached shows the image, but it only partially works. On a big screen, it looks like throwing rice into a bucket and - small image, big void.
Small screen - doesn't fit correctly.
When building a Unity UI based Menu, AC is only dealing with its functionality (i.e. when it appears, what happens when clicked), but its appearance is handled by Unity's UI components.
There should be no need to involve UI Toolkit - how your Image reacts to differing screen sizes is down to the Canvas Scaler component on the root Canvas object.
You can find more details on the Canvas Scaler here:
https://docs.unity3d.com/Packages/com.unity.ugui@1.0/manual/script-CanvasScaler.html
Hello Chris!
That is what I assumed.
I have managed to eventually get the panel to scale correctly. The reason I was fixated on this, I wanted to get the UI element to scale with certain browser window sizes. After re-reading the link you sent across, and after some prodding and poking, I managed to get it to work so that UI, the object in the middle of the UI canvas scales up and down according to the screen size. It was trial and error in a word.
At least, it appears to react how I would expect when played play tested in the Unity Editor.
**
On the Canvas Scaler Compent,** for any readers out there. It was set to =
UI Scale Mode = Scale With Screen
Ref Res = 600 x 400
Screen Match = "Expand"
It was the 'expand' element that got it working. Hopefully, someone will find this useful.
I think I will have to explore the UI Tool Kit one day though, it looks like it could open up some serious doors for me.