A plugin which add borders to fonts, and lets you change the font color too.

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

1 decade ago by Joncom

Get the plugin here.

Add borders to your font.
/><br />
<br />
<strong>Change the color of specific words.</strong><br />
<img src=

var font = new ig.Font('media/font.png', { borderColor: '#000' });
Choose the color of a font.

var font = new ig.Font('media/font.png', { fontColor: '#F00' });

Set thickness of a border.

var font = new ig.Font('media/font.png', { borderColor: '#000', borderSize: 2 });

Other options can also be set this way.

var font = new ig.Font('media/font.png', { letterSpacing: 1 });

Change font color on-the-fly.

font.draw("[#F00 I'm red,] I'm default, [#000 and I'm black!]", x, y);

1 decade ago by garyk1968

Great little plugin joncom, thanks!

1 decade ago by svenanders

Excellent Joncom! Saves me from mucking around in Photoshop!

1 decade ago by eoinmcg

Very useful!

Thanks for sharing

1 decade ago by fulvio

I get the following in FF and Chrome.

IndexSizeError: Index or size is negative or greater than the allowed amount

var charData = oldContext.getImageData(x, y, width, height);

border-font.js (line 73)

Code:

font: new ig.BorderFont('media/fonts/font.regular.png'),
init: function(x, y, settings) {
    ...
    this.font.draw("Hello world.", 0, 0, ig.Font.ALIGN.CENTER);
}

EDIT: This only happens with a certain type of font!

1 decade ago by Joncom

Quote from fulvio
IndexSizeError: Index or size is negative or greater than the allowed amount

Edit: This has been fixed.

1 decade ago by Joncom

Editted.

1 decade ago by Joncom

Bump/Update:

I&039;ve fixed a few bugs and cleaned up some of the code. The plugin no longer requires you to call #new BorderFont();. Rather you create fonts the usual way using new ig.Font();, and supply options if you want a border or change of color.

I've updated the first post and the Github readme to reflect the new syntax.

1 decade ago by fulvio

Quote from Joncom
I've updated the first post and the Github readme to reflect the new syntax.

Thanks for that!

Do you think you could update the plugin to support something like this:

http://impactjs.com/forums/impact-engine/font-colors/page/1#post24093

1 decade ago by Joncom

@fulvio:

/><br />
<br />
The above effect can be achieved using the following:<br />
<br />
<pre class=

MyGame = ig.Game.extend({ clearColor: '#666666', font: new ig.Font('media/04b03.font.png', { fontColor: '#98FB98' }), draw: function() { this.parent(); this.font.draw( "[#FFFFFF Keep society clean!] \n" + "You can [#FFF838 hold Shoot] and release once you \n" + "[#FFF838 flash quickly] to fire a very powerful blast!", 10, 10 ); } });

1 decade ago by Joncom

Update:

Font and border layers are now cached separately. This makes new-font-generation even faster.

1 decade ago by Joncom

Update:

Border generation code much much faster.

1 decade ago by Donzo

Awesome!
I'm going to use this in my next game.

Thanks for your efforts!

1 decade ago by Dejan

A really great plugin :) But there seems to be some problems if you are trying to display numbers.

/><br />
<img src=

1 decade ago by stahlmanDesign

Can you post the font sprite sheet image? There's a little line underneath each letter, and for some reason it might not have rendered that line correctly for the numbers.

1 decade ago by Dejan

Here it is, I personally didn't saw anything out of the ordianary but maybe you will see something I didn't.

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

1 decade ago by stahlmanDesign

@Dejan Weird, like you said, the sprite sheet looks fine. I'm not sure what the problem is.

1 decade ago by Joncom

Hi Dejan. It seems to work fine for me when I use the font-sheet you provided. Can you provide some code, or better yet, ZIP the entire project and upload/share it so I could take a look at your particular setup?

1 decade ago by Dejan

Hey Joncom.I already checked my code and I ended up deleting everything until nothing was there anymore. So I ended up checking it in different browser. And it seems like this problem might only occur in Firefox.

Then I tried to take a completly empty impact project (V.1.24) and just changed the default font message to

'It Works! 1234567890'
and looked at the results with a zoom factor of 1 and 2.

zoom factor 1
/><br />
<br />
zoom factor 2<br />
<img src=

/><br />
<br />
zoom factor 2<br />
<img src=

1 decade ago by Joncom

Interesting! I'll take another look soon...

1 decade ago by Joncom

I tried replicating your issue by using Firefox.

Here's my setup with a scale of 1:

/><br />
<br />
And here's with a scale of 2:<br />
<br />
<img src=

1 decade ago by Dejan

