uColumns

April 11, 2019

Back in 2018, when trying to decide which project to develop I came up with the idea of re-implementing in Unreal Engine a game I worked on using an in house engine (which sadly is now in the virtual limbo). That game was based on an old classic game named Columns, which is a mix of Tetris and match 3 games. Then I began working on the project, which involved learning Paper2D, which is the engine's 2D tool/plugin. While working on that I decided to turn it into a tutorial so, 5 weeks later I finished the test project and began writing this text. Frankly I never thought this process would consume so much time! Still, I believe it was worth it! At that time the latest stable engine version was 4.19.2 while 4.20 was in preview. Fast forward and the latest version (as of this writing) is 4.21.2 with the 4.22 in preview and almost released!

So, while the entire text was written according to tests done in Unreal Engine v4.19 the revision process involved reimplementing the project using v4.21 so it should be absolutely no problem to follow this tutorial with this version of the engine, aside from one compiler warning about one function that is used and not "fixed" in the text/tutorial.

The main goal of this tutorial is to showcase a process of developing a 2D game with Unreal Engine and C++. Note that what will be shown here is only one method of doing things and I don't claim to be the best one. Each person has his/her own experiences and preferences regarding the overall workflow and I don't doubt some people will think what I present here is totally wrong. All I can say is that everything in this tutorial was tested and at least on the used devices everything works as expected. In short, while I don't guarantee to showcase "the best techniques", I can promise that at the end the project works and there will be a playable game.

Regarding the game itself, if you don't know the inspirational one (Columns), it's basically a piece formed by random objects placed in a vertical format. This piece falls over time and the player can move it horizontally to land in a different grid column (this is the Tetris like part of the game). The player can also change the order in which those objects form the piece. The objective is to place those objects in a way that they form sequences of equal types (this is the "match 3" part of the game).

Is This For You?

As I have mentioned, this project requires Unreal Engine and C++, meaning that you should be comfortable with building C++ Unreal projects. I don't expect you to be a programming expert, only that you are capable of working with C++ combined with Unreal Engine, that's all. During the tutorial I will dump all the relevant C++ code in a format similar to this:

#include "somefile.h"
...
some_code

