Impact

This forum is read only and just serves as an archive. If you have any questions, please post them on github.com/phoboslab/impact

10 years ago by therocco

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?

10 years ago by dominic

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.

9 years ago by wachunga

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.

9 years ago by Arantor

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

9 years ago by wachunga

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.

9 years ago by Arantor

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.

7 years ago by docmarionum1

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

7 years ago by unstoppableCarl

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

7 years ago by docmarionum1

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.

7 years ago by drhayes

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

7 years ago by fulvio

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

For example this:

/>			</div>
		</div>
			<div class=

7 years ago by coreysnyder

This might be helpful? https://github.com/quidmonkey/Canvas-Native-Fonts-Plugin

7 years ago by fulvio

Yeah, but that's modifying a single sentence and all its words rather than individual coloured words within a sentence like the screenshot.

I guess I'm after something like this:

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

7 years ago by vincentpiel

A quite good way of changing the font color is that :
- store the font inside a Canvas, not an Image : this is a change you make in the ig.Image class. Do not hesitate, since copying a canvas is like 30% faster than for an image on most Browsers, so your all your game will like it, not only your fonts.
- when you want to change the color, drawRect on the Canvas with the wanted color, using globalCompositeOperation = 'source-in'
- You're done ! the color changed.
- If you are changing often between only a few colors, you might want to cache the images, by adding to the cache path of the image the string of the color of the font ('#F00'). In this case, build all your fonts on startup, cache them, and recall the wanted one later. Beware of the memory use for big/numerous fonts, though.

7 years ago by Joncom

Just thought I'd mention that this plugin lets you change font colors on-the-fly.
Albeit not individual words...

7 years ago by fulvio

Quote from Joncom
Albeit not individual words...

Exactly... ;-(

7 years ago by Joncom

Quote from fulvio
Exactly... ;-(
However it does now.

7 years ago by fulvio

Quote from Joncom
However it does now.

You're f**king awesome. Thanks. :-)
Page 1 of 1
« first « previous next › last »