Keep Text Left-Aligned at a certain x,y point

I believe at some point even I answered this question on the forum, but the solution in the Corona documentation doesn’t seem to be working anymore. Every time the length of the text (e.g. a score) increases, the text gets offset to the right a little bit more.

Here’s what I’m doing:

I use this to declare the text:

distanceText = display.newText(UIGroup, "0 m", 0, 0, "Verdana-Bold", 15)  
distanceText:setReferencePoint(display.cl); distanceText.x = 85; distanceText.y = 15; distanceText:setTextColor(255,255,255)  

and this to update it:

distanceText.text = tostring(math.round(player:getDistance())).." m"  
distanceText:setReferencePoint(display.cl); distanceText.x = 85; distanceText.y = 15  

which is the correct way to do it, according to this:
http://developer.coronalabs.com/reference/index/objectsetreferencepoint

Any thoughts?
Note: display.cl is a short-cut for center-left from crawlspacelib. [import]uid: 36054 topic_id: 33947 reply_id: 333947[/import]

Not exactly sure what you mean by offset to the right - I mean, by using -cl your text will continually grow to the right since it starts at “0 m” and presumably goes to like “1500 m”

That being said, I think the culprit is probably your display group.

Groups are…

  1. Only as “big” as the objects in it
  2. Objects within the group use local coordinates

If your group moved, or gained another object, it’s possible the X/Y don’t mean what they used to.

The easiest way to solve it is this:

[code] – During object creation, after setting x/y/reference
distanceText.anchorX = distanceText.x
distanceText.anchorY = distanceText.y

– After updating
distanceText.x = distanceText.anchorX
distanceText.y = distanceText.anchorY[/code]

