First person look around controls – mouse touch tilt

In this post you will learn how to implement look around controls for Mouse, Touch and Gyro. It will cover basics of UMG and blueprint communication. feature

This Tutorial has been created using Unreal Engine 4.8.2. 
Make sure you are working on the same version of the engine.

Let’s start by writing down look around controls requirements: – Player can look around using mouse on PC and touch screen on mobile device. Additionally on mobile he can use accelerometer too, – Player should be able to change sensitivity for mouse, touch screen and accelerometer,

IMPORTANT NOTE: Tilt will work only for iOS devices! If you are creating Android game you should think twice if you want to support Tilt. Basically there is a lot of android hardware our there and supporting them all is really hard if you don’t have the devices and programmers. Tilt will work different on different Devices because of different tilt hardware.


CREATING NEEDED DATA

  • ENUM: ControllingDevice with Mouse, Touch and Gyro added, newenum control
  • Game Instance: ShooterGameInstance, (we had created it earlier)
  • GameplayPlayerController, GameplayPlayerCharacter, GameplayGameMode, GameplayGameState, GameplayGameHUD (we had created them earlier)

IN GAMEPLAY PLAYER CONTROLLER This class will be responsible for look around controls. Open it and add some variables:

  • CurrentControlingDevice (ENUM ControllingDevice) default should be set to Mouse,
  • MouseSensitivityMin, float  (default: 0.1)
  • MouseSensitivityMax, float (default: 2)
  • MouseSensitivityCurrent, float (default: 1)
  • TouchSensitivityMin, float (default: 15)
  • TouchSensitivityMax, float (default: 5)
  • TouchSensitivityCurrent, float (default: 10)
  • GyroSensitivityMin, float (default: 20)
  • GyroSensitivityMax, float (default: 60)
  • GyroSensitivityCurrent, float (default: 40)

Now add couple of functions.

  • GetCurrentControllingDevice. This should be pure function. getcurrentcontrollingdevice

    USEFUL TIP: If you aren’t changing any variables in function you can use Pure function which don’t need pin to execute. purevsnormal

  • SetCurrentControllingDevice
    setcurrentcontrollingdevice
  • GetSensitivity (add local variable LocalSensitivity) getsensitivity
  • SetSensitivity
    setsensitivity

USEFUL TIP: If you will know that variable will be changed from other class ALWAYS put a function like SetSensitivity to change that variable. Never set variables from other classes different than class in which variable was created! Use functions instead. Like I did with SetSensitivity and SetCurrentControllingDevice. The rule is that only class which have variable declared can change it. setvariablesfromdifferentclasses

We are still in GameplayPlayerController but we need to add new input axis in Project Settings. To do so go to Project Settings -> Input and add two new axis from MouseX and MouseY (MouseY should have scale “-1”) as in screen. newinputs


MOUSE LOOK AROUND Now when you go to GameplayPlayerController you can find your MouseX and MouseY inputs. Let’s create events for them to drive look around for mouse.

mouseinput

From now controls are done for mouse, you can test it out!


TILT LOOK AROUND You will need only one variable: LastTilt (vector) to do tilt controls. In GameplayPlayerController find event “Tilt” and create this graph.

USEFUL TIP: To test Touch or Gyro controls you can use UDKRemoteTool. Just run the game on PC, run UDKRemoteTool and set your PC IP. Your device need to be in the same network as your PC.


TOUCH LOOK AROUND  As earlier you will need one new variable: LastTouch (vector) and InputTouch event in GameplayPlayerController. touchcontrols

USEFUL TIP: You can break down struct variables as I did with LastTouch. Just right click on variable and “Split Struct Pin” splitstructpin

It’s all for the controlling part. It was easy! Now let’s move to changing sensitivity with UMG widget.


CHANGE SENSITIVITY IN UMG I will use UMG to change sensitivity, but it will be only debug widget. UMG is great tool and I will do a lot of tutorials when doing final UI. For now it will be just debug panel to change sensitivity. First you need to create new Widget. Name it UI_Debug_ChangeSensitivity.

newwidget

Open it and add sliders like I did here. Remember to name them correctly ;) widget

Now go to graph and create function GetController. It should be pure and return GameplayPlayerController. You should create such events early in Blueprints because they will look much more cleaner later.

returngameplayplayercontroller

Now in event graph create event Construct and update sliders information. I will use Float Map Range which is super cool for this kind of things. widgetconstruct

Now if you click on the Slider in Designer view you can add new event – OnValueChanged.

onvaluechanged

Add this event for all of the sliders. We are doing the same thing so here’s screen with all of them added.

setsensitivitywidget

Last thing in this widget is to create button and add an event to close the widget. close panel

This is all in the widget. As I said it’s only for debug. UMG is big and powerful tool and I will definitely do tutorials about it.


