Color-coding text

A place to discuss things that aren't specific to any one creator or game.
Forum rules
Ren'Py specific questions should be posted in the Ren'Py Questions and Annoucements forum, not here.
Message
Author
User avatar
papillon
Arbiter of the Internets
Posts: 4038
Joined: Tue Aug 26, 2003 4:37 am
Completed: lots; see website!
Projects: that magical diary sequel, that vampire-raising game
Organization: Hanako Games
Tumblr: hanakogames
Contact:

Color-coding text

#1 Post by papillon » Mon Jan 09, 2006 9:53 am

Someone suggested color-coding the main characters to make it easier for the brain to follow who's speaking when.

I suspect that coloring all of the text would be too hard to read - colors other than white tend not to be very clear.

So far, experiments with coloring just the name don't seem very successful to me - the color isn't that distinctive and it DOES make the name harder to see.

Any suggestions?
Attachments
colortext.png
colortext.png (34.6 KiB) Viewed 3300 times

User avatar
Grey
Veteran
Posts: 320
Joined: Thu Jan 01, 2004 8:08 am
Contact:

#2 Post by Grey » Mon Jan 09, 2006 10:58 am

I'd say a definite no for colouring the text body, but if you keep the tones fairly close to the text colour, pale pink like in the example, and similar mild shades, then it could work. I wouldn't say it makes it any harder to read.

Really you'd have to do a little trial like writing a conversation between several characters using different colours for each of their names, and see if it looks useful, or just a mess.

szarebure
Newbie
Posts: 6
Joined: Sun Oct 30, 2005 3:39 pm
Contact:

#3 Post by szarebure » Mon Jan 09, 2006 11:52 am

Pink on black is ok, but you could use much more colors on white background. But I think it's not so important. There are even guys who find it impossible to read their OWN sources without editor showing it in different colors :).

User avatar
monele
Lemma-Class Veteran
Posts: 4101
Joined: Sat Oct 08, 2005 7:57 am
Location: France
Contact:

#4 Post by monele » Mon Jan 09, 2006 2:39 pm

Mm... I tried something similar and I guess it's ok as long as pastel colors are used... but you'll quickly run out of colors ^^;. Maybe you could make some random demo of this system and people would vote ? ô_o

Or instead of using a text label, have some small icon/picture of the character talking ?.... Oh wait, you could slightly tint the frame instead of the text ! But I think (from memory) that your frame is rather complex and probably needs its own colors eh ? ^^;

User avatar
papillon
Arbiter of the Internets
Posts: 4038
Joined: Tue Aug 26, 2003 4:37 am
Completed: lots; see website!
Projects: that magical diary sequel, that vampire-raising game
Organization: Hanako Games
Tumblr: hanakogames
Contact:

#5 Post by papillon » Mon Jan 09, 2006 2:52 pm

Yeah, frame tinting (or frame-border-tinting) might work in some cases but wouldn't fit the existing design here.

Pastels are readable but not a strong enough visual cue to help someone who doesn't find the name listing helpful enough on its own.

I suppose the careless reader is just going to have to suffer. Unless I could afford voice acting, which is unlikely.

User avatar
Quin
Regular
Posts: 117
Joined: Sun Nov 20, 2005 4:29 am
Location: Maine
Contact:

#6 Post by Quin » Mon Jan 09, 2006 3:54 pm

Since no one's made a mock-up with colored text, I decided to try it. (Click to enlarge.)

Image

I used HSL colors with a luminosity of 160 (on a 0-240 scale) for the names, and the same color with the luminosity changed to 220 for the text.

HSL values: Z = 20, 204, * ; Y = 80, 216, * ; X = 180, 200, * ; W = 232, 204, * (where * is 160 for names or 220 for text)

My only complaint here is that Xander's name seems a bit too dark.

User avatar
papillon
Arbiter of the Internets
Posts: 4038
Joined: Tue Aug 26, 2003 4:37 am
Completed: lots; see website!
Projects: that magical diary sequel, that vampire-raising game
Organization: Hanako Games
Tumblr: hanakogames
Contact:

