A way to show text in p5play

text_with_p5play.js

// how to show text and not have it appear
// underneath the game's sprites

let spriteToClick;
let textSpriteToShow;

function setup() {
    let canvas = new Canvas("fullscreen");
    
    spriteToClick = new Sprite(width/2,height/2,128,128,'s');

    textSize(128);
    // make the sprite SUPER tiny
    // so that the original spriteToClick can still
    // be clicked, even when the textSpriteToShow
    // appears on top of it
    textSpriteToShow = new Sprite(width/2,height/2,2,2,'s');
    // luckily, the text shows big (128 px) no matter
    // the size of the sprite
    textSpriteToShow.text = "testing";
    textSpriteToShow.visible = false; // <- until clicked
    // make the sprite invisible, other than the text...
    textSpriteToShow.strokeWeight = 0;
    textSpriteToShow.fill = color(0,0);
}

function draw() {
    clear();

    if (spriteToClick.mouse.pressed()) {
        textSpriteToShow.visible = true;
        // show that the original sprite is still clickable
        // even once the text is shown on top of it
        console.log("clicked!");
    }
}