Issue drawing a simple grid

[4gus71n]

Hi everyone!

This is a pretty simple question, basically I just started learning about Love2d and as a "Hello World" project I decided to make pretty simple sprite editor.

This sprite editor is a 32x32 grid where each cell has 32 pixels of height and 32 pixels of width. You have a red cursor and the selected color is hardcoded (red). If you press the space button it should draw the color in the grid.

Everything works fine! The only issue is that is too slow. I mean, is a pretty simple and straightforward test, shouldn't be this slow.

Here's a video of the compiled project:



I'm attaching the source code.

My question is why is this running so slow? I'm suspecting that is because I'm re-drawing the entire grid in the love.draw() hook. But if I don't do that the "dirty" positions where the cursor has been browsing will keep the color of the cursor. And tracking the cursor movements to clean it up later sounds like too much rocket science for this very simple test.

Thanks in advance for any tip or advice!

[4gus71n]

I'm submitting all this to a repo in case that anyone wants to check it https://github.com/4gus71n/PlayingWithLove (I added a color palette picker).

[zorg]

Hi and welcome to the forums!

Drawing a grid can indeed be taxing, and there might be some solutions depending on what functions you want to have work on them:

First, instead of rectangles, you could only draw horizontal and vertical lines, that would reduce draw calls greatly (Nh+Nv lines instead of Nh*Nv squares).
Second, if you want to highlight a square, or maybe a larger grid, it'd still take less resources to just overdraw only those grid parts with squares or lines, whichever would take less drawcalls (one could calculate the point where one begins to be more pricier than the other, but it's not that necessary to do so)
Third, if you'd draw the grid to a screen-sized canvas, and draw that last onto the screen, it could lessen the drawcalls. You'd only need to redraw the grid canvas if things like zoom/rotation would have changed.

To avoid redrawing the grid when you are highlighting/selecting a portion to the grid, you can have a second draw function that only draws the highlights; drawing that on the screen after the canvas has been drawn on.

[4gus71n]

Hey, thanks for replying!

Yeah you were right about:

"To avoid redrawing the grid when you are highlighting/selecting a portion to the grid, you can have a second draw function that only draws the highlights; drawing that on the screen after the canvas has been drawn on."

I didn't know that I could use more than one canvas to draw stuff. Basically what I did was drawing the grid background in a separated canvas and drawing only the cursor and the painted cells in the love.draw() hook.

I hooked up to the love.load() method, draw the grid background there:

Code: Select all

      gridBackgroundCanvas = love.graphics.newCanvas()
      love.graphics.setCanvas(gridBackgroundCanvas)
      
      --Draws the grid background
      for x = 0, this.gridWidth * this.pixelSize, this.pixelSize do
        for y = 0, this.gridHeight * this.pixelSize, this.pixelSize do
          this.drawAlphaGrid(x, y, this.gridWidth, this.gridHeight)
          this.drawGrid(x, y, this.gridWidth, this.gridHeight)
        end
      end
      
      love.graphics.setCanvas()

And in the love.draw() hook I'm only drawing the cursor and the painted colors:

Code: Select all

      --Draw background grid
      love.graphics.draw(gridBackgroundCanvas)
      
      --Draw colors and cursor
      for x = 0, this.gridWidth * this.pixelSize, this.pixelSize do
        for y = 0, this.gridHeight * this.pixelSize, this.pixelSize do
          if (this.hasColorSet(x/this.pixelSize, y/this.pixelSize)) then
            this.drawColor(x, y, this.gridWidth, this.gridHeight)
          end
        end
      end
      this.drawCursor()

This improved a lot the speed. Thanks!!