Tutorial - Making Pixel Fonts
A Flash Developer Resource Site

Page 1 of 2 12 LastLast
Results 1 to 20 of 29

Thread: Tutorial - Making Pixel Fonts

  1. #1
    Senior Member Ex-Ess's Avatar
    Join Date
    Nov 2002
    Location
    York (England)
    Posts
    588

    Tutorial - Making Pixel Fonts

    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

  2. #2
    Flashkit historian Frets's Avatar
    Join Date
    Oct 2000
    Location
    flashkit
    Posts
    8,797
    I believe you've earned a sticky.

    Nice tute.

    Frets

  3. #3
    Senior Member Ex-Ess's Avatar
    Join Date
    Nov 2002
    Location
    York (England)
    Posts
    588
    Thank you kindly good sir

  4. #4
    Senior Member
    Join Date
    Oct 2000
    Posts
    314
    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.

  5. #5
    Senior Member Ex-Ess's Avatar
    Join Date
    Nov 2002
    Location
    York (England)
    Posts
    588
    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!

  6. #6
    Banned by david p. digger8231's Avatar
    Join Date
    Jan 2002
    Location
    India
    Posts
    72
    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?

  7. #7
    Senior Member Ex-Ess's Avatar
    Join Date
    Nov 2002
    Location
    York (England)
    Posts
    588
    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.

  8. #8
    Style before Substance
    Join Date
    Mar 2003
    Location
    Geneva, Switz.
    Posts
    202
    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?

  9. #9
    Senior Member Ex-Ess's Avatar
    Join Date
    Nov 2002
    Location
    York (England)
    Posts
    588
    Yeah you can send me it....If you go to my website and contact me via that I will give you my email address.

  10. #10
    Senior Member
    Join Date
    Oct 2000
    Posts
    314
    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!

  11. #11
    Banned by david p. digger8231's Avatar
    Join Date
    Jan 2002
    Location
    India
    Posts
    72
    be a bit specific.
    i wish a member of fff was there in this board

  12. #12
    Style before Substance
    Join Date
    Mar 2003
    Location
    Geneva, Switz.
    Posts
    202
    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!

  13. #13
    Supreme Ruler
    Join Date
    Jul 2002
    Posts
    94
    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.

  14. #14
    Senior Member Ex-Ess's Avatar
    Join Date
    Nov 2002
    Location
    York (England)
    Posts
    588
    Glad you liked!

    Bit obsolete now though as FlashMX4 is gonna have antialiased text!!

    NICE!

  15. #15
    Supreme Ruler
    Join Date
    Jul 2002
    Posts
    94
    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?

  16. #16
    Flashkit historian Frets's Avatar
    Join Date
    Oct 2000
    Location
    flashkit
    Posts
    8,797
    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.


    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

  17. #17
    ...? mxkidz's Avatar
    Join Date
    Jul 2003
    Location
    India
    Posts
    419
    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.

  18. #18
    Flasher
    Join Date
    Nov 2002
    Posts
    171
    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?
    i think he just made a typo. i think he means anti-anti-aliased, or aliased.

  19. #19
    Junior Member
    Join Date
    Dec 2004
    Posts
    6
    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.

  20. #20
    Supreme Ruler
    Join Date
    Jul 2002
    Posts
    94
    Originally posted by richblend
    i think he just made a typo. i think he means anti-anti-aliased, or aliased.
    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.

    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.
    Last edited by bart otj; 12-12-2004 at 12:30 PM.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  




Click Here to Expand Forum to Full Width

HTML5 Development Center

Poll by Flashkit.com