HTML5 - draw_line is blurred *solved*

M

Mandarieno

Guest
I'm using the draw_line function to draw on a surfaces using the mouse as a pen.
This works fine running the game on windows but running it in HTML5, the lines become blurry as if you are drawing with a brush in windows paint. I have this problem in firefox, chrome and internet explorer.



Any Ideas on how to make it the same way as it works on windows?
 

dphsw

Member
If your HTML5 game supports WebGL, you could draw the lines on a different surface, (where, according to the original thread, they'll still be drawn blurry) but then copy them to your real surface using a custom shader which removes any blurriness. Just replace the standard passthrough fragment shader with something like:
Code:
void main()
{
    gl_FragColor = v_vColour * texture2D( gm_BaseTexture, v_vTexcoord );
    gl_FragColor.a = clamp((gl_FragColor.a - 0.9) * 10000.0, 0.0, 1.0);
}
The '.a' is affecting the alpha value of any pixel, the arithmetic sets any alpha value below 0.9 to below zero and almost anything above that to one, and then it's being clamped to zero or one. (You might be able to set a shader like that before drawing the line at all, but I'm not sure if shaders affect lines. They can in theory, but I don't think they do in GameMaker.) Beware that whatever surface you draw to first would have to be cleared to have an alpha value of zero.


If that doesn't work, you might just have to make your own draw_line function, something like this pseudocode:
Code:
function DrawLine(x1,y1,x2,y2){
    xdiff = x2-x1;
    ydiff = y2-y1;
    diff = max(xdiff,ydiff);
    for(i=0;i<=diff;i++){
        drawpixel(x1+round(xdiff*(i/diff)),y1+round(ydiff*(i/diff)));
    }
}
 
M

Mandarieno

Guest
If your HTML5 game supports WebGL, you could draw the lines on a different surface, (where, according to the original thread, they'll still be drawn blurry) but then copy them to your real surface using a custom shader which removes any blurriness. Just replace the standard passthrough fragment shader with something like:
Code:
void main()
{
    gl_FragColor = v_vColour * texture2D( gm_BaseTexture, v_vTexcoord );
    gl_FragColor.a = clamp((gl_FragColor.a - 0.9) * 10000.0, 0.0, 1.0);
}
The '.a' is affecting the alpha value of any pixel, the arithmetic sets any alpha value below 0.9 to below zero and almost anything above that to one, and then it's being clamped to zero or one. (You might be able to set a shader like that before drawing the line at all, but I'm not sure if shaders affect lines. They can in theory, but I don't think they do in GameMaker.) Beware that whatever surface you draw to first would have to be cleared to have an alpha value of zero.


If that doesn't work, you might just have to make your own draw_line function, something like this pseudocode:
Code:
function DrawLine(x1,y1,x2,y2){
    xdiff = x2-x1;
    ydiff = y2-y1;
    diff = max(xdiff,ydiff);
    for(i=0;i<=diff;i++){
        drawpixel(x1+round(xdiff*(i/diff)),y1+round(ydiff*(i/diff)));
    }
}
I just woke up and played arround with the HTMl5 settings and turned webGL from off, to required. Now the blurr is gone. I should have went through all these little options before posting a thread but somehow I always thought my game didnt run if i enabled webGL. Thank you for the the help tho, I apreciate it :)!
 
Top