Creating a side-scroller mobile game with Unreal Engine 4—with no prior experience

Have you always wanted to make a game but don’t know where to start? Or are you just interested in game technology?

In this article series, we’ll demonstrate how to use Unreal Engine 4 to make a side-scroller game and package it for Android. This game will have various elements like collecting pickups/coins, a health system, and also enemy AI. If you’ve played Mario in past then you’ll love it. We’ll try to build our game along those lines only— even if you don’t have any prior programming experience.

By the end of this series, we’ll have completed a basic game like Mario. We’ll start with the basics of Unreal Engine 4 and then dig into blueprints, how the game engine works, and how collisions and logic work.

Getting Started

To get started, download UE4 here (you have to sign up to download the engine). Once you’ve installed the engine (pretty straightforward), launch the Epic Games Launcher.

Next, go to the New Project tab, select Blueprint, and click on the Side Scroller template. Make sure you have the same settings as shown in the image below. You can name your project whatever you want. Once done, click on Create Project in the bottom right corner, as shown below:

Some basics, now that we’ve worked through the initial project setup.

There are 2 modes for making games in Unreal engine. You can either use blueprints only (blueprints represent a visual scripting language in Unreal Engine) or you can use C++.

Ideally, it’s best to use a combination of both because some things are easier in BPs (blueprints), while others are more efficient and effective in C++ (we won’t go in detail in this article on when to use BP or C++ , but as a rule of thumb, if you want optimal performance, go for C++).

Now take a look at your content browser and the included folders:

• Geometry: The Geometry folder holds your meshes/assets. It’s a good practice to keep all your assets in this folder.
• Mannequin: The Mannequin folder holds our character (player) model and its related animations. These are provided by default by UE when we use a template.
• SideScrollerBP: This is where all of the logic resides. This folder holds all of our BPs for the game. You can consider BPs as programmable assets/GameObjects (if you’re coming from Unity, they’re similar to prefabs).

Creating a Pickup

First, we’ll create a simple pickup. A pickup is something that we can collect in a game, e.g. coins. Right click on the content browser section and click on the blueprint class.

Next, select Actor and name your new blueprint as PickupBP.

Double click on pickup, and the BP editor window will pop up.

Click on Add Component and select Static Mesh. A mesh is like a 3D object. We want to add something to our PickupBP so that we can interact with it.

On the right side you will see a new property called Static Mesh. Click on it and select Cube.

Set the dimensions of your cube, as shown in the image below. Basically this sets the scale(size) of your Pickup. You can increase or decrease according to your wish but this scale is good enough.

Again, click on Add Component, type rotation, and select rotating movement.

Now our pickup will rotate on its own axis. Now place your PickupBP in the world by simply dragging it into the world.

Now, to test this out, play the game by pressing the Play icon or by pressing Alt + P. You will see that your pickup is rotating, but you cannot yet collect it. That’s because our pickup currently doesn’t have any collision — or you could say it blocks collision.

Adding Pickup Collision

Open up PickupBP (double click) and then select Static Mesh. On the right side you will see properties/details. We’ll change the collision settings from BlockAllDynamic, which means to block every collision. Change it to OverlapOnlyPawn so that it only detects collisions with Pawn (i.e. our character). At the top of the dev environment, click on Compile and then save it.

Now start the game again and run into the pickup. You’ll notice you can now run into the pickup like it’s air. It’s cool, but still we want to collect it like a coin.

Open your PickupBP and select Static Mesh — on the right side we have some events that our mesh can generate. We want an event where “something overlaps the mesh”. Click on the + icon (in my case it’s “view” because I already created it) next to On Component Begin Overlap.

Open up your PickupBP and go to the Event graph section. We’ll write our first blueprint code now 🙂

You’ll see a box (we’ll call it a node) with text reading On Component Begin Overlap”. Click and drag a node as shown below and type “destroy actor”.

What we’re doing here is telling the Begin Overlap event that “If our character collides with you, destroy yourself”.

Now click on Compile and then save. Close blueprint and play again by pressing Alt + P or hitting the Play icon. You’ll notice if you collide with the pickup it will now disappear.

Neat! Now that our basic pickup is set up, we can make as many as we want, and they will all behave the same way.

Try dragging the pickup again from the content browser to the play area (viewport). You can also duplicate existing pickups within the viewport by holding Alt and dragging the arrow.

If you haven’t noticed yet, we have 3 arrows for every object in our viewport, which represent the X, Y, and Z axes. If you play again, once you collide with pickups, they will now disappear.

It’s cool to see this progress, but there’s a problem. We cannot see our collected pickups. If you’ve ever played Mario, once you collect a coin, you see an increase in coins reflected in an in-game display. We have not yet implemented that functionality.

So we need to have something where we can store our pickup count and (later on) display it. We’ll start first by storing our pickup count.

Introducing variables

In layman’s terms, we can define a variable is something where we can store a value and can also change it. We’ll create this variable in our character blueprint.

Open up sideScrollerCharacter blueprint:

You’ll see some default nodes. These nodes control our player’s movement provided by default by UE. Now click on the + icon next to Variable the left side and name it PickupCount.

On the right side, you’ll see the properties of our newly-created variable. You’ll see it has a boolean type. Boolean is a variable type that stores True/yes or False/no, but we want to store number in it. So change its type to integer.

Hit Compile and save. You’ll see a new property called default value on the right side. The default value of an integer is 0 in Unreal Engine.

Now we have a variable where we can store our pickup count, but it’s still incomplete. Remember, we have to tell everything to computers. Currently, our game doesn’t know what to do with this variable.

Increasing the Pickup Count

Here, we’ll tell Unreal Engine how and when to increase our pickup count variable. First, close the SideScrollerCharacter blueprint and open up the Pickup blueprint.

Remember that we set up an On Component Begin Overlap event and told the pickup to destroy itself. We can do more things before it destroys itself. Drag a node from the other Actor pin and type “cast” into the SideScrollerCharacter. It should look something like this:

You can disconnect a node using Alt + click on the node itself.

What we’ve done here is communicate that before beginning the overlap event, first we want to do something with our character — so we first get a reference to our character by casting it.

Now we have access to our SideScrollerCharacter blueprint inside the Pickup blueprint. Now drag a node from As Sidescroller Character and type “set pickup count”.

We’ll perform simple addition here, but first we need to get the value of our pickupCount variable. Again, drag a node from As Sidescroller Character and type “get pickup count”.

You can move nodes around in the Event graph or in Blueprint in general by holding a right click and moving the mouse. To move a node, left click and drag. Right click on empty space, type “int + int”, and hit enter.

Connect your nodes, as shown below. All we’re doing is first getting the current value of the pickupCount variable, adding 1 to it, and then assigning the new value to PickupCount. That’s it! After that, we can again destroy the actor, making the pickup disappear once collected.

Hit Compile and save. Now play again. Everything should work the same as before, with the only difference being that we’re now storing the pickup count.

Displaying the Pickup Count

But we still cannot see our count. Open your pickup blueprint again and drag a node from set pickup count and type “print string”.

Now drag the node from Set: Pickup Count and connect it to print, as shown below. What we’re doing here is taking the value from PickupCount and printing it.

Your final blueprint should look something like this:

Hit Compile and save. Play your game again. In the Viewport, you’ll now see the pickup count value.

I think this is the right place to stop for now. Later on in this series, we’ll learn how to create a HUD ( Heads Up Display) where we can see our pickupCount values, health, etc. We’ll also learn how to package the game for Android. Stay tuned!

Have some suggestions ? Let’s connect Twitter, Github, LinkedIn