Adjusting width of multi-line text at runtime.

Audio and Graphics
#1

I have some display.newText that I define with a certain width which automatically pushes any text that is too long for it to the next line.

I can set the width of the text at runtime, but that will only affect it’s mask/container. The text itself starts to get pushed towards the left, into it’s mask causing clipping (as shown in the image).

f458356e53.png

Is the text’s multi-line calculation only done at creation? Can I call this calculation manually?

#2

Are you hard coding in the value? Like “400”? Try something like 

display.actualContentWidth
#3

Yes I’m hard coding the value like so

local textOptions = { text = "This is some really long text that becomes multi-line", x = 0, y = 0, width = display.contentWidth \* 0.75, --take up some portion of the screen align = "left" } local myText = display.newText(textOptions) myText.anchorX = 0 myText.anchorY = 0 print(myText.width) --original width --then later on I need to adjust the width to make it smaller so I can fit other elements along side it myText.width = display.contentWidth \* 0.5 --also, if I try to set some new text, the width gets reset print(myText.width) --yes it's the width I set myText.text = "some new text" print(myText.width) --now it's back to the previous width?

I’m not sure what you meant with display.actualContentWidth

#4

Here try this.

local centerX = display.contentCenterX local actualW = display.actualContentWidth local textOptions = { text = "This is some really long text that becomes multi-line blah blah blah blah blah blah blahblah blah blahblahblah blah blah blah blah blah blah ", x = centerX, y = 50, width = actualW, align = "left" } local myText = display.newText(textOptions)
#5

I think you missed what my problem was, sorry :\

Here is what I want.

  1. Create some text on screen at a certain width. (So far so good)

  2. Change the width of that text to something smaller, such as half the width of the screen: display.contentWidth * 0.5 (Corona seems to let you do this)

  3. The text becomes clipped around the sides (I’m stuck here)

I want to add some more display elements next to the text if/when certain conditions meet, but if it’s taking up the entire width of the screen (like in the example you posted), they will overlap.

#6

You cannot resize a native.newText() by changing it’s width. You can destroy it and recreate it.

Rob

#7

Did you mean display.newText or native.newText, or both?

I know the first is rendered onto a texture and displayed through opengl and the other is shown by android/ios.

Are both of them unable to change their widths after creation?

Either way, I’ve already done what you suggested and I’m keeping the creation table and altering it’s width at runtime, then creating a new display.newText object and calling myText:removeSelf() on the original.

#8

I’m unsure about native.newTextField()/Box().

#9

Are you hard coding in the value? Like “400”? Try something like 

display.actualContentWidth
#10

Yes I’m hard coding the value like so

local textOptions = { text = "This is some really long text that becomes multi-line", x = 0, y = 0, width = display.contentWidth \* 0.75, --take up some portion of the screen align = "left" } local myText = display.newText(textOptions) myText.anchorX = 0 myText.anchorY = 0 print(myText.width) --original width --then later on I need to adjust the width to make it smaller so I can fit other elements along side it myText.width = display.contentWidth \* 0.5 --also, if I try to set some new text, the width gets reset print(myText.width) --yes it's the width I set myText.text = "some new text" print(myText.width) --now it's back to the previous width?

I’m not sure what you meant with display.actualContentWidth

#11

Here try this.

local centerX = display.contentCenterX local actualW = display.actualContentWidth local textOptions = { text = "This is some really long text that becomes multi-line blah blah blah blah blah blah blahblah blah blahblahblah blah blah blah blah blah blah ", x = centerX, y = 50, width = actualW, align = "left" } local myText = display.newText(textOptions)
#12

I think you missed what my problem was, sorry :\

Here is what I want.

  1. Create some text on screen at a certain width. (So far so good)

  2. Change the width of that text to something smaller, such as half the width of the screen: display.contentWidth * 0.5 (Corona seems to let you do this)

  3. The text becomes clipped around the sides (I’m stuck here)

I want to add some more display elements next to the text if/when certain conditions meet, but if it’s taking up the entire width of the screen (like in the example you posted), they will overlap.

#13

You cannot resize a native.newText() by changing it’s width. You can destroy it and recreate it.

Rob

#14

Did you mean display.newText or native.newText, or both?

I know the first is rendered onto a texture and displayed through opengl and the other is shown by android/ios.

Are both of them unable to change their widths after creation?

Either way, I’ve already done what you suggested and I’m keeping the creation table and altering it’s width at runtime, then creating a new display.newText object and calling myText:removeSelf() on the original.

#15

I’m unsure about native.newTextField()/Box().