samedi 21 mars 2015

Fast method for scrolling looping backgrounds in javascript?


Do you know a fast method for scrolling looping backgrounds in javascript ?

enter image description here


I use fillRect with a pattern, like :



x += 2 ; if( x >= pattern_width ){ x -= pattern_width ; }
y += 1.5 ; if( y >= pattern_height ){ y -= pattern_height ; }
ctx.fillStyle = background_pattern ;
ctx.fillRect( -pattern_width+x , -pattern_height+y , game_width , game_height );


The problem is that fillRect is very slow, it alone takes 24% in the profiler though it is called only once per frame, that is huge.

I tried calling drawImage() in a for loop instead but it is about as slow.

I thought about prerendering each frame of the loop on invisible canvases, but it would take many 1024x600 canvases : bad idea.


Do you know a fast method ?





Aucun commentaire:

Enregistrer un commentaire