How do I compile Macroquad to WASM without the screen constantly flashing?

[Dequog]

Hello, I have been trying to compile my Macroquad project to WASM, but when I do the screen keeps flashing.

Run index.html to reproduce code.zip

[not-fl3]

Thank for the report, will look into the archive later.

Would really appreciate a compact minimal reproducible example! Something that fits into GH comment :)

[Dequog]

Did you not see the code.zip that I added in my original comment?

Or did you mean the source code: https://github.com/Dequog/caveth

[not-fl3]

minimal reproducible example is a little(mininal) piece of code that demonstrates the bug. The first step to fixing the bug in your archive - reduce it to a minimal reproducible example :)

(not to criticize your bug report, just leaving this in case someone will see the issue and will have some time to help)

[macnelly]

@Dequog I think the flickering is caused by loading the font inside of your loop

[macnelly]

@not-fl3 here is a minimal reproduction:

use macroquad::{text::{load_ttf_font, TextParams, draw_text_ex, measure_text}, prelude::{WHITE, BLACK, GRAY}, window::{clear_background, next_frame, screen_width}, shapes::draw_rectangle};

#[macroquad::main("Flickering Example")]
async fn main() {
    let mut x = 0.0;
    let mut dir = 1.0;
    
    loop{
        clear_background(WHITE);
        let font = load_ttf_font("./ui_assets/exprswy_free.ttf").await.unwrap();    
        let text_size = measure_text("Flickering", Some(font), 32, 1.0);
        draw_rectangle(x,100.0,text_size.width,text_size.height,GRAY);
        draw_text_ex(
            &"Flickering",
            x,
            100.0,
            TextParams {
                font_size: 32,
                font_scale: 1.0,
                font,
                color: BLACK,
                ..Default::default()
            },
        );
        x+=dir*1.0;
        if x + text_size.width >= screen_width(){
            dir *= -1.0;
        }
        
        next_frame().await
    }
}

When you move the font loading to before the loop the flickering is gone.

The flickering is caused by loading the font inside the loop. This also happens when you only load the font once (e.g. inside of a button click listener). In most cases it is wrong to load the font inside of loop. But in the case of a click listener this could be correct.

[not-fl3]

@not-fl3 here is a minimal reproduction:

use macroquad::{text::{load_ttf_font, TextParams, draw_text_ex, measure_text}, prelude::{WHITE, BLACK, GRAY}, window::{clear_background, next_frame, screen_width}, shapes::draw_rectangle};

#[macroquad::main("Flickering Example")]
async fn main() {
    let mut x = 0.0;
    let mut dir = 1.0;
    
    loop{
        clear_background(WHITE);
        let font = load_ttf_font("./ui_assets/exprswy_free.ttf").await.unwrap();    
        let text_size = measure_text("Flickering", Some(font), 32, 1.0);
        draw_rectangle(x,100.0,text_size.width,text_size.height,GRAY);
        draw_text_ex(
            &"Flickering",
            x,
            100.0,
            TextParams {
                font_size: 32,
                font_scale: 1.0,
                font,
                color: BLACK,
                ..Default::default()
            },
        );
        x+=dir*1.0;
        if x + text_size.width >= screen_width(){
            dir *= -1.0;
        }
        
        next_frame().await
    }
}

When you move the font loading to before the loop the flickering is gone.

The flickering is caused by loading the font inside the loop. This also happens when you only load the font once (e.g. inside of a button click listener). In most cases it is wrong to load the font inside of loop. But in the case of a click listener this could be correct.

yes, skipping frames without clearing the background might cause flickering

also this exact code will cause memory leak on the font and will work super slow, way better to load resources before entering the loop! If it is impossible to move it out of the loop - better to do it in a coroutine and draw some sort of a "loading" animation while resource is loading. Or, at least, clear the screen while main loop is waiting.

[macnelly]

I think this issue can be closed then because the flickering is caused by wrong usage of macroquad.