Adventure Game Studio | Forums

Community => Adventure Related Talk & Chat => Topic started by: Zoo977 on Mon 04/04/2016 19:50:15

Title: °Ë–✧ Grandma Zoo's Homecooked AGS Specific Fonts / Font Making Tutorial ✧˖°
Post by: Zoo977 on Mon 04/04/2016 19:50:15
(http://orig03.deviantart.net/cc02/f/2016/131/b/e/ags_specific_fonts_banner_by_zoo977-da25k4r.png)

So you know the outline font feature? Well, I was wondering, since it doesn't technachly HAVE to be an outline font, what kind of weird, creative things could be done with the outline font feature? I made a handful of little pixel fonts that come with overlay fonts - Two of them come with a traditional outline font, and all of them come with another overlay font that can be used for anti-aliasing the base font. These were just made for fun, but I might make some more in the future. Feel free to use any of them however you wish!

NOTE: In all of these fonts, to type the heart symbol, simply use the broken bar - ¦ - wherever you need a random heart. If you have any comments or suggestions, I would love to hear them. Again, these are all completely free to use, so have fun! (ノ'ãÆ'®')ノ*:・゚âÅ"§

ALL FONTS
Spoiler
LIPBY CHONK (http://www.dafont.com/lipby-chonk.font?sort=date)

(http://www.dafont.com/img/illustration/l/i/lipby_chonk.png)

This is best viewed at size 9 - Type a broken bar “¦” for a heart symbol

CRUNCHY BEEF (http://www.dafont.com/crunchy-beef.font?sort=date)

(http://www.dafont.com/img/illustration/c/r/crunchy_beef.png)

This is best viewed at size 10 - Type a broken bar “¦” for a heart symbol

CHUNKY DUNK (http://www.dafont.com/chunky-dunk.font?sort=date)

(http://www.dafont.com/img/illustration/c/h/chunky_dunk.png)

This is best viewed at size 14 - Type a broken bar “¦” for a heart symbol

YET BUMBLER (http://www.dafont.com/yet-bumbler.font?sort=date)

(http://www.dafont.com/img/illustration/y/e/yet_bumbler.png)

This is best viewed at size 9 - Type a broken bar “¦” for a heart symbol

THIS SMACKY (http://www.dafont.com/thissmacky.font?sort=date)

(http://www.dafont.com/img/illustration/t/h/thissmacky.png)

This is best viewed at size 9 - Type a broken bar “¦” for a heart symbol

PLOP DUMP (http://www.dafont.com/plop-dump.font?sort=date)

(http://www.dafont.com/img/illustration/p/l/plop_dump.png)

This is best viewed at size 10 - Type a broken bar “¦” for a heart symbol

SMACKY FORMULA (http://www.dafont.com/smacky-formula.font)

(http://www.dafont.com/img/illustration/s/m/smacky_formula.png)

This is best viewed at size 11 - Type a broken bar “¦” for a heart symbol, or an at symbol “@” for a sparkle symbol

PORTABLE TUBE (http://www.dafont.com/portable-tube.font)

(http://www.dafont.com/img/illustration/p/o/portable_tube.png)

This is best viewed at size 10 - Type a broken bar “¦” for a heart symbol, or an at symbol “@” for a sparkle symbol

EASE OF USE (http://www.dafont.com/ease-of-use.font)

(http://www.dafont.com/img/illustration/e/a/ease_of_use.png)

This is best viewed at size 8 - Type a broken bar “¦” for a heart symbol, or an at symbol “@” for a sparkle symbol

TOUR DE FORCE (http://www.dafont.com/tour-de-force.font?sort=date)

(http://www.dafont.com/img/illustration/t/o/tour_de_force.png)

This is best viewed at size 12 - Type a broken bar “¦” for a heart symbol

SLAP AND CRUMBLY (http://www.dafont.com/slap-and-crumbly.font?sort=date)

(http://www.dafont.com/img/illustration/s/l/slap_and_crumbly.png)

This is best viewed at size 12 - Type a broken bar “¦” for a heart symbol

IS WASTED (http://www.dafont.com/iswasted.font?sort=date)

(http://www.dafont.com/img/illustration/i/s/iswasted.png)

This is best viewed at size 10 - Type a broken bar “¦” for a heart symbol, or an at symbol “@” for an ink/blood splatter

TUBE OF CORN (http://www.dafont.com/tube-of-corn.font)

(http://www.dafont.com/img/illustration/t/u/tube_of_corn.png)

This is best viewed at size 12 - Type a broken bar “¦” for a heart fourish, or an at symbol “@” for an alternate and symbol

APPLY BEEF (http://www.dafont.com/apply-beef.font?sort=date)

(http://www.dafont.com/img/illustration/a/p/apply_beef.png)

This is best viewed at size 12 - Type a broken bar “¦” for a heart symbol, or an at symbol “@” for a glitter symbol

PROPEL REPEL (http://www.dafont.com/propel-repel.font?sort=date)

(http://www.dafont.com/img/illustration/p/r/propel_repel.png)

This is best viewed at size 10 - Type a broken bar “¦” for a heart symbol, or an at symbol “@” for a star

HYDRATING LIP (http://www.dafont.com/hydrating-lip.font?sort=date)

(http://www.dafont.com/img/illustration/h/y/hydrating_lip.png)

This is best viewed at size 13 - This font does not have a heart symbol. Instead, you may type an at symbol, a percent sign, an ampersand, or a broken bar (@ % & ¦ respectively) for various ink or blood splatters.
[close]


HOW TO DESIGN YOUR OWN PIXEL FONT

Spoiler
Basics of Font Design
So basically, when you're designing a font, there are a bunch of guidelines you need to follow to make it look good. Sounds simple, I know, but I managed to forget this when I first tried this, and so I figured I'd put up some information. I tried to condense it, and here's what I came up with.

(http://orig09.deviantart.net/2e01/f/2016/123/0/7/ags_guide_03_by_zoo977-da15b3w.png)

(http://orig06.deviantart.net/519f/f/2016/123/f/2/ags_guide_04_by_zoo977-da15b3l.png)

Clearly, this is the cliffnotes version. If you want to go a bit more indepth, you can find plenty more information through this link. (http://designinstruct.com/tools-basics/the-basics-of-typography/)

Getting Started
There are two main programs I use for my font design. The first I use is a simple browser program called Bitfont Maker 2. (http://www.pentacom.jp/pentacom/bitfontmaker2/) It's very simple to get started in - just click a spot to draw, click again to erase, and hold it down to draw/erase multiple spaces. Here's a little rundown of what everthing does.

(http://orig04.deviantart.net/f20b/f/2016/123/2/9/ags_guide_01_by_zoo977-da15b4h.png)

Since you can't draw the guidelines in this program, just make a note of the x, cap, and descender heights. When you've finished drawing a character, it'll appear on the grid to the right. The space under the character grid is where you can see how your font will look, and let's you test it's legibility before you export it. You can click the arrows above the character map to change pages, but for an english AGS font, here are all the spaces you should fill in.

(http://orig07.deviantart.net/97c3/f/2016/123/f/3/ags_guide_02_by_zoo977-da15b48.png)

Once you have everything looking good, just click export to name your font, and set the spacing. I usually use one pixel spacing by default, but it may vary depending on the font.

(http://orig11.deviantart.net/532e/f/2016/123/a/9/ags_guide_05_by_zoo977-da15b3e.png)

Now here's the thing - What if the character spacing looks wonky? And this bitfont maker only exports fonts at 16 pixels - what if you need a smaller font? There's a free windows program named Type Light (http://www.cr8software.net/typelight.html) I use for all touching up. When you boot it up, it'll look something like this.

(http://orig10.deviantart.net/da82/f/2016/123/5/d/ags_guide_06_by_zoo977-da15b34.png)

An important thing to note - if you're making a pixel font, go to "View > Grid > Snap to Grid" to make sure all edges align with the grid. A pixel font isn't clean or rounded, it's blunt and harsh. Scroll down the list of characters, and click on a character to touch up it's appearance and shift the character spacing, if you so desire.

(http://orig03.deviantart.net/a9b9/f/2016/123/0/4/ags_guide_07_by_zoo977-da15b2v.png)

As for the font size, figure out what height you want the font to look best at. Usually, I add the height of the tallest character from the baseline, and the lowest ascending point (If the tallest point is 10 pixels above the baseline, and the lowest falls 2 beneath it, you want it at size 12, for example.) Multiply this number by 64. Go to "Font > Metrics", and put this number in the box labeled EM unit size. This box should be at 1024 by default (16 pixels * 64 pixel grid - Get it?)

(http://orig08.deviantart.net/e744/f/2016/123/b/0/ags_guide_08_by_zoo977-da15b2q.png)

Once you're done doing touch ups, just save your font, and you're ready to install it!

(http://orig03.deviantart.net/a840/f/2016/123/0/5/ags_guide_09_by_zoo977-da15b6o.png)

If there's anything you don't like about it after installing it, just edit the font file and reinstall until you're happy with it!

Making Overlay Fonts
Right now, I only make alias, shadow, and outline fonts, so I put together some brief guides here. For all of these, remember-


  • Design the overlay font in BitFontMaker as well. This will make everything so much easier, trust me.
  • Keep BitFontMaker open in another tab, but have the base font in this one. This way, you can check your work before exporting the font. Make sure you don't save over it!


(http://orig03.deviantart.net/dda7/f/2016/123/9/3/ags_guide_10_by_zoo977-da15fov.png)

(http://orig09.deviantart.net/f127/f/2016/123/2/5/ags_guide_11_by_zoo977-da15foo.png)

(http://orig03.deviantart.net/22c0/f/2016/123/9/c/ags_guide_12_by_zoo977-da15foi.png)
[close]
Title: Re: °Ë–✧ Grandma Zoo's Homecooked AGS Specific Fonts ✧˖°
Post by: Danvzare on Mon 04/04/2016 19:58:56
Ooh, those are some nice fonts, and I love the interesting take on how to use the outline font feature in a unique way. There's definitely not enough fonts out there which do that.
Title: Re: °Ë–✧ Grandma Zoo's Homecooked AGS Specific Fonts ✧˖°
Post by: Stupot on Tue 05/04/2016 00:10:19
Nice job. These look great. Keep them coming :-D
Title: Re: °Ë–✧ Grandma Zoo's Homecooked AGS Specific Fonts ✧˖°
Post by: LimpingFish on Tue 05/04/2016 00:11:55
Nice work, Zoo977. I'm sure these will come in very handy. :)
Title: Re: °Ë–✧ Grandma Zoo's Homecooked AGS Specific Fonts ✧˖°
Post by: Babar on Tue 05/04/2016 09:24:00
Contributions can usually go to the Contribution thread (http://www.adventuregamestudio.co.uk/forums/index.php?topic=14864.0) in the Critic's Lounge, so if someone takes issue, a mod can easily move your post there.

Either way, fonts are possibly the rarest contributions, so I'm sure these will be greatly appreciated!
Title: Re: °Ë–✧ Grandma Zoo's Homecooked AGS Specific Fonts ✧˖°
Post by: Ponch on Wed 06/04/2016 18:26:10
These are very nice. Thanks for serving an often overlooked part of AGS. :cheesy:
Title: Re: °Ë–✧ Grandma Zoo's Homecooked AGS Specific Fonts ✧˖°
Post by: Zoo977 on Thu 14/04/2016 12:55:08
Heeeeey, I'm glad all y'all are enjoying these! ;-D

Uuh, I submitted a bunch more to Dafont, but they only upload fonts in a batch once a week, and they weren't uploaded last week. So, I'll have a few more up in a little bit. Remember, if you want a font for a specific purpose, feel free to ask, and I'll see what I could do!
Title: Re: °Ë–✧ Grandma Zoo's Homecooked AGS Specific Fonts ✧˖°
Post by: selmiak on Thu 14/04/2016 13:35:50
*instabookmark'd*

thanks!
Title: Re: °Ë–✧ Grandma Zoo's Homecooked AGS Specific Fonts ✧˖°
Post by: Zoo977 on Sat 16/04/2016 21:34:00
ALRIGHT, THE NEW FONTS JUST GOT UPLOADED!
I meant to put these up like a week ago but Dafont delayed the uploads for some reason so here we go! I also tried making a shadow font for some of these ones

This Smacky (http://www.dafont.com/thissmacky.font) - Size 9, comes with alias, outline, and shadow

(http://www.dafont.com/img/illustration/t/h/thissmacky.png)

Chunky Dunk (http://www.dafont.com/chunky-dunk.font) - Size 14, comes with alias and outline

(http://www.dafont.com/img/illustration/c/h/chunky_dunk.png)

Yet Bumbler (http://www.dafont.com/yet-bumbler.font) - Size 9, comes with alias, outline, and shadow

(http://www.dafont.com/img/illustration/y/e/yet_bumbler.png)

Plop Dump (http://www.dafont.com/plop-dump.font) - Size 10, comes with alias, outline, and shadow

(http://www.dafont.com/img/illustration/p/l/plop_dump.png)

Is Wasted (http://www.dafont.com/iswasted.font) - Size 10, comes with alias

(http://www.dafont.com/img/illustration/i/s/iswasted.png)
Title: Re: °Ë–✧ Grandma Zoo's Homecooked AGS Specific Fonts ✧˖°
Post by: Cassiebsg on Sat 16/04/2016 21:44:17
These are great!
Great job and thanks for sharing! :-D(nod)
Title: Re: °Ë–✧ Grandma Zoo's Homecooked AGS Specific Fonts ✧˖°
Post by: Danvzare on Sun 17/04/2016 12:38:26
Absolutely brilliant!
These could come in real handy. :-D
Title: Re: °Ë–✧ Grandma Zoo's Homecooked AGS Specific Fonts ✧˖°
Post by: Eggie on Thu 28/04/2016 02:55:19
These are beeeeaaaautiful!
Title: Re: °Ë–✧ Grandma Zoo's Homecooked AGS Specific Fonts ✧˖°
Post by: Chicky on Thu 28/04/2016 09:51:34
Super lovely fonts! The anti-alias trick is spot on. Could we have a mini how-to on your process for making these? Its been a while since I've dabbled with making fonts :)

*edit: I've had a play around with the fonts (thanks for sharing!), I may have ran into a snag. Correct me if i'm mistaken but wouldn't the anti-alias layer need to be semi-transparent for this effect to work fully? I've found that it looks great when the text is over a dark background, but when displayed over a light background the darker anti-alias pixels are more striking than the main font pixels. I have a hotspot indicator label tethered to my mouse cursor so maybe this neato trick isn't suitable for text outside of dialog boxes?
Title: Re: °Ë–✧ Grandma Zoo's Homecooked AGS Specific Fonts ✧˖°
Post by: Zoo977 on Sun 01/05/2016 20:02:31
Quote from: Chicky on Thu 28/04/2016 09:51:34I've had a play around with the fonts (thanks for sharing!), I may have ran into a snag. Correct me if i'm mistaken but wouldn't the anti-alias layer need to be semi-transparent for this effect to work fully? I've found that it looks great when the text is over a dark background, but when displayed over a light background the darker anti-alias pixels are more striking than the main font pixels. I have a hotspot indicator label tethered to my mouse cursor so maybe this neato trick isn't suitable for text outside of dialog boxes?

Ah, in some cases, the alias effect will slightly effect the shape of the character (although slightly), so semi transparency isn't the way to go. No, the alias effect is supposed to smooth out the font, so it should always be a color somewhere between the color of the text and the color of the background. By the sound of it, you have the alias darker than both the backdrop and the main font. If this isn't the case, please clarify. I hope this helps!

In the meantime... I've got four more finished! Just got put up a little bit ago. I'll try and organize the fonts, as well as put together a mini=tutorial for the whole process in a little bit, so keep your eyes peeled!

Ease Of Use (http://www.dafont.com/ease-of-use.font) - Size 8, comes with outline and shadow

(http://www.dafont.com/img/illustration/e/a/ease_of_use.png)

Portable Tube (http://www.dafont.com/portable-tube.font) - Size 10, comes with alias, outline, and shadow

(http://www.dafont.com/img/illustration/p/o/portable_tube.png)

Smacky Formula (http://www.dafont.com/smacky-formula.font) - Size 11, comes with alias, outline, and shadow

(http://www.dafont.com/img/illustration/s/m/smacky_formula.png)

Tube Of Corn (http://www.dafont.com/tube-of-corn.font) - Size 12, comes with alias

(http://www.dafont.com/img/illustration/t/u/tube_of_corn.png)
Title: Re: °Ë–✧ Grandma Zoo's Homecooked AGS Specific Fonts ✧˖°
Post by: Zoo977 on Mon 02/05/2016 16:22:22
Okay, I'm not the best at giving tutorials, but I'll try my best here...

Designing Your Pixel Font

Basics of Font Design
So basically, when you're designing a font, there are a bunch of guidelines you need to follow to make it look good. Sounds simple, I know, but I managed to forget this when I first tried this, and so I figured I'd put up some information. I tried to condense it, and here's what I came up with.

(http://orig09.deviantart.net/2e01/f/2016/123/0/7/ags_guide_03_by_zoo977-da15b3w.png)

(http://orig06.deviantart.net/519f/f/2016/123/f/2/ags_guide_04_by_zoo977-da15b3l.png)

Clearly, this is the cliffnotes version. If you want to go a bit more indepth, you can find plenty more information through this link. (http://designinstruct.com/tools-basics/the-basics-of-typography/)

Getting Started
There are two main programs I use for my font design. The first I use is a simple browser program called Bitfont Maker 2. (http://www.pentacom.jp/pentacom/bitfontmaker2/) It's very simple to get started in - just click a spot to draw, click again to erase, and hold it down to draw/erase multiple spaces. Here's a little rundown of what everthing does.

(http://orig04.deviantart.net/f20b/f/2016/123/2/9/ags_guide_01_by_zoo977-da15b4h.png)

Since you can't draw the guidelines in this program, just make a note of the x, cap, and descender heights. When you've finished drawing a character, it'll appear on the grid to the right. The space under the character grid is where you can see how your font will look, and let's you test it's legibility before you export it. You can click the arrows above the character map to change pages, but for an english AGS font, here are all the spaces you should fill in.

(http://orig07.deviantart.net/97c3/f/2016/123/f/3/ags_guide_02_by_zoo977-da15b48.png)

Once you have everything looking good, just click export to name your font, and set the spacing. I usually use one pixel spacing by default, but it may vary depending on the font.

(http://orig11.deviantart.net/532e/f/2016/123/a/9/ags_guide_05_by_zoo977-da15b3e.png)

Now here's the thing - What if the character spacing looks wonky? And this bitfont maker only exports fonts at 16 pixels - what if you need a smaller font? There's a free windows program named Type Light (http://www.cr8software.net/typelight.html) I use for all touching up. When you boot it up, it'll look something like this.

(http://orig10.deviantart.net/da82/f/2016/123/5/d/ags_guide_06_by_zoo977-da15b34.png)

An important thing to note - if you're making a pixel font, go to "View > Grid > Snap to Grid" to make sure all edges align with the grid. A pixel font isn't clean or rounded, it's blunt and harsh. Scroll down the list of characters, and click on a character to touch up it's appearance and shift the character spacing, if you so desire.

(http://orig03.deviantart.net/a9b9/f/2016/123/0/4/ags_guide_07_by_zoo977-da15b2v.png)

As for the font size, figure out what height you want the font to look best at. Usually, I add the height of the tallest character from the baseline, and the lowest ascending point (If the tallest point is 10 pixels above the baseline, and the lowest falls 2 beneath it, you want it at size 12, for example.) Multiply this number by 64. Go to "Font > Metrics", and put this number in the box labeled EM unit size. This box should be at 1024 by default (16 pixels * 64 pixel grid - Get it?)

(http://orig08.deviantart.net/e744/f/2016/123/b/0/ags_guide_08_by_zoo977-da15b2q.png)

Once you're done doing touch ups, just save your font, and you're ready to install it!

(http://orig03.deviantart.net/a840/f/2016/123/0/5/ags_guide_09_by_zoo977-da15b6o.png)

If there's anything you don't like about it after installing it, just edit the font file and reinstall until you're happy with it!

Making Overlay Fonts
Right now, I only make alias, shadow, and outline fonts, so I put together some brief guides here. For all of these, remember-



(http://orig03.deviantart.net/dda7/f/2016/123/9/3/ags_guide_10_by_zoo977-da15fov.png)

(http://orig09.deviantart.net/f127/f/2016/123/2/5/ags_guide_11_by_zoo977-da15foo.png)

(http://orig03.deviantart.net/22c0/f/2016/123/9/c/ags_guide_12_by_zoo977-da15foi.png)





So, that's about all I have for now. If you need any further assistance, or have any requests or suggestions, just let me know![/list]
Title: Re: °Ë–✧ Grandma Zoo's Homecooked AGS Specific Fonts / Font Making Tutorial ✧˖°
Post by: Stupot on Wed 04/05/2016 07:35:18
Wonderful stuff. Thanks for taking the time to show us your ways :-)
Title: Re: °Ë–✧ Grandma Zoo's Homecooked AGS Specific Fonts / Font Making Tutorial ✧˖°
Post by: Danvzare on Wed 04/05/2016 19:48:46
Yeah, big thanks Zoo977! :-D
Not only for the tutorial, but all of the lovely fonts as well.

Hmm, I might use this tutorial to make a pixel font myself. 8-)
Title: Re: °Ë–✧ Grandma Zoo's Homecooked AGS Specific Fonts ✧˖°
Post by: Zoo977 on Wed 11/05/2016 01:33:00
Hey, I'm glad to see you're enjoying the tutorial! I'd love to see any fonts you guys make with it!

In other news, I just ran out of font names with the naming scheme I was using, so I'm going to take a break from this. I'm going to try and make some more aesthetic fonts in the meantime. As well, my careful organization went over the character limit, so I had to get rid of all that. For now, here are the new fonts that just uploaded. Hope you enjoy!

Apply Beef (http://www.dafont.com/apply-beef.font?sort=date) - Size 12, comes with outline and shadow fonts

(http://www.dafont.com/img/illustration/a/p/apply_beef.png)

Propel Repel (http://www.dafont.com/propel-repel.font?sort=date) - Size 10, comes with outline and alias fonts

(http://www.dafont.com/img/illustration/p/r/propel_repel.png)

HYDRATING LIP (http://www.dafont.com/hydrating-lip.font?sort=date) - Size 13, comes with alias font

(http://www.dafont.com/img/illustration/h/y/hydrating_lip.png)
Title: Re: °Ë–✧ Grandma Zoo's Homecooked AGS Specific Fonts / Font Making Tutorial ✧˖°
Post by: Sslaxx on Wed 08/06/2016 12:56:36
What license are these fonts released under?
Title: Re: °Ë–✧ Grandma Zoo's Homecooked AGS Specific Fonts / Font Making Tutorial ✧˖°
Post by: Cassiebsg on Wed 08/06/2016 19:08:17
Oh... just wanted to say that I used 2 of your fonts (Chunky Dunk and Is Wasted) on my MAGS game "Out of Gas". :-D

Thanks bunch! (nod)