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
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.
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.
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 🙂