[HELP] Optimizing for retina

Hi, I'm using this score system from tutorial by peach pellen:
( http://techority.com/2011/01/26/how-to-add-a-score-to-your-iphone-app/ )

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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
-- A sample score keeping display
-- This updates a display for a numeric score
 
 
-- Example usage:
--      Place the score at 50,50
--              score.init( { x = 50, y = 50 } )
--      Update the score to current value + 10:
--              score.setScore( score.getScore() + 10 )
 
 
module(..., package.seeall)
 
-- Init images. This creates a map of characters to the names of their corresponding images.
 local numbers = { 
        [string.byte("0")] = "0.png",
        [string.byte("1")] = "1.png",
        [string.byte("2")] = "2.png",
        [string.byte("3")] = "3.png",
        [string.byte("4")] = "4.png",
        [string.byte("5")] = "5.png",
        [string.byte("6")] = "6.png",
        [string.byte("7")] = "7.png",
        [string.byte("8")] = "8.png",
        [string.byte("9")] = "9.png",
        [string.byte(" ")] = "space.png",
}
 
 
-- score components
local theScoreGroup = display.newGroup()
local theBackground = display.newImage( "scorebg.png" )
local theBackgroundBorder = 10
 
 
theScoreGroup:insert( theBackground )
 
 
local numbersGroup = display.newGroup()
theScoreGroup:insert( numbersGroup )
 
 
-- the current score
local theScore = 0
 
 
-- the location of the score image
 
 
-- initialize the score
--              params.x <= X location of the score
--              params.y <= Y location of the score
function init( params )
        theScoreGroup.x = params.x
        theScoreGroup.y = params.y
        setScore( 0 )
end
 
 
-- retrieve score panel info
--              result.x <= current panel x
--              result.y <= current panel y
--              result.xmax <= current panel x max
--              result.ymax <= current panel y max
--              result.contentWidth <= panel width
--              result.contentHeight <= panel height
--              result.score <= current score
function getInfo()
        return {
                x = theScoreGroup.x,
                y = theScoreGroup.y,
                xmax = theScoreGroup.x + theScoreGroup.contentWidth,
                ymax = theScoreGroup.y + theScoreGroup.contentHeight,
                contentWidth = theScoreGroup.contentWidth,
                contentHeight = theScoreGroup.contentHeight,
                score = theScore
        }
end
 
 
-- update display of the current score.
-- this is called by setScore, so normally this should not be called
function update()
        -- remove old numerals
        theScoreGroup:remove(2)
 
 
        local numbersGroup = display.newGroup()
        theScoreGroup:insert( numbersGroup )
 
 
        -- go through the score, right to left
        local scoreStr = tostring( theScore )
 
 
        local scoreLen = string.len( scoreStr )
        local i = scoreLen      
 
 
        -- starting location is on the right. notice the digits will be centered on the background
        local x = theScoreGroup.contentWidth - theBackgroundBorder
        local y = theScoreGroup.contentHeight / 2
        
        while i > 0 do
                -- fetch the digit
                local c = string.byte( scoreStr, i )
                local digitPath = numbers[c]
                local characterImage = display.newImage( digitPath )
 
 
                -- put it in the score group
                numbersGroup:insert( characterImage )
                
                -- place the digit
                characterImage.x = x - characterImage.width / 2
                characterImage.y = y
                x = x - characterImage.width
 
 
                -- 
                i = i - 1
        end
end
 
 
-- get current score
function getScore()
        return theScore
end
 
 
-- set score to value
--      score <= score value
function setScore( score )
        theScore = score
        
        update()
end

I know how to configure my app for support retina...I need modifity this code to support display.newImageRect... Anyway thanks ;)

This should do it : (Supporting retina)

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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
-- A sample score keeping display
-- This updates a display for a numeric score
 
 
-- Example usage:
--      Place the score at 50,50
--              score.init( { x = 50, y = 50 } )
--      Update the score to current value + 10:
--              score.setScore( score.getScore() + 10 )
 
 
module(..., package.seeall)
 
-- Init images. This creates a map of characters to the names of their corresponding images.
 local numbers = { 
        [string.byte("0")] = "0.png",
        [string.byte("1")] = "1.png",
        [string.byte("2")] = "2.png",
        [string.byte("3")] = "3.png",
        [string.byte("4")] = "4.png",
        [string.byte("5")] = "5.png",
        [string.byte("6")] = "6.png",
        [string.byte("7")] = "7.png",
        [string.byte("8")] = "8.png",
        [string.byte("9")] = "9.png",
        [string.byte(" ")] = "space.png",
}
 
 
-- score components
local theScoreGroup = display.newGroup()
local theBackground = display.newImageRect( "scorebg.png", 480, 320 ) --Change numbers with standard sized (standard def) image width and height)
local theBackgroundBorder = 10
 
 
theScoreGroup:insert( theBackground )
 
 
local numbersGroup = display.newGroup()
theScoreGroup:insert( numbersGroup )
 
 
-- the current score
local theScore = 0
 
 
-- the location of the score image
 
 
-- initialize the score
--              params.x <= X location of the score
--              params.y <= Y location of the score
function init( params )
        theScoreGroup.x = params.x
        theScoreGroup.y = params.y
        setScore( 0 )
end
 
 
-- retrieve score panel info
--              result.x <= current panel x
--              result.y <= current panel y
--              result.xmax <= current panel x max
--              result.ymax <= current panel y max
--              result.contentWidth <= panel width
--              result.contentHeight <= panel height
--              result.score <= current score
function getInfo()
        return {
                x = theScoreGroup.x,
                y = theScoreGroup.y,
                xmax = theScoreGroup.x + theScoreGroup.contentWidth,
                ymax = theScoreGroup.y + theScoreGroup.contentHeight,
                contentWidth = theScoreGroup.contentWidth,
                contentHeight = theScoreGroup.contentHeight,
                score = theScore
        }
end
 
 
-- update display of the current score.
-- this is called by setScore, so normally this should not be called
function update()
        -- remove old numerals
        theScoreGroup:remove(2)
 
 
        local numbersGroup = display.newGroup()
        theScoreGroup:insert( numbersGroup )
 
 
        -- go through the score, right to left
        local scoreStr = tostring( theScore )
 
 
        local scoreLen = string.len( scoreStr )
        local i = scoreLen      
 
 
        -- starting location is on the right. notice the digits will be centered on the background
        local x = theScoreGroup.contentWidth - theBackgroundBorder
        local y = theScoreGroup.contentHeight / 2
        
        while i > 0 do
                -- fetch the digit
                local c = string.byte( scoreStr, i )
                local digitPath = numbers[c]
                local characterImage = display.newImageRect( digitPath, 20, 20 ) --Change numbers with standard sized (standard def) image width and height)
 
 
                -- put it in the score group
                numbersGroup:insert( characterImage )
                
                -- place the digit
                characterImage.x = x - characterImage.width / 2
                characterImage.y = y
                x = x - characterImage.width
 
 
                -- 
                i = i - 1
        end
end
 
 
-- get current score
function getScore()
        return theScore
end
 
 
-- set score to value
--      score <= score value
function setScore( score )
        theScore = score
        
        update()
end

Thanks. I try this and it will be work great if all numbers will be 20x20. But every number has different size. How to do it with different size of every number?

Make each number image boundary box the same size.

Ie

Canvas size 40x40

then place each image in the center of the canvas.

Then each image can be a different size but the overall size is the same.

views:1752 update:2011/10/4 17:12:07
corona forums © 2003-2011