I am creating a new asteroids game with html5 canvas. It's been going well up to the point where I have to dynamically draw lasers onto the stage. They don't draw correctly (they should only be 10pixels long) and when you shoot twice over 10 seconds apart the old laser trail shows up. Here's the url because there's more code than I care to put everyone through.
http://marccannon.com/canvasteroids/
Ideally the lasers will be 10px long and go away once they're out of life (1sec or 33 frames). They get shift() out of an array that should no longer be running them in the draw loop. It seems as though there's some kind of memory with the Laser object class. So far I've spent hours making space art with laser trails instead of adding the actual asteroids to hit. Someone please help. I'm losing my sanity.
Thanks in advance for your help.
The problem is that when you draw on a canvas you must must always remember to call beginPath(), otherwise all moveTo and lineTo commands will keep adding and adding to the current path.
Related
I'm wondering how to make a viewport that follows the player such as in sidescrolling games. I have a semi-working version, but it requires me to move everything except the player.
ctx.translate(canvX,canvY);
drawBlocks();
ctx.restore()
This works for now, but I will have to draw enemies and other objects, and I don't want to constantly have to redo the process. I'm looking for a simple solution that basically involves a camera that follows the player. Is this possible?
Use something like three.js for games. Because you have to draw as many frames per second, and canvas just isn't great for that (if you don't believe me now, wait until you have to draw more things on the screen).
However, for your current code, one thing I notice is you're missing a save.
If that's not the problem, which I dont think it is, based on your question, you don't want to re-draw everything, only the background? You could actually use multiple layers, so that each enemy is an HTML element, and you only redraw the enemy when their animation frame changes. Then you just move their element ( a little cheaper than re-drawing in terms of performance ).
THREE.JS is what you should learn.. it will really help you out.
I'm trying to build an HTML5 Game with Canvas 2D (Only for Computer as device). But there's a Problem, I have thousands of moving images and with around 4000+ Images (Enemys) I dont get more then 10 FPS. With Java2D it's working fine, now I'm trying to import the Game to HTML5. Did anyone have some tips to realize this in HTML5? Some Code optimization? For any help I would be very grateful.
http://jsfiddle.net/LtlFdl/tzd8z/
ctx.clearRect(0, 0, 320, 320); // <- Maybe just Clear the Enemy Square Position?
btw.: on the Fiddle is just ONE playerfield, at the end there 4 playerfields (rotated 90, 180 and 270 degress), a background image, towers and a lot of effects. So I have to multiple everything with 4.
First...Ditto the good thoughts that #enhzflep has already mentioned in his comment.
I would add that setting the fillStyle is a somewhat expensive operation so setting the fillStyle with each of 4000 Enemy draws becomes very expensive. I suggest that you just display the textual & health info once per second rather than with each Update_Map1.
On my modestly fast development desktop I can do 4000 X drawImage(img,0,0) at a rate of 45 times per second. This leads me to believe the transformations (translate,rotate) are slowing you down. Perhaps create 4 versions of your enemy image--facing up,down,left & right. Then entirely replace the transforms by drawing the appropriately facing image.
I see you're using delete Enemys_P1[i]. It's more resource effective to "recycle" exiting enemies. You can do this by marking an Enemy as "inactive" and not processing that enemy. When you need a new enemy you can change an inactive enemy to "active" and set its properties to the "new" enemy values.
Good luck with your project!
Well, after looking this problem up three times and finding nothing really relevant to my question, I will now ask.
I got curious and decided to experiment to see if I could make a very basic falling sand toy in canvas.
I did successfully do it, as the "sand" builds up on the ground like it should, but it slows down very quickly because of the hit detection between airborne particles and ground particles.
See for yourself Edit: Possibly dead link, here's a JsFiddle instead.
Particles are spawned by clicking and holding the mouse button. And after you've spawned approximately 200 particles, it gets brought to its knees.
for(i in P){
if(P[i].Y<canvas.height-1){
P[i].Y++
for(j in G){//This loop seems to cause the lag
if(P[i].X==G[j].X&&P[i].Y==G[j].Y-1){
G[G.length]={X:P[i].X,Y:P[i].Y}
}
}
}else{
G[G.length]={X:P[i].X,Y:P[i].Y}
}
}
I'm just wondering if there's something I'm doing horribly wrong; I'm pretty sure it's not supposed to lag that badly. I'm also wondering if there's a way to do it without nested loops, but it seems the only way I've been able to make this work is by checking every individual airborne particle against every individual ground particle, which makes it lag.
If the link is broken, say the word and I'll post the entire code here.
Thanks
It is easier to remember the height of each pile of sand (eg for each column or x-coordinate in the canvas) and check against that. You can directly use the index (should be the same as the x-coordinate), so you do not require to loop through all ground positions to find the correct one.
You need only one check for each airborne sand piece, namely the check with the height of the pile of the corresponding column.
Additionally when the sand has hit the pile, remove it from the 'active particle' list, so you do not need to check it each time, keeping the outer for-loop as small/short as possible.
Redraw each pile using the height of the pile (does not work well when the sand grains have separate colors...) or put the sand that is not falling anymore in a separate memory structure to redraw the piles properly.
I think I just need a fresh set of eyes on this game I'm working on.
It's a sliding image puzzle (where you split an image into pieces and display them back in a random order, I then remove a single piece of the puzzle and the user has to click on each puzzle piece to move it around and thus put the image back together)
The full code is here: https://github.com/Integralist/HTML5-Image-Slider-Game
The bug I'm having is on the first puzzle piece you move, if you click it again - when it moves back to the position it just came from - the puzzle piece changes to a different piece (in one instance I noticed that it was changing to the puzzle piece that is removed to initiate the game, but that might just be coincidence).
At first I thought the issue was with the setInterval method which is asynchronous (I was thinking that because I'm inside a loop maybe the reference loop iteration was getting messed up, but I'm now passing in the relevant iteration into the setInterval and the issue still occurs so it can't be that).
UPDATE:
I still think the problem is something to do with the setInterval. The main issue is when we start drawing the image onto the canvas the original x/y co-ordinates obviously have changed from what we expect them to be. I've noticed that the object which holds the co-ordinates for the puzzle piece we want to move is incorrect when we click on the same puzzle piece to move it back into the position it was just in. I noticed the drawnOnCanvasX/Y properties are different to what they should be, and that they now match the x/y co-ordinates of the empty_space variable? The fact that this doesn't happen all the time makes me think that the setInterval is not passing through the correct object from the loop into the function that executes on the interval?
Any help appreciated.
The problem was because I hadn't removed a particular item from the randomised Array.
For the game to work I needed to remove 1 puzzle piece, this allows the other pieces to have a space they can be moved into. Problem was that I had clearRect the piece I wanted but not actually removed it from the Array. So when I was looping through to find an item in the Array that had those exact X/Y co-ordinates it was finding the puzzle piece item that should have been removed (and because the piece that is removed is chosen randomly that's why sometimes that piece would be found via the loop first, and other times the correct piece would be found).
Christ that was painful.
jsfiddle here
I'm bored at work today, so I'm just started building something with canvas to try and teach myself some stuff. I've gotten stuck on this portion and have decided to reach out to the SO community instead of banging my head against the wall some more.
The basic idea is to listen for a click and then create a randomly colored circle where the user clicks, animating to a larger size and fading out.
It works great when you just click and let it fade out. The problem comes when you have more than one circle on the canvas at once. I can tell this is happening because of how I'm doing my animating loop, but for the life of me I can't figure out how to do it better.
Should I have an animation loop separate from the setInterval that grows/fades the circles? If so, what should that loop do? I feel like I need to separate the placing/growing/fading of circles from the actual rendering.
EDIT: I've notice this only seems to work in Chrome (maybe safari too)
The solution is to unify all of your drawing into one place so that your setInterval callback can redraw everything.
Check it out:
http://jsfiddle.net/ybcHk/7/