BitmapText replacement (text effect, substring color and hyperlinking)

t0neg0d · February 21, 2014, 1:10am

This is almost complete, as all I have left to do is a lot of testing It is a replacement for BitmapText, still using BitmapFont as it’s backing. This will allow me to plug and play the new class without effecting your code at all.

It still uses the enums BitmapFont.Align, BitmapFont.VAlign and LineWrapMode for defining each related property.

The library’s replacement supports the following:

Character-based effects that you create yourself using the 2D framework’s TemporalActions.
SubString color changes where you pass in a substring, color, effectAllInstances flag &/or a list of indexes of instances to update, like so:
[java]
TextElement.setSubStringColor(“is”, ColorRGBA.Green, false, 1, 3, 4, 7); // etc
[/java]
It supports hyperlinking!!! Not HTML hyperlinking… who gives a shit about that. I’ll write up more about this when it is implemented into the library
All alignment modes for horizontal/vertical
All Wrap Modes, including Clip. Clipping can be enabled on all wrap modes, but, I made use of LineWrapMode.Clip as a NoWrap with clipping enabled option.

Anyways, just want to give people fair warning about the update and have a place to ramble about features.

t0neg0d · February 21, 2014, 8:27pm

So, here is how I’m going to integrate this…

Tomorrow, I’m going to update the library with the new TextElement class available for use. I’ll post an example here of how to use it to replace Button labels which will:

Fix any alignment issues you may have seen related to BitmapText
Show you how to animate the text on mouse focus/end the animation on lose focus

I’ve also added (and commented out) what is needed to switch from using BitmapText for the entire library, however, I’m going to hold off on this, as I realized while running tests that there are a few controls that will likely require a rewrite just to weed out all the crap in place to try and account for BitmapText alignment.

Specifically, these are ScrollArea & Menu (which will likely effect ComboBox, etc)

Neither is a quick effort, so it puts off the change for a bit.

That’s all for now.

rockfire · February 23, 2014, 11:54am

Oh amazing I had been hoping both links in text and colouring this would be possible one day. This will let me do things in my chat box that were not previously possible.

Could this allow for font changes too (i’m thinking can we bold, underline and colour these links or substrings)?

Also, and this may be wrong place to ask, but is it possible to use TextField as a “Text Area”, i.e. covering more than one line of text, line wrapping at the boundary? I tried briefly just expanding size of a TextField and setting the vertical align to top, and it looks like it nearly sort of works (at least saw some sort of wrapping), but the caret is weird and the text always aligns to the middle.

EDIT: Ah … i just noticed the post about BitmapTextUtil, I guess the underlining thing will not yet be possible?

RR

t0neg0d · February 23, 2014, 4:21pm

@rockfire said: Oh amazing :) I had been hoping both links in text and colouring this would be possible one day. This will let me do things in my chat box that were not previously possible.
Could this allow for font changes too (i’m thinking can we bold, underline and colour these links or substrings)?

Also, and this may be wrong place to ask, but is it possible to use TextField as a “Text Area”, i.e. covering more than one line of text, line wrapping at the boundary? I tried briefly just expanding size of a TextField and setting the vertical align to top, and it looks like it nearly sort of works (at least saw some sort of wrapping), but the caret is weird and the text always aligns to the middle.

EDIT: Ah … i just noticed the post about BitmapTextUtil, I guess the underlining thing will not yet be possible?

RR

I’ve been considering ways of supporting this that don’t require the bitmap font to contain the symbols. So far… I have a way of implementing italic… heh. Haven’t done anything towards it until I’m able to figure out a way for the others.

Here is one possibility for how to accomplish multiple fonts, underline, strike-through in the same element:

