Text typeout effect?

[N_K]

Hello all.

Is there someone around here who managed to implement delayed text typeout (or typewriter, whatewer is it supposed to be called) effect, like the system used in visual novels/RPGs? (Here's a video of a VN engine in action, check the way the text is displayed: http://www.youtube.com/watch?v=rJ14rQSgRHs)

I know it must be a trivial thing, and even beginners should be able to do this, but the more I try, the slower and more complicated it gets, so after about a week, I gave up. I have absolutely no idea how this meant to be implemented.

Your help would be appreciated.

[Jasoco]

Yeah, it's trivial but it can be confusing.

Basically the easy way is to have a "dialog box" object with an update and draw function. In the update function you simply have a variable that holds a number referring to how much of the text you want to currently show and have it increment every frame at a certain speed (Depending on how fast you want to draw the message) and in the draw function you will simply take that number and use it to get the left side of the message string by using string.sub().

For instance, pseudo code:

Code: Select all

function dialog_setup(msg)
  dialog_message = msg
  dialog_length = 0
  dialog_speed = 10
  dialog_finished = false
  dialog_opened = true
end

function dialog_update(dt)
  dialog_length = dialog_length + dialog_speed * dt 
  if dialog_length > #dialog_message then
    dialog_finished = true
    --Use this part to do things that need to happen when the text is finished. Like only allow the user
    --to move to the next dialog when the text is finished by checking for key presses and checking
    --whether the dialog is finished or not and if it is finished then exit it, and if not, speed the text
    --up to get to the end faster if you want.
  end
  --The DT makes it framerate independent, the text will type at the speed of 10 characters per second using this example.
  --Using # on a string returns the length of the string in characters.
end

function dialog_draw()
  local msg = string.sub(dialog_message, 1, math.floor(dialog_length))
  love.graphics.print(msg, x, y)
end

Remember, this is pseudocode. It won't work out of the box. But use it as an example to figure out how to do it right. Remember that when you show the dialog to set it up. Basically in your game loop you check if a "dialog is open" and false, run the game update, if true run the dialog update. And use the dialog creation function to set up all the variables required. When you finish with the dialog by pressing the accept key at the right time, make sure to basically "undo" the dialog creation stuff. At least set the "dialog is open" variable to false so you return to the game.

[miko]

I know it must be a trivial thing, and even beginners should be able to do this, but the more I try, the slower and more complicated it gets, so after about a week, I gave up. I have absolutely no idea how this meant to be implemented.

The attachment can help you get started.
BTW, I used love.graphics.printf, whihc uses automatic word wrapping, and this is why there is "jumping" effect. If you don't like that, you will need to implement line wrapping yourself.

[N_K]

Wow, you guys are awesome!

(And no wonder I failed to do this, I went a completely different and overcomplicated way...)

Thank you very much!

[Jasoco]

A tip. Line wrapping is as simple as adding the following where you want a line break: \n

That's backslash lower case n.

For example:

Code: Select all

str = "This is a string of text.\nIt has two lines of text in it.\nI mean it has three."
print(str)

Outputs:

Code: Select all

This is a string of text.
It has two lines of text in it.
I mean it has three.

[Robin]

That's slash lower case n.

Backslash. But yeah.