Hmmm that's pretty strange. I really wonder why I'm having those problems with firefox then (I'm just going to assume that we are both having version 38.0.5)

Lilke I said it was a complete new and empty impact project

ig.module( 
	'game.main' 
)
.requires(
	'impact.game',
	'impact.font',
	
	'plugins.font2'
)
.defines(function(){

MyGame = ig.Game.extend({
	
	// Load a font
	font: new ig.Font( 'media/04b03.font.png',{ borderColor: '#d53535', borderSize: 1 }  ),
	
	init: function() {
		// Initialize your game here; bind keys etc.
	},
	
	update: function() {
		// Update all entities and backgroundMaps
		this.parent();
		
		// Add your own, additional update code here
	},
	
	draw: function() {
		// Draw all entities and backgroundMaps
		this.parent();
		// Add your own drawing code here
		var x = ig.system.width/2,
			y = ig.system.height/2;
		
		this.font.draw( 'It Works! 1234567890', x, y, ig.Font.ALIGN.CENTER );
	}
});

// Start the Game with 60fps, a resolution of 320x240, scaled
// up by a factor of 2
ig.main( '#canvas', MyGame, 60, 640, 480, 2 );

});

And with zoom factor I meant the scaling you can set here
ig.main( '#canvas', MyGame, 60, 640, 480, 2 );
(sorry zoom factor kind of was a weird way to reffer to that)

1 decade ago by Joncom

Yep. My Firefox is 38.0.5 as well. Does the issue manifest itself in a consistent way? Does one group of settings always result in the same output, or does the output seem to change randomly?

1 decade ago by Dejan

The problem itself is consistent. With the same settings you will always get the same result. The 2 factors which can change the results seems to be the scaling and the font (even the size of the font seems to be making a difference).

And strangely it seems like pixelfonts are having less problems than more curly ones.

You could see it here
/> <br />
The Font is literally ripped apart (weirdly only the numbers).<br />
<br />
I will later test this on different computer to see if the problem will occur there as well.<br />
<br />
Edit: On other Computer it seems to be working fine. I really wonder what's different on this one. </div>
</div>
<div class=

/> <br />
The Font is literally ripped apart (weirdly only the numbers).<br />
<br />
I will later test this on different computer to see if the problem will occur there as well.<br />
<br />
Edit: On other Computer it seems to be working fine. I really wonder what's different on this one. </div>
</div>
<div class=

1 decade ago by Joncom

Wow, that's so weird. I wish I could replicate it on my end so I could try to see what's going on.

What web server are you using to host the files, XXAMP, WAMP?

1 decade ago by Dejan

I'm using XXAMP.

Well, considering that I seem to be the first person who had this problem we can assume that it is rare enough that the time which would be needed to figure this out couldn't be justified by it's use.

Still I really wonder what exactly is triggering this and how many people exactly would be affected by this problem.

1 decade ago by Joncom

Run the command ig.game.font.data.toDataURL(); in the FireFox console. You should get a URL back. If you view the URL in a new tab, does the font image look broken at all?

Edit: Are there any error messages in the console?

1 decade ago by Dejan

Oh wow I didn''t knew that it's possible to acess the data url like this .

Anyways the Font image seem already to be broken.

/><br />
<br />
So far I was always using Firebug, which wasn't showing any error messages, now I checked the actual firefox web console and it really is showing me an error<br />
<br />
<img src=

/><br />
<br />
So far I was always using Firebug, which wasn't showing any error messages, now I checked the actual firefox web console and it really is showing me an error<br />
<br />
<img src=

1 decade ago by AndrewMast

@Joncom & @Dejan:

Just by looking at Dejan's image, it looks like when Joncom adds the border, he doesn't change the line below. (You can see the spacing is wrong. Some of the empty dots are below the middle of a letter. You can see this at the letter "X")

Edit:
/><br />
-Andrew </div>
</div>
<div class=

/><br />
-Andrew </div>
</div>
<div class=

1 decade ago by stahlmanDesign

@AndrewMast -- that's it! Now the bug makes sense.

Page 1 of 2

« first « previous next › last »

Forums » Code » A plugin which add borders to fonts, and lets you change the font color too.

1 decade ago by Joncom

1 decade ago by garyk1968

1 decade ago by svenanders

1 decade ago by eoinmcg

1 decade ago by fulvio

1 decade ago by Joncom

1 decade ago by Joncom

1 decade ago by Joncom

1 decade ago by fulvio

1 decade ago by Joncom

1 decade ago by Joncom

1 decade ago by Joncom

1 decade ago by Donzo

1 decade ago by Dejan

1 decade ago by stahlmanDesign

1 decade ago by Dejan

1 decade ago by stahlmanDesign

1 decade ago by Joncom

1 decade ago by Dejan

1 decade ago by Joncom

1 decade ago by Joncom

1 decade ago by Dejan

1 decade ago by Joncom

1 decade ago by Dejan

1 decade ago by Joncom

1 decade ago by Dejan

1 decade ago by Joncom

1 decade ago by Dejan

1 decade ago by AndrewMast

1 decade ago by stahlmanDesign