Unreal Engine Tutorial for Beginners: Part 1

BlueprintMan: The hero of your game.

Unreal Engine (also known as the Unreal Development Kit, or UDK) is a favorite platform of AAA game studios and is the magic behind many blockbuster games such as Unreal Tournament, Gears of War on consoles and desktops and Infinity Blade and XCom: Enemy Within on mobile devices.

If you’ve spent any time in the above games, you know that Unity Engine can help create games that look amazing and are a joy to play. But did you know you can use the visual scripting system of Unreal to create a complete game, without writing any code? And best of all, Unreal changed the licensing model of Unreal Engine so it’s free to start without any upfront charges; you only pay 5% of gross revenue per product created with Unreal Engine, and only if the product earns $3,000 or more.

This combination of popularity, power, ease-of-use, and low cost makes Unreal Engine a great option for indie developers; it’s right up there with Unity 5 and the upcoming Source 2 engine.

So it’s high time for an Unreal Engine tutorial on raywenderlich.com! In this tutorial, you’ll create a side-scrolling 2D-platformer named BlueprintMan, in honor of the iconic Schwarzenegger flick Running Man.

Time to get (un)real! :]

Getting Started

Unreal Engine is built upon three principal modules:

• Epic Games Launcher: This lets you log in to Unreal, search for and view content and tutorials and download the engine.
• Unreal Engine: This is the actual game engine. You won’t normally work with this code directly as it’s the behind-the-scenes SDK code.
• Unreal Editor: This the IDE editor you’ll use to develop Unreal Engine games; it’s much like using Xcode to develop iOS or Mac apps.

Download the Epic Games Launcher here; in order to download the engine you’ll need to sign up for a free Epic Games account first. Create an account, then download the engine using the links presented when you sign in.

Download and install Unreal Engine, and then continue when you’re ready.

Creating a New Project

Now that you have Unreal Engine installed, open it and the following window will appear:

Enter the email and password that you used to sign up for Unreal Engine. Click Sign In and the launcher will sign you in and open a larger window like so:

Take a moment to scroll through the stack of content that Epic Games has generously provided: tutorials, videos and more. It’s quite a list!

To download the Unreal Engine and Unreal Editor, click the yellow Launch Unreal Engine 4.7.2 button at the top left; your version might be slightly different but that won’t affect your progress in this tutorial. The editor will open once the download has completed with the following splash screen:

Once the editor opens, you’ll see a project organizer similar to the one pictured below, although your list of projects will be initially empty:

Click on the New Project tab at the top to reveal the following:

About Blueprints

You can take one of two approaches when developing with Unreal Engine:

• C++: Choosing C++ gives you the raw performance and power of C++, but you also assume the responsibility of memory management — without ARC or Garbage Collection, might I add — along with having to manage the overhead of C++’s complex syntax.
• Blueprints: Choosing Blueprints gives you a powerful visual programming editor; simply drag and drop game elements onto a graph and connect them together to control the logic and actions in your game.

A Blueprint is to Unreal Engine what Interface Builder is to iOS; it supports the WYSIWYG construction of game logic just as Interface Builder supports the WYSIWYG construction of the user interface. However, the best way to understand Blueprints is to see them in context. For example, the Blueprint below makes the character in your game jump:

A Blueprint to control your character’s jumps.

A Blueprint looks suspiciously like a flowchart; not a boring business flowchart, mind you, but an awesome flowchart that could chart the flow of monsters, explosions and loot drops in your game.

As an added bonus, if you’re working with a game designer or artist, the visual simplicity of Blueprints makes your game logic accessible and lets the designers tweak your game directly without any programming knowledge.

Now I know what you may be thinking: “That’s too easy; I want to do things the hardcore way with C++!” Well, even if you know C++ really well, it’s often best to use Blueprints as it saves time, reduces lines of code and as you know, less lines of code == less bugs! :] Therefore, in this tutorial, you’ll be developing the entire game with Blueprints.

Time to get started!

Creating Your First Project

There are two tabs that let you determine which language to use in your new project: Blueprint and C++. Select the Blueprint tab and click the 2D Side Scroller icon:

Selecting 2D Side Scroller instructs the Unreal Editor to populate your new project with a handy shell of a 2D side scroller game that you can fill in with your own art assets, sound effects and logic. It’s much like Xcode’s “New project” template.

Make certain that the Settings section is set to Desktop/Console, Maximum Quality and No Starter Content as shown above; this ensures your game will be playable on your Mac, with crisp graphics, and won’t be filled with hundreds of megabytes of starter textures, assets and other cruft that you won’t need to build your game.

All that remains is to name your new, epic project. In the Name textfield at the bottom type in BlueprintMan:

Then click Create Project; you may see the following splash screen for a moment while the Unreal Editor goes about the busy work of creating your project:

Once your project is ready, The Unreal Editor will open like so:

This is the main editor window; it’s a good idea to get familiar with it since you’ll spend most of your Unreal Engine development time in this window with its various tabs and views.

Understanding the Unreal Editor

The Unreal Editor has the following views:

