Problem with display.newText and character position

Solar2D Daily Builds and Public Releases
#1

I’m having problems doing something very simple. I’m displaying a text label followed by a field that will have varying length text characters. I’m using display.newText and find that I can position it the way I want (using x,y values) but the updated text will move around and some times overwrite the label area.

The API states that you create the newText object with an x,y value of the “top-left corner.” It then states that the local origin is at the center of the text – which seems strange as a default mode. It does looks like the text is moving around the center of the text field. What I want is “left justified” text. I tried using object:setReferencePoint(display.TopLeftReferencePoint) but that didn’t change the text display (it did change the x and y values).

Is this a bug or is there a way to change the text display mode?

Here is my sample test code to show the issue:

-- Test code to show problem with text field changing position when updated  
  
display.setStatusBar( display.HiddenStatusBar )  
  
local bkgd = display.newRect( 0, 0, display.contentWidth, display.contentHeight )  
bkgd:setFillColor( 0, 0, 0 ) -- black background  
  
-- This is my fixed label  
txtLabel = display.newText( "Label:", 40, 60, "Verdana-Bold", 16 )  
txtLabel:setTextColor( 255,255,255 )  
  
-- This is the text field that is updated  
txtCase = display.newText( "A", 105, 60, "Verdana-Bold", 16 )  
txtCase:setTextColor( 255,255,255 )  
txtCase:setReferencePoint(display.TopLeftReferencePoint) -- trying to change the reference point for new text  
  
print("txtCase.x = " .. txtCase.x .. ", txtCase.y = " .. txtCase.y) -- \*\*debug  
  
txtLabel = display.newText( "Tap screen to add a new character", 30, 200, "Verdana-Bold", 14 )  
txtLabel:setTextColor( 255,255,0 )  
  
-- Add another character for each tap  
local listener = function( event )  
 txtCase.text = txtCase.text .. "B"  
 print("txtCase.x = " .. txtCase.x .. ", txtCase.y = " .. txtCase.y) -- \*\*debug  
end  
  
-- Add listener to background for user "tap"  
bkgd:addEventListener( "tap", listener )

Thanks,
Tom [import]uid: 6119 topic_id: 1139 reply_id: 301139[/import]

#2

Today I was reading some posts on the forum and saw a mention of newLabel in the ui library. I didn’t find any documentation about this class but it looks like it could solve my issue because it supports text alignments: left, right, center.

I never did get an answer about my display.newText problem so I’m not sure if it’s a bug or I just don’t know what it takes to make the text left justified.

I could see center-justified text being useful for button labels and other fields with changing text but my need is for a left justified display.newText object.

Tom [import]uid: 6119 topic_id: 1139 reply_id: 2980[/import]

#3

Hi, Tom. The context here is that display.newText creates a graphical object, and for consistency, all graphical objects default to having a local origin at their center.

(There is also a convention that graphical object constructors have optional x,y declarations that position their top left corner – I would actually prefer us to use center positioning here also, but that’s another debate.)

Now, if you change the contents of display.newText, there isn’t much control over the alignment. Therefore, the Label class was created as part of the ui.lua convenience library, which you can find in various sample projects – try “Device/Compass” or “Device/GPS”, for example.

ui.newLabel is actually a wrapper for display.newText, and it lets you declare an invisible bounding rectangle, and then whenever you change the text, it checks the new width of the text object and automatically re-aligns it. This is a fairly lightweight library, but it should do what you want; it was created specifically to solve the problem of left- and right-aligned labels in the Compass sample code.

[import]uid: 3007 topic_id: 1139 reply_id: 3017[/import]

#4

Hi Evan,

how do you determine the with of the text object that is created as with right aligned text in the UI class it doesn’t work properly. I see this myself in my game when I use the ui.label for right aligned number printing on a scoreboard. I think there was already a discuss and maybe a bug post about this before.

[import]uid: 5712 topic_id: 1139 reply_id: 3020[/import]

#5

It seems to work reasonably well in the Compass sample – it’s not completely pixel-accurate, but I think it’s good to within a pixel or two. This may be font-dependent, since it’s not aligning by font baselines or metrics, it’s simply using the literal displayed width of the graphics object.

If it helps, here’s the relevant function inside ui.lua that calculates left, right, and center alignment when the text changes. The relevant property is object.stageWidth:

function t:setText( newText )  
 if ( newText ) then  
 labelText.text = newText  
  
 if ( "left" == align ) then  
 labelText.x = left + labelText.stageWidth / 2  
  
 elseif ( "right" == align ) then  
 labelText.x = (left + width) - labelText.stageWidth / 2  
  
 else  
 labelText.x = ((2 \* left) + width) / 2  
 end  
 end  
end

(Currently, object.stageWidth is the only way to get the width of a newText object.) [import]uid: 3007 topic_id: 1139 reply_id: 3026[/import]

#6

Thanks,

I was more interested how you calculate the text width internally and if it gets updated. Like you said, it isn’t pixel perfect. In my scorelist I have this problem. Depending on the font and score value, I have setoff by around 2 pixels I think. Maybe a little more. I can live with it so far.

Michael [import]uid: 5712 topic_id: 1139 reply_id: 3028[/import]

#7

Hi Evan. Thanks for the response. I did find newLabel mentioned in a forum posting and then found it in some of the samples. I looked at the code in ui.lua and I think it’s a good fit for what I’m doing.

I was curious why ui.newLabel wasn’t in any of documentation?

BTW, thanks for the Beta 5 update.

Thanks,
Tom [import]uid: 6119 topic_id: 1139 reply_id: 3036[/import]

#8

I actually thought newLabel WAS in the documentation, but it looks like it’s only in the master copy for the grand revision (which also merges all the Beta 2.0 stuff into the general API reference, and so on).

If we release another round of these incremental PDFs, I’ll make sure it gets in there too. [import]uid: 3007 topic_id: 1139 reply_id: 3055[/import]

#9

Thanks Evan.

Tom [import]uid: 6119 topic_id: 1139 reply_id: 3079[/import]