"Questions that don't deserve their own thread" thread

[Ten]

Long time reader, first time poster.

Our project has transitioned to ShoeBox for packing all of our sprites into one big sheet; I'm currently parsing the .xml file this spits out and making Quads for LÖVE to use. However, now I seem to be unable to use love.graphics.newImageFont as that needs a hard filename, not a quad. Any suggestions? I'd like to accomplish this using built-in methods, but would defer to outside scripts if that was the only way.

[Nixola]

I'd like to accomplish this using built-in methods

If nothing else, you could draw the quad to an appropriately sized canvas and use that as first argument to [wiki]love.graphics.newImageFont[/wiki]; if I'm mistaken about that, you can create a new imageData for the font, use [wiki]ImageData:paste[/wiki] and create a new image out of that.

[Positive07]

EDIT: Reflect the changes made in the wiki that was wrong

[wiki]love.graphics.newImageFont[/wiki] doesn't accept a [wiki]Texture[/wiki], it expects an [wiki]ImageData[/wiki]

We can create an ImageData from a [wiki]Canvas[/wiki] using [wiki]Canvas:getImageData[/wiki], the Canvas should be the same size as the desired image, so we can use the quad viewport through [wiki]Quad:getViewport[/wiki] to get it's dimmensions

Code: Select all

local font
do
   --Get quad dimensions
   local x, y, w, h = quad:getViewport()
   --The canvas has the same dimensions as the quad
   local canvas = love.graphics.newCanvas(w, h)

   love.graphics.setCanvas(canvas)
      --Draw your image with the needed quad
      love.graphics.draw(image, quad, 0, 0)
      --Alternatively you can do
      --love.graphics.draw(image, -x, -y)
      --And don't use the quad at all
   love.graphics.setCanvas()

   --This will be your font
   font = love.graphics.newImageFont(
      canvas:getImageData(),
      glyphs --The glyphs in the font
   )
end

collectgarbage() --Or simply wait until garbage is collected

Alternatively you can use the image directly, here we need to create a new [wiki]ImageData[/wiki] and with dimensions equal to the quad viewport, and an image data from the image using [wiki]Image:getData[/wiki], then we call [wiki]ImageData:paste[/wiki] in the first one with the new image data and the viewport of the quad, we then use the first ImageData as our font image.

This code doesn't really need the quad, just the viewport

Code: Select all

local font

do
   --Get the quad dimensions
   local x, y, w, h = quad:getViewport() --Note that you could just drop the quad and pass: x, y, w, h
   --Create a new ImageData with same dimensions as the quad
   local imagedata = love.graphics.newImageData(w, h)
   --Get the ImageData of the image
   local data = image:getData()

   --Paste the section we need in the new ImageData
   imagedata:paste(data, 0, 0, x, y, w, h)

   --This will be your font
   font = love.graphics.newImageFont(
      imagedata,
      glyphs --The glyphs in the font
   )
end

collectgarbage() --Or wait for the garbage collector

I think that the second method generates more garbage but it may be more performance efficient

[slime]

LOVE supports the BMFont file format with [wiki]love.graphics.newFont[/wiki] - it works with a texture atlas, so if you can write a BMFont text file your texture atlas will work with love.graphics.print and such.

ImageFonts (which are a non-standard format and don't work well with pre-existing texture atlases) accept an ImageData, not a graphics Image. The wiki was incorrect and has been fixed.

[pgimeno]

LOVE supports the BMFont file format with [wiki]love.graphics.newFont[/wiki] - it works with a texture atlas, so if you can write a BMFont text file your texture atlas will work with love.graphics.print and such.

text? The linked documentation describes a binary file format. I'm interested in the BMfont format, but I'm now confused as to what LÖVE expects. Also, searching 'bmfont' in the Debian repository returns no results, so it seems that if I want to use it, I'll have to write my own generation tool.

(Note I'm not the original poster of the question, but your post raised my interest in this font format as it seems to support kerning pairs, making it more useful than LÖVE's image format)

[slime]

text? The linked documentation describes a binary file format. I'm interested in the BMfont format, but I'm now confused as to what LÖVE expects. Also, searching 'bmfont' in the Debian repository returns no results, so it seems that if I want to use it, I'll have to write my own generation tool.

(Note I'm not the original poster of the question, but your post raised my interest in this font format as it seems to support kerning pairs, making it more useful than LÖVE's image format)

It's a text format. There's an additional separate binary format, which LÖVE doesn't support at the moment. Most programs which generate BMFont fonts only export the text format, as far as I know.

[pgimeno]

It's a text format. There's an additional separate binary format, which LÖVE doesn't support at the moment. Most programs which generate BMFont fonts only export the text format, as far as I know.

Thanks. Is there any documentation on the text format anywhere? All I've found is this: http://www.angelcode.com/products/bmfon ... ormat.html but it only describes the binary format.

[slime]

The top half of that page talks about the text format, the bottom half talks about the binary format. I guess it doesn't obviously describe the actual format of the text file though, but if you look at some examples it should be pretty clear. I'm on vacation with very limited internet right now (and typing on my phone) otherwise I'd give an example myself.

[mojimi]

Hey, fairly new into game dev here, I was trying out some grid system that resizes with the screen by drawing 50 squares, but I noticed the bottom of the bottom line and the right of the right line gets cut off a little bit, where's the flaw in my code logic?

main.lua

Code: Select all

-- This can be any image file
img = love.graphics.newImage("/Resources/shape_27.png")

grid = {}

grid.sizex = 32
grid.sizey = 32

grid.countx = 10
grid.county = 5

grid.matrix = {}

-- Populating the matrix with the image
local count = 0
for i = 1, grid.countx do
	local t = {}
	for j = 1, grid.county do
		count = count+1
		t[j] = {text = tostring(count), img = img}
	end
	grid.matrix[i] = t
end

function updateSize(w,h)
	grid.actualSizex = w / grid.countx
	grid.actualSizey = h / grid.county

	grid.scalex = grid.actualSizex / grid.sizex
	grid.scaley = grid.actualSizey / grid.sizey
end

function love.load()
	updateSize(love.graphics.getWidth(),love.graphics.getHeight())
end

function love.resize(w,h)
	print("resizing objects")
	updateSize(w,h)
end

function love.update(dt)

end

function love.draw()
	--Acessing the matrix and drawing each object
	for i, line in ipairs(grid.matrix) do
		for j, obj in ipairs(line) do

			local text = obj.text or "noname"
			local img = obj.img
			-- -1 because it starts at 0,0
			local x = (i-1)*grid.actualSizex
			local y = (j-1)*grid.actualSizey
			local scx = grid.scalex
			local scy = grid.scaley
			if img:typeOf("Image") then
				love.graphics.draw(img,x,y,0,scx,scy)
			end
			love.graphics.print(text,x,y)
		end 
	end
end

[pgimeno]

Hi mojimi, welcome to the forum.

The problem is rounding. You can't expect that grid to look exactly like it would look if it was originally made of tiles and then stretched. That will only happen in certain conditions (exact integer multiples, no bilinear filtering).

You can, however, use a quad to paint the image with repetition instead of drawing it multiple times. Take a look at [wiki](Image):setWrap[/wiki].