[Lua Tutorial] So you wanna different font..

[arrggg]

Pixel Fonts:
~~~~~~~
First things first I want to say I learned/stole/modified alot of this stuff from LuMo ( http://lumo.at.tt )

Okay, We need to find a font to download: I found some good fonts here
http://lumo2000.lu.funpic.de/?action=fonts
(careful some of the pics are bigger then 512 so won't work)

I chose the font called "bmf02_007.png"
It is a font that contains charactor that are exactly 8 pixels high and 8 pixels wide for each charactor. So we need to tell this to our program

Code: Select all

font = Image.load("bmf02_007.png")
LetterPixelsWide = 8
LetterPixelsTall = 8

Next we need to tell our program what order the letters are in (note that the charactors " and ' are in our letter set so we use the double brackets to define our string)

Code: Select all

InputString = &#91;&#91; !"#$%&'&#40;&#41;* ,-./0123456789&#58;;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ&#93;&#93; 

next copy these functions for use in our program (you shouldn't have to change these)

Code: Select all

function char2font(char_input) 
	
	IndexNumber = 0
	for i = 1, string.len(InputString) do
		if string.sub(InputString, i,i) == char_input then
			return IndexNumber
		end -- end if
		IndexNumber = IndexNumber + LetterPixelsWide
	end -- end if
	return 0
end
function blitChar(target, char, posx, posy)
	target:blit(posx,posy, font,char2font(char),0,LetterPixelsWide,LetterPixelsTall,true)
end
function blitString(myTarget, possx, possy, thestring)
	incX = 0
	for w = 1, string.len(thestring) do
	blitChar(myTarget, string.upper(string.sub(thestring, w,w)), possx + incX, possy)
		incX = incX + LetterPixelsWide
	end -- end for
end

*special note: You see the string.upper() command? that because our font set only has uppercase letters, if it would have had lowercase as well as uppercase we could get rid of that function, likewise if our font set only had lowercase letters then we would want to change that to string.lower()

To get our new font to print we can now use the command:

Code: Select all

blitString(screen, 10, 10, "Hello World")

screen is where we are putting the font image.
10, 10 is the x and y cordinates where this is going to print
"Hello World" is what we are going to print

Now lets test everything out:

Code: Select all

-- Global Variables
font = Image.load("bmf02_007.png")
LetterPixelsWide = 8
LetterPixelsTall = 8
InputString = &#91;&#91; !"#$%&'&#40;&#41;* ,-./0123456789&#58;;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ&#93;&#93; 

--Functions
function char2font&#40;char_input&#41; 
	
	IndexNumber = 0
	for i = 1, string.len&#40;InputString&#41; do
		if string.sub&#40;InputString, i,i&#41; == char_input then
			return IndexNumber
		end -- end if
		IndexNumber = IndexNumber + LetterPixelsWide
	end -- end if
	return 0
end -- char2font
function blitChar&#40;target, char, posx, posy&#41;
	target&#58;blit&#40;posx,posy, font,char2font&#40;char&#41;,0,LetterPixelsWide,LetterPixelsTall,true&#41;
end -- blitChar
function blitString&#40;myTarget, possx, possy, thestring&#41;
	incX = 0
	for w = 1, string.len&#40;thestring&#41; do
	blitChar&#40;myTarget, string.upper&#40;string.sub&#40;thestring, w,w&#41;&#41;, possx + incX, possy&#41;
		incX = incX + LetterPixelsWide
	end -- end for
end -- blitString

--main program
blitString&#40;screen, 10, 10, "Hello World"&#41;
screen&#58;flip&#40;&#41;
screen.waitVblankStart&#40;600&#41;

Okay thats great, but now I want the font "bmf02_003.png"
all we need to change is four little lines:

Code: Select all

font = Image.load("bmf02_003.png")
LetterPixelsWide = 8
LetterPixelsTall = 15
InputString = [[ () ,/12456:@ABCDEFGHIJKLMNOPQRSTUVWXYZ]] 

*Note we got to be careful because this font set has no 3,7,8,9, etc... also instead of a (c) I replaced the charactor @ for it.

We could also change font mid program, just redefine the varables:

Code: Select all

 
-- Global Variables
font = Image.load("bmf02_007.png")
LetterPixelsWide = 8
LetterPixelsTall = 8
InputString = &#91;&#91; !"#$%&'&#40;&#41;* ,-./0123456789&#58;;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ&#93;&#93; 

--Functions
function char2font&#40;char_input&#41; 
	
	IndexNumber = 0
	for i = 1, string.len&#40;InputString&#41; do
		if string.sub&#40;InputString, i,i&#41; == char_input then
			return IndexNumber
		end -- end if
		IndexNumber = IndexNumber + LetterPixelsWide
	end -- end if
	return 0
end -- char2font
function blitChar&#40;target, char, posx, posy&#41;
	target&#58;blit&#40;posx,posy, font,char2font&#40;char&#41;,0,LetterPixelsWide,LetterPixelsTall,true&#41;
end -- blitChar
function blitString&#40;myTarget, possx, possy, thestring&#41;
	incX = 0
	for w = 1, string.len&#40;thestring&#41; do
	blitChar&#40;myTarget, string.upper&#40;string.sub&#40;thestring, w,w&#41;&#41;, possx + incX, possy&#41;
		incX = incX + LetterPixelsWide
	end -- end for
end -- blitString

--main program
blitString&#40;screen, 10, 10, "Hello World"&#41;
font = Image.load&#40;"bmf02_003.png"&#41;
LetterPixelsWide = 8
LetterPixelsTall = 15
InputString = &#91;&#91; &#40;&#41; ,/12456&#58;@ABCDEFGHIJKLMNOPQRSTUVWXYZ&#93;&#93; 
blitString&#40;screen, 10, 100, "Hello World"&#41;
screen&#58;flip&#40;&#41;
screen.waitVblankStart&#40;600&#41;

[Giuliano]

I've made an object to do this aswell if anybody wants.. it's basically the same thing but you can print vertical images too and it allows to have many different kinds of fonts at the same time since it's a reusable object :)

Code: Select all

--#################################
--BITMAP FONT OBJECT
--#################################
bitmapfont = {
               image = {},
               charmap  = " ",
               width = 0,
               height = 0
}

function bitmapfont:new()
   c = {}
   setmetatable(c, self)
   self.__index = self
   return c
end

function bitmapfont:load(filename,charw,charh,tcharmap)
            self.image=Image.load(filename)
            self.height=charh
            self.width=charw
            self.charmap=tcharmap
end

function bitmapfont:findletter(letterl)
   pos=0
   for i=1,string.len(self.charmap) do
      if (string.sub(self.charmap,i,i)==letterl) then
         pos=i
         break
      end
   end
   return pos
end

function bitmapfont:print(x,y,text)
      text=string.upper(text)
      for i=1,string.len(text) do
      letter=string.sub(text,i,i)
         if (letter~=" ") then
            loc=self:findletter(letter)
            if (loc>0) then
               screen:blit(x+((i-1)*self.width),y,self.image,(loc-1)*self.width,0,self.width,self.height,true)
            end
         end
      end
end

function bitmapfont:printvertical(x,y,text)
      text=string.upper(text)
      for i=1,string.len(text) do
      letter=string.sub(text,i,i)
         if (letter~=" ") then
            loc=self:findletter(letter)
            if (loc>0) then
               screen:blit(x,y+(i-1)*self.height,self.image,(loc-1)*self.width,0,self.width,self.height,true)
            end
         end
      end
end

function bitmapfont:printimage(text)
      returnimg=Image.createEmpty(string.len(text)*self.width,self.height)
      text=string.upper(text)
      for i=1,string.len(text) do
      letter=string.sub(text,i,i)
         if (letter~=" ") then
            loc=self:findletter(letter)
            if (loc>0) then
               returnimg:blit((i-1)*self.width,0,self.image,(loc-1)*self.width,0,self.width,self.height,true)
            end
         end
      end
   return returnimg
end

function bitmapfont:printverticalimage(text)
      returnimg=Image.createEmpty(self.width,self.height*string.len(text))
      text=string.upper(text)
      for i=1,string.len(text) do
      letter=string.sub(text,i,i)
         if (letter~=" ") then
            loc=self:findletter(letter)
            if (loc>0) then
               returnimg:blit(0,(i-1)*self.height,self.image,(loc-1)*self.width,0,self.width,self.height,true)
            end
         end
      end
   return returnimg
end

--Main code
font=bitmapfont:new()
font:load("font.png",9,9,"!$_,-./0123456789:;+?ABCDEFGHIJKLMNOPQRSTUVWXYZ")

--Now printing works like this
font:print(10,10,"Hello World") --prints text to the screen

helloworldtxt=font:printimage("Hello World") --creates an image with the text in it.. useful for things such as logo that need to only be created once and can then be blitted to the screen

--there are also font:printimagevertical(text) and font:printimage(x,y,text) which will do the same as above but print the image vertically :)

[arrggg]

Allright, looks great... I need to cleanup my code now.

[LuMo]

nice nice nice :)
i linked it @ my page :))

