I have been designing all my landscape oriented cocos2dx mobile games at 2508x1584 with a "always visible area" of 2112x1408 so there would be no black borders or scaling, just a bit of cropping which would be limited to the "maybe not visible area" as shown below.
This worked well for all mobile device aspect ratios until iPhone X and Samsung Galaxy S8 arrived. These devices have 19.5:9 and 18:9 aspect ratios respectively which takes the "always visible area" down from 1408 to 1158 which is significant enough that it looks like i have no choice but to redesign all my games as shown in the image below.
Since I designed all my previous games for a taller visible area when I run them on iPhone X and Samsung galaxy S8 the top and bottom of the game are obviously cut off.
Am I stuck re-designing these games in order to make them fit this shorter aspect ratio? Or is there another solution I am overlooking here?
Sadly I don't see any magic solution. Here are the different options:
Test the screen ratio, and for iPhone X and Galaxy S8, switch resolution policy to ResolutionPolicy::SHOW_ALL instead of ResolutionPolicy::NO_BORDER. That's a quick-and-dirty solution, which will display black borders on left and right. You can improve this solution a little bit by scaling all content so that the important area takes all screen height.
Change the width of your design resolution, offset the content, and find a way to fill all this resolution with your background textures. This requires more effort but most of the content should not change, except for the offset. It will solve the problem because a larger design resolution means that it has less to cut vertically (which is the problem in your case).
As you said, you can also redesign the important area so that it is more flexible to different ratios. This requires some effort and reduces the size of this important area, which affects the experience on the other ratios.
I would go with the second option. Hope this helps, and sorry for not having a magic solution to that problem.
Might be a bit late for you, but I think I've solved this issue.
I used ResolutionPolicy::NO_BORDER, a design resolution of 1080x1920 and this guide image
The green area is 1080x1920. You should design your app to fit within this area. Taller phones such as the S8 and iPhoneX will expand up into the orange space. Wider devices such as tablets will expand into the orange space on the left and right.
What you need to do on launch is to calculate a scale factor for the Director to use.
Do this in your AppDelegate.cpp
auto frameSize = glview->getFrameSize();
float deviceAspectRatio = frameSize.height / frameSize.width;
float designAspectRatio = designResolutionSize.height / designResolutionSize.width;
director->setContentScaleFactor(MAX(
deviceAspectRatio / designAspectRatio,
designAspectRatio / deviceAspectRatio)
);
To be honest I'm not 100% on why this works. I discovered it by trying random scale factors until I found one that worked, and then trying to work backwards to come up with some math that will work. Turns out dividing the aspect ratio of the device by the aspect ratio of your design resolution is what you want.
Related
I've been trying to fix an issue where the full-width hero images on my Wordpress website appear blurry on some mobile devices, and in the process I've noticed that this seems to be triggered only at smaller sizes.
The images I'm using are 1920 x 1080 pixels.
Between a width of 1920px to 1024px the images look high-quality and unchanged as far as I can tell, but using Firefox's Responsive Design Mode, I've established that the smaller the image renders the more progressively blurrier (i.e. pixellated) it becomes.
If the browser window is resized to a width of 1023px or less, it becomes a little blurry, whereby setting the DPR setting to 2 restores it to the original quality.
If the browser window is resized to a width of 512px or less, the image becomes very blurry, and setting the DPR to 3 restores it to the original quality.
What's going on here? I understand that the images aren't Retina-optimised, but if this was the actual cause, wouldn't the problem be reversed - wouldn't it be the larger image size that would render blurry? Shouldn't the smallest image render at a high DPI considering it's being displayed at a size of 512px and the source image is much less than double (2x) the 1920px source image?
Would really appreciate some help figuring this out as I've been struggling with it for a few days and it's very hard to test against and debug.
A HiDPI image is really just one that's larger than the display size but crushed into a smaller physical space.
For example if your 1x image is 500px x 500px, then a 2x image would be 1000px x 1000px and 3x would be 1500px x 1500px. The HiDPI designation comes in because the device is able to display all those extra pixels in the same physical space as a normal screen.
So imagine a normal screen is 100px per 1 inch. So your 500px image would be 5in x 5in. The HiDPI screen might be 200px per 1 inch of screen so the 1000px image would still take up 5 inches.
Typically smaller images get blury on HiDPI displays because they're trying to "up res" something like a 500px x 500px image to a display size of 1500px x 1500px.
As for the problem you're experiencing, have you verified the issue on a real device not the FF emulator? Real devices are usually much better at that "up res" process and may not produce the same artifacts.
Cocos2dx beginner here. Using Cocos2dx V3.10.
I've read lots of tutorials and documentation on Multi platform support across iOS/Android etc and in the main i get it. I'm using setDesignResolutionSize in combination with setContentScaleFactor and it's working out pretty well so far.
I do have one issue which i'm not sure of the best way to approach it.
My game is portrait and i'd like a particular sprite to be the same width on iphone4s and iphone5.
They both use the same design resolution size and content scale factor but on iphone4 the sprite is smaller than that on iphone4 (and iphone5).
I've attached two images to demonstrate what i mean.
As you can see on the iphone4 the sprite isn't quite the same distance away from the edges as the iphone5 is, which i assume is down to the difference in resolution.
Do i need to create another set of assets for this resolution and how would i go about setting those? As currently iphone4 and iphone5 both use the same scale and design size, ie:
glview->setDesignResolutionSize(designResolutionSize.width, designResolutionSize.height, ResolutionPolicy::NO_BORDER);
Size frameSize = glview->getFrameSize();
// if the frame's height is larger than the height of medium size.
if (frameSize.height > mediumResolutionSize.height)
{
director->setContentScaleFactor(MIN(largeResolutionSize.height/designResolutionSize.height, largeResolutionSize.width/designResolutionSize.width));
searchPaths.push_back("hd");
FileUtils::getInstance()->setSearchPaths(searchPaths);
}
Any help much appreciated.
This can be done in a way so that the game will look same no matter what device you use.
First of all, comment out all the following code in your AppDelegate.cpp
/* if (frameSize.height > mediumResolutionSize.height)
{
director->setContentScaleFactor(MIN(largeResolutionSize.height/designResolutionSize.height, largeResolutionSize.width/designResolutionSize.width));
}
// if the frame's height is larger than the height of small size.
else if (frameSize.height > smallResolutionSize.height)
{
director->setContentScaleFactor(MIN(mediumResolutionSize.height/designResolutionSize.height, mediumResolutionSize.width/designResolutionSize.width));
}
// if the frame's height is smaller than the height of medium sxize.
else
{
director->setContentScaleFactor(MIN(smallResolutionSize.height/designResolutionSize.height, smallResolutionSize.width/designResolutionSize.width));
}
*/
Now, make sure all of your assets have been developed in reference to a canvas size which is ideally the size of your background.
Let's say that size is customWidth x customHeight.
Now edit the following lines in AppDelegate.cpp as below:
glview->setDesignResolutionSize(customWidth, customHeight, ResolutionPolicy::EXACT_FIT);
Size frameSize = glview->getFrameSize();
Your game will now look same irrespective of the device, as long as aspect ratio is maintained(which is same for all the phones, but different for tablets).
I am trying to understand why if I have a Webseite working on 1920px width and I have smartphone with 1920px resolution, it will display different?
I found that Answer (URL) but this confused me even more.
An Example for me:
I have a div Header which has a 100% width and this Header contains 10 images, when viewing this on Desktop everthing is fine (Desktop width 1920px) Now I am changing to my smartphone which also has a Resolution from 1920px and some of the are not in the line anymore. So why isn't that possible?
The Answer with DPI is confusing me because:
I have 2 Screens, both of them has the same Resolution. My Android has bigger Pixel than my Desktop, so how is ist possible that they both have the same Resolution than?
If someone could explain me that or refers an article which explains that, I would be so thankful!
Markus
What he's saying is:
The resolution is the same but the PHYSICAL size of each pixel is different.
Let's assume your screen is 100cm long and your smartphone is 10cm long.
If your screen has 1920px, each one is 100/1920= 0.052cm long.
If your smartphone has 19202px too, each one will be 10/1920 = 0.0052cm long
I considered just one dimension to make it easier. As you can see the physical size of pixels is different and so is the result.
Now you might ask yourself "Ok, but how do I fix this?"
Well instead of saying "Make this item 10px long"
you can say
"Make it 1cm long"
We've seen that pixels size can change from one device to another, but physical units don't.
So 10 pixels might be longer or shorter from device to device but 1cm is always 1cm.
I hope i clarified your doubts! :)
Solution for me was simple:
Example:
Galaxy S4 Resolution (Hardware Pixel) : 1920x1680
Pixel Ratio : 3
Galaxy S4 Optical Pixel: 640x340
I am experimenting with Bootstrap's carousel and would like to use it with photographs.
Question: What is the optimal size for the pictures I should upload for use on the carousel?
In the current Bootstrap distribution (v3.2.0) the example carousel.html uses a simple 1x1 pixel image as a background:
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="First slide">
I couldn't find this documented and the photos I have experimented with get stretched/distorted on my laptop screen.
There isn't really an "optimal" image size. In the example with the 1x1 pixel, it's a pixel that is repeating over and over to cover the full span of its containing div.
This Bootply Demo of Carousel uses a 1024x700 px image as an example. If you want to have a carousel image that spans the full width of the screen its probably a good idea to use an image that is at least 1024 px wide (possibly wider), though you don't want it to be too high resolution, since that would take a long time to load.
The image height is probably going to be less than the width and really just depends on what type of image you are using and how tall you want the carousel image to be.
Otherwise, the best thing to do is to try out different images and see what looks good.
Note: the Bootply demo uses http://placehold.it which is a good tool for trying out different image sizes, or check out http://placekitten.com/.
Actually, there is a specific aspect ratio that this carousel forces images to be displayed as. If you don't use this aspect ratio the images will be distorted and displayed in this ratio anyway. The carousel will not match the aspect ratio of the images.
The weird ass ratio it uses, which is actually a pretty good looking aspect ratio for this purpose imo is . . . drum roll please . . . 84:25 !
After many attempts I found the best size for me is 1680x500. true it get stretched a bit on larger devices and looses a little crispness, but it's still good looking and a manageable file size and looks great on most monitors.
You can confirm this by using the carousel sample on getbootsrap . com and opening it full screen and taking a screen shot. Then crop out the area with the carousel. Use your preferred method of determining an images size and plug in those numbers in your favorite aspect ratio calculator.
I've read all over the Internet that I should not define fonts (or anything) with absolute pixel height/width/size and instead, use EM ... so that on higher resolution displays, my web site can scale appropriately.
However, what do I use to define IMAGE height/width ... because images won't scale well (they look pixelated)
UPDATE:
To clarify, I'm not referring to page zoom. I'm referring to how to make my web application resolution independent so that it will look correct on higher DPI displays.
I know this question is a bit old, but want to put this out there for anybody who may come along later. When talking about mobile devices which have higher pixel densities, the mobile browsers will zoom the page in by an amount to make it appear as though the web page is not very small. Devices implement this zooming as per the CSS 2.1 specification.
For example, many devices today have a 1.5x pixel density ratio compared to desktop monitors. As a result, the mobile browser will zoom websites by about 150% to compensate for the extra pixels. The new retina display has a 2x pixel density ratio... and as such the browser zooms in websites by about 200%.
Point of the matter - developers should not have to worry about different resolution devices. If you wish for your images to show up clearly on high resolution devices, you will need a higher resolution image. You generally don't have to worry about 1.5x devices as the quality difference is negligible and not worth the effort. However, the new retina display causes some really blurry images, and as a result you should use 2x the image.
So for the following image, you would want to export a 600x400px image in order for the image to show up clearly on the new retina display:
<img src="photo.jpg" style="width:300px; height:200px" />
Font sizes should be set in em (or %) because if the user changes the text size in IE (View > Text Size), text set in px (or have a fixed size somewhere up the inheritance chain) won't be resized. (Other browsers have no problem resizing text set in px.) See How to size text using ems for more on this.
Images with px dimensions are not resized when the user changes text size; images with em dimensions are resized. So if an image's size should be relative to the text size (a rare case), then use em. Otherwise px dimensions is fine.
For page zoom (where the browser makes everything larger or smaller), it doesn't matter if dimensions (text or image) are defined using em or px.
Normally, I use em for most elements and exact pixels for images. Your images will not scale with everything else when the text size is adjusted, so you need to review how the page looks at different text sizes and adapt when required, but I find this a reasonable compromise (versus scaling the images that is).
Using em when resizing the text in IE, it becomes larger than it should when made larger, and smaller than it should when made smaller.
The solution that works in all browsers, is to set a default font-size in percent for the body element:
body {font-size:100%;}
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}
http://w3schools.com/css/css_font.asp
You can find a perfect example of image styling using px with source code here: http://w3schools.com/css/css_image_gallery.asp. The images scales perfectly with the text increasing or decreasing it.
see the solution of this page
http://nickcowie.com/2005/elastic-images/
HTML
<div class="imageholder">
<img src="/images/tim_underwood_rb2.jpg" class="vertimage43 floatleft">
<img src="/images/joe_smash1v.jpg" class="vertimage43 floatright">
</div>
CSS
.widecolumn .imageholder {
width:51.5em;}
.widecolumn .vertimage43 {
height:32em;
margin:0;
padding:0;
width:24em;}
It's not really possible to make a page resolution-independent when it comes to images.
You can use SVG for images, because vector graphics truly are indepent of DPI, but this won't work well for photos.
You can use high-resolution images and display them at smaller size. This way, when sized up, they look a lot better. On some browsers, the downscaled image won't look too bad.
This is an example page, http://www.cssplay.co.uk/menu/em_images it has high-res images that are sized with ems. On Opera with page zoom, the high res images retain their clarity at higher zoom levels.
For retina devices you can also have a second image twice the size and add #2x to the file name...
so if you have a 200px x 300px image called image.jpg you just put in another one that's 400px x 600px and name it image#2x.jpg and retina devices will display that instead.