The TMI Guide to Chat Bubble Coloring


Adam7

 

Posted

{{ Thanks to those who have posted previous information on this }}

So, there is a bunch of posts out there about how to do chat effects with your text and such. I got kind of caught up with the idea recently, and decided to fool around and see what exactly could and couldn't be done, and how everything worked. So, the following is the fruit of my labors, given to you, free of charge, in all of its wonderous glory.

----- The Basics -----

1) What you can do.
2) What you can't do.
3) The simple codes.


{ 1 } What you CAN do. { 1 }

You can change the color of you text box. That is the box that pops up over your head when you speak in a chat channel. If someone doesn't have the chat boxes turned on, they will not see your nifty recoloring, so do keep that in mind if you only play with a few specific people and they keep their screen clean, heh. The colors you can change are your text color (hereby referred to as just color), your border color (hereby referred to as border), and your background color (hereby referred to as bgcolor). This means if you want a happy-santa text box setup with a white background, red text, and green border, you can do it. Cool huh? You can also get more specific with this, but we'll get to that later. For now, this is what you can do: customize the colors of your chat bubbles, and change the size of your chat bubble.

{ 2 } What you CAN NOT do. { 2 }

You can not do any of the following with chat bubbles:

--- Post a clickable URL within your bubble.
--- Change the text font within your bubble.
--- Change the text orientation (italic, bold, underline, etc.) within your bubble.
--- Make your text blink or animate within your text bubble.

Unfortunately, though some of these things would be actually useful in some sense (italic and bold being the two I would like to be able to do), you can't do it. But you can do some very fun things, and we'll get to that soon enough.

{ 3 } The Codes { 3 }

So, there's a set of very simple codes that you have to know how to use, in order to make the changes that I stated in part 1. The codes are as follows:

Text Color: <color #ff0000> or <color red>
Border Color: <border #00ff00> or <border green>
Background Color: <bgcolor #0000ff> or <bgcolor blue>

Change Size: <scale 1.00>

So, now that we have the codes, how do we use them? Well, there are 2 primary ways of using these. The first way is using /bind, the other is to type them in manually when you want to use a color or size effect in chat.

To use a color or size effect in chat, you would first need to decide what you want to do. Do you want to just change the text color? Do you want to make it creepy looking? Do you want to show some kind of special excitement about something? Or do you want to make the colors match your characters outfit? (I know a lot of you go for the last one, if so, you'll want to use /bind, but we'll get to that).

Lets say that you just want to emphasize something, you levelled and you want EVERYONE to notice that you're announcing it. So you decide you want to make a rediculously gaudy chat bubble that everyone will see above you. You type something like this:

/local <scale 1.50><color #00ff00><border #ffff00><bgcolor #9f00ff>I just levelled, kneel before me!!!

This would create a text bubble stating "I just levelled, kneel before me!!!"
The bubble would have a yellow border, purple background, and bright green text, and be 50% bigger than normal. Gaudy huh?
The other way to do the exact same thing would be like this:

/local <scale 1.50><color green><border yellow><bgcolor purple>I just levelled, kneel before me!!!

Same general effect, but you'll notice, if you were to actually type this in, the colors aren't exactly the same... the reason for that is the preset colors, like red, yellow, green, etc... are set to a specific color code, and may not be the same code that you would type in on your own. YOUR yellow might be #ffff00, whereas the preset yellow might be #c6c636. Don't worry about the specifics of that right now, I will go into detail about hex color codes later on as well, I just wanted you to understand why the two may be different.

The scaling (text size) effect ranges from 0.00 (non-existant size, heh) to 1.50. If you put a value higher than 1.50 in the scale code, it defaults it to 1.50, so don't bother trying to make it 12 inches high, it doesn't work. The default, base size is 1.00, or 100% of the normal size. By that setup, 0.25 is 25% of normal size (very small) and 1.50 is 150% of normal size, or somewhat large. You can take it from there.