greets
lumo

[BrokenHeartedLoser]

this needs to be added to lua player tutorials at http://wiki.ps2dev.org/psp:lua_player:tutorial :)

[dkla]

This may sound a bit newbie but... is there any way I can change the aspects of the System font (bold, italic, bigger, smaller, etc) instead of loading in a bitmap font?

[Zenurb]

You can't do that yet.

I'm going to make a font class library soon, including alot of font packs. You will be able to do something like

Code: Select all

Font.print("Text","Font",30,5,300,200,0,false)
-- print(Text,Font,x,y,width,height,align-bitflag,text wrapping to width)
-- align bitflag - 0 - left, 1 - center, 2 - right, 4 - top, 8 - middle, 16 - bottom
-- e.g. 0 + 4 = top left, 1 + 4 = top center, 16 + 2 = bottom right.
-- usual bitflag usage

[LuMo]

You can't do that yet.

I'm going to make a font class library soon, including alot of font packs. You will be able to do something like

Code: Select all

Font.print("Text","Font",30,5,300,200,0,false)
-- print(Text,Font,x,y,width,height,align-bitflag,text wrapping to width)
-- align bitflag - 0 - left, 1 - center, 2 - right, 4 - top, 8 - middle, 16 - bottom
-- e.g. 0 + 4 = top left, 1 + 4 = top center, 16 + 2 = bottom right.
-- usual bitflag usage

