akkartik/pothi.love - Change BUFUT2NOLF3GOOFLUEMNFVPOVQNYFYLWWRQWJZ3SKULTSCBXGB5QC

animate load screen using a single canvas

Problem: the previous load screen was glitchy, i.e. slow.

I spent some time paying attention to timings. At 60fps, we have 16.667ms/frame. At 30fps, 33.333ms/frame.

The calls to love.graphics.origin() and love.graphics.clear() in love.run() themselves get us to 15ms/frame.

So there's no way a LÖVE game can run at 60fps on my (fairly recent 1.4GHz) laptop. And even to run at 30fps – there isn't much time per frame.

I considered bumping down to 10fps. But the degradation is visible, particularly during the loading animation.

I considered smearing work across frames, but for the animation we do have situations where we need to render the entire surface. There's nowhere to hide work.

So, canvas. These changes were arrived at after a lengthy process of learning about LÖVE's notion of quads and how they're used for rendering textures. (A canvas is just a texture once you finish rendering to it.)

In case it helps someone else, some documentation on love.graphics.newQuad(x,y, w,h, sw,sh):

sw,sh establishes the coordinate system we're going to live in, from (0,0) to (sw,sh)
x,y is the place to start reading the texture from in this coordinate system.
w,h is the size of the texture to render – NOT in this coordinate system. Just screen/window coordinates. In particular, if the texture's going to fill the window, these should always be screen width/height.

Once you have this quad, the call to love.graphics.draw(canvas, quad, x,y) specifies where to start drawing from in the window coordinates.

All this is what I can understand from experiments. I'm not changing any global settings. No changes to love.graphics.setBlendMode [another gotcha is to setColor(1,1,1) before drawing the canvas], or to Texture:setWrap() [the default wrap mode is clamp, which means areas of the texture outside (0,0) and (sw,sh) take on the values at the boundaries] or anything else I'm ignorant of.

This was hard to debug because I didn't realize I was drawing to a tiny corner of the huge canvas I'd established. I missed that I need to set zoom at 1 when rendering the canvas until very late. Since I was simultaneously trying to figure out the drawing API, I didn't trust I was asking correctly for "show me the whole canvas". Debugging 2 things is hard.

Created by Kartik K. Agaram on January 15, 2023

BUFUT2NOLF3GOOFLUEMNFVPOVQNYFYLWWRQWJZ3SKULTSCBXGB5QC

Dependencies

In channels

main

Change contents

Replacement in 0827-survey_animation at line 4 [2.35]

B:BD[2.185] → [2.185:269]

	local zoom = math.min(App.screen.width/(maxx-minx), App.screen.height/(maxy-miny))

[2.185]

[2.269]

  local zoomx = App.screen.width/(maxx-minx)
  local zoomy = App.screen.height/(maxy-miny)
  local zoom, cw, ch
  if zoomx < zoomy then
    zoom = zoomx
    cw = maxx-minx
    ch = cw*App.screen.height/App.screen.width
  else
    zoom = zoomy
    ch = maxy-miny
    cw = ch*App.screen.width/App.screen.height
  end
  local desired_viewport = Viewport
  Global_viewport = {x=minx, y=miny, w=cw, h=ch, zoom=zoom}
  -- Render the canvas at pixel perfect resolution.
  local winw,winh = App.screen.width, App.screen.height
  App.screen.width,App.screen.height = Global_viewport.w, Global_viewport.h
  Viewport = {x=minx, y=miny, w=cw, h=ch, zoom=1.0}
  A()
  Canvas = love.graphics.newCanvas(cw,ch)
  love.graphics.setCanvas(Canvas)
  App.run_tests = true  -- Hack; disable drawing the menu
  on.draw()
  App.run_tests = nil
  love.graphics.setCanvas()
  App.screen.width,App.screen.height = winw,winh
  -- initialize animation

Replacement in 0827-survey_animation at line 32 [2.35]

B:BD[2.284] → [2.284:421]

		{x=minx, y=miny, w=maxx-minx, h=maxy-miny, zoom=zoom},
		{x=Viewport.x, y=Viewport.y, w=Viewport.w, h=Viewport.h, zoom=Viewport.zoom},

[2.284]

[2.421]

    Global_viewport,
    desired_viewport,

Replacement in 0827-survey_animation at line 40 [2.35]
B:BD[2.583] → [2.583:586]
```
end
```
[2.583]
```
end
```
Replacement in 0825-animate_next_frame at line 16 [3.4545]
B:BD[3.4977] → [3.4977:4980]
```
end
```
[3.4977]
```
end
```
Insertion in 0809-animate_next at line 6 [4.29600]
[4.29758]
[4.29758]
```
      Canvas = nil
      A()
```
Replacement in 0809-animate_next at line 12 [4.29600]
B:BD[4.29817] → [4.29817:29820]
```
end
```
[4.29817]
```
end
```
Insertion in 0807-on.initialize at line 4 [4.32173]
[4.32269]
[4.32269]
```
    A()
```
Replacement in 0807-on.initialize at line 6 [4.32173]
B:BD[4.32275] → [4.32275:32296]
```
		survey_animation()
```
[4.32275]
[4.32296]
```
		survey_animation()  -- calls A internally
```
Replacement in 0807-on.initialize at line 8 [4.32173]
B:BD[4.32301] → [4.32301:32309]
```
	A()
end
```
[4.32301]
```
end
```

Replacement in 0797-on.draw at line 2 [5.2274]

B:BD[5.2296] → [5.2296:2327]

	love.graphics.setColor(1,0,0)

[5.2296]

[5.2327]

  if Animating then
    local q = love.graphics.newQuad((Viewport.x-Global_viewport.x)*Viewport.zoom,(Viewport.y-Global_viewport.y)*Viewport.zoom, App.screen.width, App.screen.height, Global_viewport.w*Viewport.zoom, Global_viewport.h*Viewport.zoom)
    App.color{r=1,g=1,b=1}
    love.graphics.draw(Canvas, q, 0,0)
    return
  end

Replacement in 0797-on.draw at line 43 [5.2274]
B:BD[5.3949] → [5.3949:3952]
```
end
```
[5.3949]
```
end
```

animate load screen using a single canvas

Dependencies

In channels

Change contents

Replacement in 0827-survey_animation at line 4 [2.35]

Replacement in 0827-survey_animation at line 32 [2.35]

Replacement in 0827-survey_animation at line 40 [2.35]

Replacement in 0825-animate_next_frame at line 16 [3.4545]

Insertion in 0809-animate_next at line 6 [4.29600]

Replacement in 0809-animate_next at line 12 [4.29600]

Insertion in 0807-on.initialize at line 4 [4.32173]

Replacement in 0807-on.initialize at line 6 [4.32173]

Replacement in 0807-on.initialize at line 8 [4.32173]

Replacement in 0797-on.draw at line 2 [5.2274]

Replacement in 0797-on.draw at line 43 [5.2274]