(The added benefit with this is that if you ever need to change the original spawn position of the text, you only need to change the original two values (not four, as in your example.)
[import]uid: 41884 topic_id: 33947 reply_id: 134957[/import]

Hello @Puzzle Runner,
It looks like your code is correct, in general, which leads me to believe it’s something going awry with that .cl" parameter… maybe it’s not up-referencing properly or something. Can you please try your code using the explicit Corona display.CenterLeftReferencePoint argument?

Thanks,
Brent [import]uid: 200026 topic_id: 33947 reply_id: 134989[/import]

@Brent @Richard neither suggestion worked.

Just to be clear, I understand that as “0” becomes “10”, becomes “100”, becomes “100000”, etc. that the end of the text will move to the right (since it’s getting longer).

What I’m saying is that the entire text is moving to the right slightly each time an additional digit is added. (The starting point for the text is moving right, when it should remain the same) [import]uid: 36054 topic_id: 33947 reply_id: 135031[/import]

One more discovery I made…

If I remove the text object and create a new one with the new value, the problem disappears and everything is aligned correctly. However, this is far too costly to perform on a frame by frame basis (a requirement, this is a fast moving game)

An example of what I described above:

[code]
display.remove(distanceText)
distanceText = display.newText(UIGroup, tostring(math.round(player:getDistance()))…" m", 0, 0, “Verdana-Bold”, 15)
distanceText:setReferencePoint(display.CenterLeftReferencePoint); distanceText.x = 85; distanceText.y = 15

[/code] [import]uid: 36054 topic_id: 33947 reply_id: 135033[/import]

Hello again,
Are you saying, when it changes from 10 to 100 to 1000, the position of the “1” even shifts to the right a bit?

Brent
[import]uid: 200026 topic_id: 33947 reply_id: 135043[/import]

@Brent That’s exactly what I’m saying! :slight_smile: [import]uid: 36054 topic_id: 33947 reply_id: 135045[/import]

Is it possible for you to isolate just the text change part of your code and post it here? Also, does this occur with other fonts, not only Verdana-Bold?

Brent [import]uid: 200026 topic_id: 33947 reply_id: 135049[/import]

@Brent I believe this is what you are asking for. I’ve abstracted out unrelated stuff. I did try reverting to system font by passing nil to test whether Verdana-Bold was the issue. The problem still occurs.

local function enterFrame(event)  
distanceText.text = tostring(math.round(player:getDistance())).." m"  
distanceText:setReferencePoint(display.CenterLeftReferencePoint); distanceText.x = 85; distanceText.y = 15  
end  
  

player:getDistance() returns a number. [import]uid: 36054 topic_id: 33947 reply_id: 135061[/import]

Hello,
I tried this on my side and I’m not seeing the same problem.

local rule = display.newRect( 89, 0, 140, 120 ) ; rule:setFillColor(255,100,100)  
local distance = 1  
local distanceText = display.newText( "", 0, 0, "Verdana-Bold", 15 )  
  
local function enterFrame(event)  
 distance = distance + 0.5  
 distanceText.text = math.round(distance).." m"  
 distanceText:setReferencePoint(display.CenterLeftReferencePoint); distanceText.x = 85; distanceText.y = 15  
end  
  
local function run()  
 Runtime:addEventListener( "enterFrame", enterFrame )  
end  
  
distanceText.text = math.round(distance).." m"  
distanceText:setReferencePoint(display.CenterLeftReferencePoint); distanceText.x = 85; distanceText.y = 15  
timer.performWithDelay(1000,run,1)  

The “1” appears to stay properly aligned, so I’m not sure what’s happening with your example. Very odd, I must say! Does my example above behave properly when you test it?

Brent [import]uid: 200026 topic_id: 33947 reply_id: 135069[/import]

Bleh. When you posted your example, I realized that a long time ago (perhaps a year by now) Corona was having some issues getting text placement and size right between retina and non-retina devices, and crawlspacelib added a solution in their library that overrode the display.newText function. Commenting that out resulted in everything behaving properly.

Thanks for your help!

[import]uid: 36054 topic_id: 33947 reply_id: 135070[/import]

Not exactly sure what you mean by offset to the right - I mean, by using -cl your text will continually grow to the right since it starts at “0 m” and presumably goes to like “1500 m”

That being said, I think the culprit is probably your display group.

Groups are…

  1. Only as “big” as the objects in it
  2. Objects within the group use local coordinates

If your group moved, or gained another object, it’s possible the X/Y don’t mean what they used to.

The easiest way to solve it is this:

[code] – During object creation, after setting x/y/reference
distanceText.anchorX = distanceText.x
distanceText.anchorY = distanceText.y

– After updating
distanceText.x = distanceText.anchorX
distanceText.y = distanceText.anchorY[/code]

(The added benefit with this is that if you ever need to change the original spawn position of the text, you only need to change the original two values (not four, as in your example.)
[import]uid: 41884 topic_id: 33947 reply_id: 134957[/import]

Hello @Puzzle Runner,
It looks like your code is correct, in general, which leads me to believe it’s something going awry with that .cl" parameter… maybe it’s not up-referencing properly or something. Can you please try your code using the explicit Corona display.CenterLeftReferencePoint argument?

Thanks,
Brent [import]uid: 200026 topic_id: 33947 reply_id: 134989[/import]

@Brent @Richard neither suggestion worked.

Just to be clear, I understand that as “0” becomes “10”, becomes “100”, becomes “100000”, etc. that the end of the text will move to the right (since it’s getting longer).

What I’m saying is that the entire text is moving to the right slightly each time an additional digit is added. (The starting point for the text is moving right, when it should remain the same) [import]uid: 36054 topic_id: 33947 reply_id: 135031[/import]

One more discovery I made…

If I remove the text object and create a new one with the new value, the problem disappears and everything is aligned correctly. However, this is far too costly to perform on a frame by frame basis (a requirement, this is a fast moving game)

An example of what I described above:

[code]
display.remove(distanceText)
distanceText = display.newText(UIGroup, tostring(math.round(player:getDistance()))…" m", 0, 0, “Verdana-Bold”, 15)
distanceText:setReferencePoint(display.CenterLeftReferencePoint); distanceText.x = 85; distanceText.y = 15

[/code] [import]uid: 36054 topic_id: 33947 reply_id: 135033[/import]

Hello again,
Are you saying, when it changes from 10 to 100 to 1000, the position of the “1” even shifts to the right a bit?

Brent
[import]uid: 200026 topic_id: 33947 reply_id: 135043[/import]

@Brent That’s exactly what I’m saying! :slight_smile: [import]uid: 36054 topic_id: 33947 reply_id: 135045[/import]

Is it possible for you to isolate just the text change part of your code and post it here? Also, does this occur with other fonts, not only Verdana-Bold?

Brent [import]uid: 200026 topic_id: 33947 reply_id: 135049[/import]

@Brent I believe this is what you are asking for. I’ve abstracted out unrelated stuff. I did try reverting to system font by passing nil to test whether Verdana-Bold was the issue. The problem still occurs.

local function enterFrame(event)  
distanceText.text = tostring(math.round(player:getDistance())).." m"  
distanceText:setReferencePoint(display.CenterLeftReferencePoint); distanceText.x = 85; distanceText.y = 15  
end  
  

player:getDistance() returns a number. [import]uid: 36054 topic_id: 33947 reply_id: 135061[/import]

Hello,
I tried this on my side and I’m not seeing the same problem.

local rule = display.newRect( 89, 0, 140, 120 ) ; rule:setFillColor(255,100,100)  
local distance = 1  
local distanceText = display.newText( "", 0, 0, "Verdana-Bold", 15 )  
  
local function enterFrame(event)  
 distance = distance + 0.5  
 distanceText.text = math.round(distance).." m"  
 distanceText:setReferencePoint(display.CenterLeftReferencePoint); distanceText.x = 85; distanceText.y = 15  
end  
  
local function run()  
 Runtime:addEventListener( "enterFrame", enterFrame )  
end  
  
distanceText.text = math.round(distance).." m"  
distanceText:setReferencePoint(display.CenterLeftReferencePoint); distanceText.x = 85; distanceText.y = 15  
timer.performWithDelay(1000,run,1)  

The “1” appears to stay properly aligned, so I’m not sure what’s happening with your example. Very odd, I must say! Does my example above behave properly when you test it?

Brent [import]uid: 200026 topic_id: 33947 reply_id: 135069[/import]