LUA or C/C++?

greets

[dkla]

You can't do that yet.

Really? Wow, I guess I'll have to do all that bitmap font stuff after all. I just wanted to use the system font for status text in a bigger typesize and bold. How about something like:

Code: Select all

screen:print(0, 10, "This text is small", black)
system.font.size(18)
system.font.style(bold)
canvas:print(0, 100, "This text is bigger", red)

Oh well, it's nice to dream... :)

[Shine]

With Cairo you can use true type fonts, SVG, rotate and scale images etc. Perhaps a better idea would be to fix this linker bug instead of reimplementing Cairo in Lua.

[Zenurb]

With Cairo you can use true type fonts, SVG, rotate and scale images etc. Perhaps a better idea would be to fix this linker bug instead of reimplementing Cairo in Lua.

Why not try a different library? Seeing as Cairo breaks the linker. Why not try and contact the original developers?

[Zenurb]

You can't do that yet.

I'm going to make a font class library soon, including alot of font packs. You will be able to do something like

Code: Select all

Font.print("Text","Font",30,5,300,200,0,false)
-- print(Text,Font,x,y,width,height,align-bitflag,text wrapping to width)
-- align bitflag - 0 - left, 1 - center, 2 - right, 4 - top, 8 - middle, 16 - bottom
-- e.g. 0 + 4 = top left, 1 + 4 = top center, 16 + 2 = bottom right.
-- usual bitflag usage

