Advanced Joystick in UE4 / Multiplayer Top-Down

Overview

Hey there! This is my first tutorial for UE4. And it associated with first task, which needed be solve, when I started making my first game( less than month ago 😀 ). You can find similar tutorials with mouse implementation. But it couldn’t be adapted for gamepads. So I solved it by myself.

In this tutorial I will teach you to make a thing like this:

Using Gamepad’s sticks in Top-Down games. Left stick is for moving, and right is for aiming.

With network replication.

Before we start, I assume that you know these:

open/create projects UE4
using Content Browser
create blueprints/nodes
functions and variables.

~~Link to project at the end of post~~. Version 4.11.2.

Preparing our project

In first, create a new Blueprint project with Top-Down template.
Find and open two blueprints TopDownCharacter and TopDownController in TopDownBP/Blueprints/ path.
Delete all nodes in the Event Graph.

Set your inputs

Just follow the path Settings–> ProjectSettings–> Inputs

Set it as in the picture below:

MoveForward and MoveRight – are for implementing character’s movement with Left stick, and WASD for debugging.

LookRight и LookForward – are for implementing aiming with Right Stick, and ←, →, ↑, ↓ for debugging.

Left Stick

Now open TopDownController and make a chain like in the picture below.

InputAxis MoveForward и MoveRight – are movement events, that we set in Inputs settings. For Left Stick and WASD. AddMovementInput – is a replicated by default Pawn’s functions, that responsible for Character’s movement. GetControlledPawn – gets reference for controlled Character. isValid – in that case, using for multiplayer debugging. GetForwardVector и GetRightVector – gets directions. We can delete them, and add “90” to X in first AddMovementInput, and “90” to Y in second AddMovementInput.

Right Stick

Now the hardest one.

In first, we need create two variables.

FaceRotation – is a Rotator type var with RepNotify replication. isCovered? – bool that check Right Stick’s changes.

InputAxis LookForward и LookRight – are aiming events, that we set in Inputs settings. For Right Stick and ←, →, ↑, ↓.

StickRotatorServer – custom event with Float params( values change between -1.0 and 1.0) and Reliable RunOnServer replication. It calls another custom event that has Multicast replication.

StickRotatorAll (1) – a custom event with Float-parameters and Multicast replication. Next we cast to our character CastToTopDownCharacter (2), a reference for character gets from GetControlledPawn (3). From this link get the coordinates of our character – GetActorLocation (4). Float values we convert to Vector – MakeVector (5). Then sum two vectors (6). Node FindLookAtRotation (7) – defines where actor is looking, it has two vector inputs Start (initial coordinates of the actor, in this case, our character), Target (coordinates of where actor is looking), and output Rotator, which rotates actor to Target’s location. The resulting Rotator and the current face direction of character (GetActorRotation (8b)) connect to Lerp(Rotator) (8a) in order to smooth rotation. The result of Lerp write to FaceRotation (9) var. VectorLength (11a) gives us the length of the vector from the 5th. If vector is more than “0.03” (11b), boolean isCovered? (11c) sets True and via Branch (12a) calls a custom event Covered (12b). If less than “0.03”, set to FaceRotation (12c) current direction of our character, then call NotCovered (12d) event. Custom events Covered and NotCovered receive references to TopDownCharacter (2) and CharacterMovementComponent (13).

Covered и NotCovered events, which change two inherited bools, then call custom event RotateNow (10).

OrientRotationToMovement – if True, look first gif. If False second gif.

UseControllRotationYaw – if True, Character’s Yaw will be updated to match Controller’s ControllerRotation yaw. Also when OrientRotationToMovement and UseControllRotationYaw set True, character on client side begin to tremble.

Last part is rotating our character.

FaceRotation variable has RepNotify replication. It means that OnRep_FaceRotation(creates in function tab) function calls every time, when FaceRotation changes.

There we cast to TopDownCharacter and call SetControlRotation.

It’s a mirror from WebArchive