I’ve gotten my app working on an iPad and am now going back through it to try to get it to work on devices with smaller screens. I’ve figured out how to do most stuff by relating to WIDTH or HEIGHT. I haven’t figured out how to set font size according to screen size. I’m using the Xcode simulator to test my changes. Thanks.
Set font size to a proportion of WIDTH*HEIGHT?
I’m having some success with
function setup()
FontAdjustment = WIDTH / 1024 -- App was developed for 1024 width
end
then multiplying my fontSize numbers by FontAdjustment. The problem is that, on some screens, I have several different blocks of text and they don’t stay in relative position.
Posting a couple of lines of code would help
you should do the same proportinal adjustment on the text position.
You can make all coordinates proportional as @Jmv38 suggests.
It depends on the interface of course, but I’ve found that just scaling everything down doesn’t work that great, everything is just too small. If you have time to implement this, you can check which device is being used, either by calling device.metrics or comparing the WIDTH to a table of device widths, and then activate a small-screen/ large-screen layout accordingly.
@DaveW I do as you diduse the iPads resolution as the ‘base’ and have my programs figure out, on lauch, how differnt this devices screen is from the ‘base’ one. I didn’t run into the problem you’re describing.
How do I put an image into a comment? I’ll upload a couple of screen shots. Thanks.
Codea Talk does not itself host user images or videos. Upload the image to any public account that you have, such as a github repo or a blog media library, and then copy the URL to the image itself.
Then, the markdown for an image link is
the name isn’t actually displayed, so you can omit it: 
eg 
produces:
Ignore the “image” button in the text formatting row, it gives you !(), which doesn’t actually work.
This is how the app looks on iPad Simulator.
This is how it looks in the iPhone 5 Simulator after I’ve adjusted the font size for the smaller screen width.
And this is the code:
function setup()
FontAdjustment = WIDTH/1024
end
function About()
pushStyle()
background(40, 40, 50)
spriteMode(CENTER)
tint(255, 255, 255, 66)
sprite("Dropbox:Background-Laptops_0717", WIDTH * .5, HEIGHT * .5)
tint( 255, 255, 255, 255)
font("Helvetica-Bold")
fontSize(24 * FontAdjustment )
textWrapWidth( WIDTH * .8 )
HeaderColor()
text("About Pickens School", WIDTH * .5, HEIGHT * .93)
fill(255, 255, 255, 255)
font("Helvetica")
fontSize( 20 * FontAdjustment )
textMode(CORNER)
text("Pickens School is a small school located in the mountains of West Virginia. In a typical year " ..
"there are 40 students in Grades K-12. Students are encouraged to learn about technology through " ..
"hands-on activities. Students in all grades may sign out digital cameras; students in Middle " ..
"and High School have laptop computers 24 hours a day; and all students have access to desktops, laptops, and tablets during school. " ..
"The school has a fiber optics link to the Internet. For more information on Pickens School, please " ..
"use the links below.", WIDTH * .1, HEIGHT * .72 )
font("Helvetica-Bold")
fontSize(24 * FontAdjustment )
textMode(CENTER)
HeaderColor()
text("About The Pickens School Game", WIDTH * .5, HEIGHT * .48)
fill(255, 255, 255, 255)
font("Helvetica")
fontSize( 20 * FontAdjustment )
textMode(CORNER)
local Questions3 = Questions3rd()
local Questions4 = Questions4th()
local Questions5 = Questions5th()
text ( "The Pickens School Game was created by students and staff at Pickens School. " ..
'Students advised on the "look and feel" of the game, making sure it was fun for people their age. ' ..
"They asked that the players be able to select their own good and bad guys, then they " ..
"brought in photos of their pets to be used as good guys. The programmer declined the request to use " ..
"teachers as bad guys. Teachers helped with questions and provided time for " ..
"students to participate while the programming was done by the Technology Integration Specialist. " ..
"The game includes " .. math.floor(table.maxn(Questions3)) .. " questions for third grade, " ..
math.floor(table.maxn(Questions4)) .. " questions for fourth grade," ..
" and " .. math.floor(table.maxn(Questions5)) ..
" questions for fifth grade. Ten questions are randomly selected for each game. " ..
"You may review the questions " ..
"using the button below. The Pickens School Game " ..
"was programmed on an iPad using a language called Codea. ",
WIDTH * .1, HEIGHT * .15 )
fill(14, 0, 255, 255)
AboutFinishButton:draw()
ReviewQuestionsButton:draw()
SchoolWebButton:draw()
SchoolVideoButton:draw()
popStyle()
end
@yojimbo2000, Both files are set to “People with the link can view.”
Here are the links if you can try them directly:
https://www.dropbox.com/s/p02or2or6vp9yy1/iPad%20Air.png?dl=0
https://www.dropbox.com/s/qknvxs3upc6ulzw/iPhone%205.png?dl=0
I can try from OneDrive if DropBox doesn’t cooperate.
Thanks for the help,
dave
Great! That didn’t work either. Can I delete a Comment after I post it?
No, only edit it (so you could edit it to [deleted] or something).
I’m not sure that DropBox will host embed-able content.
If you’re thinking of targeting the app store then you will eventually need a website (all developers have to have one). So you could start with just a free wordpress one, and use that to host media such as screenshots.
Right now, I’m just Sideloading onto school iPads. If the students decide the app is good enough, I’ll try to get it on the App Store. I already have a Web site that I can use.
Thanks for the tip!
As I tinker with this issue more, I realize that at least some of my problem is not just the different screen sizes but the different aspect ratios. These seem to be either 9:16 or 3:4. I’m basing everything on Width and I need to somehow adjust for Height as well. Searching the discussions for “aspect ratio” is finding some helpful info.
That was why I suggested using WIDTH * HEIGHT (ie screen area) when calculating the rate to scale, but you’re right that that might not account for 16:9 vs 4:3.