Sign in to follow this  

How to Program a dialog box with typewriter effect

This topic is 673 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

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.

Edited by BaconDevil

Share this post


Link to post
Share on other sites

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.  

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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 :)

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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).

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Edited by Alberth

Share this post


Link to post
Share on other sites

if I render the text it all types in one spot and lags the game

 
13.  Thread.sleep(millisPerChar);
 
Is this called in your main thread?  It will stop whatever thread it is called in.  If this is called in another thread other than your main thread, I'd be concerned about how you are handling thread lifetime management.
 
A more common way to do this is for your main game loop to update a clock or timer.  You might have something more like this:
 
void typeWriter(String message, long millisPerChar, ...) {
  ...
  // Record when we are starting the message, and how long it should run.
  m_startTime = Simulation.Clock.Now();
  if(millisPerChar > 0 ) {
    m_millisecondsPerChar = millisPerChar;
  } else {
    m_millisecondsPerChar = DEFAULT_MILLIS_PER_CHAR;
  }
  ...
}
 
void update()
{
  // Display up to the full length of the message, allowing for skipping
  int length = m_message.length;
  if(!SkipWasPressed) {
  length = Math.min( ((Simulation.Clock.Now()-m_startTime) / m_millisecondsPerChar), length);
  DrawString( m_message.substring(0,length), ...
...
Edited by frob
Fix broken formatting

Share this post


Link to post
Share on other sites

So I took your advice and learned more about GUI's and then looked int substrings and all the good stuff like that biggrin.png 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

If you want to use this:

g.drawString(message.substring(i,i+1), x, y);

Specifically the (i, i+1) you'll need to update the x and y like frob suggests.

 

I don't know what the architecture of the rest of it is like, but I would be inclined to redraw the string every time I add another character.

 

*clear screen*

*increment character counter*

*draw string* a'la

g.drawString(message.substring(0,current_index), x, y);

 

That might just be me though. I also don't like Java a whole lot because it requires me frequently revise my expectations, and designs. In other words my advice might have no merit.

 

edit: read the other two posts.

Frob's code example is exactly how I'd try to go about it.

Edited by coope

Share this post


Link to post
Share on other sites


That might just be me though. I also don't like Java a whole lot because it requires me frequently revise my expectations, and designs. In other words my advice might have no merit.

ya I know java isn't the best but I'm on a mac and I want a game that runs on all systems.

Share this post


Link to post
Share on other sites

 


A more common way to do this is for your main game loop to update a clock or timer.  You might have something more like this

So would I put the code in my game loop? (Sorry for being a noob)

 

Do you remember colouring as a child? Did you draw inside or outside the lines? Programming is a constant exercise in drawing outside the lines, until you learn better. Start with that.

Share this post


Link to post
Share on other sites

It is pseudocode, not specifically Java.  More or less accurate to the logic you can implement. 

 

Typically games have a simulation of some sort, with an integer value used for the clock.  This allows you to pause your game simulation, do effects like slow motion, or high speed, or whatever else you need.  Generally this is a 32-bit or 64-bit integer starting at the first moment of the game. If you choose a simulator time measured in milliseconds, 32-bits gives roughly 24 simulation days of play, 64-bits in milliseconds is about 2 million centuries of simulated time. Choose one or the other depending on how long your game's simulation is likely to cover.

 

The two lines are to get your current clock time and to subtract it from the current clock time, giving the elapsed time so you can see how far along you need to draw.

Share this post


Link to post
Share on other sites

So I was having trouble understanding your suggestions so i spent some time doing more research and trying out some new techniques. I found a nifty tutorial but it was for flash so i tried to convert the code int java. It isn't working but I feel that I am on the correct track. Please look over the code and help me find whats wrong http://pastebin.com/TyHtKaNC

(the reason for the IF statement with the done boolean is if I told writChar to remove itself it would cause a stack overflow error and that seemed to fix it).

Share this post


Link to post
Share on other sites

I would create 4 rows and have a limit for how many characters can be in each row (Empty spaces count as characters). Then I would type in a sentence within my limit of all rows combined and have code print each letter til each row is finished.

 

This is nearly instantanous idea that flew toward my head fast. Logic was minimal.

Share this post


Link to post
Share on other sites

This topic is 673 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this