Quick Links: Download Gideros Studio | Gideros Documentation | Gideros Development Center | Gideros community chat
Textfield Different color text within text - Gideros Forum

Textfield Different color text within text

talistalis Guru
edited November 2017 in General questions
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 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.

@ line will be green color. But the first line will be black as default.

Quote Finished:

Fullcode with old textwrap:
http://giderosmobile.com/forum/discussion/1580/textwrap-addition/p1


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)
textField:setTextColor(0x88bbdd)
stage:addChild(textField)
textField:setText(textLines[1])
 
a=textField:getWidth() 
b=textField:getWidth() 
 
--2nd textfield
textField2:setPosition(100+a, 100)
textField2:setTextColor(0x119900)
textField2:setText(textLines[2])	-- set new text
stage:addChild(textField2)
«1

Comments

  • 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

    +1 -1 (+1 / -0 ) Share on Facebook
  • 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

    Coder, video game industry veteran (since the '80s, ❤'s assembler), arrested - never convicted hacker (in the '90s), dad of five, he/him (if that even matters!).
    https://deluxepixel.com
    +1 -1 (+2 / -0 ) Share on Facebook
  • antixantix Member
    edited November 2017 Accepted Answer
    Right, here is an example project featuring a TextBox class that operates as described in my previous post. It looks like this...
    image

    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.

    CONTROL CODES
    #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

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

    TextBox:SetText(text)
    text - the new text to be rendered. This will force the TextBox to redraw its self.

    TextBox:SetFont(font)
    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 ;)

    Likes: talis

    zip
    zip
    TextBox.zip
    3K
    TextBox Preview.png
    336 x 540 - 8K
    +1 -1 (+1 / -0 ) Share on Facebook
  • talistalis Guru
    edited November 2017
    @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 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 ?
    +1 -1 (+6 / -0 ) Share on Facebook
  • @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 Maintainer
    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

    +1 -1 (+1 / -0 ) Share on Facebook
  • hgy29hgy29 Maintainer
    Color support on its way into next release for TTFont based textfields
    +1 -1 (+5 / -0 ) Share on Facebook
  • talistalis Guru
    edited November 2017
    thanks again for @antix for the fast reply and @hgy29 for the fast response and making it built-in possible.

    Likes: antix

    +1 -1 (+1 / -0 ) Share on Facebook
  • hgy29 said:

    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 said:

    Color support on its way into next release for TTFont based textfields

    Guys, was textfield color support finally introduced to Gideros? What is its current state?
    > Newcomers roadmap: from where to start learning Gideros
    "What one programmer can do in one month, two programmers can do in two months." - Fred Brooks
    “The more you do coding stuff, the better you get at it.” - Aristotle (322 BC)
  • Gideros apk is already a lot of weight
    No need to further increase the weight of libraries
    my games:
    https://play.google.com/store/apps/developer?id=razorback456
    мій блог по гідерос https://simartinfo.blogspot.com
    Слава Україні!
  • hgy29hgy29 Maintainer
    @oleg, no need sure, but if it is useful why not ? Anyhow this feature is in gideros since a few releases already.
  • @hgy29 "is useful why not ?"

    I think that Gideros should not pursue "Unity", but should take its own niche-mini 2d games, with a small size.



    Likes: antix

    my games:
    https://play.google.com/store/apps/developer?id=razorback456
    мій блог по гідерос https://simartinfo.blogspot.com
    Слава Україні!
    +1 -1 (+1 / -0 ) Share on Facebook
  • hgy29hgy29 Maintainer
    To me it would be a huge mistake to restrict gideros use to 2D games only. In fact gideros is powerful enough to build professional apps and can do 3D too. Gideros user base is far too small today, if we want to attract more people we need to extend our offer, that's my opinion.

    Likes: SinisterSoft

    +1 -1 (+1 / -0 ) Share on Facebook
  • @hgy29 Do you really think that you can compete with Unity?
    my games:
    https://play.google.com/store/apps/developer?id=razorback456
    мій блог по гідерос https://simartinfo.blogspot.com
    Слава Україні!
  • hgy29hgy29 Maintainer
    In some fields yes, absolutely! I would be on Unity if that wasn't the case :)
  • olegoleg Member
    edited February 2018
    Unity libraries weigh 13mb - this is their only disadvantage
    my games:
    https://play.google.com/store/apps/developer?id=razorback456
    мій блог по гідерос https://simartinfo.blogspot.com
    Слава Україні!
  • hgy29hgy29 Maintainer
    You mean that gideros only advantage to you is its relatively small size ?
    Nowadays size is less and less an issue (and don't get me wrong, I am totally in favour of small sized binaries, my job being to develop for small sized/low power platforms like MCU's).
    I think gideros have more strengths:
    - instant debug over wifi is unvaluable
    - fast learning curve/easy to get started
    - easy export
    - ...

    Likes: SinisterSoft

    +1 -1 (+1 / -0 ) Share on Facebook
  • olegoleg Member
    edited February 2018
    @hgy29

    -yes, for me, the advantage is a small size


    when I started using Gideros:
    -he was not free
    -exports were difficult

    *If I need 3d - I will use Unity




    my games:
    https://play.google.com/store/apps/developer?id=razorback456
    мій блог по гідерос https://simartinfo.blogspot.com
    Слава Україні!
  • I agree that the small export size is great, but even with a few more additions Gideros is still much smaller than Unity.

    Also, if all goes according to plan, there will be a features or two in 2018.3 (mid March) that should bring a lot more people to Gideros. :)

    Likes: oleg, Apollo14

    Coder, video game industry veteran (since the '80s, ❤'s assembler), arrested - never convicted hacker (in the '90s), dad of five, he/him (if that even matters!).
    https://deluxepixel.com
    +1 -1 (+2 / -0 ) Share on Facebook
  • @SinisterSoft besides Unity there is also the Corona SDK ;)
    my games:
    https://play.google.com/store/apps/developer?id=razorback456
    мій блог по гідерос https://simartinfo.blogspot.com
    Слава Україні!
  • keszeghkeszegh Member
    edited February 2018
    @SinisterSoft , could you tell us what features you mean? i guess it's no point being secretive except for the fun of teasing us. in any case i'm excited.
  • @oleg but Corona sucks mate :D
    +1 -1 (+2 / -0 ) Share on Facebook
  • I also think that for some things like 3D, as long as they are plugins then the APK doesn't become larger until you actually include those plugins right?
  • I'm sorry, I don't mean to be secretive but we have been asked to keep something 'under wraps' until mid-March - but I'm excited too ! :)
    Coder, video game industry veteran (since the '80s, ❤'s assembler), arrested - never convicted hacker (in the '90s), dad of five, he/him (if that even matters!).
    https://deluxepixel.com
  • @antix - yes, I think @hgy29 's long term goal is to make more of Gideros part of the plugin system to reduce the size of the core - for example Box2D will eventually be replaced by the LiquidFun plugin. So if you don't need Box2D or LiquidFun then your export will be smaller.

    Likes: oleg, antix

    Coder, video game industry veteran (since the '80s, ❤'s assembler), arrested - never convicted hacker (in the '90s), dad of five, he/him (if that even matters!).
    https://deluxepixel.com
    +1 -1 (+2 / -0 ) Share on Facebook
  • Apollo14Apollo14 Member
    edited February 2018
    If I wanted to work with huge fancy engine I think I'd prefer Unreal, everybody with no exception says that Unreal kicks Unity in the butt.
    hgy29 said:

    You mean that gideros only advantage to you is its relatively small size ?
    Nowadays size is less and less an issue (and don't get me wrong, I am totally in favour of small sized binaries, my job being to develop for small sized/low power platforms like MCU's).
    I think gideros have more strengths:
    - instant debug over wifi is unvaluable
    - fast learning curve/easy to get started
    - easy export
    - ...

    Unity doesn't provide instant debug over wifi and easy apk export? (I'm curious about it, afaik they have some unity android player)

    Also, if all goes according to plan, there will be a features or two in 2018.3 (mid March) that should bring a lot more people to Gideros. :)

    OMG that's awesome!!
    I'll do whatever I can to provide information about Gideros in our local RU-communities, to possibly attract more developers.
    > Newcomers roadmap: from where to start learning Gideros
    "What one programmer can do in one month, two programmers can do in two months." - Fred Brooks
    “The more you do coding stuff, the better you get at it.” - Aristotle (322 BC)
  • antixantix Member
    edited February 2018
    @Apollo14 Unreal Engine indeed is better than Unity in my opinion. I used Unreal Engine a lot when I made maps and mods for Unreal Tournament.

    When we talk of Unreal Engine and Unity and Gideros we are really not comparing apples to apples. Both Unreal Engine and Unity are primarily 3D engines with some 2D component mashed in because users wanted it.

    Gideros is better compared to Corona and Love2d which are primarily 2D engines.

    Unity and Unreal Engines are considered more "serious" by fanatical people that like C based systems with all those squiggles, strict variable typing and so many semicolons :D

    Likes: MoKaLux

    +1 -1 (+1 / -0 ) Share on Facebook
  • olegoleg Member
    edited February 2018
Sign In or Register to comment.