Use of multiple text layers within the TextElement. The original (standard characters) contains all QuadData (i.e. all information pertaining to where the character are being displayed. Any subsequent layer would contain only… say… bold characters which would always display in the right location by mapping to the primary layer.

I’m also interested in what people would want in ways of tagging font changes for bold, italic, underline, strike-through, etc.

Edit… actually… underline and strike-through are possible without a bitmap font page for the characters. Bold is the one I can’t seem to figure out.

rockfire · February 23, 2014, 4:58pm

@t0neg0d said: I've been considering ways of supporting this that don't require the bitmap font to contain the symbols. So far... I have a way of implementing italic... heh. Haven't done anything towards it until I'm able to figure out a way for the others.
Here is one possibility for how to accomplish multiple fonts, underline, strike-through in the same element:

Use of multiple text layers within the TextElement. The original (standard characters) contains all QuadData (i.e. all information pertaining to where the character are being displayed. Any subsequent layer would contain only… say… bold characters which would always display in the right location by mapping to the primary layer.

I’m also interested in what people would want in ways of tagging font changes for bold, italic, underline, strike-through, etc.

Edit… actually… underline and strike-through are possible without a bitmap font page for the characters. Bold is the one I can’t seem to figure out.

Ok cool, sounds like you have this in hand then For bolding, a bit naive perhaps but can you just draw the font an additional 8 times, each time offset by 1 pixel in each direction.

As for tagging, as long as TextField has enough public methods to manipulate the colours and styles at a low level, I would be happy! In my own project, part of it will be displaying styled text using a completely non-standard tag syntax (don’t ask ) that I wouldn’t expect anyone else on the planet to care about.

Perhaps you just need to supply some basic external parser classes that operate on the TextField object, and keep that logic out of TextField.

[java]
TextField t = new TextField(…);

// Basic text
t.setText(“Some basic text”);

// Basic colour text
TextElement.setSubStringColor(“is”, ColorRGBA.Green, false, 1, 3, 4, 7);

// Parsers (internally use setSubStringColor to build the text field, parses a stream)
SimpleHTMLTagParser p = new SimpleHTMLTagParser(t);
p.parse(new FileInputStream(“some-file-with-very-simple.html”));

// Wiki parser (parse method takes a string)
WikiTextParser w = new WikiTextParser(t);
p.parse(“bold //italic normal”);
[/java]

t0neg0d · February 23, 2014, 5:50pm

What format should tagging be? html? #etc? \etc?

Currently, it checks against System.getProperty(“line.separator”) only… although \t is caught… just not adding tab spaces atm.

I’d personally prefer to not use this type off tagging and use , , and other simple html type tagging

t0neg0d · February 23, 2014, 6:41pm

@rockfire said: Oh amazing :) I had been hoping both links in text and colouring this would be possible one day. This will let me do things in my chat box that were not previously possible.
Could this allow for font changes too (i’m thinking can we bold, underline and colour these links or substrings)?

Also, and this may be wrong place to ask, but is it possible to use TextField as a “Text Area”, i.e. covering more than one line of text, line wrapping at the boundary? I tried briefly just expanding size of a TextField and setting the vertical align to top, and it looks like it nearly sort of works (at least saw some sort of wrapping), but the caret is weird and the text always aligns to the middle.

EDIT: Ah … i just noticed the post about BitmapTextUtil, I guess the underlining thing will not yet be possible?

RR

I missed the second part of this…

Currently, no. To support multi-line editting will require an update to the base shader. The selection area will have to be broken into three segments… 1st line, body & endline to accomodate selections that look like ([ is the head (and 1st line) of the selection, ] is the tail (and end line). body tags surround the body portion):

This is a sample paragraph. This is a sample paragraph. This is a
sample paragraph. [This is a sample paragraph. This is a sample
body
paragraph. This is a sample paragraph. This is a sample paragraph.
This is a sample paragraph. This is a sample paragraph. This is a
sample paragraph. This is a sample paragraph. This is a sample
body
paragraph. This is a] sample paragraph. This is a sample paragraph.
This is a sample paragraph.

Also, it will require use of the new TextElement to keep formatting intact, etc. Once it is finished up that is

t0neg0d · February 24, 2014, 3:54am

Well… I decided to go with html tags. There is only basic support at the moment for paragraph, line breaks and such.

The cool part is, the paragraph tags can alter horizontal alignment. There are some catches to using the tags though… no quotes and alignments need to be spelled as they are in the Align enum from BitmapFont. I’ll likely update this to not care, but for now…

So tags that will be supported (some only if the font has the associated style page)

This is a parapgraph
<a href=maybeAMethodForReflection|someID >This is a link</a>
 or

b, u, i & strike

I doubt I’ll go much further than this though.

t0neg0d · February 25, 2014, 12:49am

@rockfire
Just a heads up… I’ve committed the TextElement and AnimText classes and they will be in tonight’s patch. They are still a work in progress (a significant work in progress as I’m veering away from horizontal alignment based on x 0 to accommodate inline alignment changes).

I’ve completely trashed wrapping by character… and I’m considering just removing the option as I (and most others) have never used this.

Atm everything is still crammed into the AnimText class but this is likely to change once this is a bit further along.

t0neg0d · February 26, 2014, 7:04pm

Some updates for this… that also updated AnimElement.

I changed the method I was using for resizing fonts completely. Originally it was based on scaling, the way BitmapText does it currently. I started noticing that not all of the alignment issues I was trying to correct were being AS corrected as I thought they were… so, I changed scaling to dimension changes.

This resolved the remaining issues and fixed an issue I was having with wrapping not completely aligning to text bounds when scaled.

I have to rewrite wrapping to character still, but the problem stated above was the major holdup on phasing out BitmapText.

Instead of doing a direct port, I’m likely going to add a new package to the library with alternate controls that use the new TextElement and give people a chance to try them out and see if they like the new features (i.e. in-line alignment changes, hyperlinking, text effects, etc, etc).

The controls I’ll be adding to this (at a minimum) will be an alternate ScrollArea or ScrollAreaAdapter, Button and Label.

As for the update to AnimElement (or anything that extends Transformable):

You can now set width/height as apposed to only using scaling. Do note that scaling has a cascading effect for any QuadData/Transformable that is a child of the scaled QuadData/Transformable (however nested it is), where as setting width/height is specific to individual QuadData/Transformable it set against.