SOLVED Fonts with an outline? How?

Director_X

Member
Hi folks.

I have items loot with various coloured text. Problem is that in GM they tend to blend and obscure with the background.

gm_coloured_text.JPG

I'd like to have my font with a black outline.

Should I use this:
https://forum.yoyogames.com/index.php?threads/solved-outlined-text.58000/
// But running this script like 8 times causes a huge FPS drop from avg 1500 to avg 900

On reddit I found:
https://pastebin.com/Uk3Cb1Mf
//Is this efficient if running on 20+ loot drop objects on the screen?


OR:
Should I just download a free font with an existing outline?

Is there a better way? An inbuilt method/function?

NOTE: Don't wish to use shaders.

Please advise.
Thanks.
 
Last edited:

FoxyOfJungle

Kazan Games
Well, maybe performance will be greatly affected if you use the draw_text function many times, especially in the script where you do this 360 times. I recommend using some outline shader, in the marketplace I already saw some.

You can also use a font with an outline, however I would recommend using a shader.

However, if you have few texts to draw, you can use the function that draws 4 texts at the same time.
 

Slyddar

Member
The other option is to use an outline function as you have linked, but draw it once to a surface, and then just draw the surface. Would be much faster than drawing the outline function each step, and it's how I've done it many times.
 

Director_X

Member
The other option is to use an outline function as you have linked, but draw it once to a surface, and then just draw the surface. Would be much faster than drawing the outline function each step, and it's how I've done it many times.


Are surfaces functional 100% cross-platform? ie mobile phones/web?

Any links to example code? ;) Thanks. :)
 
Are surfaces functional 100% cross-platform? ie mobile phones/web?

Any links to example code? ;) Thanks. :)
try this, preferably on a surface, as pointed out.
GML:
function text_drop_shadow(_x, _y, _color, _color_shadow, _string, _h_offset, _v_offset){  
    draw_set_color(_color_shadow);
    draw_text(_x, _y, _string);
    draw_set_color(_color);
    draw_text(_x+_h_offset, _y+_v_offset, _string);
   
}
Not really a pure ouline, but if you call it at 1,1 and -1, -1 pixel, maybe you'll get close enough for your taste. Anyway, it's a cool function for text that I use all the time
 

Dr_Nomz

Member
Ayyyy I actually had this problem before! I HIGHLY recommend this script, it works really great and is VERY flexible!

GML:
///draw_text_outline(x,y,str,outwidth,outcol,outfidelity,_separation,width)

//Created by Andrew McCluskey http://nalgames.com/

//x,y: Coordinates to draw
//str: String to draw
//arugment3 = outwidth: Width of outline in pixels
//argument4 = outcol: Colour of outline (main text draws with regular set colour)
//argument5 = outfidelity: Fidelity of outline (recommended: 4 for small, 8 for medium, 16 for larger. Watch your performance!)
//argument6 = separation, for the draw_text_EXT command.
//argument7 = width for the draw_text_EXT command.


//2,c_dkgray,4,20,500 <Personal favorite preset. (For fnt_3)
var dto_dcol=draw_get_color();

draw_set_color(argument4);

for(var dto_i=45; dto_i<405; dto_i+=360/argument5)
{
  //draw_text_ext(argument0+lengthdir_x(argument3,dto_i),argument1+lengthdir_y(argument3,dto_i),argument2,argument6,argument7);
  draw_text_ext(argument0+round(lengthdir_x(argument3,dto_i)),argument1+round(lengthdir_y(argument3,dto_i)),argument2,argument6,argument7);
}

draw_set_color(dto_dcol);

draw_text_ext(argument0,argument1,argument2,argument6,argument7);