Now, to do a more permanent setup for coloring your chat bubbles, you will have to use a /bind. Don't know what the hell that is? Well, sorry, but I'm not going to write a guide on binding here, there's like 20 of those already. I'm going to operate under the idea that you know what a bind is, and how they work, so here we go.

You want to make your chat bubbles always your team color? Want to make your chat bubbles match your costume? Want to make a christmas themed chat bubble for a month? Want to have a cool water-themed chat bubble? Well, it all starts with making a semi-permanent change to one of your keybinds.

Most people use the enter key to start chatting. This will set an invisible "string" (beginchat) that defaults to whatever chat channel you have selected below the chat box (the little tiny letters below where you type in). If you want your chat bubbles to default to a different set of colors than the black and white that it is normally, then you have to /bind it that way. Here's how it works:

/bind enter beginchat <color #000000><border #000000><bgcolor #ffffff>

This means you are binding the enter key, to the beginchat string (which is what it was already, so no change there) and then you are adding the text color, border color, and background color codes. Now every time that you hit ENTER, you will see this in your text box before you even start typing:

<color #000000><border #000000><bgcolor #ffffff>

This is because, like when you just wanted to try the color change out and you typed the codes in manually, every time you want a new colored bubble, those codes have to be entered in, EVERY TIME. So unless you want to enter them in yourself every time, you need to use this bind way of doing it. A couple of things to remember here:

1) make sure you leave a space between beginchat and the color codes, otherwise the input won't recognize the string, and it won't work.
2) make sure you put a space between the code type and the color or color code Ex.: <color red> you need the space between COLOR and RED.

So, that's the simple and easy setup for binding your enter key to produce a chat bubble of whatever colors you want. If you don't want to get into the more advanced stuff here, then just use what you've read, play around with some colors, see what you like and go with it.

So what do those codes mean then? They mean you can change the color of the text, the color of the background, and the color of the border. Pretty simple right? If you want to know some more advanced stuff, keep reading...

----- The not-so-Basics -----

4) Transparency
5) What the hex codes mean
6) Hex Color Primaries List


{ 4 } Transparency { 4 }

So, solid colors are cool and all, I like my Blue border/text and white background bubbles on my healer, it looks good, but it just doesn't look how I want it to. There's just something missing, and it doesn't look "blended in" well. It sticks out too much, I want it to be a little smoother...

Well, then here's how: Transparency.

Those of you who know about hexidecimal color coding, from html work, or some other computer-related field, know that all hexidecimal color codes are six hexidecimal numbers. Well, in CoH, they did us a favor and added another set, 2 more spaces to fill in. HUH, you say...

Your basic color code setup is like this:

<color #000000><border #000000><bgcolor #ffffff>

Well, what if you want your background to be transparent, you just want the black text and border to pop up with nothing "behind" it. Then you would use this set of codes:

<color #000000><border #000000><bgcolor #ffffff00>

OOOOOooooo.... Notice there's a couple of 0's after all those f's? That is your transparency layer, it uses the same double 0-F code structure, but instead of adding color, it adds opacity. Where can you go with this from here? A lot of places.

The transparency layer goes from 00 - FF, and every spot inbetween is welcome ground. The middle is of course around 88, so that makes for a nice semi-transparent version of whatever color you have before it. #88888888 would be a semi-transparent medium grey. #00008888 would be a semi-transparent medium dark blue. Fairly simple really, but here's the fun part:

You can do this with the background of course, but also with the text and the border.

This gets tricky though, because you have to think of the text and the border as being "painted on" after the background is placed. You CAN NOT have a black background with "invisible" letters that show through the black like it was etched in windowing... if you make the text completely transparent on top of a black background, all you get is a big black box, heh.

So what is the use for this then? Well, if you want a "ghostly" chat bubble, then you could do something like this:

<color #9f9fff3f><border #9f9fff3f><bgcolor #3f3f3f9f>

