Jump to content


Photo

Outline Text


  • Please log in to reply
30 replies to this topic

#1 jakman4242

jakman4242

    Vertical Shmup Junkie

  • New Member
  • 3222 posts

Posted 12 June 2007 - 10:07 PM

Well,

i was suggested to put these in the gml section, and i thought it was indeed a great idea. So here's a few simple, easy to use scripts on making and text appear with an outline!

I also made a script for having a shadow below the text

Enjoy, and please leave comments

draw_text_outline()
CODE

//Extreemly simple code to make your text have an outline
//example:
//draw_text_outline(text,x,y) And thats it!

draw_set_color(c_black)
draw_text(argument1+1,argument2+1,argument0)
draw_text(argument1-1,argument2-1,argument0)
draw_text(argument1,argument2+1,argument0)
draw_text(argument1+1,argument2,argument0)
draw_text(argument1,argument2-1,argument0)
draw_text(argument1-1,argument2,argument0)
draw_text(argument1-1,argument2+1,argument0)
draw_text(argument1+1,argument2-1,argument0)
draw_set_color(c_white)
draw_text(argument1,argument2,argument0)


draw_text_outline_shadow()
CODE

//Extreemly simple code to make your text have an outline AND a shadow
//example:
//draw_text_outline(text,x,y) And thats it!

draw_set_color(c_dkgray);
draw_text(argument1+2,argument2+2,argument0);
draw_set_color(c_black)
draw_text(argument1+1,argument2+1,argument0)
draw_text(argument1-1,argument2-1,argument0)
draw_text(argument1,argument2+1,argument0)
draw_text(argument1+1,argument2,argument0)
draw_text(argument1,argument2-1,argument0)
draw_text(argument1-1,argument2,argument0)
draw_text(argument1-1,argument2+1,argument0)
draw_text(argument1+1,argument2-1,argument0)
draw_set_color(c_white)
draw_text(argument1,argument2,argument0)
  • 3
-- My blog. --

#2 Necromian

Necromian

    GMC Member

  • GMC Member
  • 1000 posts

Posted 12 June 2007 - 10:10 PM

