I am trying to make my 1st game in unity. I need to support different resolutions of android and iOS. The problem is when i place the background image for any one res ex. 1536x2048,It doesn't displays properly for 640x960. The screen size is varying, but sprites and bg sprite is not scaling as per res.
I am not clear how to acheive it. But, it must be a basic thing as there are so many games on android and all phones have different res. and dpi.
There should be some formula or we just need to set orthographic.size for this. I am using this :
// to calc size
Camera.main.orthographicSize = Screen.currentResolution.height / (2*70); //
Camera.main.orthographicSize = Screen.currentResolution.height / 2;
Debug.Log("Camera size :" + Camera.main.orthographicSize);
Debug.Log("Width : " + Screen.currentResolution.width + " height : " + Screen.currentResolution.height);
// this doesnt give me width and height as per resolution of screen for ex. for 1536x2048 -> i get, Width : 1366 height : 768
i found this as similar question
http://forum.unity3d.com/threads/orthographic-screen-size.113641/ but it didnt help, whereas problem is nearly same.
If somebody can share how to get correct screen resolution by code and how to set width of bg sprite and other sprite, it can solve the problem OR
if there is some setting which takes the default scene and scales automatically for various resolution. it will help.
Unity does not scale like that. Instead, we design assets to suit our needs. You are using a formula but i don't know what you expect from it.
here's some info: Orthographic size is height of view port. Taking your example, for height of 2048, camera size is : 2048/2/100=10.24. This will be maintained irrespective of device screen size. Only difference being it will be less detailed on smaller devices, kind of like a zoom out effect. Now for width,i'm not sure for portrait, but let's say 9:16 is the widest. So if you design the bg for this aspect ratio, the bg will be cropped on smaller devices, shown full on 9:16 devices. To design for this aspect ratio, your bg needs to be 9/16*10.24*100=576 px. (Again i'm not sure which aspect ratio is widest in portrait mode). Hope that helps
Related
In researching android image sizes for different sized screens/densities etc., I've found an absolute tonne of things, a lot of which may be deprecated, and a lot of which may not be relevant to my situation, so I thought I'd ask for general advice.
My basic question is how big should I make my background image in pixels, or inches or centimetres? Probably pixels would be best.
My app is in locked in landscape mode, I don't need to worry about orientation.
I'm using a vector image, so I don't need to worry about scaling and quality issues
So, I want my background image to fit onto a ten inch tablet, so that it fills the whole screen with no scrolling.
On phones, I want the height(which would be the width in portrait mode) to match the height of the screen, and my image will be in a horizontal scroll view, so scrolls left and right in landscape mode.
So, do I need to do the whole creating different image resources for different dpi's thing, or will one do? What size should I make it?
I will also be lining up textviews with specific parts of the image, so presumably I'll need different layouts, as the lining up of textviews relative to the image will probably vary from screen size to screen size, resolution to resolution,bigger textviews for bigger screens etc. How do I implement this?
Thanks
Vector images should be used for icons only. In your case i'd just use a drawable & make sure you have different images for the different densities. Then create different layouts for phone and tablet. You should use a scrollview on the layout for the phone
The google pixel is a good representation of an android phone: It has a 1080 x 1920 resolution at 441 dpi. Then from the the android developer docs:
xxhdpi ~ 480dpi
you can scale the 1080 x 1920 down by the (3:4:6:8:12) ratios. if you image
has a different aspect ratio make sure that that the width or the height matches with 1080 x 1920 depending on the orientation of the device
This question must have been asked here before, but I can't find a proper explaining answer.
So I'm a new unity3d programmer who knows about C#. Now, I selected my canvas size to 854x480 and tested the scene on moto g, samsung tabs etc. They all look same and I wonder why. Because if I design for 854x480, shouldn't I get blue bars on high-res phones?
Another question is, how do I design it so that it looks all the same on different devices. In my case, 854x480 does look zoomed a little on a kindle fire.
Please provide a conceptual answer.
The concept behind this is the aspect ratio and scale factor.
Aspect ratio = width / height
If you run your game in any device with the same aspect ratio then your game will look exactly same because the scale factor for height and width is same.
In your case,Aspect ratio = 480/854 = 0.562
If you run your game on Moto G(1st Gen) which has a resolution of 1280 x 720(In portrait),
Aspect ratio = 720/1280 = 0.562 which is same as your canvas's aspect ratio so the scale factor for width and height will be same.
Now if you run your game on kindle fire, which has a resolution of 1280 x 800,
Aspect ratio = 800/1280 = 0.625 which is not same as your canvas's aspect ratio. So the scale factor(which unity will automatically calculate) will be different for width and height(In your case, scale factor of height will be more) and hence your assets will look a little zoomed in height.
Hope it explains the concept.
The thing is that the camera rendering frame changes based on resolution, so instead of "blue bars" you get extra rendered image that is displayed instead of it, as for the UI goes, since it can't render extra UI (there is no extra UI, everything has to be shown) it changes position and scale of elements by using anchors. You can change these setting when selecting Canvas and changing values in the inspector.
I am developing an Android application where the server sends all the values corresponding to dimensions in pixels for 1920*1080 resolution device.I need the app to be supported on multiple screen resolutions.I went through Android documentation on supporting multiple screen resolutions.It suggests to convert pixels to dip and then render.I did that in my application but the views are not rendered as required.So I tried applying simple unitary method by dynamically getting the screen width and height and then scaling all dimensions based on current screen width and height.
Say my current screen width is X and height is Y.So what I did was
Scaling factor in horizontal direction = New Screen Width/1920.
Scaled dimension in horizontal direction = Scaling factor in horizontal direction * Dimension from server in horizontal direction.
Similarly for vertical direction.
The application is now looking fine on my device.But is it a reliable way of doing things ? Should I be dealing with density of display too ?
DP is probably the better approach, if you elaborate a bit on what you mean by 'not rendered as required' I can try to help.
I can think of two main issues with your current method:
Different aspect ratios of devices. Using your method you will end up with distorted imagery. For example a square in 'server dimensions' is 400x400. In a 800x480 phone, that square will be 162x177 - no longer a square. Depending on your visuals and purpose of your app, this may or may not be an issue. If it is an issue, you need to account for that.
Physical views' size. One of the purposes of the DP method is to ensure a view will have (almost ) the same size across different devices, mainly never too small to handle for the user. So using the DP approach, a 100dp button will be 200px on a high density device, and 100px on a medium density device. This way the button is physically the same size on both devices.
But your method ignores that. Take the square from the first example - it will always be a fifth (400/1920) of the width of the screen. This can be either huge or tiny, depending on the device dimensions. Again, depending on your needs this may or may not be a problem.
Your method can work, as long as you account for these (and maybe more) problems. But it does require special care and probably more coding and work to make it work perfectly compared to simply using DP.
I am currently using the Orthographic Camera. Before I get too much into the game, I want to fix the screen size first. Currently, I have the screen size set for 800 x 480. Will this work well on other devices and screen sizes? Right now all I have is a splash screen and game screen. What lines of code would I have to add to achieve this.
Having a static width on your camera is perfectly ok as it gives your game a single fixed dimension that you can work with reliably. This works because the camera is used to define world coordinates which are not always one to one with screen coordinates.
Your issues come from the fixed camera height. Having a fixed height will cause your screen to stretch taller or shorter depending on the aspect ratio of the device screen. If you want to account for the different aspect ratios, you'll need to multiply your camera height (currently 480) by the display ratio. You can get the screen ratio by dividing the height by the width by the height. This would look something like:
float width = Gdx.graphics.getWidth();
float height = Gdx.graphics.getHeight();
OrthographicCamera camera = new OrthographicCamera(800, 480 * (height / width));
As pointed out by BennX in the comments, LibGDX introduced viewports which allow you do very much the same thing as above, just in a different way. To achieve the same effect as I outlined above, only using a viewport, you'd use an ExtendViewport. What this does is maintain the world size in one direction while stretching it in the other direction. So the world will first scale up to fill the screen, then the shorter dimension is expanded while maintaining aspect ratio. To create this type of viewport, it'd look something like this:
OrthographicCamera camera = new OrthographicCamera(800, 480);
ExtendViewport viewport = new ExtendViewport(800, 480, camera);
The viewport above will have a minimum width of 800 and a minimum height of 480. One of these values will be the same after the viewport is applied and the other will change based on the aspect ratio of the screen. More narrow screens will have more vertical space while wider screens will have more horizontal space. For more on viewports, visit the LibGDX wiki page here.
I am using below approach and it's works for almost all screen sizes with ignoble minor scaling issue.
I always uses graphics images for screen size 1920.0x1080.0
ScreenViewport screenViewport=new ScreenViewport(camera);
screenViewport.setUnitsPerPixel(Math.min(1920.0f/Gdx.graphics.getWidth(),1080.0f/Gdx.graphics.getHeight()));
Here you can set your approach from Math.min() or Math.max().
It will result your camera view-port size near to 1920.0*1080.0
Device screen-size Math.max() Math.max()
800.0x480.0 1800.0x1080.0 1920.0x1152.0
1920.0x1080.0 1920.0x1080.0 1920.0x1080.0
2048.0x1440.0 1536.0x1080.0 1920.0x1350.0
Note: Always use camera.viewportWidth and camera.viewportHeight for set positions of Games UI screens.
I'm using multi resolution technique number three as written in this article
and to determine the scale factor and stage size, I'm using this piece of code originally written by Jeff :
if (Capabilities.screenDPI >= 200) {
if (Capabilities.screenDPI >= 280) {
AssetFactory.contentScaleFactor = 2;
}
else {
AssetFactory.contentScaleFactor = 1.5;
}
}
else {
AssetFactory.contentScaleFactor = 1;
}
var mViewPort:Rectangle = new Rectangle(0, 0, stage.fullScreenWidth, stage.fullScreenHeight);
mStarling = new Starling(Startup, stage,mViewPort);
mStarling.stage.stageWidth = stage.fullScreenWidth / AssetFactory.contentScaleFactor;
mStarling.stage.stageHeight = stage.fullScreenHeight / AssetFactory.contentScaleFactor;
Then I use this scale factor to determine which sized assets I need to pick.
So now, I have a background which I strech to stage width and size. This technique works great when I'm testing with most devices but then we have devices like the Barnes and Noble Nook Color.
The device has a resolution of 600x1024 with 170 dpi. This means that it's going to pick the smallest assets (320x480) and strech it to 600x1024. Which ofcourse is pixalated. Any ideas on how to get over this issue?
I'm also attaching a test application which shows the issue in detail https://dl.dropbox.com/u/2192209/scaling%20test.zip
What worked for me best so far is not scaling Starling's viewport at all. It should always remain the base size (320x480).
Then you have a scale factor about how big the texture should be. It's a built feature of Starling when creating a texture - passing a scale factor.
What this means is that if your stage is 640x960, your scale factor will be 2. Your image (Bitmap object), will have ACTUAL SCREEN size of 320x480 (fullscreen, 1:1 with stage size), BUT it's texture (loaded asset BitmapData) will be twice as big (640x960, 1:1 with phone size).
For easier understanding - the stage of Starling (320x480) will be scaled up to fit your phone's resolution (320 -> 640). But your images will be scaled down to fit in the stage (640 -> 320). So you get perfectly normal images.
This helps you maintain fixed size of stage. It's really helpful, because otherwise it would be hard to position objects - if you want the object to be in the middle, it's sometimes 160, sometimes 320, etc. This means you always have to set position/size with calculations, which is an overload.
Hope that helps!
edit: Just remembered of a site I've used to determine my main size and assets ratios: http://screensiz.es/phone
How about setting max scale size? If the conclusion of the calculations above takes you to scale that is grater than 2, use bigger assets to reduce the scale ratio.
Your calculation only takes screenDPI in count, try combining them with screen resolution as well.