Forums » Impact Engine » Font Colors

Would it be possible in a future release to add support for different font colors for use in RPG type games where one would one to change the color of text that was somewhat important - like a quest item or town name - to make sure the user did not just glance over it?

Fonts in Impact are just bitmaps with all the (ASCII) glyphs in them. You can change their color in an image editor and just use these different font images in your game.

var fontGreen = new ig.Font( 'media/font-green.png' );
var fontRed = new ig.Font( 'media/font-red.png' );

fontGreen.draw( 'this is the green font', x, y );
…

You can also directly use the Canvas API's .fillText method instead of bitmap fonts, though last time I checked, it wasn't supported by all browsers.

The Canvas Text API has pretty wide support these days, even iOS Safari:
http://caniuse.com/#feat=canvas-text

And in any case, I think it's safe to say most HTML5 games are targeting modern browsers.

Any chance of revisiting this decision? It makes developing games with any significant amount of text a real pain.

I'm not sure I agree with that, to be honest.

Firstly, you have all the same fun of using fonts that you do with @font-face, namely different formats supported by different browsers (and nothing I've seen suggests it's any different)

Secondly, you will have to distribute the font to users, because you explicitly can't use Google Web Fonts etc. (see above) and especially on mobile that adds 200KB+ of resources to download unless you're bundling it up into an app.

Thirdly, font sizes with bitmapped fonts are explicitly predictable. While you can use the measureText method, I have the unnerving feeling it's going to be like trying to use TTFs with PHP/GD all over again: that the size that's reported is actually different to the size used, and I think you're going to end up with different browsers doing different things even with the same fonts, just like as happens now.

Like a lot of things I think the underlying idea has to evolve a little bit before it can be practically usable in something like this. (And I don't think it would do anything useful like autowrap inside a container, either, meaning that you would still have to do that yourself, only now you can't entirely rely on the size being totally consistent.)

Regardless of plain font vs. image, Impact (or a plugin) should abstract away details like line wrapping.

Here's what it comes down to for me: if I want to use various sizes, colours, font weights, font faces, etc, I shouldn't need need to create images for each. Likewise if I later realize that I need more characters, eg when localizing my game.

My main concern is text-heavy games. If you want a fancy font in a title screen or something, chances are you're just going to create an image anyway. Using standard browser fonts for in-game text is a safe bet, and they're highly readable. But even if you're using some non-standard fonts (via Google Web Fonts or whatever) I think a slightly longer loading time is acceptable for most games.

If you stop and think about it, using image fonts is pretty ironic for an HTML5 game engine. One of the nice things about HTML5 and CSS3 is that I don't need to use images to do fancy typography like shadows etc. I completely understand why Dominic did it that way at the time, but it's definitely a workaround.

I agree with you about the line wrapping part, because that's not that hard to do, but I'm not sure it should be in the core.

If you want to use various sizes and colours, chances are they're not going to be heavy in terms of what you're doing, you're only going to be using occasional things, in which case you'll either set it up that the entire string is a single image, or if it's in the form of a HUD layout, the entire HUD might be a single image.

Remember also that there are performance concerns when using a lot of images so depending on your use you might just make things into complete images rather than font images so that you only have one draw call. Incidentally, I'm not entirely sure how the ig.Font subsystem will handle non ASCII characters...

Did I mention that Google Web Fonts won't actually work with Canvas?

Did I also mention that the typical size of a font image is actually smaller than distributing the font files themselves? For comparison, 04b03 font is 3.4KB while the TTF is 8KB... then you'd have to produce your own OTF and WOFF files to match the different browsers that don't support TTF directly. Then you have to contend with the fact that the kerning and spacing between letters will vary depending on implementation, while it won't in the image version, it will be pixel perfect on every platform.

Oh, and the 'standard' fonts aren't that standard. Mac OS X and Linux do not have Verdana, Tahoma etc as standard, you have to manually add them, and their equivalents are not metrically identical as above.

If you stop and think about it, using image fonts is not ironic in the slightest given that you're not using the DOM. You're using a pixel canvas inside the DOM. Consequently it's actually way more logical to use a pixel image context inside that canvas than it is to use something that's not even bitmapped and has to be rendered into that canvas. Drawing a TTF/OTF/WOFF to the canvas is actually not as fast as drawing an image to it.

Also, out of interest, you'd have to do a lot more work if you wanted to recreate - for example - the pixel look in the Drop example game, because you'd either have to find a font that rendered like that (there are a few but the sizes need to be done perfectly) or you'd have to make an image anyway for it to be resized and edited.

I can see where you're coming from, but the deeper you go, the more of a rabbit hole trying to use 'real' fonts actually is, especially since the majority of games produced thus far are not actually text heavy. Whether that's because or, or in spite of, the above is something that remains to be seen.

I don't know if anyone is still looking for (some of) this functionality, but I made a plugin which will handle doing different colors from one font image. For absolutely no good reason, I want to try making an "ASCII" graphics game with Impact, and thus having lots of text colors is useful.

The actual implementation is completely asinine - essentially I draw the font to the canvas, change the pixels which are part of the font to the specified color, and then load it out as base64 into a new Image.

But if anyone wants it, you can download the plugin here: https://github.com/docmarionum1/impact-multi-color-font

docmarionum1 that is pretty cool thanks! Why do you think it is asinine? I don't know how else you would do it.

Well I certainly don't know how else it would be done either (and I approached it from a several of angles), but it feels like there should be a better way to do it.

Seems like a good way to do it to me. Nice job!

Just wondering whether anyone has managed to figure out a way to modify the colour of words within a sentence?

For example this:

1 decade ago by coreysnyder

this.font.draw("[#FFFFFF Keep society clean!] You can [#FFF838 hold Shoot] and release once you [#FFF838 flash quickly] to fire a very powerful blast!", x, y);