I've read some articles about Viewports to solve the problem with different resolution. But in every example they used a smaller size for the texture than the resolution of the screen. But what happens when my texture size is for example 1920 x 1080 and my screen is just 800 x 400?
Is there any kind of Viewport that can scale the texture? I didn't found anything for this problem.
Looks like you mean scaling and not compressing. Compressing is a technique to lower the file size of a file, like a .jpg does over a uncompressed .bmp. So if you mean scaling then it completely depends on what you want. If you have a 1920x1080 texture and want this to completely fit the 800x400 screen it needs to be stretched since 1920x1080 = 16x9 and 800x400 = 2:1 = 16:8.
To stretch the image you need to use StretchViewport. You would create the viewport with the world dimensions you want to show. So in this case the 1920x1080 image, or perhaps 16x9 and put that texture with there "world units) in your world. StretchViewport will make sure the viewport is stretched to whatever size you use.
If you want it to fit as much as possible but remain the aspect ratio of 16:9 then you can use the FitViewport. Like StretchViewport each viewport (except ScreenViewport) need to be supplied with world units, this is a important concept. World units are not meters nor pixels until you define your world units as such. Anyway, FitViewport will also make sure each device sees as much of your world as you supply it but your assets won't stretch/deform. Instead it will create a "black" bar, much like TV's do when the aspect ratio is not equal.
ScreenViewport, by default just takes the size of the screen. So a 1920x1080 pixel screen would show 1920x1080 world units and a 640x480 pixel screen would show 640x480 world units. Therefore, the higher resolution the screen has the more of the world is visible. The amount of world units a screen pixel represents can be changed.
There are a view others: FillViewport is like FitViewport it will remain aspect ratio but always fills the screen. And thus some parts may not be visible. For that reason I can't think of a use for this one over FitViewport. And there is ExtentVieport, a mix between FitViewport and ScreenViewport.
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 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 would like to draw a circle in my custom view and it should appear nearly the same size on any screenresolution and density.
for example if I would draw the circle with a radius of 50 pixel, then it appears large on a screen with low resolution. But on a high resolution screen it appears small.
My first try was to simply calculate the size depending on the screensize. BUT on a small device with a very high resolution the circle looks too small.
I guess I can't manage the pixeldensity.
How would you solve my problem ?
regards
You can access screen density via DisplayMetrics as described here How to define a pixel independent height in an onDraw() method
Google Nexus 7 is a 800x1280 px tablet (not counting the system 75/64 px bars height).
But when i take a picture with a camera app, the resulting pic dimensions are 960x1280.
There is no magnification set in the camera preferences.
Wondering what gives. If i have to render this picture on the screen and i scale it and maintain the aspect ratio, won't it clip some information from the original height?
Thanks.
I'm not sure why you expect the resolution of the picture you take to be the same as the screen. When you take a picture with a regular digital camera you don't expect it to match up with it's screen right? The screens on most digital cameras are pretty low resolution.
So yes, if your picture and screen are different aspect ratios, then if you scale it up either you will clip areas or have empty bars on the side.