Quick Links: Gideros Home | Download Gideros | Developer Guide
Textfield Different color text within text
  • Is there anyway to highlight some text with different color by using new textField.
    I tried some weird methods like combining more than one textfiled together but can not be successfull so much. (Except some minor cases)
    The problem with combining more than one textfield is i can not find the correct place (x,y) coordinate where the textField finished.
    In addition when allignment takes part this logic totaly fails. Maybe some idea to point me out?

    Previously with textwrap i coded something like this. But now we have builtin working like a charm Textfield with alignment i am trying to achieve some similar logic.
    Quote starts from old textwrap class:
    I had something in mind like this when i started:
    In the txt file i will put some distinguished characters like "@@" in the beginning of the lines. And the code will recognize them and format my line according to correspending parameters.
    Example inside txt file:
    This is a test line.
    @@This is a test line.

    The code will automatically understand that @@ line will be green color. But the first line will be black as default.

    Quote Finished:

    Fullcode with old textwrap:

    My simple code just to demonstrate my idea with Textfield:
    local textLines = {
    "this is a blue text",
    "here comes the green text",
    "This is a reddish one"
    local textField = TextField.new(nil, "")
    local textField2 = TextField.new(nil, "")
    --1st textfield
    textField:setPosition(100, 100)
    --2nd textfield
    textField2:setPosition(100+a, 100)
    textField2:setText(textLines[2]) -- set new text

  • antixantix +1 -1 (+1 / -0 )
    Due to the way TextField works I don't think it is possible without some trickery. I would get medieval and resort to making a custom class for this which does something like so..

    - Create a RenderTarget.
    - Create a single TextField to use as a brush.
    - Split your text string into separate words.
    - Store all words in a table with their x, y, color, etc.
    - Set the brush text, color, position and draw it to the RenderTarget (for every word).
    - Create a Bitmap using the RenderTarget as its Texture.
    - Display the Bitmap on stage.

    Then it's a simple matter to change the color of any word..
    - Get the x, y position of the word.
    - Clear that area of the RenderTarget.
    - Set the brush text, color, and position.
    - Draw the brush to the RenderTarget.

    Is that helpful? I'll try to make an example in the morning :bz

    Likes: talis

    Check out my DevBlog, my GitHub, and my games Falling Animals | Breaky Wall | Exetor
  • SinisterSoftSinisterSoft +1 -1 (+2 / -0 )
    It's possible that textfield could be updated to include commands for changing colour, etc. Maybe through escape codes or something? The ability to set the colour would be handy - but might slow things down slightly unless a really simple system was used.

    Likes: antix, talis

  • antixantix +1 -1 (+1 / -0 )
    Member Accepted Answer
    Right, here is an example project featuring a TextBox class that operates as described in my previous post. It looks like this...

    So as you can see there is an area of text that wraps automatically to a user specified width. The height will be auto generated so no need to bother with that. Text can change color word by word and you can align the text left. right, or center. You can also make new lines. Pretty much that's what it does :)

    In this example the TextBox is created with the text you see then every occurrence of the word "is" is recolored to magenta, and finally the first occurrence of the word "the" is recolored Cyan.

    #align# - the next word will be used to align the text ("left", "right", "center")
    #color# - the next word will be used as the new brush color (0x000000 format)
    #n# - will force a new line

    Note that EVERYTHING must be separated by SPACES and in the expected format/order or the TextBox class will crash. Error checking could be built in but I leave that to you :D

    options (optional) is a table containing things like text, x, y, color, etc.

    text - the new text to be rendered. This will force the TextBox to redraw its self.

    font - the new font to be used. This will force the TextBox to redraw its self.

    TextBox:recolor(text, color, all)
    text - the word that will be recolored.
    color - the new color for the word.
    all - if true, all occurrences of the word in the TextBox will be recolored.

    Anyway, it was fun creating this this morning and I hope somebody finds some use for it :bz

    OH, this has only been tested with the default font in Gideros, your mileage may vary ;)
    TextBox Preview.png
    336 x 540 - 8K

    Likes: talis

    Check out my DevBlog, my GitHub, and my games Falling Animals | Breaky Wall | Exetor
  • @antix thanks for the great class. Really appreciated. In the weekend i was away from home so just saw it. I will surely use it.
    It seems it can have so much use in business applications, especially content applications.
  • hgy29hgy29 +1 -1 (+5 / -0 )
    Maintainer Accepted Answer
    Gideros could actually display colored text by itself without too much changes, but we'll need to use some tagging system inside the text. I would go for using '\e' (escape) char as a tag indicator, followed by styling info.

    Something like "This is a \e[color=#f00]red\e[color=] text".
    What do you think ?
  • @hgy29 it would be perfect built in solution and i guess it will work faster. Maybe main formatting properties can be also added like bold, underlined,italic. Of course i dont know the work needed to be coded just an idea.
  • hgy29hgy29 +1 -1 (+1 / -0 )
    underline and strike-through should be possible, but as far as I know bold and italic are different font files. Multi-font fonts opened a possibility here though, but more work is involved. Let's start with font color for now :)

    Likes: talis

  • hgy29hgy29 +1 -1 (+4 / -0 )
    Color support on its way into next release for TTFont based textfields

    Likes: keszegh, pie, talis, antix

  • talistalis +1 -1 (+1 / -0 )
    thanks again for @antix for the fast reply and @hgy29 for the fast response and making it built-in possible.

    Likes: antix

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Login with Facebook Sign In with OpenID

In this Discussion

Top Posters