Misplaced UI made with UI in hololens emulator - visual-studio

I got a small problem and I can’t really find the source of it. I just created a Canvas and put a Panel in the top right corner. I got it to the right scale at 3: for the Hololens and loaded it up in the Holoemulator. The problem is that even though the panel is supposed to be in the corner, it is placed almost in the middle of the screen in the end.
Is there anything I can do to fix this or is there something I am missing?
If I need to provide more information then please tell me.

Could you double-check the [Render mode] of your Canvas? Is it set as World Space? In this render mode, the Canvas will behave as any other 3D object and will render in front of or behind other objects in the scene based on 3D placement in the scene. You need to adjust the position of the canvas from the perspective of the camera.
However, according to your post, it seems that you want to place UI elements on the screen rendered on top of the scene. If so, You should turn the [Render mode] to [Screen Space - Camera]. More information please see: Canvas

Related

Unable to Move the Canvas or Change Any of the Transform Values

I am using Unity 5 and I started to make a menu scene. When I made the canvas, all of values under the Rect Transform component are locked and it says "some values driven by Canvas." The only thing I can change is the z position when using the gizmo in the editor. I can't reset the position or anything. Why is this happening?
This means that the canvas's canvas component has it's render mode set to Screen space - overlay. This forces it to be the size of the screen. Change it to World Space and it will allow you to resize it and move it around.
Changing the Render mode is not an ideal solution; neither is Overlay mode the reason why this is happening at all. World Space is just a render mode that changes the way your whole UI behaves and would mean a whole different set up and a whole lot more work just to get a child UI object to move independently.
Here is the description of what World Space is for from the Unity site:
In this render mode, the Canvas will behave as any other object in the
scene. The size of the Canvas can be set manually using its Rect
Transform, and UI elements will render in front of or behind other
objects in the scene based on 3D placement. This is useful for UIs
that are meant to be a part of the world. This is also known as a
“diegetic interface”.
The Rect Transform usually gets locked because it is a child of another Canvas Object which controls its Transforms. The way to fix this is to overwrite it by adding a “Layout Element” component to it. From there you can configure it to work the way you like and it can have transforms independent of the Parent UI Object.
For full details, see this Unity support page: https://support.unity3d.com/hc/en-us/articles/115000179163-How-to-overwrite-Width-and-Height-values-that-are-driven-by-a-Layout-Group-in-runtime-
Canvas is depend on game tab in your window panel.
Adjust panel by use of close tab or resize panel or doc game panel.
It will help you make default 800 X 600 canvas.

SKSceneScaleModeResizeFill on ios8 scales improperly

I have written a game in SpriteKit using objective C and it works perfectly on ios9 but it looks hideous on ios8. I would really like to know how to fix this problem, either by “correcting” my mistake, or if I have no mistake then by finding a workaround for the bug in ios8.
I think I have really done all I can to make the problem as clear as possible, including making loads of screenshots to illustrate the problem and also making a new Xcode project that is as simple as possible while still showing the problem.
If you want to try the Xcode project, here is a link for it….
xcode project
If you want to see the screenshots of the problem, then here is a link for the screenshots.
Screenshots
Now I will try to explain the code I wrote and the problem illustrated in the screenshots.
PLEASE REMEMBER: My code works perfectly on iOS9.3. So my code is obviously not complete gargage. But admittedly, I am not an expert on handling screen rotation, so probably my code could be better.
I should probably mention that both scenes have scale mode set to SKSceneScaleModeResizeFill. I chose this mode because I had tremendous difficulty doing proper layouts for all possible screen sizes (including iPhone) when working with SKSceneScaleModeAspectFill. I do I hope I can solve this problem while sticking with SKSceneScaleModeResizeFill.
Anyway, my app is a SpriteKit game with two scenes. The main scene is the GameScene, where you play the game. And this scene has a pointer to the SettingsScene, where you can change the settings of the scene. (e.g. change the level of difficulty).
Anytime the user rotates the screen, GameViewController detects this change in viewWillTransitionToSize and tells the GameScene object about the new screen width and screen height. Game Scene then adjusts the positions of its sprites in consideration of the new screen orientation and then tells its SettingsScene object about the new screen width and height to that the Settings scene is properly laid out as well.
Please note that with this design, all sprites on BOTH scenes get repositioned any time the user rotates the screen REGARDLESS of which scene is actually active at that time..
As I said before, all works as expected on ios9.3. But on ios8, the result is attrocious. The screenshots illustrate one example of typical experience on ios8. If the user rotates the screen while using the game and then goes to the settings screen, he will see something awful. And will often be trapped in this terrible experience because the button for going back to the main game might not even be fitting on the screen anymore.
At first, it might seem like I am failing to reposition sprites for landscape mode in the settings scene. But this explanation is wrong. The text on the screen shows that the last layout was performed with the landscape orientation in mind.
So what is going wrong here?
Any suggestions would be highly highly highly highly appreciated.
Thanks!
-j
p.s. In case you don't want to look directly at the linked project file, here are some details about the example code. GameViewController implements viewTransitionToSize to handle any screen rotation. It directly tells the new screen dimensions to GameScene, which then tells SettingsScene. Both scenes rearrange their sprites in consideration of the new screen dimensions. And all goes well on ios9. On ios8, however, the inactive scene ends up looking hideaous when it is presented even though it clearly did reposition its sprites according to the new dimensions.
the problem is easily resolved by these lines....
gameScene.size = newScreenSize;
settingsScene.size = newScreenSize;
anytime the orientation changes.
This code is not required for ios9. The scene knows what size the screen is without assistance. But for ios8, it seems to be needed to add this code.

