ID:1815777
 
(See the best response by Ter13.)
Alright so I'm working on dialogue text for NPCs and what not, and I was hoping to set up the 'typing effect' as seen in numerous games like The Legend of Zelda: A Link to The Past for example.

I've done my research, and I got the text typing out no problem. But instead of filling the full bounds of the maptext before pushing any up, it just keeps pushing every new line up. It's probably because of how native maptext works, but it completely ruins the effect in the place I want to use it in.

So is there any way to fix this? I'm thinking there must be, but I don't want to be wrong and waste hours hunting.

I'd also like to know if this would be a really bad idea to use in a multi-player game given that I know it could potentially be a bit hard on the CPU if several players are doing it at once. Although I doubt that would happen much.

If the code I'm using is needed, here it is...

NPCMessage(msg)
src.client.screen += npcchatgui
src.client.screen += src.npcchat
src.allowmove = 0
for(var/T=2 to length(msg) step 2)
src.npcchat.maptext = copytext(msg,1,T+1)
sleep(1)
src.npcchat.maptext = "[msg]"
while(src.alertcheck == null)
sleep(1)
if(src.alertcheck == "Okay")
src.allowmove = 1
src.alertcheck = null
src.client.screen -= npcchatgui
src.client.screen -= src.npcchat
return "Okay"


And if a better example than just a games name is needed for what I am trying to do, here is a video: https://youtu.be/YSGjvBxYf_s?t=20s

Check out licecap. Could you show us a gif what your code is doing as well? I think I've got a solution for you, but until I see what's going on, I don't want to say anything lest this thread get longer than it needs to be.
Well, never knew a good way to record gifs before so that's an added bonus. Here it is.

http://puu.sh/gLNs1.gif

I've tried fiddling around with <font valign=top> as well. Does about the same with or without it. The gif is without.
Honestly, I'd think twice about whether you want this effect. IMO it's kind of annoying even when it's done right. And by done right, I mean:

1) Words that would wrap when full will do so on the first letter, so the word doesn't jump. (Use transparent text to achieve this.)
2) The player has an option to prematurely stop the typing and display the whole text.
3) Bonus: they have an option to turn off the typing.
Word wrapping is a very good point I hadn't considered. I've been getting a bit iffy about using it in multi-player since I posted, but I figured in some single-player projects it would be reasonably easy to change text flow speed to faster. An option to just speed it up to fully typed instantly is important too, essentially turning typing off on a per message basis.

Word wrapping on top of everything else may make it more trouble than its benefit is worth though.
You need to set valign='top'. Not valign=top. Though in my experience, valign is tempermental.
Tempermental? That sounds concerning. Never knew it needed to be 'top', but it works the same either way, and doesn't fix this particular problem. I'm not too worried about it now though, so it's okay. It's pretty much just a is this even possible because of curiosity sort of thing now.

Also thanks for pointing out licecap. That's really useful.
Best response
Ah, the reason it's not playing nice is because you are putting valign on the wrong element. Vertical alignment only applies to elements inside of the element that you are applying the tag to.

client
var
skip_message = 0
type_display = 1 //set to zero to make text appear instantly
verb
SkipMessage()
set hidden = 1
skip_message = 1

NPCMessage(msg)
src.client.screen += npcchatgui
src.client.screen += src.npcchat
src.allowmove = 0
var/len = length(msg)
var/pos = 0
var/char = ""
client.skip_message = !client.type_display
while(!client.skip_message&&pos<len)
char = text2ascii(msg,++pos)
if(char==60) //<
pos = findtext(msg,">")
if(!pos)
pos = len
else
npcchat.maptext = "<DIV valign='top'><SPAN>[copytext(msg,1,pos+1)]</SPAN></DIV>"
sleep(1)
src.npcchat.maptext = "<DIV valign='top'><SPAN>[msg]</SPAN></DIV>"
sleep(1)
client.alertcheck = null
while(client.alertcheck == null)
sleep(1)
if(src.alertcheck == "Okay")
src.allowmove = 1
src.alertcheck = null
src.client.screen -= npcchatgui
src.client.screen -= src.npcchat
return "Okay"
As an addendum, this is the kind of thing I'd do on the client-side using a browser, rather than using maptext.
Works flawlessly. Ah, I'll keep that in mind. Thanks.
On further review I think I'm wrong about invisible text as a solution to the wrapping issue. Maptext breaks up text into "blurb" pieces and line breaks would be possible between them. I might want to modify that behavior at some point.
On further review I think I'm wrong about invisible text as a solution to the wrapping issue. Maptext breaks up text into "blurb" pieces and line breaks would be possible between them. I might want to modify that behavior at some point.

Yeah, unfortunately to apply the style mid-word, you'd have to break the word into two spans with different styling, which would cause a linefeed between the spans. This is more or less why I'd use a client-side browser to do all of this via JS, because you can feed the text into a hidden DIV word by word and use the DOM to get the width of the word and manually inject linefeeds when necessary.
I've changed this (the wrapping behavior) in DS for the next release and I'll look into doing it for the webclient as well.