Impact

» Edit Game Info

7 years ago by MikeL

Would I be correct in presuming that the reason to use impact.font rather than the HTML5 canvas's text rendering is because of a performance hit when using canvas's text rendering?

I've been playing around with using .fillText and so forth and it is really rather nice. Maybe more useful for title screens and in-between levels rather than in a complex level scene?

If anyone hasn't tried using native canvas HTML5 text rendering with Impact, here is a snippet to try:

In your main.js file:
MyGame = ig.Game.extend({
...
...
	draw: function() {
		// Draw all entities and backgroundMaps
		this.parent();

                ig.system.context.fillStyle = 'white';
                ig.system.context.font = 'italic 22px sans-serif';
                ig.system.context.textBaseline = 'top';
                ig.system.context.fillText ('Hello canvas!', 0, 0);
                ig.system.context.font         = 'bold 30px sans-serif';
                ig.system.context.strokeText('Hello world!', 0, 50);
...
            }

( modified from an article on dev.opera.com)

7 years ago by Ken

I choose to use canvas fonts for my in-between level screen and it seems to work just fine. I was too lazy to create a font image so I created a little function to help me instead. :)

scribe: function(txt,style,x,y){
		var ctx = ig.system.context;
 
		switch(style){
			case 'h1':
				ctx.fillStyle  = '#fff';
				ctx.font = '20px Sans-Serif';			
			break;
			case 'h2':
				ctx.fillStyle  = '#fff';
				ctx.font = '15px Sans-Serif';
			break;
			case 'p':
				ctx.fillStyle  = '#fff';
				ctx.font = '12px Sans-Serif';
			break;
		}
		
		ctx.textAlign = 'center';
		ctx.fillText  (txt, x, y);
	}

7 years ago by dominic

Quote from MikeL
Would I be correct in presuming that the reason to use impact.font rather than the HTML5 canvas's text rendering is because of a performance hit when using canvas's text rendering?

I actually never compared the performance of both methods. ig.Text uses bitmap fonts for two reasons: 1) at the time I wrote this class some browsers (Opera) didn't support the canvas text API and 2) I like pixel fonts :)

I'll probably add a mode for ig.Text that uses the native text rendering methods instead of bitmap fonts.

7 years ago by Ken

As to Dominics second point about liking pixel fonts, would I be wrong to assume that we could just use css3 embedded fonts and that any browser that would be able to run a canvas game could render the fonts fine?

7 years ago by Hareesun

Aliasing. The @font-face does work, but you'll need to use the blow css too. Downside is it's only Safari and Chrome that support it, and even then, only the latest versions.

-webkit-font-smoothing:antialiased;

6 years ago by igr

Hei, I tried to use Canvas text, a simple string here in draw function:

this.ctx = ig.system.context;
this.ctx.font = "20pt Calibri";
this.ctx.fillStyle = "#ff0000";
this.ctx.fillText("health: " + (this.health), 20, 30);

It works in all modern browsers, but the performance becomes a real issue.

Are there more effective ways of using canvas text?

6 years ago by igr

Well, I performance issue report seems to be premature. There were other reasons.

The issue I have, however, is that the labels both those using Canvas text and Impact font are on the background level, meaning that the text 'hides' behind the front structures (tiles) of the game when scrolling. Any ideas how it can be fixed? Thank you!

6 years ago by igr

Ok, sorry, figured the last one as well. The code for Canvas txt was supposed to go in main.js

6 years ago by dominic

Simply draw the text after you draw everything else. E.g. if you're drawing the text in your Game's draw() method:
draw: function() {
	this.parent(); // draw the background maps and entities first!
	this.font.draw( 'test', x, y ); // then the text
}

6 years ago by stahlmanDesign

I tried to draw the font after everything else, but I was drawing another entity on top of the one with text. It was partially transparent so I could see that no matter what I did it was always covered.

In the end I just had to pass info to the top entity and have that entity do the font drawing. It makes sense though, because each Entity is like a group or Sprite if coming from Flash.

4 years ago by plungeint

do you need to add any "require" or include any library to use the ig.system.context? thanks
Page 1 of 1
« first « previous next › last »

Post Reply

Please login or register to reply.