I am working on a basic game in javascript. I don't use jQuery. The thing is that I have trouble in getting rid of the flickering. I noticed it happens because of the canvas clearing command. I read a lot of suggestions that recommended a sort of double buffering like having a buffer canvas on which I should draw which is not visible and another canvas which is visible and all the content is copied from the buffer. However, I doubt that even if I implement this I would still have the flickering as I still have to clear the visible canvas.
The final question is : What is the best way of getting rid of the flickering in my code? Thank you for your help.
this is a sample of my code:
http://edumax.org.ro/extra/new/Scratch.html
In your draw() method you call loadImages(), hence loading the images every time you redraw, ie every time the apple moves, hence the flickering.
Just put some breakpoints in your draw method it will all become pretty clear.
I guess what you want to do is to load the images at loading time then just draw... no need to load on every move.
Related
I'm trying to modify the t-rex game to make the character dive instead of jump. This is what I'm referring to: https://github.com/xkuga/t-rex-runner.
As soon as the character dives out of the canvas, it leaves an unexpected trail.
I don't expect you to make clone & make changes in the repo to replicate this behavior. I have changed canvas size, the container size, tried clearing up canvas but nothing helped. Can you suggest possible reasons?
It seems like a clearRect issue to me. A code example would help some. You have to clear the canvas with each frame, or at least clear the part of the canvas the protagonist moves from.
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/clearRect
I have been looking at plenty of tutorials on how to do proper HTML5 animations using javascript and request animation frame and even in the demos it seems like the animations look blury like the image being redrawn leaves a ghosted image of itself behind for a breif second. But then I see games like microsofts ported version of cut the rope that appears to have fixed this issue. Does anyone know a way to make this canvas effect less apparent?
I'm guessing the problem you have is that the new image is being redrawn before the previous image was cleared. I suggest making sure the canvas is cleared, or at least the area in which the image is being re-drawn. Although, I experimented with clearing the whole canvas vs clearing a specific section of the canvas, and up to a certain size (roughly 800x600), clearing the whole canvas was faster.
I use canvas for my (in-progress) game: http://www.dacheng.me/dBoom
Feel free to browse the JS source code!
I think what you're looking for is window buffering:
http://en.wikipedia.org/wiki/Multiple_buffering
Basically the idea is to use two different windows/canvas elements that are interchanged after being drawn completely so that you're switching between fully drawn "frames". This technique is used in OpenGL and almost any other legitimate graphics program that exists today.
I started a web based game engine a while back, but used primarily jQuery to handle the sprites and animation, now I am learning the power of HTML5, by moving the game canvas to HTML5. So here's issue I am having: I'm using multple canvas as suggested from http://html5.litten.com/layers/canvaslayers.html to layer images.
This is not working for me, even if I set z-index to 999999: Here's my code->
http://snipt.org/xoKn
The objects layer is not on top of the tiles, thanks!
The code should work (at least the canvas handling part). I looked at your script and there may be the problem with loading images. You have
var tile = new Image();
tile.src = tiles[i]['bg'];
tilesCtx.drawImage(tile, tiles[i]['col']*32, tiles[i]['row']*32);
but it won't work since image is not loaded yet. Instead you should use
tile.onload = function(){
tilesCtx.drawImage(tile, tiles[i]['col']*32, tiles[i]['row']*32);
}
or something like that (i.e. you won't have a reference to the i variable so it needs to be modified).
Note that in the tutorial they use setInterval(drawAll, 20); which makes it work after a while (since after a time all images will be loaded).
Of course you may lose ordering of images (although this does not seem to be important), so preloading all images at the begining and then drawing them all at once is a good idea. Give it a try and let us now if it works!
If anyone is having a similar problem I managed to solve this by loading the first layer first then the lowest layer last. Apparently it seems that whatever is loaded first will be on top.
So my solution was to just move m objects loop above my tiles loop. Interesting to me, had no idea it mattered what loads first.
I have a Raphael javascript program, where I have several (dozens, hundreds, whatever) circles written to the page, like so:
evo_sprite = paper.circle(evo.x, evo.y, this.evo_size);
Each circle has a limited amount of time I want it displayed, after which I want it destroyed so it doesn't slow stuff down.
When I do:
evo_sprite.hide();
I have no problems, but I know the sprite is still there, and thus still taking up memory.
So I tried:
evo_sprite.remove();
And got what APPEARED to be the same result (the circle is no longer displayed).
The only problem is that after some amount of time(seems random), my program freezes and I get the error message:
a1.paper is undefined
[Break On This Error] Raphael=(function(){var a=/[, ]+/,aO=/...eturn d;};an.el=ax[aY];return an;})();
Does this make sense to anybody? Am I calling remove incorrectly? How am I causing Raphael's code (on line 7 of the min file) to break just by calling remove on a circle?
It's difficult to know without seeing your code, but it looks like it is the Raphael canvas that isn't being found (I presume that's what a1.paper is).
Are you instantiating your Raphael canvas on document.onload (or $(document).ready with jQuery)? Make sure there aren't any closures in your code that make functions trying to operate outside the scope of a1.paper.
Then go right back to basics - try it with just a few circles to begin with, then 50, then 100. Then try it in different browsers and see whether it stops working in all of them. SVG is quite browser intensive, so creating thousands of circles might make some browsers break.
This question is related to this older one, but I wanted to be sure I had the right answer before I started making major changes to my code.
I'm working on a very computation-intensive JavaScript program that needs to constantly update an image in an HTML5 canvas to draw an animation. As written now, the code draws all the frames of the animation in a tight loop without returning control to the browser, meaning that what's ultimately displayed is just the final frame. I'm pretty sure the only way to fix this is to split the animation code into smaller pieces that can be called reentrantly through a timeout event. Is this correct? Or is there a way to force the canvas to display its contents at a certain point even in the middle of a tight JavaScript loop?
I'm pretty sure the only way to fix this is to split the animation code into smaller pieces that can be called reentrantly through a timeout event. Is this correct?
This is correct.
Javascript is single threaded, so there's no way for anything else to happen while your logic is being executed. Your only choice is to "emulate" threading by splitting your logic up in to micro-chunks to be executed on timeouts.
You could use webworkers for this if they are available. Just calculate everything you need to do in the webworkers and post the result back when it's done. When you post the message back you can just refresh the image.
Calculations will be done in the background and your page only blocks while updating the image.