Creating an MMO-style controller VII: Click and Drag Camera Control

Part seven in the development of our MMO-style controller. The original specification with contents and an overview can be found in this post. Quite a lot of posts now, isn’t it!?

Now we’re moving back to our final feature in the MMO-style controller, using the mouse to move our camera around, and control the character’s orientation. All those functions we wrote earlier are really going to help us here!

Left and right click actions

Firstly, we’re going to need to set up some logic with for the when the user presses the right and left click buttons on their mouse.

First we’ll need some functions to control interaction with the UI and game world:

Function ToggleUIControlOn

Function ToggleUIControlOn, enables interaction with a UI.

Function ToggleUIControlOff

Function ToggleUIControlOff

These two functions change how we interact with the game world. We’ll use these support the mouse drag and rotate feature. When toggled off, the mouse disappears and we cannot interact with the UI. We’ll also disable mouse related events for the game. If we set UI control back on again, we’ll keep the mouse to the game window, and re-enable the things that were turned off.

Now we can add these into the left click action event:

Left Click action

Left click action

When we press left click, we set a LeftMousePressed boolean to true, and we turn off the UI Control.

When left click is released again, we’ll re-enable UI control if right click is not also pressed. If RightMousePressed is true, we do nothing.

The final node in the released chain is a little bit of polish. Once we’ve done rotating the camera using left click and drag, the next time we move, we want the character to move in the direction the camera is facing. We do this by updating the rotation of MyPlayerController.

Hoe about the right click action event?

Right click action

Right click action

This almost the same as left click, but we don’t add that final function to the released sequence. The reason for this, is that right click and drag will update rotation anyway, so we don’t need to do this twice.

Camera rotation control

The vital and missing information left out from the initial upload!

There are two functions to create which are used to control the camera:

RotateCameraLookUp

RotateCameraLookUp

RotateCameraTurn

RotateCameraTurn

This will allow us to control the position of the camera.

Left click and drag camera

We’ve done a lot of the hard work for this earlier in setting up our blueprints. EDIT: Looks like I missed adding this information when I first uploaded. It is now included in the section above.

Left click and drag blueprint

Left click and drag blueprint

Since we have the axes Turn and LookUp already set up, it is a simple task to only make these events do something is LeftMousePressed is true.

If it is true – that is the player is holding left mouse down and moving the camera – we simply rotate the camera, using our two functions CameraTurn and CameraLookUp.

Almost too easy!

Right click and drag camera

What does holding right click and drag do? We rotate the camera and the player controller. Easy.

Right click and drag

Right click and drag

Very similar to left click, except we also need to RotateCharacterToCamera, and add pitch input to the player controller. What could be simpler!?

All our hard work earlier really paid off in this section. Those re-usable functions really are worth their weight in gold, and make the blueprints a lot more readable.

10 thoughts on “Creating an MMO-style controller VII: Click and Drag Camera Control

  1. Perhaps something stupid but in the Left click and drag camera you have a function Rotate Camera LookUp, that is missing (or I have looked over it) on the previous tutorials [>.<']
    For the rest good tutorial! 🙂

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s