°Ë–✧ Grandma Zoo's Homecooked AGS Specific Fonts / Font Making Tutorial ✧˖°

Started by Zoo977, Mon 04/04/2016 19:50:15

Previous topic - Next topic

Zoo977


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



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

CRUNCHY BEEF



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

CHUNKY DUNK



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

YET BUMBLER



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

THIS SMACKY



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

PLOP DUMP



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

SMACKY FORMULA



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



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



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



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

SLAP AND CRUMBLY



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

IS WASTED



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



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



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



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

HYDRATING LIP



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.





Clearly, this is the cliffnotes version. If you want to go a bit more indepth, you can find plenty more information through this link.

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. 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.



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.



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.



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 I use for all touching up. When you boot it up, it'll look something like this.



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.



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?)



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



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!






[close]
☆**☆.ãâ,¬â€š.:*ãÆ'»ã‚Å"☆.ãâ,¬â€š.*  s  u  f  f  e  r  i  n  g .ãâ,¬â€š.☆ã‚Å"ãÆ'»*:.ãâ,¬â€š.☆**☆.ãâ,¬â€š

Danvzare

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.


LimpingFish

Steam: LimpingFish
PSN: LFishRoller
XB: TheActualLimpingFish
Spotify: LimpingFish

Babar

Contributions can usually go to the Contribution thread 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!
The ultimate Professional Amateur

Now, with his very own game: Alien Time Zone

Ponch


Zoo977

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!
☆**☆.ãâ,¬â€š.:*ãÆ'»ã‚Å"☆.ãâ,¬â€š.*  s  u  f  f  e  r  i  n  g .ãâ,¬â€š.☆ã‚Å"ãÆ'»*:.ãâ,¬â€š.☆**☆.ãâ,¬â€š


Zoo977

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 - Size 9, comes with alias, outline, and shadow



Chunky Dunk - Size 14, comes with alias and outline



Yet Bumbler - Size 9, comes with alias, outline, and shadow



Plop Dump - Size 10, comes with alias, outline, and shadow



Is Wasted - Size 10, comes with alias

☆**☆.ãâ,¬â€š.:*ãÆ'»ã‚Å"☆.ãâ,¬â€š.*  s  u  f  f  e  r  i  n  g .ãâ,¬â€š.☆ã‚Å"ãÆ'»*:.ãâ,¬â€š.☆**☆.ãâ,¬â€š

Cassiebsg

There are those who believe that life here began out there...

Danvzare



Chicky

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?

Zoo977

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 - Size 8, comes with outline and shadow



Portable Tube - Size 10, comes with alias, outline, and shadow



Smacky Formula - Size 11, comes with alias, outline, and shadow



Tube Of Corn - Size 12, comes with alias

☆**☆.ãâ,¬â€š.:*ãÆ'»ã‚Å"☆.ãâ,¬â€š.*  s  u  f  f  e  r  i  n  g .ãâ,¬â€š.☆ã‚Å"ãÆ'»*:.ãâ,¬â€š.☆**☆.ãâ,¬â€š

Zoo977

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.





Clearly, this is the cliffnotes version. If you want to go a bit more indepth, you can find plenty more information through this link.

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. 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.



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.



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.



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 I use for all touching up. When you boot it up, it'll look something like this.



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.



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?)



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



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!












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]
☆**☆.ãâ,¬â€š.:*ãÆ'»ã‚Å"☆.ãâ,¬â€š.*  s  u  f  f  e  r  i  n  g .ãâ,¬â€š.☆ã‚Å"ãÆ'»*:.ãâ,¬â€š.☆**☆.ãâ,¬â€š

Stupot


Danvzare

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-)

Zoo977

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 - Size 12, comes with outline and shadow fonts



Propel Repel - Size 10, comes with outline and alias fonts



HYDRATING LIP - Size 13, comes with alias font

☆**☆.ãâ,¬â€š.:*ãÆ'»ã‚Å"☆.ãâ,¬â€š.*  s  u  f  f  e  r  i  n  g .ãâ,¬â€š.☆ã‚Å"ãÆ'»*:.ãâ,¬â€š.☆**☆.ãâ,¬â€š


Cassiebsg

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)
There are those who believe that life here began out there...

SMF spam blocked by CleanTalk