15. UE5 – how to easily rotate objects with click and drag

In this post we will look at how to rotate object or character using blueprints, similar to character creation or character selection.

YouTube summary of what’s covered here.

Prerequisites

In order to be able to click buttons you will want a game mode / character controller which will allow this.

So first of all, create or edit your existing CharacterController – in my case I created CreateCharacterController and enable mouse input.

You can then open up your world settings on the map view and edit either the Player Controller Class directly or create a new GameMode blueprint and assign it here and link it to the player controller.

You can create a new GameMode by right clicking content browser and creating new Blueprint and searching for GameMode.

Inside the Game Mode blueprint, you can assign other core blueprints, such as the HUD and the Player Controller classes.

In this instance we can modify the Player Control class. Then you can assign it in world settings like below.

Rotating using a button

If you don’t want to use button and instead want to rotate on mouse drag, you can skip this chapter!

If you want to rotate the character using a button you can do this via a widget.

In order to display the widget, you can create a new HUD (Heads Up Display) blueprint.

You can right click in Content Browser and create new Blueprint class, then find HUD.

Next create a widget class which will hold your buttons.

Next, inside the HUD, go to Event Graph and load in the new created widget:

You can use the Create Widget function to create it by class name and add it to the viewport.

Next, you will want to load the HUD

With this complete, the new widget will load up whenever you start this map.

Only for reference purposes, I purchased the Fantasy GUI kit for the buttons etc:

This kit contains nice designs for buttons and other layouts. But this is not essential for this demo, it just improves the aesthetics.

Simply add in some buttons in your design, one for rotating left, another for rotating right.

You can see on my component list, the designed button is a simple button which has added Image component – its a little more fancy than that in a sense that it has changes on hover effect etc. but you will mainly just need the On Pressed and On Released events from simple button.

Then inside the blueprints add the following

You will just need to add a new variable for Rotate Char as you can see, and you can handle this either inside the Event Tick or custom events like this one.

You can increase sensitivity by reducing the delay/sleep and/or increasing the 1 degree rotation.

The Hero Bp is the reference to the object that you wish to rotate, in my case its a Skeletal Mesh Actor.

You can get this reference either on Spawn Actor or Get Actor of Class for example.

Rotating object by mouse drag

The last image above is useful here so check that out – you will need to have a reference to the object that you wish to rotate.

For this part you will want to go to the Blueprint for the object you wish to rotate, in my case the skeletal mesh actor for my character create screen.

Press Add -> Cylinder under basic shapes.

Make this cylinder quite large – this is where you will be capturing the click events.

The key here is to find the visible component and disable it once you’re happy with the size of your cylinder.

Next, with your cylinder selected, add some events for On End Cursor Over, On Clicked and On Released.

I tried to fit all the blueprints you need into one screenshot.

First, create some variables as shown on bottom left.

Next, start with 1 and 2 and link up the new events to set the Dragging boolean variables.

Next, right click and type Add custom event and rename them to HandleDragEvent and HandleRotation.

These events will need an input representing the delta time, which is a float variable. So when you create the custom event, click on it and add an input like so.

Inside the Handle Drag Event we’re essentially getting mouse X input and keeping track of it. Based on the amount travelled, we’re evaluating the velocity for how fast we want to rotate the object.

the x90 is basically the sensitivity field, so change that as you like

Inside the Handle Rotation function event, we simply multiply the velocity by delta seconds – to get the ‘distance’ or in this case how many degrees we want to add to the actor.

Then we add some ‘decay’ to these rotations. i.e. we want it to slow down on its own.

We do the check for greater/smaller than 0.1 as we don’t want to constantly divide even when rotation is basically 0.

the x0.95is basically reducing the angular velocity by 5% each frame.

And finally point 5 is just linking these events on each frame.

Finally, depending on how you spawned your object, you may need to enable input on it like so:

If you don’t enable the input on this object, it will not record the mouse click events.

And that’s it, you can now rotate your object dynamically!