1. Modes View: This is where you select objects to drop into your scene and access tools, such as brushes, to modify your scene.
2. World Outliner: This lists all of the Blueprints in your game. Click the Ledge_12 line in the World Outliner to highlight the Ledge_12 line; the Details View will populate with the respective object’s details.
3. Details View: This shows you the details of list entries like Ledge_12 from the World Outliner. You can set things such as the transform of the ledge to control its geometry and placement in the scene; the object’s sprite to control its appearance in the scene; and a myriad of other properties.
4. Content Browser: This lists all the content in your game, neatly organized into folders by content type.
5. Toolbar: This gives you access to various functions in the game, such as playing your game or building it.
6. Viewport: This is your view into the game; you can drag and drop elements into your scene and move them around as necessary.

Okay, enough background information – it’s time to have some fun! Click the Play button in the Toolbar at the top to begin playing your game in its current state.

Playing Your Game

Your game is configured to use traditional movement controls:

• A: move left
• D: move right
• Space: jump

Press and hold the A key to move left, hit space to jump off your current ledge and land on the ledge below:

Move your mouse up to the Stop button and click it to stop the game:

Editing Your Game’s Blueprints

Okay, so you’ve seen your basic game in action. Now you get to peek behind the curtain to see how Blueprints drive the gameplay.

Blueprints are typically short, focused groupings of game logic that fulfill a single cohesive purpose. For example, you can create a character Blueprint to represent your player’s character or a monster Blueprint to represent the enemies in your game.

Select the Blueprints folder in the Content Browser like so:

Double click on it to open the folder:

Select the 2DSideScrollerCharacter Blueprint as follows:

This is your player, the blue humanoid that moves around your game. Look: it’s a bird, it’s a plane, it’s BlueprintMan! :]

Double click on the 2DSideScrollerCharacter Blueprint to launch the Blueprint Editor:

Take note of the following key views of the Editor:

1. Components View: This is where you add components to your Blueprint. Unreal Engine, like many game engines, uses a form of Entity Component System (ECS) that favors composition over inheritance. For example, a player “has-a sprite” instead of “is-a sprite”.
2. MyBlueprint: This is the “class view” of your Blueprint where you can add variables, functions and other elements.
3. Details: This is where you can view and edit details of your Blueprint.
4. EventGraph: This is the meat of a Blueprint; it displays the graph of objects, events and actions that make up your game logic.
5. Toolbar: This provides you with various tools to perform actions on your Blueprint.

The EventGraph is central to your Blueprint, so take a moment to examine it in detail:

A Blueprint to control your character’s jumps.

What you’re seeing here is the logic that causes your player to jump when you press the spacebar. The two red rectangles and the two blue rectangles are nodes in your graph. Nodes can represent entities (objects) in your game such as other Blueprints, events (where something happened) or functions (where you do something).

Consider InputActionJump. The red colored top portion of the node indicates that this is an event; it’s a placeholder for the event “the jump input action occurred.”

Okay, but since your player jumps when you press the spacebar, wouldn’t it be more clear if the node was named “SpacebarPressed”?

Well, Unreal Engine uses abstract input mappings: the event InputActionJump represents the generic event “a jump happened” — independent of which key (or joystick) action triggered the jump. This seems a bit indirect at first, but that’s precisely the point: input mappings let you change which key controls the jumping action — without having to change your node graph.

EventGraph nodes are wired together by the white curvy lines between them, known as links. Links are attached to points on the nodes named pins.

Check out the right-facing white triangles on the InputActionJump node:

These are exec pins. For events, they’re placeholders for the action to take when the event occurs. Output exec pins are on the right of a node, while input exec pins are on the left.

Exec pins don’t actually do anything until you connect them to other nodes. In this case, the Pressed output exec pin of InputActionJump node is linked to the input exec pin of the Jump node. The input exec pin of a function node such as Jump means “call this function.” Therefore, the above connection calls the Jump function when the InputActionJump is Pressed.

Similarly, see how the Released output exec pin of the InputActionJump node is connected to the StopJumping node’s input exec pin:

What does this mean in terms of your gameplay? You guessed it: when you release InputActionJump, the player will stop jumping.

Finally, take a look at the InputTouch node and see if you can figure out what task it performs:

This represents the input mapping on a touch device like an iPhone. It has Pressed and Unpressed output exec pins just like the Mac input mapping InputActionJump. InputTouch represents the event “player wants to jump” on your iPhone or iPad.

Getting Closer: Zooming In

Place your mouse cursor in the middle view (2DSideScrollerCharacter > EventGraph), hold down the right mouse button and drag to scroll around the EventGraph:

You’ll see there are other node mappings in the graph but it’s hard to see them all at once. Fortunately, it’s easy to zoom to see them all. Left-click on the top menu View\Zoom to Graph Extents:

Then release your mouse button to zoom out show the entire extent of the graph:

Now you can see the big picture!

But, wait, how do you zoom in to a specific area of the graph? Scroll up to the Event Begin Play node and left-click to select it:

Then left-click the View\Zoom to Selection menu item:

