Fill Patterns?

General discussion about LÖVE, Lua, game development, puns, and unicorns.
Post Reply
pestocat
Prole
Posts: 11
Joined: Fri Aug 17, 2018 7:53 pm

Fill Patterns?

Post by pestocat »

Pico-8 has this nifty feature called fill patterns where you can fill only certain parts of a shape and leave others transparent, or set to another color:
fillpatterns.png
fillpatterns.png (165.56 KiB) Viewed 4468 times

Can anyone think of a way to do something like this in LOVE?
User avatar
pgimeno
Party member
Posts: 3544
Joined: Sun Oct 18, 2015 2:58 pm

Re: Fill Patterns?

Post by pgimeno »

Hi, welcome to the forums.

I'm not sure if you mean something like what love.graphics.stencil (and its companion love.graphics.setStencilTest) does. With these functions, you draw a mask onto a special surface, the stencil, and then set the stencil test so that all drawing operations will only touch the pixels which you decide.
Manyrio
Prole
Posts: 29
Joined: Sat Feb 06, 2016 10:12 am

Re: Fill Patterns?

Post by Manyrio »

I think you could do something like this using shaders and stencils.
For exemple, to make a grid pattern you could discard on x and y axis every two pixels a pixel.

Sorry for my english
function love.load() end
function love.update(dt) end
function love.draw() end
pestocat
Prole
Posts: 11
Joined: Fri Aug 17, 2018 7:53 pm

Re: Fill Patterns?

Post by pestocat »

Cool ideas thanks!
pestocat
Prole
Posts: 11
Joined: Fri Aug 17, 2018 7:53 pm

Re: Fill Patterns?: Got it!

Post by pestocat »

I got something that works just like I wanted:
Screen Shot 2018-09-01 at 6.35.02 PM.png
Screen Shot 2018-09-01 at 6.35.02 PM.png (60.49 KiB) Viewed 4199 times
Here's the code incase anyone is interested, it's based on the example for stencils in the wiki.

main.lua:

Code: Select all

local function myStencilFunction()
  for i=0, love.graphics.getWidth(), 10  do
    for j = 0, love.graphics.getHeight(), 10 do
      love.graphics.rectangle("fill", i, j, 5, 5)
    end
  end
end
 
function love.draw()
    -- draw a rectangle as a stencil. Each pixel touched by the rectangle will have its stencil value set to 1. The rest will be 0.
    love.graphics.stencil(myStencilFunction, "replace", 1)
 
   -- Only allow rendering on pixels which have a stencil value greater than 0.
    love.graphics.setStencilTest("greater", 0)
 
    love.graphics.setColor(1, 0, 0, 0.45)
    love.graphics.circle("fill", 300, 300, 150, 50)
 
    love.graphics.setColor(0, 1, 0, 0.45)
    love.graphics.circle("fill", 500, 300, 150, 50)
 
    love.graphics.setColor(0, 0, 1, 0.45)
    love.graphics.circle("fill", 400, 400, 150, 50)
 
    love.graphics.setStencilTest()
end
Post Reply

Who is online

Users browsing this forum: Bing [Bot], Google [Bot] and 51 guests