#7 Post by papillon » Mon Jan 09, 2006 4:46 pm

Now try that on a non-black background. :) It looks fine there with the strong contrast, but probably not as fine on a semi-transparent overlay.

ISTR the Quest for Glory games did little segments in different very-bright-color text when there were tons of girls in the room to distinguish between, but you wouldn't have wanted to read it long term.

edit: actually, using the values you used and a reasonably chunky font, it's not that bad.
Attachments
colortext2.png
colortext2.png (28.79 KiB) Viewed 3261 times

User avatar
mikey
Lemma-Class Veteran
Posts: 3245
Joined: Sat Jan 10, 2004 6:03 am
itch: atpprojects
Contact:

#8 Post by mikey » Mon Jan 09, 2006 5:10 pm

Hmmm, actually, I never found color coding helpful.

The thing is, it might work fine when only two characters are involved (in the whole game - and one of them is the protagonist), but other than that, it will be a mess, IMO. Plus, it just disintegrates all atmosphere for most of the time.

Although I will say I like that example above - the name appears a bit darker, the text lighter - but I'd say it would be good if all names were the same color, so this would make it more of an aesthetical thing.

I think if the dialogue gets confusing, perhaps a different approach can be used - turning the "inactive" characters on the screen into grayscales, maybe? :?

User avatar
PyTom
Ren'Py Creator
Posts: 15431
Joined: Mon Feb 02, 2004 10:58 am
Completed: Moonlight Walks
Projects: Ren'Py
IRC Nick: renpytom
Github: renpytom
itch: renpytom
Location: Kings Park, NY
Contact:

#9 Post by PyTom » Mon Jan 09, 2006 7:27 pm

I'm a big fan of using color to convey information. One of my co-workers once compared the syntax-highlighting in my text-editor to a Christmas tree. But I find it really does help improve my productivity, as it lets me skip over irrelevant details, and focus on what matters.

I think the same is true of colored names in VNs. Assuming I've met the characters and know their names, then I don't need to actually read their name again. When I have internalized the association with a character, than I don't read the colored text. Instead I simply see the color, and skip over the name... and I still know who's speaking.

Now, this does mean the color-character associations need to be disciplined, and that one needs to keep the colors distinct. But done correctly, this can really accelerate the playing of the game.

I'm not sure about color-coding the body text. One can skip reading the character name since there are only a few choices during the entire game. But the body text has to be read anyway, and the character normally needs to be established before reading it... so I don't think there's much advantage to color-coding the body text.

I personally don't think that the reason the name is hard to read in the first example is not because it is in color, but because it is a name. If I understand this correctly, the human brain is set up to recognize common words. By using a name, which isn't a common word, it gets sent up to the part of the brain where you have to figure out what those letters mean, and that's what slows people down.

If anything, I would expect coloring the name to make things easier to read in the long run, as people don't need to read names anymore. It's not an effect that can be demonstrated with a single screen of text, or even a few screens of text, but it's something that will manifest itself over the length of a visual novel.

The key is to not only consider what makes a single screen easier to read, but what makes the VN as a whole easier to read. Coloring character names does the latter, even if it doesn't do the former.

(Also, sans-serif fonts are generally easier to read on the screen then serif fonts. Serif fonts tend to have lots of little thin parts that don't map properly onto the pixel grid, leading to weird aliasing things. Try zooming in on that image, and see how the stroke width goes all over the place, in a way that it doesn't on the sans-serif example.)
Supporting creators since 2004
(When was the last time you backed up your game?)
"Do good work." - Virgil Ivan "Gus" Grissom
"Silly and fun things are important." - Elon Musk
Software > Drama • https://www.patreon.com/renpytom

User avatar
rioka
Royal Manga Tutor
Posts: 1255
Joined: Fri Jul 16, 2004 12:21 pm
Completed: Amgine Park, Garden Society: Kykuit, Metropolitan Blues (art)
Location: somewhere in NY
Contact:

