HTML 5 game dev question

[beginninggamedev]

I was wondering how do you get rid of the issue below when i'm moving an image across canvas using the right arrow key. I'm just using a random image to test my canvas and such below is a screenshot and my current js code.

var requestAnimationFrame = (function () {    return  window.requestAnimationFrame ||        window.webkitRequestAnimationFrame ||        window.mozRequestAnimationFrame ||        window.oRequestAnimationFrame ||        window.msRequestAnimationFrame ||        function (callback) {            window.setTimeout(callback, 1000 / 60);        };})();var canvas = "undefined";var context = "undefined";var score = 0;var width = 700;var height = 600;//Different characters in our game and propertiesvar cat = {x:100,y:400,health:100};var dog = {x:500,y:600,health:100};//Holds eventsvar events = {};document.addEventListener("keydown",function(e){    console.log("Key:"+e.which+" Pressed");    events[e.which] = true;});document.addEventListener("keyup",function(e){    delete events[e.which];});function catMove(){        //Move cat to right    if(39 in events)    {               cat.x += 5;    }    //Move cat to left    else if(37 in events)    {        cat.x -= 5;    }   }function start(){    canvas = document.createElement("canvas");    document.body.appendChild(canvas);    context = canvas.getContext("2d");    canvas.width = width;    canvas.height = height;    //Main game loop    loop();}function imageLoad(img,x,y){    var image = new Image();    image.src = img;    image.onload = function(){      console.log("IMAGE:"+image+" has been loaded");      context.drawImage(image,x,y);      };}function render(){    imageLoad("assets/cat.png",cat.x,cat.y);    catMove();}function loop(){    render();     requestAnimationFrame(loop);}

[alex_h]

Firstly you want to clear the canvas at the start of each render cycle. You do this by calling 'clearRect' on the canvas context. Here's some more info:

 

http://stackoverflow.com/questions/2142535/how-to-clear-the-canvas-for-redrawing

 

https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations

 

Secondly, it looks like you are loading your image from scratch on each call to render - you definitely don't want to be doing that! 

[beginninggamedev]

Firstly you want to clear the canvas at the start of each render cycle. You do this by calling 'clearRect' on the canvas context. Here's some more info:

 

http://stackoverflow.com/questions/2142535/how-to-clear-the-canvas-for-redrawing

 

https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations

 

Secondly, it looks like you are loading your image from scratch on each call to render - you definitely don't want to be doing that! 

i did clearRect but then the image doesn't show at all as for loading the image from scratch how else would i load it? Sorry im new to all this thanks in advance tho

[alex_h]

you should only call loadImage once, in this case in your 'start' function.

context.drawImage(image,x,y) should not happen in the image.onload, it needs to occur in the render loop.

To achieve this you'll need to juggle around the location of your variables a little so that your image reference is not defined as local to the loadImage function but is at the same level as other variables like cat, dog, etc. Bear in mind that image loading is asynchronous so you will probably need a flag somewhere to tell that the image has loaded and is now ready to be drawn to canvas, otherwise you might cause errors by trying to draw it when its not yet available.

Your render function should end up looking something like this:

function render(){    canvas.clearRect(0, 0, width, height);   //TODO - check the image has loaded!   catMove();   context.drawImage(image, x, y);}

Previously you probably had problems with clearRect due to this same issue of loadImage being asynchronous - you cleared the canvas then told the image to load (not draw!) but there is no telling when it will actually finish loading and then be drawn, so it occurs out of sequence and doesn't get seen.

[beginninggamedev]

you should only call loadImage once, in this case in your 'start' function.

context.drawImage(image,x,y) should not happen in the image.onload, it needs to occur in the render loop.

To achieve this you'll need to juggle around the location of your variables a little so that your image reference is not defined as local to the loadImage function but is at the same level as other variables like cat, dog, etc. Bear in mind that image loading is asynchronous so you will probably need a flag somewhere to tell that the image has loaded and is now ready to be drawn to canvas, otherwise you might cause errors by trying to draw it when its not yet available.

Your render function should end up looking something like this:

function render(){    canvas.clearRect(0, 0, width, height);   //TODO - check the image has loaded!   catMove();   context.drawImage(image, x, y);}

Previously you probably had problems with clearRect due to this same issue of loadImage being asynchronous - you cleared the canvas then told the image to load (not draw!) but there is no telling when it will actually finish loading and then be drawn, so it occurs out of sequence and doesn't get seen.

Ohhh i see now thank you for the clear explanation

[beginninggamedev]

That fixed the issue thanks one last prob tho the image now flickers i know double buffering would fix this but I want my games to run smooth on a mobile device as well and I have read double buffering can give a huge hit in mobile game performance when using canvas and javascript

[beginninggamedev]

Never mind i figured it out thanks again for the help