LUA or C/C++?

greets

Lua naturally ;)

[Shine]

Why not try a different library? Seeing as Cairo breaks the linker. Why not try and contact the original developers?

It breaks the linker at PSP specific linker code, so would be nice to fix this in the toolchain, even if I don't use Cairo. And perhaps Cairo is faster than libart, which I've already tried and which was too slow.

[jimjamjahaa]

hi all, i needed to use a font in my game and looked at this, and tried to get it to work, but the font i had was longer than 512 pixels, and i think that caused it to break because i get errors on loading the image

so i redid the scripts to allow for multiple fonts and seperation between characters etc.

here are the 3 functions to add to the game

Code: Select all

function get_char_pos(char)

   	char_pos = 0
   	for i = 1, string.len(current_font.input_string) do
      	if string.sub(current_font.input_string, i, i) == char then
         	return(i - 1)
      		end
      	end
   	return 0
	end

function blit_char(target, char, posx, posy)
	xx = get_char_pos(char)
   	target:blit(posx, posy,
	   			current_font.img,
				current_font.xoff + (current_font.xsep + current_font.char_width)*math.mod(xx, current_font.chars_per_line),
				current_font.yoff + (current_font.ysep + current_font.char_height)*math.floor(xx/current_font.chars_per_line),
				current_font.char_width,
				current_font.char_height,
				true)
	end
	
function blit_string(target, posx, posy, thestring)
   	incX = 0
    for w = 1, string.len(thestring) do
   		blit_char(target, string.upper(string.sub(thestring, w,w)), posx + incX, posy)
      	incX = incX + current_font.char_width
   		end
	end

they are based on the original stuff posted.

to add a font, you create a font object as the following

Code: Select all

font1 = {}
font1.img = Image.load("images/font1_strip.png")
font1.char_width = 8   -- width of a character
font1.char_height = 8   -- height of a character
font1.xsep = 0   -- horisontal separation in pixels between chars in the strip
font1.ysep = 0   -- verticle seperation in pixels between chars in the strip
font1.xoff = 0   -- x offset in pixels
font1.yoff = 0   -- y offset in pixels
font1.chars_per_line = 40   -- number of characters per line of your strip
font1.input_string = &#91;&#91; !"#$%&'&#40;&#41;* ,-./0123456789&#58;;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ&#93;&#93;

you set which font to draw in by setting the global variable current_font

ie

Code: Select all

current_font = font1
blit_string(screen, 10, 10, "hello world")
current_font = font2
blit_string(screen, 10, 20, "hello world")

the strip that goes with "font1" described above is this


(it has a transparent background so u cant see it very well)


i hope this saves people some headaches trying to figure out why their larger fonts were not working :)

[Durante]

I also made my own bitmap font class from scratch, it has the following differences (IMHO improvements ;)) from what's offered above:

• Alway renders to screen (much faster in my opengl lua player, could be changed easily)
• Multiline string format, in case you want larger characters
• Optimized inner loop for rendering, should be much faster than any of the above
• Clean encapsulation :P
• Centered text printing
• Multiline text printing (\n)

Here's the code:

Code: Select all

Font = {
	image = nil,
	hSize = 8, -- horizontal size of a char
	lSpace = 2, -- line spacing
	vPos = {0, 10, 21}, -- vertical positions of the lines
	vSize = {10, 10, 10} -- vertical size of the lines
}

function Font:new(file)
	f = {}
	setmetatable(f, self)
	self.__index = self
	f.image = Image.load(file)
	return f
end

function Font:width(text, start)
	local w = (string.find(text, "\n", start) or string.len(text)) - (start or 0)
	return w * self.hSize
end

