Scaling with devicePixelRatio

Discussion and feedback on Construct 2

Post » Mon Sep 16, 2013 6:04 pm

@Ashley yep it would! I was wondering whether this would be the right approach though - it concerns me that others haven't run into the same issue?
Moderator
B
72
S
13
G
11
Posts: 900
Reputation: 11,783

Post » Mon Sep 16, 2013 9:40 pm

My experience with the problem when working with raw HTML was that browsers didn't report the true PPI of the screen resolution. When i always checked the test cases from tablets ranging from 7 to 11 inches, ipod touch 3.5, ipad2. all reported a desktop PPI for a 14" monitor.

Now I can't speak for the browsers right now, but that was the situation two years ago. If the browsers still don't provide true PPI then I don't see an easy fix. So I hope it is fixes.

The alternative is to use the common model of testing the browser/os/hardware check and then reporting from a table with the info.
B
87
S
18
G
9
Posts: 2,455
Reputation: 14,834

Post » Tue Sep 17, 2013 11:59 am

I've added a DevicePixelRatio expression for the next build. But I'm not sure you really need to take it in to account for display. Usually letterbox scale just takes care of everything. For example, an iPad 3 (2048x1536) has twice the screen width and height of the iPad 2 (1024x768) in the same space, i.e. double the pixel density. But letterbox scale just stretches to fill and everything appears at exactly the same size. So there's no need to take in to account PPI for that.
Scirra Founder
B
359
S
214
G
72
Posts: 22,946
Reputation: 178,528

Post » Tue Sep 17, 2013 11:46 pm

in the future case someone googles for something like this for browsers:

"dpi.lv - Easily find the DPI/PPI of any (browser) screen":
http://dpi.lv/
https://github.com/LeaVerou/dpi
B
12
S
3
G
1
Posts: 347
Reputation: 2,866

Post » Wed Sep 18, 2013 11:27 am

@Ashley that's brilliant, thanks very much. Scaling itself is fine, it's more that certain elements need to be adjusted on smaller/larger displays.

For example on a mobile screen, our circular buttons need to be slightly larger than the thumb. When that scales up uniformly onto the iPad they become far too big.

Using this expression I can make adjustments that work across all Android, iOS devices and even retina monitors on laptops etc.

E.g.

iPad

iPad 1
ScreenWidth / devicePixelRatio == 1024
1024 / 1 = 1024

iPad 2
ScreenWidth / devicePixelRatio == 1024
1024 / 1 = 1024

iPad 3
ScreenWidth / devicePixelRatio == 1024
2048 / 2 = 1024

iPad 4
ScreenWidth / devicePixelRatio == 1024
2048 / 2 = 1024

iPad Mini
ScreenWidth / devicePixelRatio == 1024
2048 / 2 = 1024

iPhone

iPhone 1
ScreenWidth / devicePixelRatio == 320
320 / 1 = 320

iPhone 3G
ScreenWidth / devicePixelRatio == 320
320 / 1 = 320

iPhone 3GS
ScreenWidth / devicePixelRatio == 320
320 / 1 = 320

iPhone 4
ScreenWidth / devicePixelRatio == 320
640 / 2 = 320

iPhone 4S
ScreenWidth / devicePixelRatio == 320
640 / 2 = 320

iPhone 5
ScreenWidth / devicePixelRatio == 320
640 / 2 = 320

iPhone 5C
ScreenWidth / devicePixelRatio == 320
640 / 2 = 320

iPhone 5S
ScreenWidth / devicePixelRatio == 320
640 / 2 = 320thehen2013-09-18 11:28:38
Moderator
B
72
S
13
G
11
Posts: 900
Reputation: 11,783

Post » Wed Sep 18, 2013 9:20 pm

I am just using "Is Mobile" to scale the sprite bigger. Haven't tested it yet though. I suppose I should worry about that more.
B
200
S
51
G
30
Posts: 896
Reputation: 36,494

Previous

Return to Construct 2 General

Who is online

Users browsing this forum: Mirlas, wrighthill and 20 guests