wxToolBar changing device coordinates

Using the mouse I am drawing 2D shapes on the client area of a MDIChildFrame. Recently I have added a wxToolBar to the frame and when I now draw a shape on the client area it seems that the points have shifted by the size the toolbar. Imagine that with mouse I am clicking on (100,100) and drawing a line to (150,150); however, the line appears somewhere (75,75) to (125,125). By the way, wxMouseEvent GetPosition(); reports (100,100) to me.
Removing the toolbar fixes the problem however, I want to keep the toolbar for ease of tool selection.
I use the code:
m_ToolBar=new wxToolBar(this, wxID_ANY);
m_ToolBar->AddTool() //
m_ToolBar->Realize();
this->SetToolBar(m_ToolBar);
Any ideas will be appreciated.
You can always use wxWindow::GetClientAreaOrigin() to manually offset the coordinates by the toolbar height but normally this shouldn't be necessary, and if this doesn't happen with a "normal" frame but only happens with wxMDIChildFrame it would be a bug in wxWidgets that should be reported as usual.
It's also recommended to not draw over wxFrame itself but rather put a wxWindow into it and draw on it. This should also take care of your problem.

UI doesn't show up in #Screen tab in Unity 4.6

I have just upgraded Unity to version 4.6 and tried to create a button by Create -> UI -> Button.
However, this button doesn't show up in #Screen tab but it does in Game tab.
Please look at the screen shoot below:
Another question is: The default width and height when creating a new button is 160 x 30. When I change the source image with my own image button, I have to change the width and height parameters in rect transform. Is there any faster way to automatically obtain new width and height based on the image which I insert?
Thank you very much!
First, double click the button in your hierarchy and see that it indeed does not show in the Scene view, excluding any kind of zoom problem. (By the way, I'm assuming you mean "Scene" and not "Screen", right?) Things in different cameras or canvases might have very different scales but appear correctly in the Game view. I don't know how used you are to Unity, so I'm sorry if this sounds obvious. :)
Next, check the dropdown labeled "Layers" on top of Unity's editor, to the right of the Play, Pause and Step buttons. See if the layer of your button (which in this case is "UI") is visible. It should have an open eye icon next to it.
Regarding your other question, after dragging your sprite to the Image component, you can press the "Set Native Size" button, which will set the size of your object to the dimensions of your Sprite. Regarding the new UI, I think this is as automatic as it gets. Note that "Set Native Size" will only appear if your Image type is set to Simple (probably what you want) or Filled in the component.
I had the same problem before and here's a possible solution.
By default, the editor camera (Scene Tab) renders the World Space,
so your Canvas component's render mode should be set to "World Space".
The problem may only occur when you're trying to (or supposedly) render your UI in Screen Space - Overlay or Screen Space - Camera in the Canvas component.
So if you want to properly edit UI objects in the scene tab/window; set the Canvas component's render mode to World Space.
We don't have this problem in Unity 4.x before because I think Unity automatically renders any render mode from the Canvas component, however, that doesn't happen in Unity 5.x. I'm guessing it's either intentional that they do that or it's a bug on Unity UI feature.

Unity 4.6 - How to scale GUI elements to the right size for every resolution

The new Unity 4.6 comes with a new GUI, when I change de resolution on Unity the UI Button scales perfectly but when I test on the Nexus 7 device the Button looks too small. Any idea how to solve this?
Unity's new GUI system uses "anchors" to control how gui elements (like buttons) scale in relation to their parent container.
Unity has a tutorial video on how to use the new "Rect Transform" component (where the anchors are configured) here: http://unity3d.com/learn/tutorials/modules/beginner/ui/rect-transform.
The last half of the tutorial is all about anchors. That page has links to the entire tutorial series. It's not too long. You should watch the whole thing.
Specific to your question:
The anchors are visible in your first screen shot. They are those 4 little arrows at the top left of your button.
Right now, your button is only anchored by it's top left corner.
The two right anchors need to be dragged to the right so that the right edge of your button is anchored to a space inside its parent container.
Depending on your situation, the two bottom arrows may need to be dragged down so that the bottom edge of your button is anchored as well.
The video I linked above covers all this in detail.
Lastly, for the font size to scale nicely on different resolutions, you will need to add and configure a reference resolution component to the base canvas of your UI, as Ash-Bash32 wrote earlier.
Update: The best way to add a Reference Resolution component is through the inspector window for the base canvas in your UI.
1) click the "Add Component Button" at the bottom of the inspector.
2) type the word "Reference" in the search filter field.
3) select the "Reference Resolution" component in the search results.
The Reference Resolution is now renamed as Canvas Scaler.. Along with the renaming they have added many more features for the dynamicity of the Canvas. You can go through the Unity Doc of Canvas Scaler and also take a look at this article for a practical example of how and why to use Canvas Scaler. Also make sure you use the Anchor Points to good effect to make this more robust...
To Scale UI added the ReferenceResolution Component to the Canvas you want to scale.
P.S. Theres no Documention for ReferenceResolution
If you want the button to be the same size for all screens and resolutions, you have to add the canvas scaler component to the canvas and the set the screen match mode to: match width or height, here is the link to the docs, this helps a lot if you want to aim to different sizes or resolutions:
http://docs.unity3d.com/Manual/HOWTO-UIMultiResolution.html
This becomes giant and convoluted once you start laying things out in code AND using a canvas scaler, so I wish to provide a thorough answer to save someone the hours I went through.
First, don't use anchoredPosition to position anything, unless you fully realize it is a 0.0 to 1.0 number. Use the RectTransform localPosition to do the actual laying out, and remember it's in relation to the parent anchor. (I had to lay out a grid from the center)
Second, put a canvas scaler on the parent layout object AND the inner ui pieces. One makes the layout in the right position, the other will resize your elements so they actually show up right. You can't rely on the the parent unless the children also have scalers (and Graphic Raycasters to touch them).
Third, if you have a scaler, DON'T use Screen.width and height, instead assume the screen is the same value you put for the scalers (hopefully you used the same, or know what you're doing). The screen width always returns the actual device pixels, retina devices too, but the canvas scalers DO NOT account for this. This probably gives unity the one remaining way to find actual screen dpi if your game wants it. Edit: This paragraph applies to any parent canvas connected to the code doing your laying out. Not stray canvases, you can probably mix it up. Just remember unity's guidelines on performance with canvases.
Fourth, the canvas is still a bit buggy. Even with the above working, some things don't render until you delete and recreate a canvas, if you re-open the scene or it crashes. Otherwise, the above is the general "rules" I've found.
To center a "grid of things" you can't just use half of the canvas scaler's width or height, you have to calculate the height of your grid and set the offset by half of it, otherwise it will always be slightly off. I just added this as an extra tip. This calculation works for all orientations.

Resources