As you can see, I explicitly specify the source file name that receives the code. Part of the explanation is meant to tell where that code should be placed. If you have JavaScript enabled (please do so, as a lot of feature of this site will break if you don't), hovering the mouse over the code section will make a button labeled Select appear. Clicking it will select the entire source code in that box.

While I hope my explanation is enough so you can understand the logic behind the code and be able to rebuild your own complete source code, even if directly copying and pasting the snippets, I also understand it may not be an easy task. So, to that end, I provide the entire project code uploaded to Github. In this repository the master branch corresponds entirely to what is presented in this tutorial while the plus branch contains some additional features. Both branches contains files targeting Unreal Engine 4.21. All of the "raw" assets that I have created are also part of the repository. By "raw" I mean the files prior to importing into Unreal Engine.

I'm a programmer. Meaning: don't expect any of the graphics or audio in this project to be "good". Or even acceptable if you are really picky.

Regarding the Unreal Editor itself, please don't expect me to explain everything about how to use it. You should be able to understand some of the basics of it and, most importantly, how to navigate through it and find the internal editors. Because I don't assume you, the reader, know everything about the editor I do get into some specific details throughout the tutorial. Still, if something is not clear enough you can contact me!

If you are unsure you will be able to understand the contents of this tutorial, at the end of this introductory part I list a few links that may be of some help.

In any case, I'm a (PC) gamer and I'm not really fond of playing on mobile devices. Because of that it's extremely difficulty for me to know what works and doesn't in a mobile game. Still, I do talk a little bit about mobile in the tutorial. In a way this should serve as a disclaimer that my presented mobile version may not have optimal experience.

Tools

At some point I did think about placing here a "complete" list of tools with alternatives and so on. This is a somewhat very complicated task to be done so, instead I will just tell the tools I have used besides Visual Studio (Community Edition) and Unreal Engine.

For the graphics I used both Inkscape and GIMP. The sound effects were recorded by myself and edited with Audacity. As for the music I have used LMMS. Specifically regarding LMMS, I have used the beta (1.2.0-RC7) version because the stable one (1.1.3) crashes when loading projects that use VST plugins.

As you can see, I have only used free tools to develop this project. I believe the chances are high that you already have a personal preference towards an specific tool for some tasks. Please, do so while following this tutorial! What I have "listed" here is mostly for reference, nothing else!

Tutorial Structure

This tutorial is organized in 23 parts, not counting this introduction. The original idea was to keep all of them with similar length but that was not possible, specially when trying to keep them in a logical sequence. Because of that, some will be a lot bigger than others. Note that I did not think about making possible to skip some parts. If you do so and don't understand anything, please consider this fact before taking your sword and coming to behead me!

• Part 1 - In this part we stay more focused on the theoretical side of things. In here we detail what we want the game to be and delineate the overall structure of the implementation. At the end we set up the Unreal Engine project so in the subsequent parts we are ready to begin working.
• Part 2 - Game instance, player controllers, game modes and maps are created, which are fundamental to the overall structure of the project.
• Part 3 - We focus on the camera. Without it we wouldn't be able to see anything in the game. Or, at least, not in the desired way.
• Part 4 - Here we work on the grid, which is used to give us the necessary information to position our graphical elements.
• Part 5 - We start laying out the internal structure to present the initial visual elements, as well, the first graphical assets are added into the project.
• Part 6 - In here we begin the dynamic spawning of some of the visual elements of the game.
• Part 7 - Some minor improvements are performed here and then we work on an internal finite state machine system that will somewhat govern the entire rules of the game.
• Part 8 - We use the state machine to implement the first game rules.
• Part 9 - The object controlled by the player is finally implemented, or at least its initial code. In there the first interaction (input handling) is added.
• Part 10 - Movement of the object controlled by the player is somewhat "smoothed" out.
• Part 11 - "Gravity" is added and the player's object begin falling.
• Part 12 - Overall logic behind the algorithm necessary to verify the main objective of the game: matching sequences of equal objects.
• Part 13 - Some improvements like score tracking, visual feedback of matched objects and so on are included in this part.
• Part 14 - We begin working on the graphical user interface, through UMG, with an initial main menu layout.
• Part 15 - And the user interface displayed during the game itself is added to the project.
• Part 16 - Some improvements to the user interface are added. More specifically, initial styling.
• Part 17 - We create a system to allow users to select settings that are specific to some game modes.
• Part 18 - The first polishing pass, which includes things like particle effects and a few other minor details, like "remembering" the last selected game mode settings and so on.
• Part 19 - We finally add audio into the game, including code preparations for the settings menu.
• Part 20 - Second polishing pass, where we add the settings menu which allow window mode and audio volume preferences to be changed. Plus the possibility of changing visual themes.
• Part 21 - Third polishing pass, which includes improvements to the user interface (specially readability) as well as a high score system.
• Part 22 - Fourth polishing pass, where things like confirmation dialogs and instruction screen are added.
• Part 23 - More polishing and packaging are handled in this part. We also deal with mobile controls and some last details regarding the user interface and gamepads.

While describing those parts I have done my best to not mention many of the internal nomenclature, which will be explained throughout the tutorial. So, if some of those descriptions seem a little vague, that's the reason. To be honest, I believe this is better than adding some cryptic names that will be presented at a later moment.

External links and extra reading

Project Github Repository - Source code, including "raw" assets for the completed project is in here. Note that this is meant to be used as a reference.

Inkscape - Free, open source, vector graphics application.

GIMP - Free, open source, bitmap graphics application.

Audacity - Free, open source, Audio editor.

LMMS - Free, open source, track editor music creator.

Visual Studio Setup for UE - Documentation on how to setup Visual Studio to work with Unreal Engine.

Unreal Engine Architecture - Official reference over the Unreal Engine architecture.

Unreal Engine Framework - Official documentation on the Unreal Engine framework.

Official Youtube - The official Unreal Engine Youtube Channel

Official Introduction - This is an officially produced video series showcasing the very basics of the Unreal Engine Editor, containing 11 videos.

Official Blueprint Introduction - Officially produced video series with an introduction to Blueprints, containing 9 videos.