AS3 replace string/text with image characters

Question

i am developing the code for a simple game in AS3 and i have all the graphic assets made by a designer.

He wants all the textual messages (i.e. win, lose, lives, etc.) to be done exactly as in the original photoshop drawing, they have lots of visual fx on them.

Since these messages inside the game are dynamic, I tried to use normal textfields and replicate the visual fx with Flash filters, but the result is not even comparable.

I think i could try to export from photoshop a spritesheet with the all the image characters, or the single image characters one by one, and replace my old textfields with sprites/movieclips in which i would load the specific image characters based on the string i need to show to the enduser, but i don't know precisely how to do it.

Does anyone have some hints on how to achieve this result? Better to use a separate class and image library? I googled online hoping to find some class or method alike to customize a little for my needs, but unfortunately i haven't found anything!

Answer 1

Ok, after some more research, i found out my main problem in not finding answers to my problem was the terms of research i was using. I was erroneously looking for "AS3 string replace with images" or "text replace with images in Flash", while the correct question was: "how to use a BITMAP FONT in AS3". I was sure someone else had to do what i'm trying to do (like in old games where texts were all image sprites) but i didn't know how to find it!

So, this is the solution i found, i still have to refine the workflow but it's a good starting point:

1. Create a custom Bitmamp font using the SHOEBOX tool in conjunction with photoshop, where you will be able to apply all the raster fx you want (here's the tutorial: http://renderhjs.net/shoebox/bitmapFont.htm)
2. You will obtain a .fnt file (descriptor) and a .png image (font characters atlas)
3. You will need to flip the png image vertically: apparently, a lot of bitmap text engines work with flipped characters, and i found this one to be working like this as well
4. Once you have these files, use the BMFontRenderer AS3 class to embed your bitmap font into an AS3 project of your choice (tutorial here: http://blog.bengarney.com/2011/12/07/fast-bitmap-fonts-in-flash/)

I hope it will be useful for others who may need to replace standard text in Flash with font images.

Answer 2

You could add all the graphics to the library exporting them with each name.

Than call them when needed creating a MC. If useful, you could store the names in an array and use it to simplify your script (it depends on usage)