This will zoom in to the Event Begin Play node you selected earlier:

You’ve zoomed in on the Event Begin Play area of the EventGraph in this particular example, but you can zoom in on any node using this technique.

Enough Talk: Adding Actions to your Game

You’ve been incredibly patient to this point; your patience is about to be rewarded by implementing some action in your game. At the moment, your game character is the strong, silent type; he doesn’t say much. Your task is to bring him out of his shell and make him talk.

Use your mouse to scroll the graph area around as shown below and left-click outside of the Event Begin Play node to unselect it:

Right-click on the blank grid in the EventGraph to the right of the Event Begin Play node. This summons the context menu which you’ll use to add nodes. Press t in the white search box; the context menu will highlight the T row with what looks like a keyboard beside it. Left-click on the highlighted row or press Enter to add the T key event to your node graph like so:

Things will be a bit easier if you focus in on the T key event without being distracted by other nearby nodes. Use your mouse to scroll around the EventGraph until it looks roughly like the screenshot below:

Now you have some room to work!

Hover your mouse over the Pressed exec pin of the T key event. A tooltip will appear with Pressed Exec to remind you that this is the exec pin activates when you press the T key:

Left-click on the Pressed exec pin, drag to the right outside the T node and release your left mouse button. You’ll see a white link line and the popup context menu. Unreal Editor recognizes the action of dragging a pin from a node and releasing outside the node as “hey, I want to connect this pin to a new node” so it will pop up the context menu to assist you.

Type print string in the white search box; the words Print String with an italicized f are highlighted; this represents the Print String function (f stands for function). Press Return or Enter, or alternately left-click on Print String to create a Print String function node like so:

Hover your mouse over the pink In String pin on your Print String node:

The Print String function prints the value of this input pin; note that the pin is a circle to indicate that it’s a data pin. Exec pins are “filled in white triangles” and represent actions, while data pins are circles and represent data, such as strings or numbers that are consumed (via input data pins) or produced (via output data pins) by functions or actions.

You could fill the In String input data pin with the output of another function or variable, but for now you’ll simply use a constant string. Click in the text field next to In String and type Say hello to my little friend!:

Scarface - from 1983!

You’re almost ready to unleash your Al Pacino-quoting character in your game, but there’s one last thing to take care of. Notice how the Compile button has a question mark over it:

This indicates Your node graph is “dirty”; in other words, it has uncompiled changes. You’ll need to compile these changes before you can play it.

Left-click Compile to compile your graph and after a second or two you’ll see the following:

The green checkmark indicates that the compile succeeded. As an added convenience, you can run your Blueprint graph directly from the current Blueprint Editor: left-click Play as shown below:

When your game launches you’ll see your scene as below:

Press T to make your character talk:

The text will disappear from the screen after a few seconds. Using the Print String function like this is a good way to prototype interactions with your character, or to log visible messages to your game screen during gameplay. Press the Esc key to exit gameplay.

Though your character may be prone to uttering some questionable movie lines, he is nonetheless polite. As a challenge, make your character say Goodbye… when the T key is Released. You should end up with a graph as follows:

If you get stuck, try to repeat the sequence of steps you used for the T key Pressed event.

Left-click Compile; once the graph is compiled the Compile button will display a green checkmark. Left-click Play to play your game. Once your game is running, press T then release. You should see the following:

Not only have you made your character a bit more polite, you’ve learned something valuable: events and actions often come in pairs. In the case of the T key, there’s corresponding T Pressed and T Released actions. In other cases, you might encounter pairs of events like “collision began” and “collision ended”.

Keeping Your Event Graph Clean and Tidy

Just like flossing, good EventGraph hygiene is a healthy habit to practice right from the start. You’re going to cleanup your new talk nodes so that they’re easier to recognize as a group of related functionality.

Use your mouse to select the three nodes you just added: first left-click the T node, then hold down the Command key and left-click the two Print String nodes; the command key lets you select multiple nodes. Right click somewhere inside the canvas to bring up the context menu and click the Create Comment from Selection option.

This will group your three nodes into a comment group. Left-click in the text field that contains Comment and replace that text with Talk: Hello and Goodbye. Press Return or Enter and take a look at your well-commented, neatly grouped set of nodes:

EventGraph Comments like these are similar to pragma marks in Objective-C, or block comments in Swift. They add no real computational value, but they are excellent organizational tools that help you keep your EventGraph clean and readable, just like you keep your code classes nice and tidy. Believe me, when you come back to this EventGraph months from now, you’ll appreciate those comments! :]

Where to Go From Here?

You can download the completed example project for the first part of this tutorial.

You’ve covered quite a bit in this tutorial, from setting up Unreal to learning how to work inside Unreal Editor to modifying Blueprints to create a small working 2D game.

Keep reading the second part of this tutorial series, which will show you how to create and spawn loot for your player to collect.

If you have any questions or comments, feel free to join the discussion below!

Unreal Engine Tutorial for Beginners: Part 1 is a post from: Ray Wenderlich

The post Unreal Engine Tutorial for Beginners: Part 1 appeared first on Ray Wenderlich.