/* Original code, in case I mess something up.
var dto_dcol=draw_get_color();

draw_set_color(argument4);

for(var dto_i=45; dto_i<405; dto_i+=360/argument5)
{
    draw_text(argument0+lengthdir_x(argument3,dto_i),argument1+lengthdir_y(argument3,dto_i),argument2);
}

draw_set_color(dto_dcol);

draw_text(argument0,argument1,argument2);
I found it on the GMC code resource thing (I forget where it is) and I modified it slightly to work with draw_text_ext so it's a lot more flexible than the original code. Good luck!

EDIT: Oh yeah, and you can change the color and thickness of the outline to whatever you want. :) Basically it works by drawing a bunch of text simultaneously in a clever way to have a perfect outline.
 

Director_X

Member
Ayyyy I actually had this problem before! I HIGHLY recommend this script, it works really great and is VERY flexible!

GML:
///draw_text_outline(x,y,str,outwidth,outcol,outfidelity,_separation,width)

//Created by Andrew McCluskey http://nalgames.com/

//x,y: Coordinates to draw
//str: String to draw
//arugment3 = outwidth: Width of outline in pixels
//argument4 = outcol: Colour of outline (main text draws with regular set colour)
//argument5 = outfidelity: Fidelity of outline (recommended: 4 for small, 8 for medium, 16 for larger. Watch your performance!)
//argument6 = separation, for the draw_text_EXT command.
//argument7 = width for the draw_text_EXT command.


//2,c_dkgray,4,20,500 <Personal favorite preset. (For fnt_3)
var dto_dcol=draw_get_color();
[SPOILER]
draw_set_color(argument4);

for(var dto_i=45; dto_i<405; dto_i+=360/argument5)
{
  //draw_text_ext(argument0+lengthdir_x(argument3,dto_i),argument1+lengthdir_y(argument3,dto_i),argument2,argument6,argument7);
  draw_text_ext(argument0+round(lengthdir_x(argument3,dto_i)),argument1+round(lengthdir_y(argument3,dto_i)),argument2,argument6,argument7);
}

draw_set_color(dto_dcol);

draw_text_ext(argument0,argument1,argument2,argument6,argument7);

/* Original code, in case I mess something up.
var dto_dcol=draw_get_color();

draw_set_color(argument4);

for(var dto_i=45; dto_i<405; dto_i+=360/argument5)
{
    draw_text(argument0+lengthdir_x(argument3,dto_i),argument1+lengthdir_y(argument3,dto_i),argument2);
}

draw_set_color(dto_dcol);

draw_text(argument0,argument1,argument2);
I found it on the GMC code resource thing (I forget where it is) and I modified it slightly to work with draw_text_ext so it's a lot more flexible than the original code. Good luck!

EDIT: Oh yeah, and you can change the color and thickness of the outline to whatever you want. :) Basically it works by drawing a bunch of text simultaneously in a clever way to have a perfect outline.
[/SPOILER]

Works like a charm! πŸ‘ Thank you, sir! :)

Though I am not sure how the lag will fare with 20+ objects dropping on the screen, etc.

The other option I'm working on is to make my own fonts!

I've picked up the license for BIRDFONT ($4.99 for commercial use!) and this shows promise! (I recommend the $9.99 Plus version for extra features!)
Another free software I found: FONTFORGE.

Many thanks! πŸ‘
 
Last edited:

Japster

Member
How crazy is this! - I was trying to do the same thing recently, in my game...

I saw the script on GML, but it did like, 8 calls per text display I think - I saw that getting pretty intense, performance-hit wise, for a lot of text. I'll definitely try your enhancement, @Dr_Nomz !

So, I've tried both methods... drawing at offsets, AND font editing...

Font editing would be PERFECT, but I've realised that TTF / OTF are a nightmare - they're created using glyphs / vector pixels/blocks. Most fonts look okay, but in a font editor (I tried Glyph studio, but it was buggy and crashy as hell....) you can see all of the 'crap' behind the scenes. Even when I converted some characters to outline, it didn't work properly...

I'll try that program that you mention, @Director_X - as I was SO close....

I realised that you can find ANY outline font, use THAT, then create a second font where you merely fill 'in' the gaps/interior - i.e:- Font at top, filled in font at bottom. Bottom font printed in any colour, original font printed same place, same size, immediately afterwards, gets the perfect result, in only 2 statements. Of course, you'd have to edit each outline font you'd like an inside colour for, but I feel it's worth it!


1611160268504.png

1611160561732.png

...You get the idea.... even inverse - black or white text, coloured outline, is perfectly possible, again with just 2 display_text statements per entry... :)
 

Director_X

Member
How crazy is this! - I was trying to do the same thing recently, in my game...

I saw the script on GML, but it did like, 8 calls per text display I think - I saw that getting pretty intense, performance-hit wise, for a lot of text. I'll definitely try your enhancement, @Dr_Nomz !

So, I've tried both methods... drawing at offsets, AND font editing...

Font editing would be PERFECT, but I've realised that TTF / OTF are a nightmare - they're created using glyphs / vector pixels/blocks. Most fonts look okay, but in a font editor (I tried Glyph studio, but it was buggy and crashy as hell....) you can see all of the 'crap' behind the scenes. Even when I converted some characters to outline, it didn't work properly...

I'll try that program that you mention, @Director_X - as I was SO close....

I realised that you can find ANY outline font, use THAT, then create a second font where you merely fill 'in' the gaps/interior - i.e:- Font at top, filled in font at bottom. Bottom font printed in any colour, original font printed same place, same size, immediately afterwards, gets the perfect result, in only 2 statements. Of course, you'd have to edit each outline font you'd like an inside colour for, but I feel it's worth it!


View attachment 37237

View attachment 37238

...You get the idea.... even inverse - black or white text, coloured outline, is perfectly possible, again with just 2 display_text statements per entry... :)
Yes, I thought of that, however, I did not wish to rely on so-called free fonts available online - as they are mass sellers and original authors may have copyright issues later down the road.

So... making fonts it is. (And yes, its a pain! But a little pain now, will save a LOT of pain in the future!) ;)
 

Japster

Member
PS - Not sure if JuJu's FREE "Scribble" extension does outlines, but it's bloody good! - and worth a look.... :D

VERY fancy text effects, even animated! - for a very small learning curve - he also added an interactive demo to the project file!
 

Japster

Member
Yes, I thought of that, however, I did not wish to rely on so-called free fonts available online - as they are mass sellers and original authors may have copyright issues later down the road.

So... making fonts it is. (And yes, its a pain! But a little pain now, will save a LOT of pain in the future!) ;)
True! - But I found a few completely free, and by completely I mean CONDITION free too, fonts online - I was also able to buy use of one I really liked 'Ethnocentric', for $8 I think, that I used in TetraLogical, so as I'm crap at art and font design, it was worth that easily, to me! :D
 

Director_X

Member
True! - But I found a few completely free, and by completely I mean CONDITION free too, fonts online - I was also able to buy use of one I really liked 'Ethnocentric', for $8 I think, that I used in TetraLogical, so as I'm crap at art and font design, it was worth that easily, to me! :D
Hey! I just noticed the C= logo! I used to own loads of C=64's and Amigas! :) πŸ‘ πŸ‘ πŸ‘ πŸ‘ πŸ‘ πŸ‘ πŸ‘ πŸ‘
 

ParodyKnaveBob

The Laughing Rogue
I wasn't 100% sure how you meant the below text...
I realised that you can find ANY outline font, use THAT, then create a second font where you merely fill 'in' the gaps/interior - i.e:- Font at top, filled in font at bottom. Bottom font printed in any colour, original font printed same place, same size, immediately afterwards, gets the perfect result, in only 2 statements. Of course, you'd have to edit each outline font you'd like an inside colour for, but I feel it's worth it!


1611160268504.png


1611160561732.png
...but if you're just looking for a way to use the same looking characters for any filled-in colorization, you should be able to use draw_set_colour(), right? Set to c_white, c_red, c_yellow, c_green, c_blue, c_black, etc.?

Regards,
 

Japster

Member
I wasn't 100% sure how you meant the below text...


...but if you're just looking for a way to use the same looking characters for any filled-in colorization, you should be able to use draw_set_colour(), right? Set to c_white, c_red, c_yellow, c_green, c_blue, c_black, etc.?

Regards,
Not really, I'm afraid, afaik mate - that works for single colour font printing, but not 2 coloured, overlaid ones - I've tried lots of stuff, even printing chars a smidgen smaller, but nope, it doesn't 'fill' the inside of them in properly... :(
 
Top