Comments (17)
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 !
from isomer.
Not yet, could be cool to play around with though - good idea!
from isomer.
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//issues/15#issuecomment-41576008
.
from isomer.
@mcintyre321 any experience with depth buffering? #9 needs it big time.
from isomer.
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"
from isomer.
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 :))
from isomer.
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.
from isomer.
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?
from isomer.
Yeah definitely. Keeping track of objects in the scene has a pretty big priority.
from isomer.
Position seems more reliable than color
from isomer.
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.
from isomer.
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?
from isomer.
Not totally sure I understand, sorry.
from isomer.
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.
from isomer.
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).
from isomer.
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?
from isomer.
@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.
from isomer.
Related Issues (20)
- Highlight Edges of Shapes
- isomer
- Can we draw image instead of Isomer object?
- Sprite/Image support HOT 6
- How to implement a 3D Mesh? HOT 2
- How to invert the _translatePoint function? HOT 2
- how to wireframe 2d figures? HOT 2
- Bug with certain dimensions HOT 3
- Missing tag for v0.2.5 HOT 1
- Adding text labels HOT 1
- Animating without leaving artifacts HOT 3
- Object.position or shape.x shape.y shape.z exists ?
- Should I use isomer for a new project? HOT 3
- integration with paperjs HOT 1
- creating rounded corners in cube HOT 1
- How to use isomer.js with Drag and drop like, https://illuminations.nctm.org/activity.aspx?id=4182 HOT 1
- Documentation improvements HOT 3
- Possible to create spheres? HOT 1
- Is there any way to move the camera? HOT 2
- Please remove ORIGIN
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from isomer.