Yay :(
very useful to the GML impared :blink:
  • 0
Some Completed Games and Programs:

Grid Defender 2 Sequel to the staff picked game at yoyogames!

Sig Maker V.5 "10/10","Products match Photoshop CS3, take less time and effort"

Perfection "This really surprised me. I can't think of a single negative thing to say" - Kmetamorphosis

Super Big Gun Adventure! The self-proclaimed cult classic!

Cult Symbol Maker "9.5/10","9/10","I like it! Good work!" - JTR

You can find all 30+ programs at www.nfyre.com

#3 jakman4242

jakman4242

    Vertical Shmup Junkie

  • New Member
  • 3222 posts

Posted 12 June 2007 - 10:20 PM

Thanks :(

here's another script, in this one you can choose the colors of the text :blink:

draw_text_outline_ext()
CODE

//Extreemly simple code to make your text have an outline
//example:
//draw_text_outline(text,x,y,textcolor,outlinecolor) And thats it!

draw_set_color(argument4)
draw_text(argument1+1,argument2+1,argument0)
draw_text(argument1-1,argument2-1,argument0)
draw_text(argument1,argument2+1,argument0)
draw_text(argument1+1,argument2,argument0)
draw_text(argument1,argument2-1,argument0)
draw_text(argument1-1,argument2,argument0)
draw_text(argument1-1,argument2+1,argument0)
draw_text(argument1+1,argument2-1,argument0)
draw_set_color(argument3)
draw_text(argument1,argument2,argument0)
  • 0
-- My blog. --

#4 Necromian

Necromian

    GMC Member

  • GMC Member
  • 1000 posts

Posted 13 June 2007 - 12:34 AM

Hmmm... I think I may want to make a lib of everything in my sig maker, like glows and such. That would inspire alot of clones :blink:
  • 0
Some Completed Games and Programs:

Grid Defender 2 Sequel to the staff picked game at yoyogames!

Sig Maker V.5 "10/10","Products match Photoshop CS3, take less time and effort"

Perfection "This really surprised me. I can't think of a single negative thing to say" - Kmetamorphosis

Super Big Gun Adventure! The self-proclaimed cult classic!

Cult Symbol Maker "9.5/10","9/10","I like it! Good work!" - JTR

You can find all 30+ programs at www.nfyre.com

#5 jakman4242

jakman4242

    Vertical Shmup Junkie

  • New Member
  • 3222 posts

Posted 13 June 2007 - 12:43 AM

lol,

gl with that.
Oooh, make sure to put in the cool gradient effects B)
  • 0
-- My blog. --

#6 icuurd12b42

icuurd12b42

    Self Formed Sentient

  • GMC Elder
  • 18181 posts
  • Version:GM:Studio

Posted 13 June 2007 - 08:59 AM

I think you can do strip out a few calls

//outline
x-1,y-1
x-1,y+1
x+1,y-1
y+1,y+1

//finally
x,y

That is usually enough for outlines.

Edited by icuurd12b42, 13 June 2007 - 09:00 AM.

  • 0

gmcbanner.pnggmcbanner_tools.png

ICU Live Tutoring Through Slack or Skype | My Tools Page follow.png

I FRANTICALLY MADE MY 18000 POST TOPIC BEFORE MIKE ANNOUNCED A DELAY...
Now I'm squirming not to hit that reply button


#7 jakman4242

jakman4242

    Vertical Shmup Junkie

  • New Member
  • 3222 posts

Posted 14 June 2007 - 12:20 AM

I think you can do strip out a few calls

//outline
x-1,y-1
x-1,y+1
x+1,y-1
y+1,y+1

//finally
x,y

That is usually enough for outlines.

<{POST_SNAPBACK}>


no, it messes up and doesn't get the whole outline, trust me, that was the script made used before this came to me.
  • 0
-- My blog. --

#8 brod

brod

    Brian RODriguez

  • GMC Member
  • 2050 posts
  • Version:GM8

Posted 14 June 2007 - 12:53 AM

I find that script way too long ,bulky, and inefficient. This script works better. It can:
  • Draw an outline as long as you'd like
  • Draw an outline black and the inside text white
  • Doesn't change the color currently being used
draw_text_outline
var color;
color=draw_get_color();
draw_set_color(c_black);
for(i=argument0-argument2;i<=argument0+argument2;i+=1){
for(n=argument1-argument2;n<=argument1+argument2;n+=1){
draw_text(i,n,argument3);}}
draw_set_color(c_white);
draw_text(argument0,argument1,argument3);
draw_set_color(color);
argument0: x position of text
argument1: y position of text
argument2: how big the outline is
argument3: the text shown.

Here's the same script, but you can choose the color.

draw_text_outline_color
var color;
color=draw_get_color();
draw_set_color(argument5);
for(i=argument0-argument2;i<=argument0+argument2;i+=1){
for(n=argument1-argument2;n<=argument1+argument2;n+=1){
draw_text(i,n,argument3);}}
draw_set_color(argument4);
draw_text(argument0,argument1,argument3);
draw_set_color(color);
argument0: x position of text
argument1: y position of text
argument2: how big the outline is
argument3: the text shown.
argument4: the color of the text
argument5: the color of the outline

Edited by brodballer, 14 June 2007 - 12:59 AM.

  • 1

#9 jakman4242

jakman4242

    Vertical Shmup Junkie

  • New Member
  • 3222 posts

Posted 14 June 2007 - 03:21 AM

I find that script way too long ,bulky, and inefficient. This script works better. It can:

  • Draw an outline as long as you'd like
  • Draw an outline black and the inside text white
  • Doesn't change the color currently being used
draw_text_outline
var color;
color=draw_get_color();
draw_set_color(c_black);
for(i=argument0-argument2;i<=argument0+argument2;i+=1){
for(n=argument1-argument2;n<=argument1+argument2;n+=1){
draw_text(i,n,argument3);}}
draw_set_color(c_white);
draw_text(argument0,argument1,argument3);
draw_set_color(color);
argument0: x position of text
argument1: y position of text
argument2: how big the outline is
argument3: the text shown.

Here's the same script, but you can choose the color.

draw_text_outline_color
var color;
color=draw_get_color();
draw_set_color(argument5);
for(i=argument0-argument2;i<=argument0+argument2;i+=1){
for(n=argument1-argument2;n<=argument1+argument2;n+=1){
draw_text(i,n,argument3);}}
draw_set_color(argument4);
draw_text(argument0,argument1,argument3);
draw_set_color(color);
argument0: x position of text
argument1: y position of text
argument2: how big the outline is
argument3: the text shown.
argument4: the color of the text
argument5: the color of the outline

<{POST_SNAPBACK}>


That works good, EXEPT. When you increase the outline thickness it adds 2-3 pixels of thickness for every 1.
  • 0
-- My blog. --

#10 brod

brod

    Brian RODriguez

  • GMC Member
  • 2050 posts
  • Version:GM8

Posted 14 June 2007 - 03:40 AM

Well of course, it draws an extra layer of text. How else would you want to draw the text? Every major program has it like that.

Edited by brodballer, 14 June 2007 - 03:56 AM.

  • 0

#11 jakman4242

jakman4242

    Vertical Shmup Junkie

  • New Member
  • 3222 posts

Posted 14 June 2007 - 04:26 AM

Well of course, it draws an extra layer of text. How else would you want to draw the text? Every major program has it like that.

<{POST_SNAPBACK}>


well, i'm saying that using my code, you could get much cleaner results.
At least if you wanted to edit it..
  • 0
-- My blog. --

#12 brod

brod

    Brian RODriguez

  • GMC Member
  • 2050 posts
  • Version:GM8

Posted 14 June 2007 - 04:33 AM

You realize that by putting 1 as the outline size it would result in the same exact thing as yours right? If you were to extend your code to 2, it would have the same result as making the outline size 2 in my script. So there really is no difference, except size, efficiency and user-friendliness.

Edited by brodballer, 14 June 2007 - 04:41 AM.

  • -1

#13 jakman4242

jakman4242

    Vertical Shmup Junkie

  • New Member
  • 3222 posts

Posted 14 June 2007 - 04:44 AM

Mhm,
looks like i've been outclasses out matched and out witted.
  • 0
-- My blog. --

#14 brod

brod

    Brian RODriguez

  • GMC Member
  • 2050 posts
  • Version:GM8

Posted 14 June 2007 - 04:46 AM

lol, don't worry, that's what this forum is for. Now that I look back, I was a bit rash. Sorry if I made you feel bad. :)
  • 0

