visualy tracking coordinate areas for sprites [Solutions Provided]

[klewis]

Hello, my name is klewis and I am new to the community. I just want to say how awesome love2d is going for me so far. I pretty excited with the workflow process of building up games through the language. I'm in the midst of creating a zombie game that includes some sprite characters.

Here is my progress so far:

Code: Select all

function love.load()
    sprites = {}
    sprites.player = love.graphics.newImage('sprites/player.png')
    sprites.bullet = love.graphics.newImage('sprites/bullet.png');
    sprites.zombie = love.graphics.newImage('sprites/zombie.png');
    sprites.background = love.graphics.newImage('sprites/background.png');

    player = {}
    player.x = 600
    player.y = 200
    player.speed = 3
end

function love.update(dt)
    if love.keyboard.isDown("s") then
        player.y = player.y + player.speed
    end
    if love.keyboard.isDown("w") then
        player.y = player.y - player.speed
    end
    if love.keyboard.isDown("s") then
        player.y = player.y + player.speed
    end
     if love.keyboard.isDown("a") then
        player.x = player.x - player.speed
    end
    if love.keyboard.isDown("d") then
        player.x = player.x + player.speed
    end
end

function love.draw()
    love.graphics.draw(sprites.background, 0, 0)
    love.graphics.draw(sprites.player, player.x, player.y) 
 end

..How can I enable something like a "debug mode" that shows me the actual spacial coordinates of the space that my sprite character taking up? In other words, I want to visually see an outline of the space that sprites take up.

* This will help me visually see that he is sitting on the top left of his given area by default
* It will also help me see (later) at what point collisions happen.

Is this possible with love2d?

Thanks!

[master both]

Hi, welcome to the forums
The simplest solution for this is to actually draw the outline with a rectangle.

Code: Select all

function love.load()
    sprites = {}
    sprites.player = love.graphics.newImage('sprites/player.png')
    sprites.bullet = love.graphics.newImage('sprites/bullet.png');
    sprites.zombie = love.graphics.newImage('sprites/zombie.png');
    sprites.background = love.graphics.newImage('sprites/background.png');

    player = {}
    player.x = 600
    player.y = 200
    player.speed = 3
    -- get the sprite dimensions
    player.width = sprites.player:getWidth()
    player.height = spritse.player:getHeight()
end

function love.update(dt)
    if love.keyboard.isDown("s") then
        player.y = player.y + player.speed
    end
    if love.keyboard.isDown("w") then
        player.y = player.y - player.speed
    end
    if love.keyboard.isDown("s") then
        player.y = player.y + player.speed
    end
     if love.keyboard.isDown("a") then
        player.x = player.x - player.speed
    end
    if love.keyboard.isDown("d") then
        player.x = player.x + player.speed
    end
end

function love.draw()
    love.graphics.draw(sprites.background, 0, 0)
    love.graphics.draw(sprites.player, player.x, player.y) 
    -- draw sprite outline
    love.graphics.rectangle("line", player.x, player.y, player.width, player.height)
 end

Good luck

[raidho36]

Alternatively, you can use a shader that will draw a rectangle (or sprite edge) outline, auxiliary debug texture, a debug color filling, and million other things.

Sobel filter with a small tweak (read alpha difference and output it as color) can draw a sprite outline. Vingette filter with some of its math removed and tweaked (remove quadratic distance and apply a multiplier) will draw an outline or a fill. Drawing auxiliary debug textures can be done by simply sampling a second texture passed through a custom shader uniform, and mixing the color into the output.

[ReFreezed]

love.graphics.setWireframe may be of interest.

[klewis]

Thank you so much for the rich feedback. I will research each approach and test things on my end. This definitely gives me opportunities to dig into the framework!