looking for a nice text border (outline/stroke) script.

[gcmartijn]

I'm using ttf fonts and that is looking good now.
Inside the 'game' there are various text sizes and maybe multiple fonts.
At this point i'm happy with ttf.

But now I had to add a black solid border around it and 1px is looking oke, but for example a 5 px border is not correct (beautiful).
Before i'm spent several hours in this, I want to know if this is possible.

For example this testing code is used

Code: Select all

        love.graphics.setColor(self.color.border)
        --- draw each font
        for i = 1, self.fontBorderSize do
            self:drawText(self.x, self.y)

            self:drawText(self.x + i, self.y)
            self:drawText(self.x - i, self.y)
            -- self:drawText(self.x, self.y + i)
            -- self:drawText(self.x, self.y - i)
            self:drawText(self.x + i, self.y + i)
            self:drawText(self.x + i, self.y - i)
            self:drawText(self.x - i, self.y - i)
            self:drawText(self.x - i, self.y + i)
        end
        
        love.graphics.setColor(self.color.text)
        self:drawText(self.x, self.y)

Or do I really make the switch to imagefonts and search for a program that works on osx?
I din't like the things I found, and it was not possible to re-use the same font in another fontsize (don't know what size I want to use yet).
Another thing was, that I don't know if it can show the same characters like the ttf font, I think they call it UTF-8.
And there was was another thing that I don't remember anymore. But than I can have beautiful borders around text I guess ?

[eliddell]

I can think of three ways of doing it (using a shader inside Löve, manipulating ImageData inside Löve, editing the actual TTF outside Löve if the license permits). They're all high effort for little return. The shader is probably the most practical, but I know little about them. You could also poke around and see if you can find a font that comes with a built-in outline, or has both filled and outline versions.

What problem are you trying to solve by doing this? Bad contrast against mixed backgrounds? An additional translucent background layer would be much easier to code, if you can tolerate the look. Or sometimes just using bolder/thicker text can be enough, depending. Or stick with the 1px border you already have as much as you can, and consider creating an image font to cover small amounts of large text that need a wider border. Or use a drop shadow, if you don't mind looking really retro.

I'd suggest at least settling on a font size first.

[gcmartijn]

Thanks for the info.
At the moment the text is white on top of the game, and using a black border it looks much better, and more easy to read.

But you say some things I can use, especially the thing about "a font that comes with a built-in outline".
Than I still can use ttf and see how it looks in the game. I din't know a font can have a outline.

I din't have any experience about shaders yet, I will try to find a free ttf with outline first.
Thanks

[eliddell]

Coloured true-type fonts were a big thing at one point during the late 90s—outlined text would be possible using that format. I've never tried using a coloured TTF in Löve, but I have no reason to believe it wouldn't work.

If you do decide to go the shader route, look for "outer glow" shaders—an outline is just a special case of that.

[milon]

Not the most efficient way, but here's a quick-and-dirty option:

Define your outline color and your font color. Then draw the text in the outline color 1 pixel away in all 8 directions (including diagonal). Then set the color to your font color and draw your text without any offset applied. It's 9 times the number of draw calls, but it gets the job done.

Here's an example:

Code: Select all

someText = "Some random piece of text\nHellow, world!"
glowColor = {0, 1, 0}
textColor = {0, 0, 1}

function glowText(glowColor, textColor, text, x, y, r, sx, sy, ox, oy, kx, ky)
    love.graphics.setColor(glowColor)
    love.graphics.print(text, x-1, y-1, r, sx, sy, ox, oy, kx, ky)
    love.graphics.print(text, x, y-1, r, sx, sy, ox, oy, kx, ky)
    love.graphics.print(text, x+1, y-1, r, sx, sy, ox, oy, kx, ky)
    love.graphics.print(text, x-1, y, r, sx, sy, ox, oy, kx, ky)
    love.graphics.print(text, x+1, y, r, sx, sy, ox, oy, kx, ky)
    love.graphics.print(text, x-1, y+1, r, sx, sy, ox, oy, kx, ky)
    love.graphics.print(text, x, y+1, r, sx, sy, ox, oy, kx, ky)
    love.graphics.print(text, x+1, y+1, r, sx, sy, ox, oy, kx, ky)
    love.graphics.setColor(textColor)
    love.graphics.print(text, x, y, r, sx, sy, ox, oy, kx, ky)
end

function love.draw()
    love.graphics.setColor(0, 0, 1)
    love.graphics.rectangle("fill", 30, 10, 50, 50)
    love.graphics.setColor(1, 0, 1)
    love.graphics.circle("fill", 80, 40, 20)
    glowText(glowColor, textColor, someText, 10, 20)
end

[gcmartijn]

Hi Milon,

Something like that was I using (the the first post) but yours is better because its is the correct way (I did miss some x/y points).

Yesterday I was testing a font to bmfont program (https://github.com/vladimirgamalyan/fontbm) and was working/looking oke (but without border yet).

I guess I have to pay in the future for https://www.bmglyph.com or https://www.71squared.com/glyphdesigner

Or use a script (or shader) like yours, I did not test est the output with a 2px (or 3) border.

And I don't know if it is better to user a bmfont (using images) or a ttf font for performance.

[pgimeno]

Using a text object would probably help with performance in this case.

Code: Select all

local textObject = love.graphics.newText(love.graphics.getFont(), ".")

function glowText(glowColor, textColor, text, x, y, r, sx, sy, ox, oy, kx, ky)
    textObject:set(text)
    love.graphics.setColor(glowColor)
    love.graphics.draw(textObject, x-1, y-1, r, sx, sy, ox, oy, kx, ky)
    love.graphics.draw(textObject, x, y-1, r, sx, sy, ox, oy, kx, ky)
    love.graphics.draw(textObject, x+1, y-1, r, sx, sy, ox, oy, kx, ky)
    love.graphics.draw(textObject, x-1, y, r, sx, sy, ox, oy, kx, ky)
    love.graphics.draw(textObject, x+1, y, r, sx, sy, ox, oy, kx, ky)
    love.graphics.draw(textObject, x-1, y+1, r, sx, sy, ox, oy, kx, ky)
    love.graphics.draw(textObject, x, y+1, r, sx, sy, ox, oy, kx, ky)
    love.graphics.draw(textObject, x+1, y+1, r, sx, sy, ox, oy, kx, ky)
    love.graphics.setColor(textColor)
    love.graphics.draw(textObject, x, y, r, sx, sy, ox, oy, kx, ky)
end

[gcmartijn]

Good to know about a NewText object for the future.

owww, wait haha now 'I can connect the dots' I feel stupid haha.

I can create now free correct fmt fonts using the link above.
And the output using both functions are for now oke.

So again this forum and great community solved this case.
I'm happy that I did choose for LOVE.