redrawing canvas html5 without flickering

Question

I've a screen being redraw every 25ms, and images are flickering, here is my code

                var FRAME_RATE = 40;
                var intervalTime = 1000/FRAME_RATE;
                gameLoop();

                function gameLoop(){
                    context.clearRect(0, 0, 640, 640);
                    renderMap();
                    window.setTimeout(gameLoop, intervalTime);  
                }

and here is renderMap() function

function renderMap(){
                    var startX = playerX - (screenW / 2);
                    var startY = playerY - (screenH / 2);

                    maxX = playerX + (screenW / 2);
                    maxY = playerY + (screenH / 2);
                    $.getJSON('mapa3.json', function(json){
                        for (x = startX; x < maxX; x=x+32){ 
                            for (y = startY; y < maxY; y=y+32){
                                intTile = json.layers[0].data[((y/32)* 100) + (x/32)];
                                context.putImageData(getTile(intTile - 1), x - startX, y - startY);
                            }
                        } 
                    });

                    var imgCharacter = new Image();
                    imgCharacter.src = 'char.png';

                    var posX = (screenW - imgCharacter.width) / 2;
                    var posY = (screenH - imgCharacter.height) / 2;
                    imgCharacter.onload = function(){context.drawImage(imgCharacter, posX, posY)}       
                }

What changes do I need to make to the code to stop flickering?

Zach Saucier · Accepted Answer · 2013-08-24T23:10:53.107

6

I believe it is because you are loading the image each iteration. Try putting the var imgCharacter..., the following line, and the image's onload function outside of renderMap so it is only ran once

var imgCharacter = new Image();    
imgCharacter.onload = function () {
    renderMap();
}
imgCharacter.src = 'char.png';

function renderMap() {
    var startX = playerX - (screenW / 2);
    var startY = playerY - (screenH / 2);

    maxX = playerX + (screenW / 2);
    maxY = playerY + (screenH / 2);
    $.getJSON('mapa3.json', function (json) {
        for (x = startX; x < maxX; x = x + 32) {
            for (y = startY; y < maxY; y = y + 32) {
                intTile = json.layers[0].data[((y / 32) * 100) + (x / 32)];
                context.putImageData(getTile(intTile - 1), x - startX, y - startY);
            }
        }
    });

    var posX = (screenW - imgCharacter.width) / 2;
    var posY = (screenH - imgCharacter.height) / 2;

    context.drawImage(imgCharacter, posX, posY)
}

Thank you to markE for letting me know the onload function also needs to go outside renderMap, I overlooked it the first time

edited Aug 24 '13 at 23:10

answered Aug 24 '13 at 23:00

Zach Saucier

24,871
12
85
147

1

the following happens: screen still flickering and the character disappears when clearRect is called.. :/ – Juliano Lima Aug 24 '13 at 23:03
screen still flickering and the character disappears when clearRect is called.. :/ – Juliano Lima Aug 24 '13 at 23:06
3

@Zeaklous: You've almost got it...move your imgCharacter.onload outside renderMap and then call renderMap() inside that onload. Then inside renderMap, just context.drawImage(imgCharacter,posX,posY) – markE Aug 24 '13 at 23:06
here is my code `imgCharacter.onload = function(){ renderMap(); context.drawImage(imgCharacter, posX, posY); }` and in renderMap i put in last line the drawImage and is returning Value could not be converted to any of: HTMLImageElement, HTMLCanvasElement, HTMLVideoElement, to this line. – Juliano Lima Aug 24 '13 at 23:11
Try my edited answer, I believe it is what markE is suggesting – Zach Saucier Aug 24 '13 at 23:12
Move the .src to after the closing brace in .onload ;) – markE Aug 24 '13 at 23:14
so weird, i guess that my character is stop and my screen still flickering! i don't think problem is the character, but the clearRect – Juliano Lima Aug 24 '13 at 23:17

score 2 · Answer 2 · answered Aug 24 '13 at 23:22

2

Load all images and other data before draw and storage them inside array.
Better use requestAnimationFrame.
Remember, getting JSON (or other data) can take some time.

answered Aug 24 '13 at 23:22

trebor

724
5
16

redrawing canvas html5 without flickering

2 Answers2

Linked

Related