#15 jakman4242

jakman4242

    Vertical Shmup Junkie

  • New Member
  • 3222 posts

Posted 14 June 2007 - 04:48 AM

You did,
i spent a lot of time trying to make those scripts...

But oh well, there's always someone better than you.
  • 0
-- My blog. --

#16 brod

brod

    Brian RODriguez

  • GMC Member
  • 2050 posts
  • Version:GM8

Posted 14 June 2007 - 04:49 AM

lol, once again, sorry. And there is someone better then me, by at least 10 fold (torigara :))

Edited by brodballer, 14 June 2007 - 04:51 AM.

  • 0

#17 jakman4242

jakman4242

    Vertical Shmup Junkie

  • New Member
  • 3222 posts

Posted 14 June 2007 - 05:02 AM

lol, once again, sorry. And there is someone better then me, by at least 10 fold (torigara :))

<{POST_SNAPBACK}>


ironically, she/he just helped me with a problem o.o
and i think she's/he's helping me with my second since she's/he's been 'reading' my topic for awile.
  • 0
-- My blog. --

#18 xDanielx

xDanielx

    GMC Member

  • GMC Member
  • 1002 posts
  • Version:Unknown

Posted 14 June 2007 - 05:36 AM

Here's a script I threw together. Advantages over brodballer and jakman4242's scripts:
  • An actual radial outline is used, instead of filling corners. The effect is a circle around the text, instead of a square. May not be too important with very small outlines, but with anything over a few pixels radial outlining is definitely preferable.
  • The precision can easily be modified under the settings. Painting the text every pixel like brodballer does is a huge waste with large fonts and small outlines, but painting it only once in each direction like jakman does will create unwanted in-between empty space when the outline is greater than the text thickness.

