I'm happy to anounce that I made my first app! It's called 777 by CarDan Studio on Google Play Store as the app might be relevant to the question.
https://play.google.com/store/apps/details?id=com.cardan.a777
While I was working on the app, I made a menu system with several "screens" (play game is one "screen", credits is another)
At first I tried to use a fixed resolution for my app, which resulted in text that was placed at 0,0, ended up 200px down from the top, even though the
SetClearColor (150, 150, 150) filles the whole screen.
I then changed the environment settings to this:
//Getting devices' screensize
width = GetDeviceWidth()
heigth = GetDeviceHeight()
global ratio
ratio = heigth - width
//Setting screen settings
SetWindowSize(width, heigth, 0)
SetVirtualResolution(width, heigth)
SetDisplayAspect(width / heigth)
SetOrientationAllowed(1, 1, 0, 0)
SetClearColor (150, 150, 150)
Later on, when placing sprites and text dynamically, I used this approach:
//Defining ratio settings
stats_size = ratio / 11
stats_posx = width / 90
stats_posya = heigth / 5
stats_posyb = stats_size * 1.2
//Text properties of Title
statstitle.size = ratio / 3 //Size
statstitle.obj = CreateText("Stats")
statstitle.posx = width / 2 //Position X: Center
statstitle.posy = ratio / 9 //Position Y: Top
SetTextSize(statstitle.obj, statstitle.size)
SetTextAlignment(statstitle.obj, 1)
SetTextPosition(statstitle.obj, statstitle.posx, statstitle.posy)
//Text properties of Highscore
sHs.size = stats_size //Size
sHs.obj = CreateText("Highscore:")
sHs.posx = stats_posx //Position X: Left
sHs.posy = stats_posya + (stats_posyb * 0) //Position Y: Top/Center
SetTextSize(sHs.obj, sHs.size)
SetTextAlignment(sHs.obj, 0)
SetTextPosition(sHs.obj, sHs.posx, sHs.posy)
//Text properties of Tap
sTap.size = stats_size //Size
sTap.obj = CreateText("Total taps:")
sTap.posx = stats_posx //Position X: Left
sTap.posy = stats_posya + (stats_posyb * 1) //Position Y: Top/Center
SetTextSize(sTap.obj, sTap.size)
SetTextAlignment(sTap.obj, 0)
SetTextPosition(sTap.obj, sTap.posx, sTap.posy)
//Text properties of Tap Correct
sTapG.size = stats_size //Size
sTapG.obj = CreateText("Perfect 777:")
sTapG.posx = stats_posx //Position X: Left
sTapG.posy = stats_posya + (stats_posyb * 2) //Position Y: Top/Center
SetTextSize(sTapG.obj, sTapG.size)
SetTextAlignment(sTapG.obj, 0)
SetTextPosition(sTapG.obj, sTapG.posx, sTapG.posy)
I'm calculating the size, x-position and y-position induvidually for every element. Here's the y-position code:
stats_posya + (stats_posyb * 0) //Element 2
stats_posya + (stats_posyb * 1) //Element 3
stats_posya + (stats_posyb * 2) //Element 4
//Full calculation:
((heigth / 5) + (((heigth - width) / 11) * 1.2)) 0
((heigth / 5) + (((heigth - width) / 11) * 1.2)) 1
((heigth / 5) + (((heigth - width) / 11) * 1.2)) 2
//Times 0 for element 2
//Times 1 for element 3
//Times 2 for element 4
If you look at the "Stats" picture of my app, you can see how I've positioned every text element. This layout will always look the same on every device according to their screen size. Text and sprites will be smaller on smaller screens, but they will look identical to a bigger screen. It's basically a scaled down version.
Now, I'm sure there is a better way.
Let's say I want to make a keyboard layout with different sprites for each character on a standard keyboard. Then I would have to do all these calculations for every single sprite to ensure that they would always stay in their places respectively. And what if I wanted to move the sprites to different places on the screen now and then? The device would suffer major calculation sickness leading to a slow app.
What's the best way of getting around this?
-Daniel
