Defold-RichText

Or something close to “Ritzl”? Like Ritzh Text? :joy:

Also thanks for this @britzl, I love it! Really make it a lot easier to do fun text stuff :smiley:

6 Likes

I’m trying to figure out a way to have a blinking cursor at the end of a truncating text . Any tip on how to solve that?

Essentially you’d have to figure out the position of the last character after each truncate call. Is there way to access the inner text gui component and get width data on the last line perhaps?

Ah, yeah, that’s currently not very simple to achieve. The call to truncate() should probably return the last visible node of the text. Created issue: https://github.com/britzl/defold-richtext/issues/24

3 Likes

Added support for this now. The truncate() function will now return the last visible word. The function will also update the text metrics of truncated nodes. Added an example with a cursor following truncated text as it is revealed.

5 Likes

Suh-weeet!

2 Likes

Speaking of stuff at the end of text. In our tutorial, I have this pulsating arrow indicator at the end of a text bubble indicating that the game expects the user to click to advance:

The problem is that, since it’s so small, sometimes it overflows on its own, which looks bad:

A way to control overflow would be really useful. I’m not really sure how it would be implemented. I don’t really have an API proposal I’m happy with. Maybe a <nobreak>words that don't break</nobreak> tag?

4 Likes

Thank you for the feature request! Added: https://github.com/britzl/defold-richtext/issues/25

5 Likes

I decided to revive the old and deprecated <nobr> HTML tag. It might not be good enough for browsers but it’s damn well good enough for Defold-RichText!

8 Likes

Coming up next, marquee and blink!

5 Likes

Hi All!!

I’m having some trouble with this and I have no idea where to get started. Here are my steps.

I want to make my countdown cooler by having the minutes being larger than the seconds. I want to do this via richtext. Here’s what I’ve done:

  1. Added https://github.com/britzl/defold-richtext/archive/master.zip as a dependency
  2. Did project -> fetch libraries and sychronised
  3. Checked that richtext appears in my project with the jigsaw piece icon
  4. What should the code be? And have I missed anything here?

Here’s my guess for the code so far:

	local minutes = 320
	local seconds = 182
	richtext.create(minutes.."."..<size=2>seconds</size> )

But that’s not right. Any help?

I am getting

/main/guiscript.gui_script:2: attempt to index global ‘richtext’ (a nil value)
stack traceback:

which makes me assume that I haven’t installed the dependency correctly!

Have you required RichText?

Okay, some time later, I have successfully figured out how to “require” a module. That information should probably be on the “working with library projects” page, and it would be helpful if there was just one name for an engine add-on, instead of switching between module/dependency/library.

Next question:
for a normal text node, it’s okay to use (in update)

		local text= (self.minutes.."."..self.seconds)
		local s= gui.get_node("timernode")
		gui.set_text(s, text)

and the node constantly updates itself as the minutes and seconds go down. How can you do this is a rich text node?

You can get all nodes from richtext and update the one you want, but I’d suggest that you delete and recreate the nodes. If it’s not too much text to process it’s not really going to have much effect on performance.

okay, so here is the code I use to generate the rich text node:

	self.minutes = "minutes"
	self.seconds = "seconds"
	local sampletext = self.minutes.."<size=0.7>".."."..self.seconds
	print(sampletext) 
	self.richtextnode = richtext.create(sampletext, "win96", settings)
	pprint(self.richtextnode)

What is the name of the rich text node in that case (or, how do i access it)? gui.get_node(self.richtextnode) doesn’t seem to work and i can’t find anything in the API.

richtext.create() returns a table structire containing data about the words, tags, nodes etc. There’s a bunch of examples in the repo showing how you can use Defold-RichText:

I’d suggest doing something like this:

local text = ("%d<size=0.7>%d"):format(23, 59)
local words, metrics = richtext.create(text, "Roboto-Regular", { position = vmath.vector3(0, 390, 0) })
gui.set_text(words[1].node, "foobar") -- change text of first word
3 Likes

Many thanks Britzl. I am not a fluent user of lua so there’s a lot I’ll have to learn from your examples! But I am confident I can get it sorted now.

1 Like

You are going to kill me! But i finally found this link https://www.defold.com/ref/label/ and was able to use metrics[width] and make two labels, the second one changing position dynamically according to the width of the first one’s text (previously i was sure I could only get the label size, which is here https://www.defold.com/manuals/label/, rather than the text width).

Still, I learned about GUI scripts, which I had never used before, and also, I learned a little more about lua, which is always handy.

2 Likes

How can we stop truncated nodes at the end, when the whole text appears and we want to wait for a while with this or wait for user input to proceed?

I’m not sure I understand what you mean. Did you check the examples project in the github repo?

Yes, I’m modifying the example project :wink: I mean an effect like this:

richtext_truncated

This gif is looped, but at the end, the text stops and shows on the screen until I click/touch anywhere to proceed.

I did it by canceling the timer:

if length == metrics.char_count then
    delay.cancel_all()
end

I used delay.cancel_all() because when I assigned this timer to local id and called cancel(id) I’m getting an error:

ERROR:DEFAULT: Error running delay callback: /example/example.gui_script:79: bad argument #1 to ‘cancel’ (number expected, got nil)

I don’t know why it shows, because cancel(id) is used like in the Timer example and id is assigned like this:

local id = delay.repeating(0.05, function()