I'm creating a game which involves one sprite bouncing around and the user controlling another sprite to avoid being hit.
I'm having two problems:
I've managed to get the first sprite to bounce within the canvas but the second one is still disappearing at the moment.
I can't seem to get the two sprites to detect collision (they are both circular).
Remarkably I can operate Github so it's there if anyone wants to cast a critical eye (please do!) https://github.com/SallyBoulton/Javascript-Game.git
Related
I have to detect ground collision and fix it but because of irregular sprites, I have to allow collision in certain states like 'ATTACK' because the height of sprite increases. I have done it to my best but still there are many problems remaining which I think could only be understood if one downloads the project and plays the game himself/herself.
I've been trying so hard from past 2 days to implement tile collision detection. Irregular sprites have made the scenario complex. I have tried every single technique I could think of and could find on the Internet:
Detection based on player states
Detection based on speed values
Detection based on geometry
It seems like a deadlock in this situation and I have given up. Fixing one thing breaks another.
All of the code is connected but I think there are 2 files which would need changes 'player.js & playerStates.js'
Here is the link of project:
https://github.com/M-AdilAhmad/Platformer
Ive been having a really baffling slow down issue with the game I am working on probably because I am unsure how to handle graphics (most likely responsible for the slow down) in javascript without using a third party framework like Phaser/ImapactJS/EaselJS etc)*. The following is the low down on how I am approaching my graphics. I would be very thankful for some tips or methods on how to do this right.
My game is tile based - using tiles designed at 500x500 px because I want them to display decently on high definition devices.
I am using a spritesheet to load all (most of) my tiles before the main loop is run. This image is roughly 4000 x 4000 (keeping it below 4096 because the GPU cant handle texture sizes larger than that).
I then use the drawImage function to cycle through and draw each tile on a part of the canvas using information (w, h, x, y) stored in the tile array. I do this on every cycle of the main loop using my drawMap function.
The map is currently 6x6 tiles in size
A character spritesheet is also loaded and drawn on to the canvas after the map has been drawn. The character displays a different frame of the animation on every cycle of the main loop. There are sets of animations for the character each contained in the same spritesheet.
The character sprite sheet is roughly 4000x3500
The character is roughly 350x250 px
Other objects also use the same sprite sheet. Currently there is only one object.
Possibly helpful questions:
Am I using too many spritesheets or too few?
Should I only draw something if it's coordinates are in bounds of the screen?
How should I go about garbage collection? Do I need to set image objects to null when no longer in use?
Thanks in advance for input. I would just like to know if I am going about it the right way and pick your brains as how to speed it up enough.
*Note that I plan to port the JS game to cocoonJS which provides graphics acceleration for the canvas element on mobile.
** If interested please visit my Patreon page for fun!
You have asked lots of questions here, I'll address the ones I've run into.
I would like to start out by saying very clearly,
Use a profiler
Find out whether each thing you are advised to do, by anybody, is making an improvement. Unless we work on your code, we can only give you theories on how to optimise it.
How should I go about garbage collection? Do I need to set image objects to null when no longer in use?
If you are no longer using an object, setting its reference to null will probably mean it gets garbage collected. Having nulls around is not necessarily good but this is not within the scope of this question.
For high performance applications, you want to avoid too much allocation and therefore too much garbage collection activity. See what your profiler says - the chrome profiler can tell you how much CPU time the garbage collector is taking up. You might be OK at the moment.
I then use the drawImage function to cycle through and draw each tile on a part of the canvas using information (w, h, x, y) stored in the tile array. I do this on every cycle of the main loop using my drawMap function.
This is quite slow - instead consider drawing the current on screen tiles to a background canvas, and then only drawing areas which were previously obscured.
For example, if your player walks to the left, there is going to be a lot of tiles on the left hand side of the screen which have come into view; you will need to draw the background buffer onto the screen, offset to account for the movement, and then draw the missing tiles.
My game is tile based - using tiles designed at 500x500 px because I want them to display decently on high definition devices
If I interpret this right, your tiles are 500x500px in diameter, and you are drawing a small number of these on screen. and then for devices without such a high resolution, the canvas renderer is going to be scaling these down. You really want to be drawing pixels 1:1 on each device.
Would you be able, instead, to have a larger number of smaller tiles on screen - thereby avoiding the extra drawing at the edges? Its likely that the tiles around the edges will sometimes draw only a few pixels of one edge, and the rest of the image will be cropped anyway, so why not break them up further?
Should I only draw something if it's coordinates are in bounds of the screen?
Yes, this is a very common and good optimisation to take. You'll find it makes a big difference.
Am I using too many spritesheets or too few?
I have found that when I have a small number of sprite sheets, the big performance hit is when I frequently switch between them. If during one draw phase, you draw all your characters from character_sheet.png and then draw all the plants from plant_sheet.png you'll be ok. Switching between them can cause lots of trouble and you'll see a slow down. You will know this is happening if your profiler tells you that drawImage is taking a big proportion of your frame.
I am very new to html5 game making.
Recently I am making a game which includes some animations using png sprite.
http://i.imgur.com/MZrpq9j.png
I have a background and I try to use this sprite to mask it, I was trying to use getImageData() & putImageData() to show only the circle part of each frame of the sprite, everything's cool until I try to make another "circle" near to the first one.
The problem is I cannot make both "circle" animate at the same time if the sprite sheets overlap with each other...
And this is the very start of my project, the final aim is like making 100 "circles" on random positions.
So is there a method to use this sprite sheet to make animating circles, showing the background in the circle part only even if there are several "circles" which overlapping each other?
Sorry that my english is bad and I try my best to describe the question...Any suggestions would be great and I can elaborate more on the question if needed! Thanks!!
PS: I have tried to do my homework before posting, the most neareast reference I can find is http://simonsarris.com/blog/140-canvas-moving-selectable-shapes, but I do not know how to apply the concept of the "ghost canvas" into my case..
So I've been having a go and building a little game using canvas and Javascript, and I've got to the point of having a little character move around the screen, with a flat image drawn in the background depicting a room of sorts.
What would be the best way to approach defining where the player entity can and cannot move? If it's just a square room, that's easy enough to check the edges vs. the player x and y, but it gets more complicated if I have varying shapes of background that I might want the player to be able to move to.
Is there a way to detect intersection of drawn images on canvas? If so, I could perhaps render the "walls" as separate to the main background, and check if the player has hit any of those. Or I might be over-thinking what has a simpler solution?
Thanks
Please give more next time. Is this a 2D top-down game? I'll assume so.
There are several ways, depending on what you want to do and the level of granularity.
If the rooms are almost all rectangular, you could just see if the object is fully contained within them.
If not, you could use rect-intersects-line algorithms, or else you could turn the map into one big path (with the center of the path being either hollow or not) and use IsPointInPath (I'd suggest making your own though and not using Canvas' one) to see if a few key points of player geometry are all inside (or outside)
Finally, if you want per-pixel collision, you should make a simplified black png map (or something similar) of your level and use a ghost canvas, like I do for hit testing here. Then test several pixels on the player's silhouette and see if they are black or not. If any of them are not black, the player is out of bounds!
I for once tried to create a simple game on html5 canvas similar to what you are currently working on (I guess it's a common idea).
What I suggest is that you work on a collision engine, at least this was my idea :
create another layer on top of the one you have as a background,
assign the same boundary image (transparent) to each object you want your player not to go through,
then you have to calculate when the player XY coordinates are over that object
if(collides){ do not go through } else { go }
This way you can stop player moving through a wall or otherwise solid object.
I looked up HTML5+Collision on Google but nothing interesting showed up, maybe you should try different searches, or be the first to implement the idea (mine is just at a basic stage).
EDITED:
You would probably have to define some SVG shapes or have a "map array" of some kind..
i.e.
map = {
[0,0,0,0,0],
[0,0,0,0,0],
[0,0,0,0,0],
[0,0,0,0,0],
[0,0,0,0,0]
}
Is there a quick and efficient way to move lots of objects in canvas? Basically if there are around 1000 objects and I want to move all of them at once to emulate scrolling, it is very slow to redraw every single object by calling drawImage() 1000+ times.
Is there anyway to optimize this? I have an example link of the problem (and that's only with 100 objects): http://craftyjs.com/isometric/
Since canvas doesn't provide fast low level bitmap copying it's hard to do stuff in multiple layers and scroll for example the whole background at once and then only render the edges.
So what can you do? In short, nothing. Especially not when scrolling, sure you can do tricks with multiple canvases when you have a more or less static background but for moving objects there are hardly any performance improving tricks.
So, you've go to wait for Hardware Acceleration shipping in all majors browsers, I know this sounds ridiculous but I'm too waiting for that :/
The problem is that the canvas was never designed for game stuff. It was designed as, well, basically some kind of on the fly drawing thing, guess the designers had Photoshop clones in mind, but definitely not games, let alone the fact that there's no fast clear operation proves that, there's not even optimization in place when clearing the whole canvas with the same color.
If the images are already composited, not moving relative to one another, and defined by a rectangular region, then using canvas.drawImage() with a canvas as the first parameter and drawing to a sub-region should be significantly faster than re-drawing all the objects.
You could also just layer multiple canvases and slide the top canvas with the objects in HTML to scroll them.
Edit: Having really looked at your example, it seems to me that it should be implemented similar to Google Maps: create tiles of canvases and slide them left/right on the HTML page; once a canvas has been slid off the screen entirely (for example, off the left edge), move it to the other side (to the right edge) and re-use it for drawing. With this you will only need to re-draw whatever objects overlap the canvases that are moving on the edges.
You can draw all objects on a second, off-screen canvas and then only blit the whole canvas (drawImage() accepts canvas element).
However, if you're targeting desktop browsers, then this shouldn't be necessary. I've implemented tile engine (source) that simply redraws whole scene and naive implementation turned out to be pretty fast.
What I did to solve this problem was I had 10 squares on my screen and I wanted to animate them on a white background. So I drew a white rectangle over the canvas to clear the canvas so the animation would work. Does that make sense?
#Ivo By the way I read on http://www.w3.org/TR/html5/the-canvas-element.html that canvas was made for applications like games because it was a solution to get rid of the dependency on a external engine. Canvas is built in so it's kind of like a flash player built into your browser powered by JavaScript. I think it's fascinating.
You can use tiled rendering.
http://www.gamesfrommars.fr/demojsv2/ (better viewed with Chrome)