I hope I am not too boring because again I have one dumb question.
I have made my game near till end but now I have one big problem. My images , text etc in my Canvas panel are not display correctly on all devices.
I made the game and it looks perfect on unity. Then I build the same game to my Galaxy S8 Device and i realized that some images are out of the screen in other words I can not see some images in corners or some text .. That means my canvas settings are not correct ..
This is my canvas settings.
When I change UI scale mode to constant pixel or constant physical size It doesn't show properly even in unity or on phone seems like he zoom in automaticlly too much. I made the best settings for UI SCALE MODE - > Scale with screen size, but on some devices it doesn't show up correctly ( it shows with little errors like corner text is not shown because it looks like he is outside of screen)
I hope someone has solution for this.
Here is my general settings of canvas, which i always use and never got any issue in positioning.
Also when you put any object, RectTransform's value(marked in following image) is not set properly then it will go outside of screen.
For more details see : https://docs.unity3d.com/Manual/class-RectTransform.html
Also you can check different screen ratio from unity and even add new to it and test.
Related
I am creating a mobile app using Unity. I would like to place a photo which fills the screen and then place some 3D objects on top of this photo. The photo is created during runtime and is saved to the persistance data folder.
What is the best method to achieve this? The options I see are Raw Image/Image/Sprite. However, I have been unable to achieve the above mentioned goal using either of these component types.
What about making a panel on a canvas, setting the image as background and the canvas to fit screen size?
Then place the objects on front of it, manually or as children of said canvas but higher in the hierarchy.
I don't really understand what you intend to do, just trying to help.
editing my original answer: you need to use RawImage to be able to easily load images that are not marked as Sprite in the editor
You load images from file like this :
Texture2D texture = new Texture2D(1,1); // the following needs a non null starting poin
var path=System.IO.Path.Combine(Application.streamingAssetsPath,"your_file.jpg");
byte[] bytes=System.IO.File.ReadAllBytes(path);
texture.LoadImage(bytes);
rawImage.texture=texture;
As far as keeping it filling the screen the AspectRatioFiter component is likely to do the job
To get 3d objects rendering in front, set your canvas to 'Screen Space - Camera' and point it to your camera. This will behave similar to word space in regards to rendernig order (will get 3d sroted) but canvas size will match camera viewport, so AspectRatioFitter will be able to do its job
I am trying to set up a shopping based UI for different screen sizes.In the canvas settings inside the Inspector I have given a reference resolution of 750 x 1334(Iphone 6)
UI scale mode - Scale with screen size
Match(Width-Height) - 0.5 (Which I change to one can see them in the images)
Somehow I placed the Images and text according to given design.It looks ok in the Iphone resolution.But in Ipad the buttons and text gets mixed up.
Now I change the Match(Width-Height) - 1 .The result is it looks okay but in the ipad view it looks small and there is plenty of space along the two sides.
How to get a matching view/look for all the different screen sizes.
Images are given below
Actually, u don't need to change the match size.
what u actually have to use are anchors. If u use anchors no matter how the size of the screen changes the UI element will resize with it.
see this video from unity officials. It will definitely solve ur issue.
https://www.youtube.com/watch?v=FeheZqu85WI&list=PLX2vGYjWbI0Qp0sD8_RKgbWul7z_eyNAv&index=2
thank you.
U can accept this answer if this solves ur issue.
I have a fragment for more options in my app that I want mostly hidden except for one small rectangle that says "Pull up for more options". This rectangle is parked at the bottom of the screen. When the user pulls it up, it then pops up from the bottom but NOT taking over the full screen, only about 1/3rd of the bottom. Just enough to show some of the options (checkboxes).
I am doing this and have it working by setting the TranslationY setting of the options fragment layout, which is in a FrameLayout container by the way, so that it is at the bottom of the screen and just shows my "Pull up for more options" text.
Then, when they pull up on that, I have some motion events to bring it up to where I want.
Here is the issue, I can get it working just fine on one display using hard coded TranslationY settings. For example, on a Galaxy S2 which has a density of 1.5 (HDPI 240) and a screen of 480x800, these are my hard coded values that work. I had to find them just by playing around with the numbers.
int trackOptionsHome = 650; //Parked at bottom of screen.
int trackOptionsExtended = 450; //Extended out where I want it to.
Again, with those hard coded values on the S2, it works fine and the way I want. However, if I now try a different device that is STILL HDPI (1.5/240) except the screen size is 480x640 (3.5in), it does not display properly which is to be expected. So then I implemented something like this:
float trackOptionsHome = ((dMetrics.HeightPixels / dMetrics.Density) + 120);
float trackOptionsExtended = ((dMetrics.HeightPixels / dMetrics.Density) - 100);
This was to try to take into account for different display density and sizes. I was then trying to do math at the end of each to position my fragment where I want it. However, I am getting inconsistent results and the numbers are still arbitrary. I have to find them by playing around.
This raises two questions:
1. How do I make sure I get the results I want on DIFFERENT display densities, which is not even the issue I am having at the moment since I have the same density.
2. How do I scale properly for the different size screens, which appears to be my immediate problem.
For math purposes at the moment (I can adjust as needed after I get an answer) let's say I want 50px of the fragment showing from the bottom when it is in the home position and 300px showing up from the bottom when extended.
What is the correct way to do this?
Thanks!
Mike
So here's the thing. I made a game in 192x108. Yes, that small. I also made it borderless windowed, and it also resizes and stretches itself to it fits the main screen.
HERE'S THE PROBLEM:
When I start the game on my home PC, it stretches out to 1920x1080 with nearest neighbor and it's not blurry at all, just a pixely beauty. BUT when I start the game on my school PC, it stretches out to 1366x768 and becomes BICUBIC? I even added PointClamp to the spriteBatch.Begin(...SamplerState.PointClamp), but there was NO difference.
So how come it's different depending on the PC I use?
Looks like you can do this for every frame outside of the sprite batch:
GraphicsDevice.SamplerStates[0] = SamplerState.PointClamp;
https://gamedev.stackexchange.com/questions/6820/how-do-i-disable-texture-filtering-for-sprite-scaling-in-xna-4-0
However, I'm wondering if it isn't the sprites that are being scaled, but the device after the sprites are rendered. Hard to tell without more information. Make sure your DisplayMode, ClientBounds, ViewPort, and BackBuffer are all the same width and height as well.
http://msdn.microsoft.com/en-us/library/bb203889(v=xnagamestudio.31).aspx
I'm working on augmented reality and I wanted to know if it was possible to get the camera output in fullscreen with a normal scale. I'm currently able to get a deformed output (everything is larger than in the real world).
Edit:
I found in the PhotoCamera class on msdn that I have to use camera.AvailableResolutions. This returns an IEnumrable of Size, each one being a supported resolution.
Based on your comment:
I do not understand this. Do you mean to say that the aspect ratio is
wrong; squares becoming rectangular? Could it be that you are
displaying/stretching the picture incorrectly?
Yeah that's what I mean, the image is stretched because the camera is taking an image in 640x480 and the screen is in 800x480
In the UI where you display the image, set the Stretch to None, Uniform or UniformToFill. Do not use Fill that will distort the image.
<Image Source="..." Stretch="Uniform" />
See these examples on the MSDN
Each phone has different lens focal length and screen size. There is no API to scale camera output to physical dimensions of real world (to see the world on the screen like through transparent window). Also, the distance from user eyes to the phone is affected to what should be displayed. You could experimentally find average scale factor to best map camera output to phone screen.
EDIT:
From the beginning it was like the question was not about distortions on different screen orientations but like augmented reality problem.