#10 Post by rioka » Mon Jan 09, 2006 10:27 pm

Colored text sounds good but there may be a problem when there's too many characters. Like someone said - you'll run out of assigned colors or colors may be too similar that players may become confused.

User avatar
PyTom
Ren'Py Creator
Posts: 15431
Joined: Mon Feb 02, 2004 10:58 am
Completed: Moonlight Walks
Projects: Ren'Py
IRC Nick: renpytom
Github: renpytom
itch: renpytom
Location: Kings Park, NY
Contact:

#11 Post by PyTom » Mon Jan 09, 2006 11:26 pm

Running out of colors seems to be more of a theoretical problem then an actual one. Minor characters can share a single color (or non-color, like white), while the major ones each get their own color. Trivially there's ROYGBV, and there's also cyan in there, so that easily brings us to 7 colors. Adding in light versions of some of the colors, and other colors like gray and brown, can bring us over 12, which is pretty much the largest cast size a game will see.

Harder is coming up with a meaningful assignment of character to color, but even non-meaningful assignments are better than just letting the character names sit in boring uninformative white text.
Supporting creators since 2004
(When was the last time you backed up your game?)
"Do good work." - Virgil Ivan "Gus" Grissom
"Silly and fun things are important." - Elon Musk
Software > Drama • https://www.patreon.com/renpytom

User avatar
monele
Lemma-Class Veteran
Posts: 4101
Joined: Sat Oct 08, 2005 7:57 am
Location: France
Contact:

#12 Post by monele » Tue Jan 10, 2006 3:04 am

On the subject of not having to read names after a while, I have at least one example that proves it true : Quartett. It uses comics bubbles. Some of them start near a character but some of them are just character-less and given the context you can still guess who is saying it.
The counter example, to me, would be a few of these art-less demos. I found it very hard to focus and clearly picture who was talking and what was happening. It seems the brain needs at least to see the name and graphics once...

User avatar
Quin
Regular
Posts: 117
Joined: Sun Nov 20, 2005 4:29 am
Location: Maine
Contact:

#13 Post by Quin » Tue Jan 10, 2006 5:11 am

PyTom wrote:Now, this does mean the color-character associations need to be disciplined, and that one needs to keep the colors distinct. But done correctly, this can really accelerate the playing of the game.
That's what I'm thinking... it'll shave a few milliseconds off the time it takes for the player's mind to process the screen. But just as important, it's also a subconscious cue to help reinforce which character is speaking.

I used the word "cue" deliberately here, because that's all it should be. A player shouldn't have to rely on text color as the sole way to tell who's speaking. Characters can have their own ways of speaking (accents/dialects, balance of big words vs. small words, emotions), and in many cases the character's picture will be on the screen. And in the worst case, the player can always go back and read the speaker's name in the text on the screen.

In a way, colored text is also helping to distinguish between characters in the manner that different voice actors help to distinguish between characters in anime. Since there's not a lot of voice acting being used in non-commercial VNs yet, colored text could be one more tool designers have to simulate different voices. (Since I've opened the box, let me be the first to dissuade designers from considering using different fonts to simulate different voices. That would be an aesthetic nightmare...)
PyTom wrote:I'm not sure about color-coding the body text. One can skip reading the character name since there are only a few choices during the entire game. But the body text has to be read anyway, and the character normally needs to be established before reading it... so I don't think there's much advantage to color-coding the body text.
But are there any disadvantages? One is that legibility can be hurt, especially if care isn't taken with the color and font choices. As Papillon noticed/demonstrated, it does require a "chunky" font to help keep colored text legible. It took a few tries for me to find a font that worked even for my illustration above. (And I wholly agree with PyTom on serif vs. sans serif. Serif fonts work well on the printed page, but not so well on the screen due to resolution, anti-aliasing, etc.)
PyTom wrote:I personally don't think that the reason the name is hard to read in the first example is not because it is in color, but because it is a name. If I understand this correctly, the human brain is set up to recognize common words. By using a name, which isn't a common word, it gets sent up to the part of the brain where you have to figure out what those letters mean, and that's what slows people down.
Also to blame in that line of thought is that I picked less common names; it's probably easier to recognize a Jane or a Michael than a Wrenna or a Xander.

