Side Scrolling Starter Kit

I’ve started to build Starter Kits, starting with a side scrolling platformer. However this time around, I want to take advantage of this super secret beta group to ensure that the Starter Kits are:

  • Better constructed.
  • No missing holes in the documentation.
  • Straight forward and easy to understand by a range of people from different disciplines.

If you would like to make comments for me to fix anything up, please make a threaded comment to the post that I put up. Please reserve pending posts for me so that there is a continuous flow of posts as the Starter Kit progresses. I welcome feed back of any kind. If you have a question that is better suited for somebody at Epic to answer, please make a new Question.

For Epic staff, there will be no questions from me; but if you see a better way of doing things, please let me know so that I can improve the Starter Kit.

Without further ado, let’s begin!

Creating your first project

When starting Rocket, a Project panel is first shown. Start a new project called Side Scrolling and save. Unlike UDK, Rocket supports multiple projects from a single install. Projects allow you to have your own folder to build your game in.

An introduction to Blueprints

Blueprints are in a lot of ways the product of what would happen if you were to combine Archetypes and Kismet together (or in many cases, like what Prefabs are). Blueprints are like Archetypes because they allow you to store arbitrary information in an Unreal Editor friendly object. Blueprints are like Kismet because they allow you to create logic trees which allow you to define new behavior for your object without having to write a line of code. Prefabs in UDK were like this as well but they were limited in a few ways.

Creating the base Blueprints

To start making the side scrolling game, you should always start with a few Blueprints. These classes are:

  • PlayerCamera (SideScrollingPlayerCamera)
  • GameInfo (SideScrollingGameInfo)
  • HUD (SideScrollingHUD)
  • Character (SideScrollingCharacter)
  • PlayerController (SideScrollingPlayerController)

These classes do pretty much the same thing as UDK (Character is Pawn in this case).

To refresh, the PlayerCamera is the game object which controls the camera that Rocket is using to create the view port from. It has properties such as the world position, rotation and FOV of the camera.

The GameInfo is the game object which Rocket starts from to define the game. This class generally contains the rules for your game such as how many points it takes to win the game, what the losing conditions are and so forth.

The HUD is the game object which Rocket uses to rendering things onto the screen. If you want to draw something onto the screen, such as a texture or draw some text then the HUD is where you should put that logic.

The Character is the game object which players control with input devices such as a key board or mouse. They have replaced Pawn (UDK) and serve the same functionality. They automatically define things such as movement capabilities and visual representations of the player.

The PlayerController is the game object which acts as the bridge between the player’s input devices and the rest of the game. It intercepts keyboard and mouse input and translates them into something meaningful to Rocket. Every time you press a button, the PlayerController has a chance to detect this and decide what to do.

To create a Blueprint:

  • Open the Content Browser
  • Right click within the work space and select “Blueprint” or press on the “New” button and select “Blueprint”
  • Select one of the classes above to create a Blueprint, that is based on that class.
  • Save.

After creating each of the Blueprints, we can start using them straight away.

Hooking up the Blueprints

The first Blueprint to hook up is SideScrollingPlayerController.

Right click on the Blueprint and select “Edit Defaults”. This opens up the Default properties window and from here it is very much like using Archetypes in UDK.

Expand the “PlayerController” category and assign the SideScrollingPlayerCamera to this field. To do this, select the SideScrollingPlayerCamera Blueprint within the Content Browser and then press the left arrow within SideScrollingPlayerController’s default properties panel. You will see the text change to “BlueprintGeneratedClass…”. Your PlayerController Blueprint is now using your PlayerCamera Blueprint.

Lastly we open up the “Control Bindings” category, expand the “Axis Bindings” array. Set the Scale value for every axis except for key W and S. By doing this, we only allow the character to move forwards and backwards.

The next Blueprint to hook up is the SideScrollingGameInfo. Right click on it and open up the default properties panel. From here you can assign the Character, HUD and PlayerController Blueprints. Like wise, this means that your GameInfo is now using your Blueprinted Character, HUD and PlayerController.

The last Blueprint to hook up is the SideScrollingGameInfo Blueprint. Go to the main view port and click on “World Props”. This will open up the World properties panel usually on the upper right hand panel. Scroll down in this panel until you come across the “Game Type” category. In the two fields, you can assign your GameInfo Blueprint. This means that when the level is started in PIE, it will use your new GameInfo Blueprint. For now this will do, but towards the end of the Starter Kit we can look making a more permanent solution. You’ll want to save the map to keep these settings.