function Font:print(text, x, y, centered)
	local ox = x
	if centered then 
		x = ox - self:width(text)/2
	end
	
	local hs, vp1, vp2, vp3, vs1, vs2, vs3 =
		self.hSize,
		self.vPos[1], self.vPos[2], self.vPos[3], 
		self.vSize[1], self.vSize[2], self.vSize[3]
	local b
	for i=1, string.len(text) do
		b = string.byte(text, i)
		if b >= 97 then
			b = b - 97
			screen:blit(x, y+1, self.image, b*hs, vp2, hs, vs2)
		elseif b >= 65 then
			b = b - 65
			screen:blit(x, y, self.image, b*hs, vp1, hs, vs1)
		elseif b >= 33 then
			b = b - 33
			screen:blit(x, y, self.image, b*hs, vp3, hs, vs3)
		elseif b == 10 then -- newline
			y = y + vs1 + self.lSpace
			x = centered and (ox - self:width(text, i+1) / 2 - hs*1.5) or ox
		end
		x = x + hs
	end
end

Usage:

Code: Select all

Vera = Font:new("veramono.png")
Vera:print("Hello World!\nHello Lua!", SCREEN_WIDTH/2, SCREEN_HEIGHT/2, true)

I strongly suggest you use something similar to this if you want to print dynamic stuff during your game loop ;)

[Art]

I used this tutorial with success, thanx :)
(putting a chosen font in my code)
Art.

[dkla]