This would give you a very transparent grey-blue text and border, with a semi-transparent grey background. Since the background is transparent, and the text and border are also, you will be able to partially "see through" the text, border, and background, though more through the background because there is 2 layers of color where the text and border are. (If you don't understand how this works, don't really worry about it, this gets into layering alpha transparencies and a lot of stuff that only graphic design students should ever need to know)

So in a nutshell... there's transparency.

{ 5 } What the hex codes mean { 5 }

This section is really for people who have had no experience with web design or hexidecimal color codes in some way. If you have used them before, go ahead and skip this, it's nothing new to anyone who's ever learned HTML or the like.

Hexidecimal means "of 16" and this is important to understand. Our counting system, from the root of history is based on the number ten. Why? Because we have 10 fingers, and 10 toes, and that's how math began for humans. I'm serious, so stop laughing, heh. Anyway though, our counting systems are all decimal systems, they are divisions, subdivisions, and multipliers of 10's. A hexidecimal counting system, like what is used for web color codes, and a few other computer-related things, is based on a counting system of "16s." The obvious question here is "why?" Well, it's actually a lot more simple than you might think. Know what binary is? It's the basis for all computer technology. Everything comes down to a choice: a 1 or a 0, a yes or a no, a positive or a negative. Binary means a system of "2" or in this case 1 and 0 being the choices. With 2 choices, all expanding choices have to be multiples of 2, and to simplify this for those that create the programs, schematics, and the computers from the ground up, the exponents of 2 are what is mostly used. This means that a system based on "10s" is sloppy for a computer, because it is not a direct exponent of 2. 16 is however... 2 x 2 x 2 x 2 = 16 (2 to the 4th power).

So, skipping passed the history lesson, with a base system of 16 (hexidecimal), how the hell do you count to 16 with only one digit?? 16 is two digits, in case you hadn't notices (a 1 and a 6). Well, you go alphanumeric (numbers and letters). 0, 1, 2, 3, 4, 5, 6, 8, 9, A, B, C, D, E, F...
Yeah, I left the 7 out just to wake you up... so pfft. But serioulsy, zero through the letter "f" ( 0 - F ).

This is your hexidecimal "1 to 10" so to speak. Now that that is out of the way, how do we relate that to the color codes? Web color is based on a "millions of colors" system, 16 x 16 x 16 x 16 x 16 x 16 colors to be exact... that's 16777216 for those of you pulling out calculators. With all those colors, it's kind of hard to name them all... I bet you can't tell me what color #8347208 is, huh? So they simplified it, and put it into a coded system for ease of use.

The system is like this:

The first two characters are the red set.
The second two characters are the green set.
The third two characters are the blue set.
The way to think of the two characters together is like 10s and 1s... if you have a set of 10s set to 5, and a set of 1s set to 3, you have "53." Get it? Well, if you have a set of hex that is set to 9 and to C, then you have "9C." The maximum hex set is FF, the minimum is 00, so "9C" is a little above the middle. The dead middle is 88 for all intensive purposes.

Red, Green, and Blue, RGB is what all computer monitors are based on for color, though they can emulate CMYK and other color palettes as well. So here's an example of how this works:

To make a hex coded "full red": #FF0000
That's maximum red, no green, no blue.

To make a hex coded "full blue": #0000FF
That's no red, no green, maximum blue

That's simple, but what about really specific colors... like a greyish cyan (a murky poolwater color). It would be like this:

Greyish Cyan: #5fa6b6
That's a touch of red (to flatten the color a little), an above medium green, and a slightly higher blue.

From here I'm sure you can play around and figure out the colors you like and dislike, but I've included a helpful "quick reference" hex color guide in the next section.

{ 6 } Hex Color Primary List { 6 }

Dark Red: #6f0000
Med. Red: #af0000
Full Red: #ff0000 (bright red)

Dark Green: #006f00
Med. Green: #00af00
Full Green: #00ff00 (bright green)

Dark Blue: #00006f
Med. Blue: #0000af
Full Blue: #0000ff (bright blue)

Dark Cyan: #006f6f
Med. Cyan: #00afaf
Full Cyan: #00ffff ("true" cyan)

