Image Fonts

[Elijah von Bose]

Bitmap Font Rendering Script
Version 1.0
By Paradox, with an immense amount of debugging help from Trickster.

Spoiler: Quick Glimpse at the Default Font in-action

http://img295.imageshack.us/img295/191/bitmapfontscreenooofo9.jpg[/img]

The Purpose of This Script:
This script was created to enhance your displays. You can easily make your own, amazing fonts using this.
The bonus of this script, is that you can easily create amazing, per-pixel full-colour fonts!
But, how can I use it?:
This is more or less a development tool for scripters. It allows for nicer windows, and such.

Adds this method:
Bitmap#bitmap_font(x, y, text, [ font])

Setup:
All you need is at least one font, and one is included with the script. It is Verdana, put into an image. Of course, you can make much fancier ones, but I'm no artist.
Making a font is easy, too: you just create an image, with enough equal spaces for 26 characters (wide) and 3 rows. The example font shows you, as each character has a bounding box of 15x21.
Script:

Spoiler: Version 1.0

#==============================================================================
# Image Fonts
#------------------------------------------------------------------------------
# Author   : Paradox (& Trickster)
# Revision : 1
# Date     : January 2, 2007
#==============================================================================
# ** Bitmap
#------------------------------------------------------------------------------
#  This class is a type pertaining to images.
#==============================================================================
class Bitmap
  #--------------------------------------------------------------------------
  # * Bitmap Font
  #  x    :  the x of the starting letter
  #  y    :  the y of the starting letter
  #  text :  the text to display
  #  font :  the font to render (optional)
  #--------------------------------------------------------------------------
  def bitmap_font(x, y, text, font = 'Verdana')
    # Create the font
    font_image = RPG::Cache.picture(font)
    # Determine sizing.
    char_width  = font_image.width  / 26
    char_height = font_image.height / 3
    # Loop through each letter.
    text.length.times do |index|
      # Get the Byte.
      byte = text[index]
      # Get Letter
      letter = byte.chr
      # If it is a letter
      if letter =~ /[A-Z]/
        iX = (byte - 65) * char_width
        iY = char_height
      elsif letter =~ /[a-z]/
        iX =(byte - 97) * char_width
        iY = 0
      # If it is a number
      elsif letter =~ /[0-9]/
        iX = letter.to_i * char_width
        iY = 2 * char_height
      # Otherwise it's a symbol
      else
        unless letter == ' ' or letter == ''
          # Define the order
          order = ['.', ',', '$', '!', '(', ')', '-', '/', '\\', '?', ';', ':', '#', '&', '"', "'"]
          iX = (order.index(letter) + 10) * char_width
          iY = 2 * char_height
        end
      end
      # If it's not a space, draw it
      if letter != ' ' and letter != ""
        rect = Rect.new(iX, iY, char_width, char_height)
        # Blit it to the screen
        self.blt((index * char_width) + x, y, font_image, rect)
      end
    end
  end
end

Spoiler: Verdana BitFont

http://img402.imageshack.us/img402/2540/verdanaxh4.png[/img]
Extract all fonts you use to the Pictures folder. (Note: RENAME THIS ONE TO Verdana.png!)

Frequently Asked Questions:
How do I change the default font?
You can change it by finding this line in the script:

def bitmap_font(x, y, text, font = 'Verdana')

and changing 'Verdana' to your font's filename.
Future features:
Possibly, more characters and whatnot?
Credit goes to Paradox
And possibly, Trickster as a small mention, if he wills it.

 

[Selwyn]

That's a really nice script you have there.

I think I've found a use for it, but I might change a few lines. Do you mind?

 

[Jstreet]

Hmm a script for better visual quality, with a screenshot in poor quality jpg. Irony lawl.

 

[Taylor]

Would it be possible to make this override the default text drawing, so all text uses the bitmap unless another bitmap is used?

 

[KAIRE]

so pictures in full color can be use to replace the text? demo would be great. maybe a better screenshot example?

 

[rpgmaker]

Can I steal your script too? ^_^

 

[Trickster]

Actually he isn't lying I did help him with this script ^_^

But yeah a another replacement for the time-consuming draw_text method

Be Back with a code analysis (Hehe, And don't think that if you get help from me that you are safe from me )

 

[Elijah von Bose]

Lol! Well, you know. I would've used PNG, but this computer has dial-up, so I tried for most file-squeezing :P
@JerbyTaylor: Uhm... just no (you could, though). It's not the same, and you probably wouldn't like the results. Maybe in a later version.
@KAIRE: Yes pictures in full-color can replace the text. That's what makes it sick.

Thanks for comments! I will be improving the script, as it was written at around 2am-6am :P

 

[KAIRE]

that's cool, can you upload a demo or something cause i really don't quit get where to add "Bitmap#bitmap_font(x, y, text, [ font])" and why is "#bitmap_font(x, y, text, [ font])" comments out? is it suppose to be like that or do i remove the "#"?

 

[Elijah von Bose]

Heh, no, ok. This is why I said it's mainly a tool for scripters. Here's a quick tutorial:

Go to your scripts editor.
Go to the window you want to add it to.
you should see a line that says:

self.contents = Bitmap.new(width - 32, height - 32)

This is creating an instance of the "Bitmap" class. I added this method to the Bitmap class, so to use it, you would add (in the update method, after self.contents.clear) :

self.contents.bitmap_font(x, y, text)
# self.contents being Bitmap, bitmap_font being the method.

Of course, replacing x and y with numbers :P and text with quoted stuff, like "john lawl"

If you need further clarification, you could PM me.

 

[KAIRE]

oh now i get it. thanks, now i just need to make my own image! seems to work great!

 

[Kojiro Ganryu Sasaki]

Does this by any chance support symbols within text?

I'd like something that would allow me to put some item icons within text itself. For example through preset letter combination SYM1, SYM2, SYM3 etc. etc. No one is likely to use those words in dialogue anyway, so they'd be fine to reserve for the symbols.

 

[Me(tm)]

It might be quicker... but I assume this will take more memory?

 

[Axerax]

The easiest way to create fonts is opening a font file of your choice into Adobe Illustrator, then change text to outline, from there you can use the pen tool to alter and generate new text.

 

[Mac]

Yeah as Meâ„¢ said its going to slow down stuff, anything that calls on bitmap usually slows down the game plus also you are caching an image which will also affect it, but then again the script is still very small but i can still imagine it having an affect.

 

[Elijah von Bose]

Actually it's faster than draw_text, as it doesn't do anything other than render the image. It will only take as much memory as your font file. It's better overall. Also, you can make fonts however you wish, I used GG.

Also, on the symbol note: If you want, you could just replace symbols like ; or \, or ), as they're most likely not going to be used. ^-^

 

[Me(tm)]

I have seen the script. I will look into the memory consumation. It is quite a cool script! :D

 

[Mac]

Oooo i never knew that, i shall have to give this a whirl sometime then :D

 

[Noobitron]

Do you have a sample of a picture or can you provide a template of some sort? This script is really neat. Good Job

 

[Elijah von Bose]

I have provided a template, it is within the script box, at the bottom. It is just an image, (any size) which holds enough EQUAL sized spaces for 26 characters across, and 3 rows. For referencing information as to which holds what, see the image I made.