Printable View
Hey people.
Well I done it!! I finally made a pixel font tutorial. This was built with Mark from Connect Games and we have been making them for a while now with no problems following this way of working.
It is based the tutorial from ultrashock but I think we simplified it a bit and it's pc based now. It has lots of nice pictures and takes you easily thru in steps.
Hope it helps y'all ;)
MAKING A PIXEL FONT TUTORIAL
I believe you've earned a sticky.
Nice tute.
Frets
Thank you kindly good sir ;)
your method for preventinf filling-in is quite odd... i guess it could work if you never plan to blow up your font, but otherwise, changing the weight for the counters has worked for me.
well I tried many ways and that way worked best. The point of a pixel font is to be good quality while small. As this was the problem with standard fonts. The font used in the header for the tutorial uses the same method and I can't see the line.....can you?
How do you do it?
If you follow the ultrashock tutorial it fills the holes in when dynamic or embeded or published. So the solution I found was to open the hole slightly....this stopped the fill.
I'm open to suggestions! :D
yes sometimes when i use certain pixel fonts in my flash movies and i test it the fonts ilke "o" "d" or the other ones which are kinda hollow in the middle well the get filled with color.
what should i do?:(
Well if you follow my way of doing it this won't happen. I open the hollow area by a VERY small amount (See tutorial images) and this stops it.
I followed your tutorial to the letter, but my font still blurs and fills in... Can I send someone the .fog file to look at? Kemie, why don't you post your method up so we can see how it varies?
Yeah you can send me it....If you go to my website and contact me via that I will give you my email address.
ok, i don't have the time to make a proper tutorial. But my method differs from Ex-ess only in the "Stop from filling on" step.
what i do is select the counter (the "hole" part of the letter" by double clicking on the path. Then go to the change weight box, change the weight by 5 check the first box and keep the last 2 open.
voila!
be a bit specific.
i wish a member of fff was there in this board
There is a member of FFF on this board, but they sell there fonts, so they aren't about to give away all their trade secrets!
BRILLIANT TUTORIAL!!
i've made 4 fonts now and they work great!!
one thing though - you say open the "holes" by a "very small amount" -- when i zoomed right in and opened it the tiniest amount possible they still filled in. i now click the offending points and move them with one press of an arrow key. it looks like a lot on screen but you can't see the gap at all. works every time.
Glad you liked!
Bit obsolete now though as FlashMX4 is gonna have antialiased text!!
NICE!
Flash already has anti-aliased text. That's what smooths the fonts and lines and everything onscreen. But for small fonts you want to get rid of that to make it clearer. It's what pixel fonts are avoiding. So what is MX4 adding?
Anti aliasing is not a feature of a font
it's a feature of the image rendering process.
Most fonts by nature are vector not bitmap
Meaning the shape is read
Anti aliasing in regards to smaller fonts is the
reason why pixel fonts are developed.
small fonts need to be aliased to display properly
To find out the whole story on anti-aliasing
check out this article.
http://www.wpdfd.com/wpdtypo3.htm
Device fonts only work when the font is
pre-installed on the visitors harddrive.
They use the browser to draw the font
hence a sharper definition much like html
text.
Problems result because the size attributes
of the text can be reset by the user
causing a mismatch of the text box area.
(in ie go to View Text Size)
MX 04 can pixelate a font
so can swishmax
the problem with that is......
any font wont do.
simply pixelating a font can lead to a very
pixely font that is unreadable.
Look at what happens to good old Arial
when it's been pixelated.
http://frets-files.com/fk/pixelated.gif
Ergo a great deal of caution and care have to be
taken into consideration when to convert to bitmap
aliased and when not to.
Sometimes the better route is simply to create
your own font or download/purchase a pixel font
that has been created by someone.
Frets
Another way to prevent fill ins is to remove overlaps. This is a bug in flash when it detects overlaps it fills the counters of that object.
i think he just made a typo. i think he means anti-anti-aliased, or aliased.Quote:
Originally posted by bart otj
Flash already has anti-aliased text. That's what smooths the fonts and lines and everything onscreen. But for small fonts you want to get rid of that to make it clearer. It's what pixel fonts are avoiding. So what is MX4 adding?
you can only prevent the 'fill' by open a gap by 3 points.i tried opened 1&2 point but it still fill in.other way if you don't want to open a gap but want to have it unfilled is to make the font dynamic.it's filled if you put that font in static mode.
true. they're obviously not obsolete now though, like frets explained. i haven't atually tested the "don't antialias" feature on many regular fonts, but the picture you show of arial doesn't look so bad at all in my opinion.Quote:
Originally posted by richblend
i think he just made a typo. i think he means anti-anti-aliased, or aliased.
in the fonts-for-flash manual it suggests using the "don't antialias" feature in mx2004 on pixel fonts, just so you don't have to worry about getting them bang on an exact pixel. i've used it a few times when i want such a font centred (and when i know i need the flash 7 player - otherwise i'll do it manually).
as for how much gap to have between joining parts of a character, i bought some fff fonts and took them into fontographer to have a look what they did. they seem to cut out a little corner rather than move a whole edge. i'll post a screenshot if anyone is interested. in some cases though i couldn't understand what was happening. i really don't know what i'm doing on fontographer though - i just follow the tutorial (mostly - explained in a sec) and it all seems to work.
the part of the tutorial i don't follow is the kerning instructions. if you follow the kerning instructions you will find that if you type two successive characters of the alphabet, for instance "hi", they will have no space between them. this is because following the tutorial lines up all the characters of the alphabet and puts no space between them, but leaves all other combinations. if you leave all kerning at 128 (minus a few others - for some fonts you want a letter after q to be a little closer than it would be in this case - things like that) everything should be fine. maybe i should just rtfm though, that might explain what i'm doing.
oh and richblend, i like your band.
FOR THOSE OF YOU LOOKING FOR THE EX-ESS PIXEL FONT TUTORIAL, THE EX-ESS.co.uk SIGHT IS DOWN, BUT THE EX-ESS TUTORIAL IS ATTACHED (2 posts below)
(I HAVE NO AFFILIATION WITH EX-ESS OR EX-ESS.co.uk)
Yes! It's true!! :( Shouldn't be for too long I hope and the tutorial will be goin back up on the new site. Although I am aware that pixel fonts are pretty much useless now with flash adding the option of alias and anti aliased text....still....nice little tutorial anyway!
Cheers guys! and cheers Goldy! ;)
FOR THOSE OF YOU LOOKING FOR THE EX-ESS PIXEL FONT TUTORIAL, THE EX-ESS.co.uk SIGHT IS DOWN, BUT THE EX-ESS TUTORIAL IS ATTACHED (2 posts below)
(I HAVE NO AFFILIATION WITH EX-ESS OR EX-ESS.co.uk)
Umm... the link doesn't work for me :mad:
Works fine for me
This has now been reuploaded
http://www.dunwith.co.uk/ex-ess/PixelFonts/
Cheers
:D
I think the link is broken. It doesn't work for me.
Ok thanks, it works now.
test