Code Monkey home page Code Monkey logo

Comments (8)

britzl avatar britzl commented on June 19, 2024 1

Added per word truncation in 5.9.0

from defold-richtext.

britzl avatar britzl commented on June 19, 2024

Could this be achieved using the truncate() and characters() functions?

from defold-richtext.

subsoap avatar subsoap commented on June 19, 2024

@britzl most likely if truncate allowed per word truncation

from defold-richtext.

subsoap avatar subsoap commented on June 19, 2024

How would you do this?

I can't set the previous node invisible, nor can I delete it because of the way truncate works. I can set their color.w to 0 I think. It would be more convenient to fade in one word at a time, but that's a different look. timer.delay seems like the wrong tool for this problem too.

from defold-richtext.

britzl avatar britzl commented on June 19, 2024

I created an example of one way of solving this: https://github.com/britzl/defold-richtext/blob/master/example/example.gui_script#L246-L283

Take a look and see if you have any suggestions on how to improve it.

from defold-richtext.

subsoap avatar subsoap commented on June 19, 2024

This seems like the right solution!

WoW's interface was done in Lua. I wonder if their quest text used a similar technique? :)

Here are some visual / timer changes only. The timer.delay calls should be saved in a table which can then be canceled for each? If you click back before it finishes the script errors over a deleted node. Could add an event for clicking while fading to instantly show all text.

The improvement to the example in general is also good!

local function create_fade_in_example()
	local long_text = [[
	This is a text that should fade in character by character. This text is long to make it easier to see the visual effect.

	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis porta eu ligula in varius. 

	Vestibulum fringilla rhoncus vestibulum. Nullam rutrum diam eu quam volutpat, ut laoreet massa suscipit. 

	Nulla id eleifend erat. Donec commodo quam nec posuere efficitur. Vestibulum a justo ex. 

	Vestibulum facilisis, felis id semper scelerisque, magna metus pretium felis, vel fermentum ipsum mauris a quam.
	]]
	local settings = { position = vmath.vector3(20, 900, 0), align = richtext.ALIGN_LEFT, width = 640 }
	local words = richtext.create(long_text, "Roboto-Regular", settings)

	local fade_duration = 0.44
	local fade_delay = 0.022
	coroutine.wrap(function()
		-- disable all words
		for i=1,#words do
			gui.set_enabled(words[i].node, false)
		end

		-- iterate over words and fade them in character by character
		for i=1,#words do
			local word = words[i]
			
			-- split into individual characters and fade in
			local characters = richtext.characters(word)
			for i,char in ipairs(characters) do
				fade_in(char.node, go.EASING_INOUTSINE, fade_duration, (i - 1) * fade_delay)
			end

			-- start a timer to delete the individual characters and re-enable original word
			local max_delay = (#characters - 1) * fade_delay
			
			timer.delay(fade_duration + max_delay, false, function()
				for _,char in ipairs(characters) do
					gui.delete_node(char.node)
				end
				gui.set_enabled(word.node, true)
			end)

			fade_delay = fade_delay
			fade_duration = fade_duration
			
			-- wait before dealing with the next word
			delay(max_delay)
		end
	end)()
	
	return words
end

from defold-richtext.

britzl avatar britzl commented on June 19, 2024

Yeah, this was a fairly quick test to see if this approach works. You need to keep track of the words and characters and timer so that it's possible to do cleanup.

Why do you set the delay and duration like this: ?

fade_delay = fade_delay
fade_duration = fade_duration

from defold-richtext.

subsoap avatar subsoap commented on June 19, 2024

Why do you set the delay and duration like this: ?

I have no idea! 🤪 Must have been testing something and did something weird, or maybe happened from a multiple cursor being active without noticing.

from defold-richtext.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.