open source ::: diplay text as gif fonts

hello everyone ^^
here's an open source i just wrote, and i think that some of you may find it useful.

as i'm often creating pixel games, of course i work with pixel fonts.
you surely noticed that there are several things that are not perfect:
> fonts are filled very often. that looks awful.
> you end up using "fonts for flash" everytime, because they work.
> fonts are not sophisticated (no gradiants, colors etc...)

so here's an idea; create your own pixel font, each letter is a gif (or png, jpg, whatever). by definition you can draw it as complicated as you want... import it in flash and replace the typo i used myself in it.

ok, here's the source. look at the actionscript, it's very short and commented. you can specify the space between the letters, as well as the alignement (left or right)

NOTE; this one does not allow very long sentences, since it's just a one line text. of course it can be worked a bit more... but you get the general idea.

Nice work marmotte, it's a small world 'cause I've recently written a bitmap text plotter.

I'm like you, hate the filled characters on the nice emulator style fonts and I like a good colourwash running through a character set ( For everyone not as old as me, that's gradient through a font ;) )

Squize.

PS. Different thread, but brown tongue means ass kisser. :)

Great idea, marmotte...

I will start pixeling some nice fonts now to match the games better than the "fonts for flash"... :) ...

Here's a screeny of a game using my text plotter routine with a lot of colourwash action going on for that mid-eighties arcade feel.

Squize.

PS. Sorry it's jpeg'd up.

Nice =)

I made something similar a while back, same idea, but with multiple lines, you gave it a maximum line length and it did a big block of text.

Lost it in a HDD crash, DayDream, I sent it to you.. Still got it?

Quote:

---

I made something similar a while back, same idea, but with multiple lines, you gave it a maximum line length and it did a big block of text.

---

that's great.
of course, that feature can be implemented with one or two lines of additional code in my example... also you may prefer the attach method instead the duplication, for several reasons (i used the duplication because newbies can see where the text will begin/end easily without writing a starting point in AS)

iopred, was your text "smart"? i mean, the words weren't cut in a half sometimes?
> that's something we can fix by looking for the previous and nearest space, and then react accordingly... mmmh, of course you know it ^^

I like it. Nice work marmotte but what else could i expect :)

great work marmotte.. Thanks for sharing it :)

Yeah, what I did was keep track of the start of each word, and a maximum character value for each line, if the current word went over the maximum line size, it removed the start of that word, and started it again on the next line.. It's quite easy, and its iterative , and done on the fly.

I know im being a bit dickish.. but you can speed it up by not going from the end forward:

name = "marmotte == open source god";
letter_space = 6;
for (var i=0; i<name.length; i++) {
duplicateMovieClip(this.f, "f"+i, i);
this["f"+i]._x = i*letter_space;
this["f"+i].gotoAndStop(name.substr(i,1));
}

nice idea marmotte, very simple but can make a big difference. one thing tho - what do you have against the letter p?