Save everything and press Play. From here, you should be able to play a very simple first person shooter, although you will only be able to move backwards and forwards (Remember we disabled a whole bunch of other keys).

Adding a visual component to your Character

By default, a Character does not have any visual components assigned to it. Rocket now includes a very handy tool in Blueprint called “Components”. To access this, double click on your Character Blueprint and press the “Components” tab.

In the drop down box in the left panel, click on it and select “StaticMeshComponent” (Later on we will replace this with a “SkeletalMeshComponent”). Click on “Add Component” and you will see it added to the “Components” array. Give it a name so that the rest of the Blueprint can access it. I usually call it “CharacterMesh”.

Next we need to assign a Static Mesh to it. Find a Static Mesh within the Content Browser and select it. Select the Static Mesh Component. Expand the “Static Mesh” category and assign the Static Mesh Component the selected Static Mesh within the Content Browser.

Now, you may be wondering why you’re not seeing any changes at the moment. To see the changes, you will need to compile the Blueprint. To do this quickly, press Ctrl+F7. Feel free to make any other changes to the Static Mesh Component. Just remember to press Ctrl+F7 to see the changes that you make.

Customizing the player camera Blueprint so that it is a side scrolling camera

Now that we can see our Character, we can now also make the side scrolling camera. Double click on your PlayerCamera Blueprint. This will open up the Blueprint Editor.

In the left hand panel, you will see an entry called “KismetUpdateCamera”. This is an event that can be implemented in Blueprints. To make it available, first click on the plus symbol. Then double click on the entry to open the Blueprint implementation up. You will be presented with a new window with two nodes already connected. This is the default implementation and from here we can modify it to make the camera do something else.

Evaluating the camera location to achieve a side scrolling camera

The basic logic that we want for this, is to get the location of the pawn and then add an offset. This places the camera away from the pawn’s location which is the base of many types of cameras such as third person, bird’s eye view and so forth.

To start, we need to get the pawn’s location. Right click in the Blueprint work space and search for “Get Owning Player Controller”. Click on the menu option to create a Blueprint node. This node has a blue pin on the right which outputs a reference to the Player Controller that owns this Player Camera.

Left click and drag the pin out and release in the Blueprint workspace. This will automatically bring up a new menu which you can then use to create the “Get Controlled Pawn” node. This node has a blue pin on the right which outputs the pawn which is controlled by the Player Controller.

Left click and drag the pin out and release in the Blueprint workspace. This will bring up a new menu which you can use to create the “Get Actor Location” node. This node has a gold pin on the right which outputs a vector which represents the pawn’s location.

With three nodes, we were able to get the player’s pawn location. Easy! Next we want to add an offset to this.

Blueprints are able to create new variables which they can use and expose to other Blueprints via Interfaces (more on that later). We need to create two variables here to create the offset we want to apply to the pawn’s location.

Start by clicking on the Variables tab in the lower right hand panel of the Blueprint Editor. Create a float by using the drop down box and click on float. Then set a name such as “Camera Distance” and click “Add”. Next create a vector using the same method and give it a name such as “Camera Offset”.

From here, let’s set some sensible values to these new variables before continuing on. Click on the “Defaults”, this opens the familiar default properties panel. Find your new variables and set them to values such as:

  • Camera Distance = 512
  • Camera Offset = (X=0,Y=1,Z=0)

Switch back to the Blueprint workspace by click on the “Scripts” button. The logic that we can use to create the camera offset is to normalize the camera offset, multiply it with the camera distance and then add it to the pawn’s location.

To get the “Camera Offset” in the workspace, click and drag the variable onto the workspace. This will open a context menu with options to “Get” or “Set”. Select “Get”. This node has a gold pin on the right which outputs the value of the camera distance. Left click and drag from the golden pin to create a “Normalize” node. This will normalize our camera offset. Left click and drag from the Normalize’s golden pin to create a “FVector * float” node. In a similar fashion, create a node to get the “Camera Distance” and hook it up to the "FVector * float* node. Lastly left click and drag from the “FVector * float” golden pin and create a “+ (FVector)” node. Connect the “Get Actor Location” gold pin to the other gold pin of the “+ (FVector)” node.

With the final logic in place, you can now connect up the final result [“+ (FVector)”] to the “Return Node”'s “New Camera Location”.

I’ll post the next section soon, but for those that want to finish it up quickly … For those that want pictures, it’ll take a while for me to make them and upload them.

Using the same pattern you can create a camera rotation which makes the camera look at the player’s pawn.

Set the camera FOV to 90.

Check the Return Node’s box.

Save and you should have a side scrolling camera.