Score and highscore alignement

Solar2D General Questions/Discussion
#1

Hi guys,

I would appreciate your help.

I want to place in the UPPER RIGHT screen corner something like this.

Score: 10 / 20

– 10 is score

– 20 is highscore

Values 10 and 20 dynamically change… depending on the game play (they all start from zero).

Problem is when you play too long and scoring is over 100 and over 1000 text alignment is messed up.

Digits go left as they increase.

local score = 0 local highScore = 0 local scoreText = display.newText( ("Score: " .. score .. " / ", .. highScore), 0, 0, native.systemFont, 18 )          scoreText.x = screenRight          scoreText.y = scoreText.height

I have read a lot of this topic, and did not find efficient solution.

I do not want zero digits before score, like mentioned in here:

https://forums.coronalabs.com/topic/24352-centering-text/

How to align this properly for any score value from 0 to 99999?

Many thanks!

Ivan

#2

Cleanest solution would be to have seperate textfields for the different “parts” of you score.

You would have one text that only reads “Score:”, one for the current score e.g. “40”, one for the slash “/” and one for the highscore e.g. “140”. Now you just have to determine where to place these (depending on your highest possible values).

#3

Hi Torben,

I tried that also, and it is not so clean…

Because 0 and 99999 is quite different in space.

And whole text must to be shifted to the left when score is increased…

I will play around with that, I was hoping for smart solution…  :slight_smile:

#4

Can you draw us an example of what you want it to look like, both when the score is zero and when it is 99999?

#5

Nick, please see attached.

I am doing walkaround for drawed example.

High score will not be in the first row, it will be in the second row.

Drawed example is too much to handle when you have “0 / 0”…

#6

So basically you want the text to be right justified?

After you update the text, do this each time:

[lua]

scoreText.anchorX = 1

scoreText.x = screenRight - 5   – change this to whatever ‘gap’ you want between end of scoreText and side of screen

[/lua]

#7

Thanks Nick, amazing, that is what I needed.

The downside of this solution is that I have only one text object:

local scoreText = display.newText( ("Score: " .. score .. " / ", .. highScore), 0, 0, native.systemFont, 18 )

And you can have only one color/font/size for “Score”, “score” and “highScore”… ?

But when you have multiple text objects you get back right where you started (back to square one).

#8

I would create a display group to hold the text objects.

[lua]

local scoreGroup        – set up a variable to hold the score object

local g = display.newGroup()

local r = display.newRect(g, 0 , 0 , 160 , 40 )   – experiment with sizes

r.alpha = 0

g.box = r    – create an invisible rectangle big enough for all text to fit in

local t = display.newText(score, 0 , 0 , native.systemFont, 18 )

t:setFillColor( 0 , 0 , 0 )

g.scoreText = t         – create text object for score in black text

t.anchorX = 1

t.x = g.box.width/ 2 - 5        – position 5 pixels from right side of rectangle

local t = display.newText( “Score:”, 0 , 0 , native.systemFont, 18 )

t:setFillColor( 1 , 1 , 1 )

g.scoreTitle = t   – create text object for score in white text

t.anchorX = 1

t.x = g.scoreText.x - g.scoreText.width - 5      – position 5 pixels from left side of score

g.anchorX = 1

g.x = screenRight - 5

scoreGroup = g

[/lua]

Then to update:

[lua]

scoreGroup.scoreText = score

scoreGroup.scoreText.anchorX = 1

scoreGroup.scoreText.x = scoreGroup.box.width/ 2 - 5

scoreGroup.scoreTitle.anchorX = 1

scoreGroup.scoreTitle.x = scoreGroup.scoreText.x - scoreGroup.scoreText.width - 5

[/lua]

#9

Uuuu interesting, I will try that!

It shows how onscreen positioning can be very demanding sometimes.

Thanks Nick!

#10

Yes, it takes a while to get the hang of it. I do it this way, others might use containers or other methods - containers were introduced after I had already perfected my methods. so I don’t really use them.

With practice it becomes a lot easier. For example I laid out this entire screen in a morning:

ss_363add947497d00a03f26778e8f41838cd408

#11

You are a pro!  :smiley:

It looks trully amazing!

Is this a game or an app?

#12

Thanks! It’s a game, been out on Steam for a few months. Corona is pretty powerful!

#13

Congrats, looks amazing!!  :smiley:

I thought that Steam games must be for PC/Mac also?

And Corona does not support PC/Mac exports at this moment…

#14

You can build for PC and Mac on Corona, it’s been possible for about 18 months now.

https://coronalabs.com/blog/2015/07/22/mac-app-and-win32-app-open-beta/

#15

Thanks Nick!

#16

Nick,

Works amazing thank you!!

Just for further readers, two typos:

local t = display.newText(g, score, 0, 0, native.systemFont, 18 )  ---- g to belong to a group scoreGroup.scoreText.text = score ---- text field missing
#17

FWIW. You can build apps for:

Apple iOS

Apple tvOS (Apple TV)

Apple macOS (Apple Desktop)

Android (Google Play, Amazon, misc. other stores)

Android TV (including Amazon Fire TV)

Misc. Android game consoles like the old OUYA and now Razer, Gamestick.

Windows Phone 8 

Windows x86 Desktop including submitting to Steam.

Rob

#18

Thanks Rob!

#19

Nick, I have one little problem.

Score number is aligned with screenRight.
And Score (text) is aligned with score number.

Problem is as score number changes you see gentle Score text movement to the left/right/left… due to number width property change :slight_smile:

Did I messed up somewhere? :slight_smile:
Or should I just keep Score text aligned with screenLeft side?

Many thanks.
Ivan

#20

Hey Ivan, it sounds like you have conflicting requirements. You can either have the score label and the score value maintain their distance apart which, when right justified, will cause the label to move. You can use a fixed width font that will minimize it, but as soon as the score passes another magnitude (i.e going from 99 to 100) and another digit is added, it’s going to move anyway.  Or you can separate the label from the text and keep the label in a fixed location. If you expect scores to get into the 6-7 digit range, then the gap between the label and the score value can seem ugly.

My work around to this is to include leading zeros:    Score: 0000104

Many games do this as the work around for this issue. To get leading zeros, you would use the string.format() API call:

g.scoreText.text = string.format( "%07d", score )

The first parameter is the formatting string. The “%” starts a format specifier. The “0” says pad with leading zeros. The “7” says make sure it’s 7 digits long. The “d” says to make it a decimal (Integer). The second parameter is the value to output.

Then you can separate the label from the score value and have two objects on the screen and the label won’t jump around on you.

Rob