Dark Magenta: #6f006f
Med. Magenta: #af00af
Full Magenta: #ff00ff ("true" magenta)

Dark Yellow: #6f6f00
Med. Yellow: #afaf00
Full Yellow: #ffff00 ("true" yellow)

Red-Orange: #ff6f00
Basic Orange: #ff9f00
Yellow-Orange: #ffcf00
Yellow-Green: #cfff00
Green-Blue: #00ff9f
Basic Violet: #ff009f
Basic Purple: #9f00ff

Dark Brown: #7f5f00
Med. Brown: #9f7f3f
Full Brown: #cfaf6f (Light Brown)
Beige (ish): #ffcf9f

Hope those help you pick out some colors you want, you can find much more indepth (and graphical no less) color coding charts all over the web, just search for "color code chart" in google or whatever you use, there's hundreds of them out there.

The preset colors (red, yellow, green, etc) you an also use of course, if you don't want to bother with all of the hex code nonsense, but since I don't use the preset colors, i don't know all of them that are available. If they are the same as web browsers then they should be all of your basic rainbow (red, blue, green, etc.) as well as slight variations like: lightblue, lightgreen, darkred, darkyellow, and so on. Feel free to try those out too if you want.

Thanks for taking the time to read, and once again I'd like to thank all of those people who took the time to post their mini-guides, quick references, and /bind ideas on the boards over the months so that all this information was easier to put together.

Have fun, and be colorful!


 

Posted

Umm... If you can't change the size, then what is the <scale .75> doing in the stock F9 command (Level 5 Controller / Looking for Team)? It's a method you can use to alter the size of your chat bubbles, is it not?


 

Posted

edited... and thanks, I wrote that at like 5am this morning after no sleep in about 2 days... I kinda was running on empty, but I fixed it and put the scaling in the basic setup as well as the range of it.


 

Posted

Thanks a lot for posting your guide. I didn't know about transparency or scaling... the time you took to write all this up is greatly appreciated.


 

Posted

Now if only more of the things I do on no sleep in the wee hours of the morning turned out so well.... muhahahahahaha!!!!


 

Posted

Here's a nice HTML Hex code I found that could prove useful. It has the various colors represented as well as their corresponding hex codes.

Hex colors


 

Posted

You forgot one important and useful chat-bubble attribute
duration

adding a <duration 1> or any other number you can change how long the bubble with stay visible
very good for Roleplay or catchphrase bubbles, you don't want them up long, that's just annoying during combat, but a second is ok.


 

Posted

This is awesome! Thanks so much for putting it all here.


 

Posted

[ QUOTE ]
/bind enter beginchat <color #000000><border #000000><bgcolor #ffffff>


[/ QUOTE ]

Don't you need quotation marks in there? When I changed my chat bubble collars, I did so in the format of:

/bind enter "beginchat <color #000000> <bgcolor #cccccc> <border #ffffff>"

Course, I'm certainly no bind expert, so maybe they're not really needed.

Thanks for putting this post together!


I'm Tealeaf, and I approve of this message.


See [URL="http://boards.cityofheroes.com/showthread.php?p=2134817#post2134817"]Useful Tagging for the good of the Forum[/URL], my guide to tags.

 

Posted

No, you don't need the quotation marks when doing a beginchat bind... I'm actually working on figuring out when you do and don't need the quotation marks for all of the different bind types... but that's for another post... hehe..


 

Posted

D'oh! I could have saved myself a couple of keystrokes! It seems odd to me that it works either way. Interesting coding.

Thanks for the answer.


I'm Tealeaf, and I approve of this message.


See [URL="http://boards.cityofheroes.com/showthread.php?p=2134817#post2134817"]Useful Tagging for the good of the Forum[/URL], my guide to tags.

 

Posted

Excellent guide! I've been using this sort of bind for my main for some time now, and I'm going to have to break down and colorize the text on some of my alts, too. I'm eager to play with the transparency, too, which is what sent me digging deep into the FAQ section to begin with.

