[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/ )

-- 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’m trying to optimize this for retina for a long time…
For others images I’m using display.neImageRect with this in config.lua

application =  
{  
 content =  
 {  
 width = 320,  
 height = 480,  
 scale = "letterbox",  
  
 imageSuffix =  
 {  
 ["@2x"] = 2,  
 }  
 },  
}  

Is there anyone who using this and optimized it for retina? Or can you please help me optimize it?
Thanks! [import]uid: 59968 topic_id: 14644 reply_id: 314644[/import]

http://ideveloper.kodingen.com/2010/retina-display-setup-in-3-easy-steps/

check this tut, maybe it will help you [import]uid: 16142 topic_id: 14644 reply_id: 54162[/import]

I know how to configure my app for support retina…I need modifity this code to support display.newImageRect… Anyway thanks :wink: [import]uid: 59968 topic_id: 14644 reply_id: 54168[/import]

This should do it : (Supporting retina)

[code]
– 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
[/code] [import]uid: 84637 topic_id: 14644 reply_id: 54218[/import]

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? [import]uid: 59968 topic_id: 14644 reply_id: 54258[/import]

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.
[import]uid: 84637 topic_id: 14644 reply_id: 54272[/import]