jdan
Click/hit detection
Is there any support for click/mouseover/hit detection, or is there any planned?
I drove myself potty trying isometric hit detection once.
A depth buffer might do it, depends on your code :)
sent from my mobile On 28 Apr 2014 16:55, "Jordan Scales" [email protected] wrote:
Not yet, could be cool to play around with though - good idea!
— Reply to this email directly or view it on GitHubhttps://github.com/jdan/isomer/issues/15#issuecomment-41576008 .
Whoops, accidentally deleted my comment. I'll attempt to remember it.
"As you are using canvas fills, as opposed to per-pixel rendering, you could render shapes (in depth order) to a second canvas using a unique colour for the whole shape, creating a colour=>shape lookup table. To do mouse events, get pixel colour at a particular cell, and use it as a key for the lookup table"
My edit was going to be: at some point you might just want to go with an orthographic projection in threejs under the hood, and use it's z-buffer facilities (assuming it has them :))
Wow that's super smart, thanks! And yeah, I'm not totally sure if I want to use Threejs or something else under the hood - the whole idea was to make something crazy small and portable that could be used for simple web graphics. I didn't intend it to be a super powerful graphics engine, just a simple one.
Which is a commendable goal - I had a look at the code and it is crazy small!
I'd like to be able to write simple web games using Isomer (hence the hit detection request), and there are a couple of other features that would be nice (e.g. removal of Shapes, a Camera class) - are these features likely to be on the roadmap?
Yeah definitely. Keeping track of objects in the scene has a pretty big priority.
What he means is drawing a flat color on a separate canvas - not shaded - so that it's easy to do a lookup based on mouse position.
I get that part, but doesn't it seem like a roundabout way to keep track of the object, rather than relying on x,y and then checking what is the foremost z index object?
Imagine, there is a flat plane with (x, y) coordinates, now at the center of the plane is a dot which we can reference as z.
Now if we take the plane from being 2d and make it 3d, the z coordinate becomes depth.
Assuming that the higher the z coordinate is on an entity the closer it is to you, and the lower, the further away it is.
When you click with a mouse you get two coordinates (x, y) using those two positions you can cross reference from the highest z coordinate to the lowest z coordinate to find the block they clicked on (assuming you have some sort of collision detection / contains (x, y) on each entity)
Another way is to create a camera and a raycaster to get the intersection (which is basically what you are doing, is intersecting)
Should you not be using a depth-coordinate at all, it will be a little easier as all you have to do is translate the mouse click to an absolute tile click.
Imagine you are using same colors, or image tiles, or they are touching, you are screwed in a sense if you use colors.
Pixel xy to object mapping is going to be tricky once you take into account different shapes and rotation..
Given that, I suspect any other methods will end up being equivalent to rendering a single colour per shape to a second canvas (you need the second canvas in order to avoid the issues you mention with textures).
The flat color render on a separate canvas is a very clever idea, I guess, as it's not a canvas that will be displayed, you could just assign any color to each object so you would only run into trouble if you have over 16.5 million objects?
@DaveKinsella the answer to your question could be: "Is javascript a good solution to render a canvas with 16.5 million objects?" Well, to be serious my opinion is exactly as your.
I was recently stuck trying to bring hit detection to isomers cousin ( Obelisk.js) and no joke I almost drove myself potty as well. In the end I channeled my inner MacGyver and added another library ( easel.js), which allows for bitmaps to be used along mouse events. Here's the stackOverflow thread: Intersecting an isometric cube in obelisk.js I even made a little interactive thing: Codepen- The toners !
So what I hear you say, this is Isomer land, well, it works just as fine for Isomer, It might not scale and you might have some issues with overlapping geometry, but its a relatively painless way of adding some interactivity ( easel.js is something like 87k), Here's a very basic example:
And the result:
Cheers !