Very nice indeed, but what about using two (or more) different sized fonts? How would you modify this class to accept any sized font (say from http://lumo2000.lu.funpic.de/?action=fonts)? What are the three parameters in the vPos and vSize properties, and how would you change those to accept different fontsizes?

Also, are you assuming the PNG file is in the format of monospaced characters in the following order:

[[ !"#$%&'()* ,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ]]

and if so, how should I format my PNG file so it matches up with your code?

Thanks for your help.




P.S. Watch for my cool Lua Sudoku game... coming soon! :)

[Durante]

I do use two different fonts (you can easily use n different ones, at least as long as psp memory permits ;)) with a slightly updated version of this code in Crystalise, so you can just look there.
The characters are split on 3 lines to make bigger fonts possible inside the 512 pixel width limit. vPos and vSize specify the starting position and size of each of these lines.

[dkla]

Thanks for the tips-- it is quite helpful. However, the class you wrote uses a screen.setTint() method that (according to your comments in another thread) do not exist in this version of Luaplayer. I commented out the two lines containing setTint() in your fonts.lua file and all works well. Looking forward to a version of Luaplayer that supports the method.

Nice game, by the way-- kinda reminds me of the old "Qix" arcade game from the 80's. Also, very nice coding-- you must obviously be a CompSci major! :)

[Durante]

However, the class you wrote uses a screen.setTint() method that (according to your comments in another thread) do not exist in this version of Luaplayer.

Ah yes, I overlooked that. Sorry.

I commented out the two lines containing setTint() in your fonts.lua file and all works well. Looking forward to a version of Luaplayer that supports the method.

Good. The method setTint multiplies all color values blitted to the screen with the given color (so white is neutral). It is used extendively in Crystalise, but you really need hardware accelerated 2D drawing to implement it as it would be unusably slow otherwise. Still, I think it's very useful especially considering the limited texture space on the PSP.

Nice game, by the way-- kinda reminds me of the old "Qix" arcade game from the 80's. Also, very nice coding-- you must obviously be a CompSci major! :)

Thanks, and you're right, I actually have a Bachelor's in CS.

[erifash]

My first good script in Lua, I have combined the tutorial's script with Durante's Crystalise font functions. For the font, I will use bmf02_027.png from http://lumo2000.lu.funpic.de/?action=fonts.

I do not have a psp yet, as I am waiting for the gigapack release (USA) so I need someone to test this.

Code: Select all

-------------
-- erifash --
-------------


Font = {
	image = nil,
	sFont = &#91;&#91; !"#$%&'&#40;&#41;* ,-./0123456789&#58;;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ&#93;&#93;
	hSize = 6, -- horizontal size of a char
	vSize = 7, -- vertical size of a char
	lSpace = 2, -- line spacing
	iPos = 0 -- vertical start of chars
	LEFT = nil, CENTER = 1, RIGHT = 2, -- for alignment 
	dest = screen -- where to draw
&#125;

function Font&#58;new&#40;file, tab&#41;
	f = tab or &#123;&#125;
	setmetatable&#40;f, self&#41;
	self.__index = self
	f.image = Image.load&#40;file&#41;
	return f
end

function Font&#58;width&#40;text, start&#41;
	local w
	w = string.find&#40;text, "\n", start&#41;
	if w then w = w-1
	else w = string.len&#40;text&#41; end
	if start then w = w - start + 1 end
	return w * self.hSize
end

function Font&#58;height&#40;text&#41;
	local nl = 1
	for _ in string.gfind&#40;text, "\n"&#41; do nl = nl +1 end
	return nl * &#40;self.vSize+ self.lSpace&#41;
end

function Font&#58;setDest&#40;d&#41;
	d = d or screen
	self.dest = d
end

function Font&#58;findChar&#40;char&#41;
	local index = 0
	for i = 1, string.len&#40;self.sFont&#41; do
		if string.sub&#40;self.sFont, i, i&#41; == char then
			return index
		end
		index = index + self.hSize
	end
	return 0
end

function Font&#58;print&#40;x, y, text, align&#41;
	text = string.upper&#40;text&#41;
	local ox = x
	if align == self.CENTER then x = ox - self&#58;width&#40;text&#41;/2 end
	local d, hm, hs, vp, vs =
		self.dest, self.hSize, self.hSize, self.iPos, self.vSize
	local istart, iend, istep, b = 1, string.len&#40;text&#41;, 1, 0
	if align == self.RIGHT then
		hm, istart, iend, istep = -hm, iend, istart, -istep
	end
	for i = istart, iend, istep do
		b = string.byte&#40;text, i&#41;
		if b == 10 then -- newline
			y = y + vs + self.lSpace
			x = &#40;align == self.CENTER&#41; and &#40;ox - self&#58;width&#40;text, i+1&#41; / 2 - hs&#41; or ox
		elseif b ~= 10 then
			d&#58;blit&#40;x, y, self.image, Font&#58;findChar&#40;string.sub&#40;text, i, i&#41;&#41;, vp, hs, vs&#41;
		end
		x = x + hm
	end
end

screen&#58;clear&#40;&#41;

font = Font&#58;new&#40;"bmf02_027.png"&#41;
Font&#58;print&#40;0,0,"&#91;LUA&#93; erifash"&#41;

screen.flip&#40;&#41;
while not Controls.read&#40;&#41;&#58;start&#40;&#41; do
	-- nothing
end

Lua is an awesome language with a lot of potential. I can't wait until they have wifi support.
Tell me what you think!

[c5cha7]

Why Not Test it on the Lua Player Emu?
It work's Perfectly with the font (I havent tried it with your's yet ;) )

[dkla]

The method setTint multiplies all color values blitted to the screen with the given color (so white is neutral).

Do you suppose the SetTint() method could be implemented in Lua? If so, how would you do it?

I'd rather not load four versions of the same font in different colors, when loading one font and changing the tint would be much better...

[dkla]

So I guess this whole thread is now moot since the release of version 0.15 with Freetype support?

[MikeHaggar]

Not all fonts exists as ttf you know... And some ttf ain't free.

[Shine]

Not all fonts exists as ttf you know... And some ttf ain't free.

I think Freetype supports bitmap fonts, too, like BDF. Using standard formats like BDF has the additional advantage that there are programs avaiable, with which you can edit your font and there are already some BDF fonts available. And bitmap fonts are faster than TTF fonts.