I am playing with phaser along with its isometric plugin. I am a still a newbie on the matter however.
I have 2 sprites and I want to check for intersection / overlap between them. They are 2d simple sprites. I want to check for intersection ONLY if they are side by side and that would be for some kind of melee attack.
I created an hitbox for the player (a rect) and created a function that detects if two rects intersect each other. I can actually detect collision that way but if the player is in a little bit lower position to the target (in the screen coordinate y) it also detects the collision.
I need a way to make sure the sprites are "aligned". How could I do this in isometric in order to make sprites interact with each other? I can give more informations if needed or provide code.
"Isometric" is just how you render the scene and shouldn't have anything to do with the collision logic. All the game objects live in the same 3D space so colliding sprites need 3d hitboxes.
Related
I am working on a infinite runner game, where 3d objects are involved - A rover and some obstacles, that move on a terrain. The game is made using p5.js WebGL functionality. I have almost completed the game, but the game should end when the rover hits any obstacle. I just want to know if I can detect the collision of both the 3d objects(the rover is a plane, and the obstacle is custom loaded model) and end the game...Simply, I want to know whether collision detection in WebGL is feasible, and if so how?
Please help me out on the same.
Thank you.
Ideally, indeed, you'd post a minimal sketch of your attempt at detecting the collision: something to make it easier for other to contribute (without making to many wild guesses on your behalf).
One idea is to check if the bounding box of the 3d model (defined by it's minX, minY, minZ, maxX, maxY, maxZ values) intersects with the plane (or the bounding box of the plane if it's simpler to keep things consistent). It won't be 100% accurate, depending on the loaded model (we don't even know what that is is), but it's a decent initial step.
For more accuracy a convex hull would be handy. If computing that from scratch in p5.js might prove difficult, perhaps you could use the same 3D editor to export the model to also generate a convex hull of the original model and export that to be used as simpler collision mesh.
Additionally, even through more advanced, you can look into using a physics engine such as ammo.js to handle the heavy collision math (and more) for you. (checkout the vehicle demo).
I certainly don't expect anyone to actually provide a working solution for this. My question at this point is a simple one: can this be done with an HTML5 canvas, or would I be spinning my wheels in the attempt?
I'm a programmer, but my forte is in PHP, JavaScript, traditional HTML, etc. ...I haven't had a chance to play with HTML5 yet.
The elements you see in the example, I can save out as individually as necessary. So to make the blocks rotate around the center, I was thinking I save a square image with the block in the appropriate corner, respectively. Then rotating the image would pivot around center appropriately, unless you can set a point of origin on an image a la PhotoShop.
The KineticJS library looks promising for this type of animation as well, but I'll leave the recommendations to you fine folks.
Anyway, here is the example I want to replicate:
I won't give any library recommendations for the same reasons that #Diodeus points out, but maybe I can help your selection process. What you're trying to do can be done multiple ways in the browser right now: Canvas, SVG, and/or CSS3 animations.
Your example above is basically a few vector graphics composed together with a gradient on your center "pie timer". Because of this I would lean towards using S V G, especially if you want to allow interactions with your component (each SVG element can have event handlers).
The canvas element is better for "pixel by pixel" control of your visual content on the page. Adding content in the canvas doesn't grow the DOM (like with SVG) so it will normally perform better, but you lose things like native event handlers and animations that you will end up having to re-implement on your own.
More about the choice between SVG and Canvas, and an SVG animation example
Once you have the components in the page, they'll need to be wired up and animated. The animation can be broken down into:
Scaling
Background color fading
Rotation
"Weird gradient pie timer" example with CSS3
These can be done with CSS animations, SVG animations, or with plain old javascript. The choice depends on what you'll be animating. If I was selecting a library I would want to find one that tried to use the newer methods (SVG/CSS3) when it can, and gracefully degrade when it cannot.
I would be weary of libraries that try to re-implement things that are already available natively in the browser. Relying more on the browser instead of your own code to do things like animations means that the browser can optimize its operations and use things like hardware acceleration to improve your performance.
Hopefully this can aid your library selection. Remember, libraries come and go all the time so don't get too attached to one. An ideal implementation should allow for you to easily swap out your animation or display code without having to touch other unrelated pieces.
Sure, it's not all that difficult when you break it down into pieces.
Here are some technologies and techniques to get you started.
You use Canvas by (1) displaying some drawings, (2) erasing, (3) displaying some new drawings
When you do this redrawing rapidly, you get animated effects like your image shows.
Html Canvas uses a context to draw with (think of it as the pen for the canvas)
drawing a path: context.beginPath + context.moveTo + context.lineTo will define a path that creates your "fan blade" polygons. You can use context.fillStyle to fill the polygons with you colors.
fading: context.globalAlpha will change the opacity of new drawings
rotating: context.translate(centerX,centerY) + context.rotate(radianAngle) will rotate new drawings (like your rotating polygons, your tick-marks, )
scaling: context.translate(centerX,centerY) + context.scale(scaleX,scaleY) will scale your polygons.
arcs: context.arc(centerX,centerY,radius,beginningAngle,endingAngle) will draw an arc with a specified centerpoint and sweeping from a beginning angle to an ending angle.
math: circleCircumferenceX = centerX+radius*Math.cos(radianAngle) circleCircumferenceY = centerY+radius*Math.sin(radianAngle) uses trigonometry to calculate an xy coordinate on the circumference of a circle. You can combine this trig + Math.random to place your "speckles" in an arc around your centerpoint.
I am searching for a 2D physics engine to simulate gravity using images, preferably PNG images with transparency. So the engine will know how to calculate the collision base on the opaque parts of the image. I have only found Javascript engines that works with primitive shapes and basic HTML elements, but not with images.
I don't know any way to do what you desire, but you can try drawing your shapes in HTML5 Canvas and use Box2D.js for working with shape collision.
One think you could do is compute the convex hull of your image (you can have a look here) and then use those hulls to compute collisions and so on (using GJK for example, you can find some great explanations here or here)
As noted by micnic, I guess you can indeed use Box2D.js and feed a b2PolygonShape why the non transparent pixels of your images (or you can compute their contours and use contours as input for the b2PolygonShape)
I'm trying to build a motorbike game in html5 canvas with javascript.
Right now I have a wheel and a simple gravity which increases the position from the top of the canvas until the wheel hits the bottom of the canvas. When I start the game, the wheel just drops to the bottom of the canvas.
I want to create a curved ground for the wheel to ride on. The problem is that I don't know how to calculate if the wheel hits this ground.
Here is a illustration. I want the wheel to drop until it hits the curved ground, and if I'm moving the wheel, it needs to follow the shape's edge.
image http://i.minus.com/iFvy1dbnouvy6.png
I don't want to use any libraries or engines, only javascript and html5. Do you have any ideas or solutions?
Similar to the other answer, you can simply have an if statement that says
if tire.y < line(tire.x) then tire.y = line(tire.x) - 1
the line function can just be an array or some formula that will contain the y value of the line when given any x-value.
In order to detect when the wheel hits the ground, you should have the coordinates of the ground boundary (e.g.: a polyline) and the wheel's ray and center position.
You detect collision by checking that your wheel y coordinate (cener + ray) is below the y coordinate of your polyline at certain x(s). You should segment your polyline in a resonable way, by carefully selecting your endpoints.
Probably there are other ways to accomplish this task, but this is the first which I came out.
Here is the solution which you're looking for Collision Detection (elastic)..
.--------------------------------------------------------------------------------------------.
Here's a simple & Good tutorial for learning physics especially for Game Developers
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]
}