Strategy Game-like camera

Hi guys, Im trying to create a similar camera system to that which you would find in a game like Roller Coaster Tycoon or Planet Coaster, Civ5 etc. I can get most of the general functionality I need from an ArcRotate Camera (Zoom, hold down mouse to orbit)… however Im not sure if the ArcRotateCamera is the correct choice here?

I want to enable the user to move the camera position if they move the mouse cursor to the edge of the screen (edge scrolling)… and I also want to implement a feature that, when an interactable object is clicked, it becomes the new focus of the camera.

I was wondering if anyone had any ideas on how to implement this movement, and maybe even the refocusing aspect? Cheers.

1 Like

@DarraghBurke might have some idea ?

1 Like

Hey @CBam97! Welcome to the Babylon forum.

You might find this example, by Babylon input expert @PolygonalSun, helpful: Chessboard Demo | Babylon.js Playground (babylonjs.com)

I don’t think it’s exactly what you’re looking for, but it’s a good starting point. In particular, you may be able to adapt this code for the “focus on interactable objects” behavior you are trying to implement.

As far as edge scrolling, you will probably want to add a PointerMove observer and then use the event property of PointerInfo to detect when the mouse is on the edge of the screen. clientX and clientY are probably the properties you are looking for. You will then want to adjust the camera position as well as the camera target in the direction the user is scrolling. If you have difficulty implementing this let me know! (And please do post a playground link so I can take a look at what you are doing.)

Good luck! Can’t wait to see what you come up with :smiley:

5 Likes