-
Notifications
You must be signed in to change notification settings - Fork 0
/
graphics_spec.txt
97 lines (67 loc) · 2.77 KB
/
graphics_spec.txt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
Values obtained by inspecting screenshot.
Current graphics positioning in laptop mode:
Vertical gaps: 18px (including top & bottom margins)
Horizontal gaps: 18px (including left margin)
Right margin: 17px
Card width: 83px
Card height: 97px
Card "middle pixel": ((83-1)/2, (97-1)/2) = (41, 48)
Square width: 25px
Square height: 25px
NOTE: For hashing, topmost pixel should be filled (so top visible pixel is empty).
Circle bounding box width: 29px
Circle bounding box height: 29px
NOTE: For hashing, topmost pixel should be filled (so top visible pixel is empty).
Triangle bounding box width: 29px
Triangle bounding box height: 24px
NOTE: For hashing, topmost pixel should be empty (so 3rd-to-topmost pixel is empty too).
3-square:
Left margin: 9px
Top margin: 23px
Right margin: 10px
Bottom margin: 15px
Middle horizontal gap: 14px
Middle vertical gap: 9px
Left margin of bottom square: 29px
Right margin of bottom square: 29px
With initial changes now...
Square width/height: 27px.
=> shift = (27-2-1)/2 = 12px
Used shift = round(squareSize/2).
But square internal size is 2*shift + 1.
So in fact should use shift = round((squareSize-1)/2).
This changed restored square width/height to 25px.
Circle looks OK with first try.
Triangle looks a touch too squat.
Height is actually the same though.
Difference is actually coming from x-alignment!
Having trouble scaling up to iPad.
Square width/height: 52px
This is bad because there are (52-4)/2 = 24 internal lines.
But we want the number of internal lines to be congruent to 3 mod 4.
In the 1x scale case, this is true:
# of internal lines is (25-2)/1 = 23.
Hack: before rounding, divide by scale; after rounding, multiply by scale.
This worked and squares look good again.
Now triangles can be handled.
We'll use divide/round/multiply hack again to get it to look right.
iPad graphics considerations.
Would like roughly same card width/height as before, but with bigger margins.
Scale is 2x, so values are calculated relative to 512 x 384 resolution.
For width:
(512 - 83*4) = 180 remaining px (before it was 420-83*4 = 88 remaining px).
So horizontal margins should be 36px each.
(512 - 97*3) = 93 remaining px (before it was 364-97*3 = 73 remaining px).
So vertical margins should be about 23px each. (That's a little under "exact" 23.25.)
iPhone reference sizes:
Card width: 83px
Card height: 98px
BlackBerry 9800 graphics.
For width:
(360 - 83*3) = 111px
Horizontal margins ~27px each (actually 27.75).
Same height as iPhone BUT non-hideable URL bar:
http://mobiledevicenet.blogspot.ca/2010/11/rim-blackberry-9800-torch.html#.T2S_xmJWqEA
says it supports 400px vertically.
(400 - 98*4) = 8px
Vertical margins ~1x each (actually 1.6).