// draw_text_outline(x,y,outline,text)
 
  var _x, _y, outline, precision, text, dir_inc, dir, dist_inc, dist;
 
  // Argument definitions
  _x = argument0;
  _y = argument1;
  outline = argument2;
  text = argument3;
 
  // Settings
  dprecision = 8; // Directional precision - the number of directions in which the outline is drawn
  lprecision = 2; // Longitudinal precision - the number of times the text is drawn in each direction; set at (outline_size/font_thickness) for optimal performance and results
 
  dir_inc = 360 / dprecision;
  dist_inc = outline / lprecision;
 
  draw_set_color(c_black);
  for (dir = 0; dir < 360; dir += dir_inc) {
  for (dist = dist_inc; dist <= outline; dist += dist_inc) {
    draw_text(_x+lengthdir_x(dist,dir),_y+lengthdir_y(dist,dir),text);
  }
  }
 
  draw_set_color(c_white);
  draw_text
(_x,_y,text);


~ Daniel

Edited by xDanielx, 15 June 2007 - 01:13 AM.

  • 0

#19 brod

brod

    Brian RODriguez

  • GMC Member
  • 2050 posts
  • Version:GM8

Posted 14 June 2007 - 05:40 AM

That script only works when the outline is a size of 1. Whenever it isn't, it draws the text much too far away from the original text.

Example of what I get when I put it in a size of 5

Posted Image

notice the letters are not together, which ruins the effect of an outline.

Edited by brodballer, 14 June 2007 - 05:43 AM.

  • 0

#20 xDanielx

xDanielx

    GMC Member

  • GMC Member
  • 1002 posts
  • Version:Unknown

Posted 14 June 2007 - 06:05 AM

That script only works when the outline is a size of 1. Whenever it isn't, it draws the text much too far away from the original text.

Example of what I get when I put it in a size of 5

Posted Image

notice the letters are not together, which ruins the effect of an outline.

<{POST_SNAPBACK}>

That's why I created the "lprecision" setting which can be easily customized. Try changing it to 5. (For thicker fonts, you can use lprecision settings much smaller than the outline size.)

Edited by xDanielx, 14 June 2007 - 06:05 AM.

  • 0

#21 brod

brod

    Brian RODriguez

  • GMC Member
  • 2050 posts
  • Version:GM8

Posted 14 June 2007 - 06:07 AM

Ah, I see now. Perhaps you should comment it like that, since newer members (me) won't have the same problem.
  • 0

#22 xDanielx

xDanielx

    GMC Member

  • GMC Member
  • 1002 posts
  • Version:Unknown

Posted 14 June 2007 - 06:16 AM

Sorry - I must admit that the comments are a bit sparse. I'm not sure how to better describe "longitudinal precision" while keeping similar brevity, but I'll see what I can do.
  • 0

#23 jakman4242

jakman4242

    Vertical Shmup Junkie

  • New Member
  • 3222 posts

Posted 14 June 2007 - 11:39 PM

Ahem...
COMPILATION ERROR in Script: dto
Error in code at line 26:
<span style='font-family:amp'>draw_text(_x,_y,text);

at position 4: Unexpected symbol in expression.
  • 0
-- My blog. --

#24 brod

