Drawing text filled with a texture instead of a solid color

Questions about the LÖVE API, installing LÖVE and other support related questions go here.
Forum rules
Before you make a thread asking for help, read this.
Post Reply
hoistbypetard
Prole
Posts: 26
Joined: Fri May 22, 2020 7:00 pm

Drawing text filled with a texture instead of a solid color

Post by hoistbypetard » Fri May 22, 2020 7:27 pm

I'm pretty new to LÖVE and to lua, so please point out if I'm missing something even if it seems really obvious.

For a title screen, I want to draw some text on the screen, such that the fill pattern on the letters is an image rather than a solid color. Think of something like this:
textfill.love
(117 KiB) Downloaded 20 times
My first thought was to use stencils for it, but that didn't work out well. After trying a few different things, I settled on drawing the background to one canvas, drawing the text to another, and using mapPixel.

Code: Select all

function MaskImageWithText(image, font, text, x, y)
    local texture_x = x or 0
    local texture_y = x or 0
    local text_drawable = love.graphics.newText(font, text)
    local text_width = text_drawable:getWidth()
    local text_height = text_drawable:getHeight()
    local text_canvas = love.graphics.newCanvas(text_width, text_height)
    local texture_canvas = love.graphics.newCanvas(text_width, text_height)
    local texture_quad = love.graphics.newQuad(texture_x, texture_y, text_width, text_height, image:getDimensions())
    love.graphics.setCanvas(texture_canvas)
    love.graphics.setColor(1.0, 1.0, 1.0, 1.0)
    love.graphics.draw(image, texture_quad, 0, 0)
    love.graphics.setCanvas()
    love.graphics.setCanvas(text_canvas)
    love.graphics.setColor(1.0, 1.0, 1.0, 0.0)
    love.graphics.rectangle('fill', 0, 0, text_width, text_height)
    love.graphics.setColor(0.0, 0.0, 0.0, 1.0)
    love.graphics.draw(text_drawable, 0, 0)
    love.graphics.setCanvas()
    local texture_image_data = texture_canvas:newImageData()
    local text_image_data = text_canvas:newImageData()
    text_image_data:mapPixel(
        function(x,y,r,g,b,a)
            if a ~= 0 then
                return texture_image_data:getPixel(x,y)
            else
                return r,g,b,a
            end
        end
    )
    return love.graphics.newImage(text_image_data)
end

function love.load()
    textureImage = love.graphics.newImage('graphics/propaganda_goo.jpg')
    textureImage:setWrap('repeat', 'repeat')
    texturedText = MaskImageWithText(
        textureImage,
        love.graphics.newFont('fonts/Turtles.ttf', 128),
        'TURTLES'
    )
end

function love.draw()
    tX = math.floor(WINDOW_WIDTH/2 - texturedText:getWidth()/2)
    tY = math.floor(WINDOW_HEIGHT/2 - texturedText:getHeight()/2)
    love.graphics.setColor(1.0, 1.0, 1.0, 1.0)
    love.graphics.draw(texturedText, tX, tY)
end

I'm relatively happy with the result. Is there a more standard way to do this, and does anyone see something that's likely to bite me here?

I've attached the .love archive for anyone who wants to play with it.

grump
Party member
Posts: 612
Joined: Sat Jul 22, 2017 7:43 pm

Re: Drawing text filled with a texture instead of a solid color

Post by grump » Fri May 22, 2020 10:32 pm

Here's a simpler solution with a shader. The texturing depends on the screen position of the text with this code though, which can be easily fixed if required.
Attachments
textfill2.love
(116.74 KiB) Downloaded 21 times

hoistbypetard
Prole
Posts: 26
Joined: Fri May 22, 2020 7:00 pm

Re: Drawing text filled with a texture instead of a solid color

Post by hoistbypetard » Fri May 22, 2020 11:06 pm

Thanks! That's much neater. And it looks a lot like how I'd hoped the stencil I was trying at first would work.

I'm going to have to throw that shader language on the pile of things I want to learn more about. Is there any introductory material for GLSL (with or without LÖVE) which you consider especially good?

User avatar
4vZEROv
Citizen
Posts: 90
Joined: Wed Jan 02, 2019 8:44 pm

Re: Drawing text filled with a texture instead of a solid color

Post by 4vZEROv » Sat May 23, 2020 2:29 am

hoistbypetard wrote:
Fri May 22, 2020 11:06 pm
Thanks! That's much neater. And it looks a lot like how I'd hoped the stencil I was trying at first would work.

I'm going to have to throw that shader language on the pile of things I want to learn more about. Is there any introductory material for GLSL (with or without LÖVE) which you consider especially good?
https://thebookofshaders.com/
https://www.shadertoy.com/

Post Reply

Who is online

Users browsing this forum: Google [Bot] and 47 guests