But I finally figured out why I made that comment about Xander's name color being hard to read. It's because when I loaded that image in a window in my browser, it had a white border all the way around it and lots of white on two sides. The visual difference between white and black was overwhelming the smaller difference between black and purple. This might be less true in an actual visual novel, where there won't be quite as much stark brightness on the screen.
PyTom wrote:Harder is coming up with a meaningful assignment of character to color, but even non-meaningful assignments are better than just letting the character names sit in boring uninformative white text.
Well, that's an easy one... just match it to the hair color. :D

User avatar
papillon
Arbiter of the Internets
Posts: 4038
Joined: Tue Aug 26, 2003 4:37 am
Completed: lots; see website!
Projects: that magical diary sequel, that vampire-raising game
Organization: Hanako Games
Tumblr: hanakogames
Contact:

#14 Post by papillon » Tue Jan 10, 2006 6:14 am

Yeah, hair color is my guideline, or at least a shade related to it if the general hair color wouldn't work. :) (the PC having very dark hair, but it highlights purple/lavender, so.)

I suspect there are rare occasions where different fonts could be used to good effect. But probably not in anything resembling a proper VN... Something that was primarily non-textual with only a few text passages might want to give you a stronger clue.

Picking a good font is a pain in general, balancing the desire to be 'not bland' vs the need to be readable! Serif or not, I think that font works well in clear white... and finding a Sans font that isn't totally dull is tricky...

Here's where I've gotten to at this stage of experimenting.
Attachments
colortext3.png
colortext3.png (53.24 KiB) Viewed 3218 times

User avatar
mikey
Lemma-Class Veteran
Posts: 3245
Joined: Sat Jan 10, 2004 6:03 am
itch: atpprojects
Contact:

#15 Post by mikey » Tue Jan 10, 2006 11:41 am

PyTom's suggestion with colored names only is really logical and for people who are color-aware, it will be an excellent tool - the thing about all other text being all the same (style, color, size) all the time is also something I identify with, it's the best compromise before it starts to look clownish. A notable exception may be some inner monologues or special thoughts, like was used in MetroBlues.
Quin wrote:
PyTom wrote:Harder is coming up with a meaningful assignment of character to color, but even non-meaningful assignments are better than just letting the character names sit in boring uninformative white text.
Well, that's an easy one... just match it to the hair color. :D
That's ingenious! :P :P 8) Though it may be confusing if you have a b/w game.

There however are a number of other ways of making it more clear who is speaking, avoiding character confusion:
- use character names that have different beginning letters and length
- use mini-images to show who's speaking (the thumbnail-like thing, you know what I mean)
- write it so that it can be understood - for instance from time to time confirm to the player who is speaking, adding "Miwako said", as a next line if your conversations are long.
monele wrote:The counter example, to me, would be a few of these art-less demos. I found it very hard to focus and clearly picture who was talking and what was happening. It seems the brain needs at least to see the name and graphics once...
If it's confusing, then it's not necessarily a bad thing. It only shows that when the pictures will be added, the visual novel will be complete. On the contrary, you can read Narcissu without the graphics and music and it still makes a good figure - but I actually think as fas as a visual novel is concerned, that's not really what one should be going for. This may also apply to Gakuen Redux, which is also too standalone, even though I made every effort to severely limit the mood/surroundings and character descriptions.

Some of the Alltogether releases if you played them, have really confusing dialogue, because there are no indications (at all) of who is speaking. Again, this would be perfectly okay if there were characters appearing with each line, or something visual, but sadly, that isn't the case.

Anyway, I wanted to just point out, that solving the "who's speaking" issue isn't necessarily going to be only by styling text.

Post Reply

Who is online

Users browsing this forum: No registered users