How to Program a dialog box with typewriter effect

Started by
18 comments, last by LAURENT* 8 years, 2 months ago

Hi! Im new to the whole programing world so Please be patient with me I'm but a noob in a vast sea of experts. So as the title suggests I'm having trouble finding a detailed tutorial on how to properly create a dialog box with the typewriter effect (letters appearing one by one). And like I said I'm very new to this so please be patient! Thanks for the help! biggrin.png

Just in case this helps I'm not using an engine or any external programs my game has been all done in eclipse and thats all.

Advertisement

Typewriter effects start out easy enough, but get complexity as your text system grows.

For the basic no-frills version, hook a loop counter up with a timer. As you loop, use a function like substring(0,n) to limit the length based on the loop counter.

After that, you'll want some extra features. Probably the first few things you'll want is a way to skip the typewriter effect and jump to the end of the loop since waiting for the typewriter effect is boring. Next, assuming your system implements a word-wrapping effect you'll need to figure out a way to handle that gracefully so the word doesn't pop down a row when it hits the end. If you implement any kind of special formatting in your text system you'll need to account for that as well.

Typewriter effects start out easy enough, but get complexity as your text system grows.

For the basic no-frills version, hook a loop counter up with a timer. As you loop, use a function like substring(0,n) to limit the length based on the loop counter.

After that, you'll want some extra features. Probably the first few things you'll want is a way to skip the typewriter effect and jump to the end of the loop since waiting for the typewriter effect is boring. Next, assuming your system implements a word-wrapping effect you'll need to figure out a way to handle that gracefully so the word doesn't pop down a row when it hits the end. If you implement any kind of special formatting in your text system you'll need to account for that as well.

um... wow im gonna sound like a complete noob but could you please give me an example of that system. Im really sorry I don't understand but I appreciate the help :D

Keep a list of strings that are currently displayed at the screen. These are the strings already typed.

When you need to draw the type writer area, just dump these on the screen. (It depends a bit on your gui system whether you actually need this.)

You also need an index to the string where you are "typing", that is, where the next character will be added. Since it's always at the end of the string, just knowing which string to append to, is sufficient.

The above is sort of your piece of paper in the type writer.

The second thing you need is a buffer with "text to write". A list of strings will probably suffice at first. When you want to output some text, just append it at the end of the buffer.

That way, your program can just dump output to the buffer and continue.

Now all that remains is a mechanism to slowly move letter from the output buffer to the 'paper'. The standard trick for that is using a timer. Most gui systems can give you a call when an amount of time has passed. Use that to move a letter, then reset the timer, so it fires again after a while for the next letter, and so on.

There are lots of variations on this, for example, you can merge the paper strings and the buffer strings, and only print text to the screen upto the point where the type writer is. (This is where substring(0, n) comes in, by frob.) Merging both buffers also has the advantage you don't actually copy letters from one buffer to the other, just advance the type writer position, and redraw the screen.

Once you have a basic system running, play with it, and reread the "extra features" pointed out by frob, they likely make much more sense then :)

Keep a list of strings that are currently displayed at the screen. These are the strings already typed.

When you need to draw the type writer area, just dump these on the screen. (It depends a bit on your gui system whether you actually need this.)

You also need an index to the string where you are "typing", that is, where the next character will be added. Since it's always at the end of the string, just knowing which string to append to, is sufficient.

The above is sort of your piece of paper in the type writer.

The second thing you need is a buffer with "text to write". A list of strings will probably suffice at first. When you want to output some text, just append it at the end of the buffer.

That way, your program can just dump output to the buffer and continue.

Now all that remains is a mechanism to slowly move letter from the output buffer to the 'paper'. The standard trick for that is using a timer. Most gui systems can give you a call when an amount of time has passed. Use that to move a letter, then reset the timer, so it fires again after a while for the next letter, and so on.

There are lots of variations on this, for example, you can merge the paper strings and the buffer strings, and only print text to the screen upto the point where the type writer is. (This is where substring(0, n) comes in, by frob.) Merging both buffers also has the advantage you don't actually copy letters from one buffer to the other, just advance the type writer position, and redraw the screen.

Once you have a basic system running, play with it, and reread the "extra features" pointed out by frob, they likely make much more sense then smile.png

Hi! Thanks for the reply could you give an example with code for that method I apologize for my incompetence, this is the first time I'm implementing a GUI.

Sorry, but no.

I am happy to review code, or try to give guidance for solving a problem, but I don't write your code.

I can understand programming GUIs sounds scary, but it won't be the last new system you'll find on your path. Instead of avoiding it, embrace it, and learn how it works. It takes time, but you'll gain lots of knowledge that is useful for the remainder of your programming activities. Resist the temptation to copy/paste solutions that you cannot program yourself. Copy/paste looks like you're making progress quickly, but without knowing how these systems work, you'll never figure out what to do if things don't work as you want or expect.

Stop focusing at the game for a while, and switch to learning about GUIs. Find out how they work, how to program them, and what they can do for you. Even if you don't need it all today, do it anyway, it will be useful in the future. Get a few tutorials about Java GUIs and work through them. Once you think you know enough, go back to your game, and consider how to marry the gui with the game.

Sorry, but no.

I am happy to review code, or try to give guidance for solving a problem, but I don't write your code.

I can understand programming GUIs sounds scary, but it won't be the last new system you'll find on your path. Instead of avoiding it, embrace it, and learn how it works. It takes time, but you'll gain lots of knowledge that is useful for the remainder of your programming activities. Resist the temptation to copy/paste solutions that you cannot program yourself. Copy/paste looks like you're making progress quickly, but without knowing how these systems work, you'll never figure out what to do if things don't work as you want or expect.

Stop focusing at the game for a while, and switch to learning about GUIs. Find out how they work, how to program them, and what they can do for you. Even if you don't need it all today, do it anyway, it will be useful in the future. Get a few tutorials about Java GUIs and work through them. Once you think you know enough, go back to your game, and consider how to marry the gui with the game.

alright sweet! Thanks for the help. Know any places/sites that may help me in learning about GUI's?

alright sweet! Thanks for the help. Know any places/sites that may help me in learning about GUI's?

You know how to look for things?

I can play the "quote previous post and add a next question" game too.

Do you think it's any helpful?

Did you ever consider what image it gives you at the reader side?

A somewhat longer answer (as I don't like your game): I don't keep link collections for every subject that may be needed by someone. I avoid Java in my spare time,. I seldomly program GUIs, and even if I would have links to tutorials, they would be tutorials for me, which would be very unsuitable for you (as my tutorials would skip any form of introduction and jump straight to lists of calls and event names which only make sense if you understand how a gui system works).

So I took your advice and learned more about GUI's and then looked int substrings and all the good stuff like that :D The problem I'm having is if I render the text it all types in one spot and lags the game. Im probably doing this all wrong but id appreciate it of you could look at what I've done and send me in the right direction. http://pastebin.com/xM0g51bV

Hmm, I wonder how that works at all, I clearly have no idea about awt smile.png

It all gets put on top of each other, as you don't change x (or y), ie each letter is printed at the exact same position.

I am sure you can query for the size of letter of a font, but it's probably quite not trivial, especially if you don't use a fixed width font, and take kerning into account.

(if you ignore that, it's much easier smile.png )

A much simpler solution is to print the entire string message.substring(0, i+1) each time. The system will then handle character spacing for you.

By varying the value i, you get (less or) more text at the screen.

Edit: Not sure if "less" would actually work here.

This topic is closed to new replies.

Advertisement