:(

thanks people...

Quote:

---

but you can speed it up by not going from the end forward:

---

aaaah, yes... that's a good point... but here you lost the reference _x (the MC called "f" was the starting point). anyway, of course you can adapt it in a multiple ways.

Quote:

---

name = "marmotte == open source god"

---

that's an honour... ^^

Quote:

---

what do you have against the letter p?

---

well, to be honest the actual font here is from the neogeo game "last blade 2". and i didn't found the letter "p" in it... i guess i'll have to write it myself since i'll use that font for the last blade apparence of my fighting game... btw, 4 letters are missing, but that's something i've commented in the open source.

For none monospace texts an array or list with the spacing between characters would also be needed.

sizea = 6
sizeb = 6
sizec = 6
sized = 6
sizee = 6
sizef = 6
sizeg = 6
sizeh = 6
sizei = 4
sizej = 5.......etc <- could be also done in an array

name = "marmotte == open source god";
for (var i=0; i<name.length; i++) {
duplicateMovieClip(this.f, "f"+i, i);
this["f"+i]._x = i+pos;
letPos = name.substr(i,1)
pos += "size"+letPos
this["f"+i].gotoAndStop(letPos);
}

^ Somethin like that anyway - Untested!

RipX

good suggestion, RipX.

also it can surely be automated with a _width property... instead of writing an array manually with the space for each letter.
> just record their _width in an array (load event of course, just perform a for loop and switch all the available letters)(and substract the value 2 to each result, if you imported gifs with that 1 pixel transparency)...
it should do the trick.

Good point marmotte, talk about overlook the obvious! :D

very cool, but I still think the old school way of masking a roll of numbers is fun :D

i.e.

0
1
2
3
4
5
6
7
8
9

so we copy the roll over, say, 5 times, and mask it, so it displays our score as so:(using ~ as space so it doens't get all messy)

~~~0~
~~~1~
~~~20
~~031
~~142
~~253
~~364
00475
11586
22697
337~8
448~9
559~~
66~~~
77~~~
88~~~
99~~~

but we only see

00475

well, this is how I learned it in C++ :P It's the lazy way I guess.

www.lukstr.no-ip.com/flash/bitmapfont.swf just save target if you don't want it full screen. If anyone wants the .fla just ask (please don't email me though)

I know this thread is kinda old, but i have a question.
ZGOteddy and I are working on a zelda game and I'm planning on putting this method to work in the game.
While testing it i came across a problem.
I cant get numbers to work. Its because it goes to the frame number instead of the frame label. Does anyone have any suggestions to get around this.
I think what im going to do is put a letter before each number, such as ~ and then have an if command check if its the ~, i dunno....

Thats exactly what I did..

make it go to instead of

gotoAndStop(varname)

gotoAndStop("l"+varname)

then instead of having the names of the frames as:

a b c d e f g h i 1 2 3

have them as

la lb lc ld le lf lg lh li l1 l2 l3

Actually pred i was thinking something like if it said:
You have to find 3 triforce pieces.
I would change it to:
You have to find ~3 triforce pieces.
And then have some if command checking the number after the ~
But your way is much better, i never would have though of that.
Thanks!

Ok, another problem...
I have capital and lowercase letters which i would like to use.
It makes everything in capital lettering though... any ideas?

Nevermind, i use the toUpperCase() function to figure out if the letter was the same with the capitalized version of it and if it wasnt i added 26 frames.
Here is the full code im using.... the | marks where a new line starts

Code:

---

onClipEvent (load) {
        spot = 0;
        line = 0;
        name = "Testing | ok";
        letter_space = 13;
        for (i=0; i<name.length; i++) {
                if (name.substr(i, 1) != "|") {
                        duplicateMovieClip(this.f, "f"+i, i);
                        // this["f"+i]._x = this.f._x-((i+1)*letter_space);
                        this["f"+i]._x = this.f._x+(spot*letter_space);
                        this["f"+i]._y = this.f._y+(line*30);
                        this["f"+i]._xscale = 200;
                        this["f"+i]._yscale = 200;
                        this["f"+i].gotoAndStop("|"+name.substr(i, 1));
                        letter1 = name.substr(i, 1);
                        letter2 = letter1.toUpperCase();
                        trace (letter1 + "-" +letter2);
                        if (letter1 != letter2) {
                                this["f"+i].gotoAndStop(this["f"+i]._currentframe+26);
                        }
                        spot++;
                } else {
                        spot = 0;
                        line++;
                }
        }
}

---

I just need to check if the letter is a space or - or , because then it messes up... then i'll be done with this text thing... i think
Sorry, this is my 3rd post in a row....

if your trying to make it robust then do this:

Code:

---

ass = "abczABCZ";
letter = 0;
lwidth = 20;
function attachLetter(xpos,ypos,code){
        var temp = attachMovie("letter","letter_"+letter,letter);
        temp._x = xpos;
        temp._y = ypos;
        temp.gotoAndStop("frame_"+code)
        letter++;
}

for(var i = 0; i < ass.length;i++){
        attachLetter(i*lwidth,100,ass.charCodeAt(i))       
}

---

And here are the frames and what they should contain (warning warning)

Code:

---

frame_0:
frame_1:

frame_2: 
frame_3: 
frame_4: 
frame_5: 
frame_6: 
frame_7: 
frame_8: 
frame_9:       
frame_10:

frame_11: 
frame_12: 
frame_13:

frame_14: 
frame_15: 
frame_16: 
frame_17: 
frame_18: 
frame_19: 
frame_20: 
frame_21: 
frame_22: 
frame_23: 
frame_24: 
frame_25: 
frame_26: 
frame_27: 
frame_28: 
frame_29: 
frame_30: 
frame_31: 
frame_32: 
frame_33: !
frame_34: "
frame_35: #
frame_36: $
frame_37: %
frame_38: &
frame_39: '
frame_40: (
frame_41: )
frame_42: *
frame_43: +
frame_44: ,
frame_45: -
frame_46: .
frame_47: /
frame_48: 0
frame_49: 1
frame_50: 2
frame_51: 3
frame_52: 4
frame_53: 5
frame_54: 6
frame_55: 7
frame_56: 8
frame_57: 9
frame_58: :
frame_59: ;
frame_60: <
frame_61: =
frame_62: >
frame_63: ?
frame_64: @
frame_65: A
frame_66: B
frame_67: C
frame_68: D
frame_69: E
frame_70: F
frame_71: G
frame_72: H
frame_73: I
frame_74: J
frame_75: K
frame_76: L
frame_77: M
frame_78: N
frame_79: O
frame_80: P
frame_81: Q
frame_82: R
frame_83: S
frame_84: T
frame_85: U
frame_86: V
frame_87: W
frame_88: X
frame_89: Y
frame_90: Z
frame_91: [
frame_92: \
frame_93: ]
frame_94: ^
frame_95: _
frame_96: `
frame_97: a
frame_98: b
frame_99: c
frame_100: d
frame_101: e
frame_102: f
frame_103: g
frame_104: h
frame_105: i
frame_106: j
frame_107: k
frame_108: l
frame_109: m
frame_110: n
frame_111: o
frame_112: p
frame_113: q
frame_114: r
frame_115: s
frame_116: t
frame_117: u
frame_118: v
frame_119: w
frame_120: x
frame_121: y
frame_122: z
frame_123: {
frame_124: |
frame_125: }
frame_126: ~
frame_127: 
frame_128: ?
frame_129: �
frame_130: ?
frame_131: ?
frame_132: ?
frame_133: ?
frame_134: ?
frame_135: ?
frame_136: ?
frame_137: ?
frame_138: ?
frame_139: ?
frame_140: ?
frame_141: �
frame_142: ?
frame_143: �
frame_144: �
frame_145: ?
frame_146: ?
frame_147: ?
frame_148: ?
frame_149: ?
frame_150: ?
frame_151: ?
frame_152: ?
frame_153: ?
frame_154: ?
frame_155: ?
frame_156: ?
frame_157: �
frame_158: ?
frame_159: ?
frame_160: _
frame_161: ¡
frame_162: ¢
frame_163: £
frame_164: ¤
frame_165: ¥
frame_166: ¦
frame_167: §
frame_168: ¨
frame_169: ©
frame_170: ª
frame_171: «
frame_172: ¬
frame_173: _
frame_174: ®
frame_175: ¯
frame_176: °
frame_177: ±
frame_178: ²
frame_179: ³
frame_180: ´
frame_181: µ
frame_182: ¶
frame_183: ·
frame_184: ¸
frame_185: ¹
frame_186: º
frame_187: »
frame_188: ¼
frame_189: ½
frame_190: ¾
frame_191: ¿
frame_192: À
frame_193: �
frame_194: Â
frame_195: Ã
frame_196: Ä
frame_197: Ã…
frame_198: Æ
frame_199: Ç
frame_200: È
frame_201: É
frame_202: Ê
frame_203: Ë
frame_204: Ì
frame_205: �
frame_206: ÃŽ
frame_207: �
frame_208: �
frame_209: Ñ
frame_210: Ã’
frame_211: Ó
frame_212: Ô
frame_213: Õ
frame_214: Ö
frame_215: ×
frame_216: Ø
frame_217: Ù
frame_218: Ú
frame_219: Û
frame_220: Ü
frame_221: �
frame_222: Þ
frame_223: ß
frame_224: Ã*
frame_225: á
frame_226: â
frame_227: ã
frame_228: ä
frame_229: å
frame_230: æ
frame_231: ç
frame_232: è
frame_233: é
frame_234: ê
frame_235: ë
frame_236: ì
frame_237: Ã*
frame_238: î
frame_239: ï
frame_240: ð
frame_241: ñ
frame_242: ò
frame_243: ó
frame_244: ô
frame_245: õ
frame_246: ö
frame_247: ÷
frame_248: ø
frame_249: ù
frame_250: ú
frame_251: û
frame_252: ü
frame_253: ý
frame_254: þ
frame_255: ÿ

---

EDIT> The reason this is robust is it refers to the letters from their ASCII values, therefore you can use all punctuation and you dont have to code special cases.

Okay... I don't know if this will help you... but I decided to take this idea and make something, well make it more flexible and complex..

SO, I wrote some code that can be included in any game or .fla and allows you to easily create text using a GIF MC palatte.

HOW TO USE:
I don't have much documentation or commenting yet.
Basicaly, all you need to know is, this code will support multiple fonts. What you have to do is create an MC with your font in it... I only have it set up for letters and spaces right now, altough the code can be made to handle any character.

ie. a MC with a,b,c,d,e,...etc in frames 1-26, then A,B,C,D...etc in frame 27-whatever (lol), then a space in the next frame.

Then, set up the order of your character is GIF_FONTS.order (thus, this will be the order for ALL your fonts).

ie. GIF_FONTS.order["lowerCase","space"];
then define the ascii values for the characters...
ie. GIF_FONTS.lowerCase = {MAX:

well.. I will continue later SORRY... really kinda tired.. but believe you me... it IS flexible and I think would be quite nice.. see... once your fonts are set up.. all you have to do is use a pre build Class I made and just give it text then say myInst.drawText() and boom... it shows it....

-Phil

Just adding on to your code d3s_inc...

Its pretty much yours, but removing the sluggish code to check if fonts are uppercase/lowercase, and not worrying about them, instead sending the MC to the ASCII frame for that letter.

okay... FINE! j/k
right.. suppose that works, but the reason I had that other code was: I don't feel like all those dang blanks..... in the font MC i mean... but okay okay... if you like blanks I suppose I can live with it :)


was it really that slow ?.....

Nah I was overacting when I said "sluggish".

Yours was an excellent implementation of the problem.

However I noticed that when you use LARGE chunks of text, you dont want to have flash hanging up. By saving say.. 10 lines of code per letter (not having to go thru your char function) over time that is a large saving, one which I prefer over a large slab of blanks in the font MC.

suppose your right... just took... so ... long to get that other code all sorted out... and flexible.... ..... ....... :(

Sorry :(

eh! oh well. Besides this method makes editing of the font a lot easier... it should still support multiple fonts, its faster, and all you give up is not having to put spaces... Well. I added 2 functions to the class:

textLength < gives you the length in Pixels of the text
deletText() < delets the text from display . A must for animation and updating text =)
update() < which updates things in the class. right now it only updates the textLength..


And I made a bit of text animation to prove that this script is good! :D

OMG! I hate this forum script. HATE IT HATE IT HATE IT HATE IT! I wrote all this stuff out on the new version of the code I wrote, and now... I attached the .fla that was a little too big and boom.. its all gone!

Well, the major points: you can have fonts where each letter is different width... takes a bit of code to customize alll those letters but works... I have an example in the .fla of a font where certain letters a smaller, such as the I and . and letters a bigger such as W and M.

Also, there are TYPES. All upper case, all lower case, normal. Thus it makes sure you text is iehter all upper case, all lower case or just normal.

I will upload .fla to my website...

http://www.d3s.net/phil/GIF_FONTS.fla