LAUNCHING UI_Debug_UI_Debug_ChangeSensitivity Go back to GameplayPlayerController and create a key event. Right mouse on graph and just type “O” you will see key events.

launchingwidget

Now during in-game you can press “O” and widget will appear. screen


That’s all in this post. You have mouse touch and tilt controls implemented and you can change sensitivity for all of them using custom widget. Hopefully this post will be useful for you guys!

17 thoughts on “First person look around controls – mouse touch tilt

  1. Pingback: How to add weapons – basics + equipping | Shooter Game Tutorial

  2. First: When I use Get Sensitivity node in UI_Debug_ChangeSensitivity it doesn’t have an execute node. (Possibly because it’s pure, right?) Will it be a problem?
    Second: When I set sensitivity to max in game it moves slover and when I re-open Mouse Sensitivity menu pressing O the slider is set to min. Have nay idea?

    Like

  3. A well made tutorial.I did get stuck for a little ,but i eventually figured it out and it made be have a better understand of whats going on in the code .Thank you :)

    Like

  4. OK, so I’m kind of stuck.. Can anyone help me?
    The problem is that it says that I should create some variables. The first one being ENUM ControllingDevice named “CurrentControlingDevice”. So when I create a variable and go to Variable Type-> ENUM – there is no “ControllingDevice” even though I created it earlier. Am I missing something or the problem comes from me using a newer version of UE (4.8)? Please help and thanks in advance!
    P.S: Sorry for the newbie question, I’m kind of new at this but I’m trying my best to keep up

    Like

  5. Just a couple of tips for the people new to Unreal Engine 4 that andrzejkoloska doesn’t mention it:

    -If you are wondering from where that “Return Node” component comes, it is created when you create an output at the function (example: GetCurrentControlDevice has an output called CurrentControllingDevice. That’s the Return Node).

    -Unable to see a component to place? Pick a pin from a function or another component to see what components are compatible with. Most of the times the ones you are looking for will appear this way.

    -(Currently in 4.8) the switch and others will appear as “Switch on Enumerator” instead of the name of the function, just in case if you are wondering about it.

    -The color shows the type of variable: Dark Green-Enumerator, Light/Yellow green-Float, Red-Boolean, Blue-(related to player control), etc.

    -At “Mouse Look Around”, you are wondering what are these “==” and “X” components? Seek them as “Equal” and “Multiply” (this one is float*float).

    -(Now in 4.8) When creating the function GetController of the UMG slider, it needs now mandatorily a pin for “Cast Failed”, or it will throw you a blue warning telling you “that it doesn’t find a Return Node”. Go do something like this: http://i.imgur.com/mlBrdZr.png

    -When creating the close button, in case you don’t know how to find that “Set” with that boolean, seek “Set Show mouse cursor”.

    -While you are creating the event to make pop-up the window, in order to get the “Create UI_Debug_ChangeSensitivity_C widget” component, place a “Create Widget”, then at the purple pin (Class), select the widget on the dropable menu.

    The tutorials are sometimes hard to read, but they are really useful. Thanks andrzejkoloska for write them.

    Like

  6. Yeah, this whole part is a bit confusing for me. I have no intent to make a game for handheld, thus no need for touch and such, just mouse. But by default without doing this part, playing in browser I can already move around (look around) with the mouse… so is any of this actually needed?

    Like

  7. Yeah, this whole part is a bit confusing for me. I have no intent to make a game for handheld, thus no need for touch and such, just mouse. But by default without doing this part, playing in browser I can already move around (look around) with the mouse… so is any of this actually needed?

    Like

  8. OK, I’m lost… How did he get this purple “Get Current Controlling Device” ? The only purple thing I have is “Construction script” and I have no idea how to create the one I need.

    P.S: If it’s possible I want someone (who understands) to give me his/her e-mail so that he/she can explain to me what to do and why am I doing it. It’s just that I want to know what I’m doing, I want to understand it. For now ofc I just want to move on, but still..
    Thank you!

    Like

  9. Sorry I got everything working, for some reason the map kept loading the third person player instead even thought all the settings were changed.

    Like

  10. First off thank you very much for the amazing tutorials. They have been so helpful. I am very green when it comes to UE4, and your tutorials are helping me leaps and bounds. But anyways, I noticed that when I hit O twice by accident, it cause the project to act a little weird. I went a head and played around with blueprints and came up with a little fixes. Give me your two cents on this setup please. First I made a small Function called IsOpen, which just sets a variable called IsOpen?. Then in the UI_Debug graph I had the IsOpen? Variable set to false at the end of the X button you made. From there I went to the GamePlayerController, made a branch off of the O event node. The Condition is the IsOpen? variable. True is left alone. On false i set the variable to True, then run the rest of your script. So that way the widget UI can’t be open more then once. If that all makes sense. Any thoughts on this would be nice.

    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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s