HTML5 HTML5 Graphical Glitches

[matharoo]

In our HTML5 game, there's this graphical glitch that occurs when you scroll down past a number of leaderboard entries:



(Not the black part, that's me hiding their identities)

You can see that the whole sprite sheet is visible above entry 49, and that the name is not appearing. The score text is all messed up.

You can also see that entry 50's number is messed up too, only a part of 5 being visible.

The way this works is simple: the entries are inside an array. There's a surface, and the entries are drawn on that surface, offset vertically by a scroll value. Then that surface is drawn to the screen.

Here is the code:

Spoiler: Code

//Draw entries
surface_set_target(surf);
draw_clear_alpha(0, 0);

for(var i=0; i<players; i++){
    var arr = Arr[i];
 
    //Pos
    var xx = x+10;
    var yy = (listH*i) + scrollY;
 
    //Out of view
    if (yy < -listH || yy > height + listH) continue;
 
    draw_set_font(fnt_uiBig);

    //Rank
    draw_set_color(playColor);
    draw_text_center(xx + rankW/2-5, yy + listH/2, string(floor(i+1)), global.sH, global.sH, 0);
    draw_set_color(-1);
 
    draw_set_font(fnt_ui);
    //Image
    if (arr[Ldr.ImageLoaded]){
        gpu_set_texfilter(true);
        draw_sprite_ext(arr[Ldr.Photo], 0, xx + imageX, yy + listH/2, imageScale, imageScale, 0, -1, 1);
        gpu_set_texfilter(false);
    }
 
    var ts = 1.25;
 
    //Name
    draw_set_color(c_black);
    draw_set_halign(fa_left);
    draw_set_valign(fa_middle);
    draw_text_transformed(floor(xx + nameX), floor(yy + listH/2), arr[Ldr.Name], global.sH * ts, global.sH * ts, 0);
 
    //Score
    draw_set_color(c_dkgray);
    draw_set_halign(fa_right);
    draw_text_transformed(floor((xx + width) - 64 * global.sH), floor(yy+listH/2), string(arr[Ldr.Score]) + " Fairies", global.sH * ts, global.sH * ts, 0);
    draw_set_valign(fa_top);
    draw_set_halign(fa_left);
    draw_set_color(-1);
}

surface_reset_target();

//Draw surface
draw_surface(surf, x, y);

So, just simple text and sprite draw calls.

I have tried clearing the asset compiler cache; that did not fix it.
I tried drawing it outside of the surface; that did not fix it.
I also tried not drawing the image; the sprite sheet didn't appear then, of course, but everything was still messed up:



WebGL is enabled, and is required for the game. I think it causes glitches like this, but we can't disable it as it's needed.

 

[MarceloP]

Hello @matharoo,

I believe this is related to my old post.
It seems that this kind of thing happens when you're trying to print (at any point in the code) an invalid character in HTML5. Maybe it's not in the code you just showed us, but it is surely somewhere in your code. Possibly this happens when gamemaker tries to reach a part of the texture page (where are the letters of that font) and can't find the right part. For some reason, in the same draw cycle, every other draw is broken.

If you know the order that you draw stuff, finding the problematic one will surely make all other draws function normally again. I believe only draw_text* functions are causing this, so try commenting one by one and finding the problematic one (the one with an invalid character for the given font).

I really hope this is your problem, because it is simple to fix.
Let us know if any of this work

 

[matharoo]

Hello @matharoo,

I believe this is related to my old post.
It seems that this kind of thing happens when you're trying to print (at any point in the code) an invalid character in HTML5. Maybe it's not in the code you just showed us, but it is surely somewhere in your code. Possibly this happens when gamemaker tries to reach a part of the texture page (where are the letters of that font) and can't find the right part. For some reason, in the same draw cycle, every other draw is broken.

If you know the order that you draw stuff, finding the problematic one will surely make all other draws function normally again. I believe only draw_text* functions are causing this, so try commenting one by one and finding the problematic one (the one with an invalid character for the given font).

I really hope this is your problem, because it is simple to fix.
Let us know if any of this work

Oh! The game is a Facebook game, so it must be those non-English characters in people's names. I'll see what I can do to fix it, thanks!