Hi All,
We are working on a website that features a flat map that we would like the user to be able to navigate around with a mouse, a bit like an RTS. So clicking and dragging to move around. We have this working well, but what would the best way to restrict the camera movement within the square map area, so they don’t reach the edge of the map.
Essentially like this website
Many thanks in advance
Hello! There are a few ways you could do that, one would be that you could detect if the position of the camera has gone out of the allowed area and if so, disable camera control, play an animation that brings the camera back inside the area, then reenable camera control. Another possibility would be to have the input changes affect a “test” camera and manually update your “render” camera only if these changes didn’t make the camera go out of the allowed area (so for the user, it would look like the camera didn’t move at all).
Hmmm, ok this sounds good. I’ll give it a try
I was implementing a similar thing to this and I ran into a slight problem where a big swipe near the edge wouldn’t move you but small swipes would incrementally move you across until you reached the edge. I also tried making it so a swipe outside the allowed area would instead move you to the edge so the user feedback was not lost.
The only thing is it jitters near the edge rather just stopping.
Could a possible solution be using something like hit detection to check if you was hitting an invisible wall and stop the camera?
Hit detection could be a good solution for this, yeah 