Unreal Engine 4 blueprint basic 2D mouse panning

This is a step by step guide on how to achieve mouse panning in Unreal Engine. We are going to use this type of mechanism in our game, Unbound, to reveal the story to the player.

For this tutorial, I’m using Unreal Engine 4 version 4.13.2 and 2D Blueprint Side Scroller template.  A little experience with UE4 is required.

Step 1: Create Level

First, let’s create a New Level. I’m going to call it PanningTutorial and it’s going to be placed in the Maps directory near the default 2D Side Scroller map. Now, let’s create a Resources folder and add an image and generate a sprite from it.

 

Step 2: Scene

Add your sprite to the current level scene and also add a camera actor, just like below. Don’t forget to arrange them nicely, to avoid some headaches.

 

Step 3: Set the main camera

If you hit Play, you’ll see a running blue character. That’s because, we are using the default camera. We need to tell Unreal that we want to use this new camera which has just been added to the scene. In order to do this, let’s open the level blueprint and on BeginPlay event, we will call a method SetViewTargetWithBlend with arguments to CameraActor and PlayerController.

Now if you hit Play, you should see your image like this:

 

Step 4: Mouse Pressed Event

Open again level blueprint and add two private variables:

  • Boolean IsMouseDown -> To know if the mouse is pressed or it’s has been released
  • Vector LastMousePosition -> Remember mouse coordiantes when it was clicked to compute delta

Right click and save for zoom

 

As you can see, we need to map Mouse Y to Z in our coordinate system. That’s because Z is pointing up. MousePosition is determined from current PlayerController.

 

Step 4: Panning

Now, on Tick event we need to ask if the mouse is pressed. If it is pressed, then translate the camera with a small offset (delta). This offset is a difference between LastMousePosition and current mouse position.

Finally compute delta and translate camera.

Mouse Panning Unreal Engine

Right click and save to zoom

Note that I have a float variable called Speed which is used to adjust the panning speed.

Step 5 (Optional): Mouse Cursor

If you want to show mouse cursor, just call ShowMouseCursor method after you set the camera on BeginPlay event.

 

Show Mouse Cursor Unreal Engine

 

Note!!! I noticed that the mouse Pressed event is ignored and only Released is triggered if we call ShowMouseCursor when we also use SetInputModeGameOnly. I don’t know if this is an UE4 bug or I call something wrong. We need to find out 😀

So, there you go, mouse panning in Unreal Engine in 4 steps 🙂

 

You may also like