Screen that requires writing on and selection boxes?

Solar2D General Questions/Discussion
#1

Hello,

I have a couple screens.

  1. Has a bunch of boxes (a single image with a bunch of areas) that I need to be able to add an event listener.

  2. Has a bunch of “areas” that I need to write ontop of.

I’m wondering if the best method for doing this for each is.

  1. Add a bunch of boxes (display.newRect) that are invisible and position them overtop of the background image.

  2. Add the text ontop of the background image and position.

But I am wondering if how can I work with different screen sizes? My app is intended to work for the iPad and iPhone (4 and 3gs) so thats three difference sizes. Do I have to do 3 different ifs to specific the location for each element?

Any better method? That may be a bit less resource intensive? [import]uid: 46343 topic_id: 18723 reply_id: 318723[/import]

#2

The location doesn’t need to be set again, see here; http://blog.anscamobile.com/2010/11/content-scaling-made-easy/

Peach :slight_smile: [import]uid: 52491 topic_id: 18723 reply_id: 72062[/import]

#3

So my boxes are set at (x,y), but if the image is scaled from 380x420 to lets say 500x1000 that would change the location of the box.

Wouldn’t I need to adjust somehow for the new x,y? [import]uid: 46343 topic_id: 18723 reply_id: 72066[/import]

#4

Here’s an example;

[lua]–Hide the status bar
display.setStatusBar(display.HiddenStatusBar)

–Create a new rectangle for the background, color it red
local background = display.newRect( 0, 0, 320, 480 )
background:setFillColor( 255, 80, 80 )

–The number of days remaining
local dayText = display.newText( “”, 0, 0, native.systemFontBold, 160 )
dayText:setTextColor( 0, 0, 0, 200 )
dayText.x, dayText.y = 110, 90

–The number of hours remaining
local hourText = display.newText( “”, 0, 0, native.systemFontBold, 160 )
hourText:setTextColor( 0, 0, 0, 120 )
hourText.x, hourText.y = 110, 240

–The number of minutes remaining
local minutesText = display.newText( “”, 0, 0, native.systemFontBold, 160 )
minutesText:setTextColor( 0, 0, 0, 65 )
minutesText.x, minutesText.y = 110, 390

– Create labels to indicate what the numbers mean
local dayLabel = display.newText( "days ", 0, 0, native.systemFont, 40 )
dayLabel:setTextColor( 255, 255, 255 )
dayLabel.x = 220; dayLabel.y = 100

local hourLabel = display.newText( "hours ", 0, 0, native.systemFont, 40 )
hourLabel:setTextColor( 255, 255, 255 )
hourLabel.x = 220; hourLabel.y = 250

local minuteLabel = display.newText( "minutes ", 0, 0, native.systemFont, 40 )
minuteLabel:setTextColor( 255, 255, 255 )
minuteLabel.x = 210; minuteLabel.y = 400

–Function to update the countdown clock
local function updateTime()
local time = os.date("*t")

local daysLeft = 358 - time.yday
if (daysLeft < 10) then
daysLeft = “0” … daysLeft
end
dayText.text = daysLeft

local hoursLeft = 23 - time.hour
if (hoursLeft < 10) then
hoursLeft = “0” … hoursLeft
end
hourText.text = hoursLeft

local minutesLeft = 60 - time.min
if (minutesLeft < 10) then
miunteText = “0” … minutesLeft
end
minutesText.text = minutesLeft

end

–Update the time once immediately to display the correct time
updateTime()

– Update the clock once per second
local clockTimer = timer.performWithDelay( 1000, updateTime, -1 )[/lua]

I wrote that today for the iPhone. If you run it you will see that it also displays fine in the iPhone 4. It will also show fine in the iPad. (Provided you set scale to something other than “none” in config.lua.)

See how it displays fine? Coords are all good. You may want higher quality images however for the big displays. (Ghosts VS Monsters has an example of using @2x for this.)

Make sense?

Peach :slight_smile: [import]uid: 52491 topic_id: 18723 reply_id: 72134[/import]