brod

    Brian RODriguez

  • GMC Member
  • 2050 posts
  • Version:GM8

Posted 14 June 2007 - 11:40 PM

That's html code, html doesn't work in game maker.
  • 0

#25 jakman4242

jakman4242

    Vertical Shmup Junkie

  • New Member
  • 3222 posts

Posted 14 June 2007 - 11:42 PM

nvm, that code would never work with that html code..

PS: Why IS there html in there?

Edited by jakman4242, 14 June 2007 - 11:43 PM.

  • 0
-- My blog. --

#26 brod

brod

    Brian RODriguez

  • GMC Member
  • 2050 posts
  • Version:GM8

Posted 14 June 2007 - 11:44 PM

I think he was using it to color the script. Taking it off shouldn't affect the script in any way.
  • 0

#27 xDanielx

xDanielx

    GMC Member

  • GMC Member
  • 1002 posts
  • Version:Unknown

Posted 15 June 2007 - 12:07 AM

You just want the plain text, not the formatting. Here's a plain text version, if you need it:

// draw_text_outlined(x,y,outline,text)

var _x, _y, outline, precision, text, dir_inc, dir, dist_inc, dist;

// Argument definitions
_x = argument0;
_y = argument1;
outline = argument2;
text = argument3;

// Settings
dprecision = 16; // Directional precision
lprecision = 20; // Longitudinal precision

dir_inc = 360 / dprecision;
dist_inc = outline / lprecision;

draw_set_color(c_black);
for (dir = 0; dir < 360; dir += dir_inc) {
 for (dist = dist_inc; dist <= outline; dist += dist_inc) {
  draw_text(_x+lengthdir_x(dist,dir),_y+lengthdir_y(dist,dir),text);
 }
}

draw_set_color(c_white);
draw_text(_x,_y,text);

  • 0

#28 the_doominator

the_doominator

    Eight Star

  • New Member
  • 925 posts

Posted 15 June 2007 - 12:54 AM

Why did u even have it in there? :skull: HTML formatting doesnt work in Game Maker.
  • 0

#29 xDanielx

xDanielx

    GMC Member

  • GMC Member
  • 1002 posts
  • Version:Unknown

Posted 15 June 2007 - 01:18 AM

I didn't actually add them. In the process of converting HTML markup to BBcode, the converter I used must have left in a couple of <span> tags that it didn't recognize. They are now removed.
  • 0

#30 Mr.Troid

Mr.Troid

    GMC Member

  • New Member
  • 114 posts

Posted 20 January 2011 - 07:24 PM

Here's my code for drawing the font but I just want to add a single outline around it. What can I add to this code to do that?
depth-=99999999999999
draw_set_font(fontHUD)
draw_set_color(c_yellow)
draw_text(view_xview+10,view_yview+5,"" + string(global.energy))

  • 0

#31 Dimas_Riatmodjo

Dimas_Riatmodjo

    GMC Member

  • New Member
  • 5 posts
  • Version:GM8

Posted 30 November 2013 - 02:43 PM

Thanks tongue.gif

here's another script, in this one you can choose the colors of the text smile.gif

draw_text_outline_ext()
CODE

//Extreemly simple code to make your text have an outline
//example:
//draw_text_outline(text,x,y,textcolor,outlinecolor) And thats it!

draw_set_color(argument4)
draw_text(argument1+1,argument2+1,argument0)
draw_text(argument1-1,argument2-1,argument0)
draw_text(argument1,argument2+1,argument0)
draw_text(argument1+1,argument2,argument0)
draw_text(argument1,argument2-1,argument0)
draw_text(argument1-1,argument2,argument0)
draw_text(argument1-1,argument2+1,argument0)
draw_text(argument1+1,argument2-1,argument0)
draw_set_color(argument3)
draw_text(argument1,argument2,argument0)

Thank you..   :thanks:  this is very helpful  :)


  • 0

3Lg3.png ColorX : (my First game, please rate and coment  :thumbsup: ) download here