Draw Text Overlayed

SDK Get Help
2

The problem is the screen is not getting cleared before each frame. The easiest way to fix this is to add clear() to the beginning of update():

local gfx <const> = playdate.graphics -- at the top of file

function playdate.update()
    gfx.clear(gfx.kColorWhite)
    gfx.drawText("Amount: " .. waterAmount, 5, 5)
end

However, this is not the most optimized way to do it, as using clear() will force the entire screen to refresh every frame. If you enable "Highlight Screen Updates" in the Simulator, you will see the entire screen is highlighted.

A more optimized way to do this is to use the gfx.sprite.setBackgroundDrawingCallback. Here is how it might look:

import 'CoreLibs/sprites' -- at the top of file
local gfx <const> = playdate.graphics -- at the top of file

function myGameSetUp()
    gfx.sprite.setBackgroundDrawingCallback(
        function( x, y, width, height )
            gfx.clear(gfx.kColorWhite)
        end
    )
end

myGameSetUp()

function playdate.update()
	gfx.sprite.update() -- this must happen before drawText()
    gfx.drawText("Amount: " .. waterAmount, 5, 5)
end

This code is based on the Basic Game Template in the documentation. Using this method, you will notice that the only thing that gets redrawn is the text region (and whatever else you are drawing). Make sure you put gfx.sprite.update() before drawing the text, or the background will just draw over it.

4 Likes