<?xml version="1.0" encoding="UTF-8" standalone="yes"?><oembed><version><![CDATA[1.0]]></version><provider_name><![CDATA[Shooter Game Tutorial]]></provider_name><provider_url><![CDATA[http://shootertutorial.com]]></provider_url><author_name><![CDATA[andrzejkoloska]]></author_name><author_url><![CDATA[https://shootertutorial.com/author/andrzejkoloska/]]></author_url><title><![CDATA[First person look around controls &#8211; mouse touch&nbsp;tilt]]></title><type><![CDATA[link]]></type><html><![CDATA[<p>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. <a title="First person look around controls – mouse touch tilt" href="http://shootertutorial.com/2015/06/02/first-person-look-around-controls-mouse-touch-tilt/"><img class="alignnone wp-image-173 size-full" src="https://shootertutorial.files.wordpress.com/2015/06/feature.jpg?w=523&#038;h=330" alt="feature" width="523" height="330" /></a> <!--more--></p>
<pre><strong>This Tutorial has been created using Unreal Engine 4.8.2</strong>. 
Make sure you are working on the same version of the engine.</pre>
<p>Let&#8217;s start by writing down look around controls requirements: &#8211; Player can look around using mouse on PC and touch screen on mobile device. Additionally on mobile he can use accelerometer too, <span style="line-height:1.5;">&#8211; Player should be able to change sensitivity for mouse, touch screen and accelerometer,</span></p>
<blockquote><p><strong>IMPORTANT NOTE</strong>: 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&#8217;t have the devices and programmers. Tilt will work different on different Devices because of different tilt hardware.</p></blockquote>
<hr />
<p><strong>CREATING NEEDED DATA</strong></p>
<ul>
<li>ENUM: ControllingDevice with Mouse, Touch and Gyro added, <a href="https://shootertutorial.files.wordpress.com/2015/05/newenum.jpg"><img class="alignnone wp-image-56 size-medium" src="https://shootertutorial.files.wordpress.com/2015/05/newenum.jpg?w=295&#038;h=300" alt="newenum" width="295" height="300" /></a> <a href="https://shootertutorial.files.wordpress.com/2015/05/control.jpg"><img class="alignnone size-full wp-image-57" src="https://shootertutorial.files.wordpress.com/2015/05/control.jpg?w=154&#038;h=156" alt="control" width="154" height="156" /></a></li>
<li>Game Instance: ShooterGameInstance, (we had created it <a title="Configuring new project. UE4 main classes explanation." href="http://shootertutorial.com/2015/05/30/configuring-new-project-ue4-main-classes-explanation/">earlier</a>)</li>
<li>GameplayPlayerController, GameplayPlayerCharacter, GameplayGameMode, GameplayGameState, GameplayGameHUD (we had created them <a title="Configuring new project. UE4 main classes explanation." href="http://shootertutorial.com/2015/05/30/configuring-new-project-ue4-main-classes-explanation/">earlier</a>)</li>
</ul>
<p><b>IN GAMEPLAY PLAYER CONTROLLER</b> This class will be responsible for look around controls. Open it and add some variables:</p>
<ul>
<li>CurrentControlingDevice (ENUM ControllingDevice) default should be set to Mouse,</li>
<li>MouseSensitivityMin, float  (default: 0.1)</li>
<li>MouseSensitivityMax, float (default: 2)</li>
<li>MouseSensitivityCurrent, float (default: 1)</li>
<li>TouchSensitivityMin, float (default: 15)</li>
<li>TouchSensitivityMax, float (default: 5)</li>
<li>TouchSensitivityCurrent, float (default: 10)</li>
<li>GyroSensitivityMin, float (default: 20)</li>
<li>GyroSensitivityMax, float (default: 60)</li>
<li>GyroSensitivityCurrent, float (default: 40)</li>
</ul>
<p>Now add couple of functions.</p>
<ul>
<li>GetCurrentControllingDevice. This should be pure function. <a href="https://shootertutorial.files.wordpress.com/2015/06/getcurrentcontrollingdevice.jpg"><img class="alignnone size-medium wp-image-145" src="https://shootertutorial.files.wordpress.com/2015/06/getcurrentcontrollingdevice.jpg?w=300&#038;h=289" alt="getcurrentcontrollingdevice" width="300" height="289" /></a><br />
<blockquote><p><strong>USEFUL TIP</strong>: If you aren&#8217;t changing any variables in function you can use Pure function which don&#8217;t need pin to execute. <a href="https://shootertutorial.files.wordpress.com/2015/06/purevsnormal.jpg"><img class="alignnone size-full wp-image-146" src="https://shootertutorial.files.wordpress.com/2015/06/purevsnormal.jpg?w=256&#038;h=260" alt="purevsnormal" width="256" height="260" /></a></p></blockquote>
</li>
<li>SetCurrentControllingDevice<br />
<a href="https://shootertutorial.files.wordpress.com/2015/06/setcurrentcontrollingdevice.jpg"><img class="alignnone size-medium wp-image-148" src="https://shootertutorial.files.wordpress.com/2015/06/setcurrentcontrollingdevice.jpg?w=300&#038;h=224" alt="setcurrentcontrollingdevice" width="300" height="224" /></a></li>
<li>GetSensitivity (add local variable LocalSensitivity) <a href="https://shootertutorial.files.wordpress.com/2015/06/getsensitivity.jpg"><img class="alignnone size-medium wp-image-149" src="https://shootertutorial.files.wordpress.com/2015/06/getsensitivity.jpg?w=300&#038;h=188" alt="getsensitivity" width="300" height="188" /></a></li>
<li>SetSensitivity<br />
<a href="https://shootertutorial.files.wordpress.com/2015/06/setsensitivity.jpg"><img class="alignnone size-medium wp-image-150" src="https://shootertutorial.files.wordpress.com/2015/06/setsensitivity.jpg?w=300&#038;h=137" alt="setsensitivity" width="300" height="137" /></a></li>
</ul>
<blockquote><p><strong>USEFUL TIP</strong>: 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. <strong>The rule is that only class which have variable declared can change it.</strong> <a href="https://shootertutorial.files.wordpress.com/2015/06/setvariablesfromdifferentclasses.jpg"><img class="alignnone size-medium wp-image-151" src="https://shootertutorial.files.wordpress.com/2015/06/setvariablesfromdifferentclasses.jpg?w=300&#038;h=185" alt="setvariablesfromdifferentclasses" width="300" height="185" /></a></p></blockquote>
<p>We are still in GameplayPlayerController but we need to add new input axis in Project Settings. To do so go to Project Settings -&gt; Input and add two new axis from MouseX and MouseY (MouseY should have scale &#8220;-1&#8221;) as in screen. <a href="https://shootertutorial.files.wordpress.com/2015/06/newinputs.jpg"><img class="alignnone size-medium wp-image-153" src="https://shootertutorial.files.wordpress.com/2015/06/newinputs.jpg?w=300&#038;h=135" alt="newinputs" width="300" height="135" /></a></p>
<hr />
<p><strong>MOUSE LOOK </strong><b>AROUND</b> Now when you go to GameplayPlayerController you can find your MouseX and MouseY inputs. Let&#8217;s create events for them to drive look around for mouse.</p>
<p><a href="https://shootertutorial.files.wordpress.com/2015/06/mouseinput.jpg"><img class="size-medium wp-image-154 alignnone" src="https://shootertutorial.files.wordpress.com/2015/06/mouseinput.jpg?w=300&#038;h=184" alt="mouseinput" width="300" height="184" /></a></p>
<p>From now controls are done for mouse, you can test it out!</p>
<hr />
<p><strong>TILT LOOK AROUND</strong> You will need only one variable: LastTilt (vector) to do tilt controls. In GameplayPlayerController find event &#8220;Tilt&#8221; and create this graph. <a href="https://shootertutorial.files.wordpress.com/2015/06/tiltevent1.jpg"><img class="alignnone wp-image-157 size-medium" src="https://shootertutorial.files.wordpress.com/2015/06/tiltevent1.jpg?w=300&#038;h=91" alt="" width="300" height="91" /></a></p>
<blockquote><p><b>USEFUL </b><strong>TIP</strong>: To test Touch or Gyro controls you can use <a href="https://itunes.apple.com/us/app/udk-remote/id398375618?mt=8" target="_blank">UDKRemoteTool</a>. 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.</p></blockquote>
<hr />
<p><strong>TOUCH LOOK AROUND </strong> As earlier you will need one new variable: LastTouch (vector) and InputTouch event in GameplayPlayerController. <a href="https://shootertutorial.files.wordpress.com/2015/06/touchcontrols.jpg"><img class="alignnone size-medium wp-image-158" src="https://shootertutorial.files.wordpress.com/2015/06/touchcontrols.jpg?w=300&#038;h=177" alt="touchcontrols" width="300" height="177" /></a></p>
<blockquote><p>USEFUL TIP: You can break down struct variables as I did with LastTouch. Just right click on variable and &#8220;Split Struct Pin&#8221; <a href="https://shootertutorial.files.wordpress.com/2015/06/splitstructpin.jpg"><img class="alignnone size-medium wp-image-159" src="https://shootertutorial.files.wordpress.com/2015/06/splitstructpin.jpg?w=300&#038;h=170" alt="splitstructpin" width="300" height="170" /></a></p></blockquote>
<p>It&#8217;s all for the controlling part. It was easy! Now let&#8217;s move to changing sensitivity with UMG widget.</p>
<hr />
<p><strong>CHANGE SENSITIVITY IN UMG</strong> 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.</p>
<p><a href="https://shootertutorial.files.wordpress.com/2015/06/newwidget.jpg"><img class="alignnone size-medium wp-image-160" src="https://shootertutorial.files.wordpress.com/2015/06/newwidget.jpg?w=198&#038;h=300" alt="newwidget" width="198" height="300" /></a></p>
<p>Open it and add sliders like I did here. Remember to name them correctly <span class='wp-smiley wp-emoji wp-emoji-wink' title=';)'>;)</span> <a href="https://shootertutorial.files.wordpress.com/2015/06/widget.jpg"><img class="alignnone size-medium wp-image-162" src="https://shootertutorial.files.wordpress.com/2015/06/widget.jpg?w=300&#038;h=194" alt="widget" width="300" height="194" /></a></p>
<p>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.</p>
<p><a href="https://shootertutorial.files.wordpress.com/2015/06/returngameplayplayercontroller.jpg"><img class="alignnone size-medium wp-image-163" src="https://shootertutorial.files.wordpress.com/2015/06/returngameplayplayercontroller.jpg?w=300&#038;h=81" alt="returngameplayplayercontroller" width="300" height="81" /></a></p>
<p>Now in event graph create event Construct and update sliders information. I will use <a href="https://docs.unrealengine.com/latest/INT/BlueprintAPI/Math/Float/MapRange/index.html" target="_blank">Float Map Range</a> which is super cool for this kind of things. <a href="https://shootertutorial.files.wordpress.com/2015/06/widgetconstruct.jpg"><img class="alignnone size-medium wp-image-164" src="https://shootertutorial.files.wordpress.com/2015/06/widgetconstruct.jpg?w=300&#038;h=217" alt="widgetconstruct" width="300" height="217" /></a></p>
<p>Now if you click on the Slider in Designer view you can add new event &#8211; OnValueChanged.</p>
<p><a href="https://shootertutorial.files.wordpress.com/2015/06/onvaluechanged.jpg"><img class="alignnone size-medium wp-image-166" src="https://shootertutorial.files.wordpress.com/2015/06/onvaluechanged.jpg?w=300&#038;h=201" alt="onvaluechanged" width="300" height="201" /></a></p>
<p>Add this event for all of the sliders. We are doing the same thing so here&#8217;s screen with all of them added.</p>
<p><a href="https://shootertutorial.files.wordpress.com/2015/06/setsensitivitywidget.jpg"><img class="alignnone size-medium wp-image-167" src="https://shootertutorial.files.wordpress.com/2015/06/setsensitivitywidget.jpg?w=300&#038;h=244" alt="setsensitivitywidget" width="300" height="244" /></a></p>
<p>Last thing in this widget is to create button and add an event to close the widget. <a href="https://shootertutorial.files.wordpress.com/2015/06/close-panel.jpg"><img class="alignnone size-medium wp-image-168" src="https://shootertutorial.files.wordpress.com/2015/06/close-panel.jpg?w=300&#038;h=68" alt="close panel" width="300" height="68" /></a></p>
<p>This is all in the widget. As I said it&#8217;s only for debug. UMG is big and powerful tool and I will definitely do tutorials about it.</p>
<hr />
<p><strong>LAUNCHING UI_Debug_UI_Debug_ChangeSensitivity</strong> Go back to GameplayPlayerController and create a key event. Right mouse on graph and just type &#8220;O&#8221; you will see key events.</p>
<p><a href="https://shootertutorial.files.wordpress.com/2015/06/launchingwidget.jpg"><img class="alignnone size-medium wp-image-169" src="https://shootertutorial.files.wordpress.com/2015/06/launchingwidget.jpg?w=300&#038;h=54" alt="launchingwidget" width="300" height="54" /></a></p>
<p>Now during in-game you can press &#8220;O&#8221; and widget will appear. <a href="https://shootertutorial.files.wordpress.com/2015/06/screen.jpg"><img class="alignnone size-medium wp-image-171" src="https://shootertutorial.files.wordpress.com/2015/06/screen.jpg?w=300&#038;h=233" alt="screen" width="300" height="233" /></a></p>
<hr />
<p>That&#8217;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!</p>
]]></html><thumbnail_url><![CDATA[https://i1.wp.com/shootertutorial.files.wordpress.com/2015/06/feature.jpg?fit=440%2C330]]></thumbnail_url><thumbnail_height><![CDATA[277]]></thumbnail_height><thumbnail_width><![CDATA[440]]></thumbnail_width></oembed>