Are you sure about the scale only displaying up to 1.5 times larger? I've read in the demo threads that it will take a real number up to 4, but haven't experimented with it much. Maybe I'll tinker with a demo, grab a screenie of some text at different sizes, and see just what's going on past 1.5.

Thanks again for the guide!


 

Posted

size may be dependent on something "else" but I know that on two of my characters, when I was using local, it didn't get any bigger after I went over 1.5...


 

Posted

BTW: A majority of "scale" items have a range of 0.5-1.5, 50% or 1/2 to 150% or 1 1/2

I believe the CoH text scaling works the same way, it will accept smaller or bigger numbers, but it won't change the size any further than the min/max.


 

Posted

Another cool you can do with color. Your hero ID accepts the color codes too. I read a persons Info, and it came up pink, matching her chat bubbles. I'm not sure what the format is, but I'm sure it's easy.

Here is another cool site for color codes. Very easy to use.
http://www.visibone.com/colorlab/big.html


 

Posted

WOW...this info is so great!

Thanks for taking the time to put it all down. I've been wondering how it all works for some time and feel so enlightened now. I can't wait to put all this new knowledge to the test...hehe

Good Work *cheers*


 

Posted

thanks a lot - this rocks


 

Posted

[ QUOTE ]
BTW: A majority of "scale" items have a range of 0.5-1.5, 50% or 1/2 to 150% or 1 1/2

I believe the CoH text scaling works the same way, it will accept smaller or bigger numbers, but it won't change the size any further than the min/max.

[/ QUOTE ]

I just fiddled around with an old demo and found out you're right--the .25 and .5 scale text were the same size, and the 2.5 text was no larger than the 1.5.

Too bad--I had hoped to have some really large text in some of my binds.


 

Posted

this thread was rediculously well done, easy to understand, and very helpfull. Thank You!
/e clap


 

Posted

I was recently asked a question on whether a macro could be created to act as a countdown timer. Specifically, a scrapper wanted a countdown timer to let him know when unstoppable was about to wear off, so he could take the proper precautions before he was left in the lurch until it became ready again.

I didn't know of any macro, but then I thought of the chat bubble duration. I figured one could make a chat bubble, which was launched as part of a keybind for the unstoppable power, that said something like "US ACTIVE". He said US was active for 2 minutes, and so if one set the duration to 110 seconds, when the bubble dissappeared, one would know to be ready to run (or something).

I ran into a major problem with this -- the bubble duration appears to have a max duration of 20 seconds, no matter the setting. BIG bummer, since I thought I was being really clever....

Does anyone have any hard facts on this, or maybe a way to string a bunch of chat bubbles that fired one after the other, each lasting for 20 seconds?


 

Posted

Great info, but I have a question: can you do all that with the / key? since the forward slash also opens up a chatstring and prints "/" in the string right away, I was wondering if you could do the same thing. Mind you I haven't tried it yet, and it could be that simply adding / after the color edits would do the trick, but I though't I'd ask anyway.

Also, to the other ppl who posted links to web color palettes, I have a link to the ultimate hex color palette. It uses dials to set exactly which color you want, and even gives you a slew of closely related colors when you press go - along with their hex codes, of course.

Enjoy!


 

Posted

yes, if you want to just type in a color code or whatnot for a single bubble, you can do it... ex.: (type) /say <color #9f0000>Blah blah blah ---- you get Blah blah blah in red.

using keybinds for it is just a way of making a cool "hero color coded" text bubble for yourself, or really standing out when you are doing something local or whatever. Personally I like having chat bubbles that match my char's primary colors... it's just cool... but then, I enjoyed FFx2, so... I may just be deranged.


 

Posted

Have a lillte color picker HERE

If you need help getting the HEX number for the transparency Here


 

Posted

Awesome post!! This is a great thread.....5 stars and a big THANK YOU!!


 

Posted

Yeah, great guide, but... but do u know, guys, how 'unbind' a key? :P