I don't get how you sort UI elements Z-index in Unity inside a Canvas, is it by hierarchy order ?
I'm trying to do a settings screen like in this video: https://www.youtube.com/watch?v=-qNo1jloR_k
It's quite simple, you click on the button and it set the whole panel as first sibling in the hierarchy.
But this is what I get:
https://gyazo.com/cec14f21df2ded191875e6a8cfd9f124
Also, my gameplay panel had a red background, my graphics panel a green one, and my sound panel a yellow one.
I could avoid this problem by changing alpha on panels, but would like to make it work with z sorting... that I can't seem to understand on Unity.
Using unity 2017.1.2 and .NET 4.6 .
The child that is lower in the hierarchy is rendered on top of other ones.
Let's say there are 2 panels. panel1(red) and panel2(green).If the hierarchy is like this:
-panel1
-panel2
Then panel2 will be rendered on top of panel1. So, you'll see green panel.
Hope this answers your question.
Another suggestion, it is better to deactivate the unused panels and activate only the used panels. Because, if the unused panel is active, when it's not shown, it'll still take the processing power which is a waste. For example, if you have animation in the main menu, but currently you are showing the settings panel, your approach will keep the animations running in the main menu.
Related
I'm trying to make a toggle UI like the one on this youtube(https://www.youtube.com/watch?v=mQTnB71NUAw&ab_channel=MaxShakurov").
This example uses a button UI to make this happen. But I'm trying to make it with a toggle UI that Unity provides.
But here is the problem that I faced.
Issue: There is a big difference in the interactable box size of what I expected.
Below is an example to make it easy to reproduce.
My Unity version: 2018.4.23f1
I created a new project.
I added a default toggle UI
---> There is a big difference between my expectation of interactable box size and the actual one.
My initial expectation was to make toggle UI to be able to interact with the size of its' target graphic.
How can you make a toggle UI to be able to interact on only the size of a target graphic?
The interaction space is expanded to any child object having a graphic element (Image, Text, etc) with Raycast Target enabled.
All you have to do is
Go to the Label object in the Hierarchy
Go to the Text component in the Inspector
Disable the Raycast Target checkbox
As a result you should now have only the checkbox itself interactive
I have 3 dropdown that are stacked on top of each other; I use canvas group to make the non relevant ones invisible; although the click is intercepted only on the topmost control.
How do you work around this? Should I keep track of the position in the hierarchy and swap it when I need to have a specific dropdown control so I can use it? Feels like a lot of work...hopefully is there an easier way?
The image component of UI elements has a Raycast Target property that you can set to false. This will make them unclickable.
in the mobile game we are designing there exists three somehow similar menus:
Main Menu (with a bunch of icons like home, settings, share,toggle
sound,....)
Pause Menu (almost the same with just the text and icon sizes and
placement changes)
EndGame (very similar to pause menu with options to restart game)
now, there are at least two ways I can think of creating these menus:
Create one menu and change positions and sizes of needed icons/texts
in script
Just create 3 different panels in unity UI and call each one that is
needed.
As the assets used in both cases will be the same (well, in second case maybe more game objects) which one is a better solution?
I can write the script as easily as I can create menus (both take almost the same amount of time to develope)
I would recommend to make some kind of MenuViewManager class, with ability to load menu view from XML file. This can lead you to nice translation system in the future and can be very responsive for changes.
Here I've found some article, which can help you start:
http://unitynoobs.blogspot.com/2011/02/xml-loading-data-from-xml-file.html
I recommend having one Canvas with multiple panels. Each panel can be for a different menu (main, pause, game over) or a different set of options in the same menu (main, settings).
Have a script on the Canvas with places to drag each panel. Then turn on/off the panels from code.
You can also create a script to attach to the panels, which has public Button variables, which you can assign in the inspector. The Button objects you drag there in the inspector can be prefabs, so you can reuse them in any menu.
The more reuse you have, the more efficient it will be.
I am using unity 4.6 to develop a small game.
There is no gui text object in the menu. Therefore I created an empty object and added gui text as a component. But it does not display the text I type. Need help on this. Thank you
I think that 4.6 is when they introduced the new UI system so you can use that.It is actually pretty easy...from the drop down menu that you created the game object go to UI. There you can select from a number UI options one of witch is Text or UI Text if my memory serves me well. When you click it it will create a canvas object and UI Text object that is a child of the Canvas.From here just select the Text object and in the inspector you have a textbox which should serve your need :) Also the Canvas is your screen in the sense that if you drag your text to the top left corner of the Canvas(in the scene view) your text will be in the top left corner of the screen when you start your game(at least in the default settings). Hope that helps!
P.S. Also here is a link to the new UI article that the Unity guys have on their site: https://unity3d.com/learn/tutorials/modules/beginner/live-training-archive/the-new-ui
That happens sometimes. Delete the current gameobject and the guitext in the scene. Do what you did backwards.
Create a new guitext then create a new empty gameobject. Change the transform of the empty gameobject to 0,0,0 then drag the new gui text into the empty gameobject.
That should solve your problem.
The default text you should see if that went well is "New Text".
If you are editing the new text in the text area and it stopped showing, you will need to increase the width and sometimes the Height of the guiText. Don't use the scale tool as that will work but the graphics you get will be low quality text rendering on the screen.
The JavaFX 2 colour picker has a button that pops up a colour chooser pane like so:
I'd like to do something similar, in that I'd like a custom pane to pop up when the button is clicked on and disappear when something else is clicked (in my case, a few image thumbnails). What would be the best way of achieving this? Should I use a ContextMenu and add a pane to a MenuItem somehow, or is there something else I should look at?
It's kind of difficult to do well with the current JavaFX 2.2 API.
Here are some options.
Use a MenuButton with a graphic set in it's MenuItem
This is the approach taken in Button with popup showed below's executable sample code.
Use a PopupControl
Take a look at how the ColorPicker does this in it's code.
ColorPicker extends PopupControl. You could do this, but not all of the API required to build your own PopupControl is currently public. So, for JavaFX 2.2, you would have to rely on internal com.sun classes which are deprecated and will be replaced by public javafx.scene.control classes in JDK8.
Use a ContextMenu
So, I think your idea to "use a ContextMenu and add a pane to a MenuItem" is probably the best approach for now. You should be able to do this by using a CustomMenuItem or setting a graphic on a normal MenuItem. The ContextMenu has nice relative positioning logic. A ContextMenu can also be triggered by a MenuButton.
Use a Custom Dialog
To do this, display a transparent stage at a location relative to the node.
There is some sample code to get you started which I have temporarily linked here.
The sample code does relative positioning to the sides of the main window, but you could update it to perform positioning relative to the sides of a given node (like the ContextMenu's show method).
Use a Glass Pane
To do this, create a StackPane as your root of your main window. Place your main content pane as the first node in the StackPane and then create a Group as the second node in the stackpane, so that it will layer over the top of the main content. Normally, the top group contains nothing, but when you want to show your popup, place it in the top group and translate it to a location relative to the appropriate node in your main content.
You could look at how the anchor nodes in this demo are used to see how this might be adaptable to your context.
Is there a relevant update for this for JavaFX8?
There is not much difference of relevance for Java 8, in general the options are as outlined in this post based on Java 2.2 functionality. Java 8 does add Dialog and Alert functionality, but those are more targeted at use of dialogs with borders, titles and buttons rather than the kind of functionality desired in the question. Perhaps you might be able to start from the Dialog class and heavily customize it to get something close to what is needed, but you are probably better off starting from a blank stage or PopupControl instead.