Page 1 of 2

Drawing lines around tiles

Posted: Sat Jan 16, 2021 7:42 am
by Gunroar:Cannon()
How can I easily draw lines around tiles (to give it this cartoonish look)? Like tiles in the middle won't have any lines draw around them. Tiles on the ceiling will have a line drawn at their bottom. Tiles at the floor will have lines drawn at their top and tiles at corners will have lines drawn to theirs sides and top/bottom. This is a platformer like game where tiles get placed and destroyed a lot. thnx

Re: Drawing lines around tiles

Posted: Tue Jan 19, 2021 6:28 am
by Gunroar:Cannon()
So no ideas or not enough info?

Re: Drawing lines around tiles

Posted: Tue Jan 19, 2021 8:47 am
by Xii
Usually that's embedded into the tileset graphic, and the technique to lay tiles correctly is called Marching Squares.
I think your question is too vague for more specific assistance.

Re: Drawing lines around tiles

Posted: Tue Jan 19, 2021 1:31 pm
by Gunroar:Cannon()
Thnx for pointing me in the right direction. :)

Re: Drawing lines around tiles

Posted: Tue Jan 19, 2021 4:23 pm
by Gunroar:Cannon()
Ok,so I found a library( https://github.com/phobus/LuaMarchingSquares) But... I'm a little confused ... like always :P . Like what is "data" for? I know the answer was probally in the Wikipedia site somewhere but I couldn't figure it out. I want to ...like ... draw a black line around a square image with love.graphics.line so the image is outlined without making a new image( which looks possible with the whole Marching square thing) so pls explain more...maybe an example (explanation will be enough though). Thnx.
I hope I'm not getting the wrong idea.
(P.s: I don't use a tileset. And the map also isn't gotten from a tiled map (or any map) editor. The tiles get destroyed and replaced by the player a lot)

Re: Drawing lines around tiles

Posted: Tue Jan 19, 2021 8:52 pm
by Xii
Draw up and example image manually with before and after of what you have and what you want.

Re: Drawing lines around tiles

Posted: Tue Jan 19, 2021 9:05 pm
by Gunroar:Cannon()
Hehe...(sweat-smile emoji). I did what I wanted to avoid and did the loops so I fixed it...(thnx for helping tho). I hope this illustrates what I meant (didn't try this first because I was checking if there was a more efficient way so thnx)

Code: Select all

local lgetColor = love.graphics.getColor
local lsetColor = love.graphics.setColor
local function drawAroundTile(x,y,w,h,color,data)
    local r,g,b,a = lgetColor()
    lsetColor(color)
    local drawline = love.graphics.line
    local linew = 0
    local x2, y2 = x+w-linew, y+h-linew
    
    local old = love.graphics.getLineWidth()
    love.graphics.setPointSize(10)--
    love.graphics.setLineWidth(Linew or 0)
    if data.up then
        drawline(x,y,x2,y)
    end
    
    if data.down then
        drawline(x,y2,x2,y2)
    end
    
    if data.left then
        drawline(x,y,x,y2)
    end
    
    if data.right then
        drawline(x2,y,x2,y2)
    end
    
    lsetColor(r,g,b,a)
    love.graphics.setLineWidth(linew)
end

local black = getColor("black")
local dirs = { {1,0}, {-1,0}, {0,1}, {0,-1} }
local vals = { 
    [-1] = {[0]="left"},
    [1]  = {[0]="right"},
    [0]  = {
        [1]="down",
        [-1]="up"
    }
}

function highlightTile(x,y,w,h,color,map)
    local tx, ty = x/w, y/h
    local grid = (map or game.map).grid
    local tile
    local data = {}
    local d, dd, t, dx, dy
    
    for d = 1, 4 do
        dd = dirs[d]
        dx, dy = dd[1], dd[2]
        t = grid[tx+dx] and grid[tx+dx][ty+dy]
        if t and t.isBackground then
            data[vals[dx][dy]] = true
            data.used = true
        end
    end
    
    if data.used then
        drawAroundTile(x,y,w,h,color or black,data)
    end
    data = nil
    grid = nil

end
Now my only question is how to make lines in love thicker (by height)?

Re: Drawing lines around tiles

Posted: Wed Jan 20, 2021 8:32 am
by Xii
Gunroar:Cannon() wrote: Tue Jan 19, 2021 9:05 pm Now my only question is how to make lines in love thicker (by height)?
love.graphics.setLineWidth

Re: Drawing lines around tiles

Posted: Wed Jan 20, 2021 12:00 pm
by Gunroar:Cannon()
Oh, it sets the height too? Thnx!

Re: Drawing lines around tiles

Posted: Wed Jan 20, 2021 12:56 pm
by darkfrei
Gunroar:Cannon() wrote: Tue Jan 19, 2021 4:23 pm Ok,so I found a library( https://github.com/phobus/LuaMarchingSquares)
Very nice library!
But somehow I got wrong connections: