Subscribe to GameFromScratch on YouTube Support GameFromScratch on Patreon
31. August 2015


Today Unreal announced the release of version 4.9 of the popular Unreal Engine.


Unreal always have fairly massive release notes, so here is the short hand version:

  • Enhanced Support for Mobile Devices
  • Dynamic Character Shadows for Mobile
  • Dynamic Point Lights for Mobile
  • Decals on Mobile
  • Major VR Updates
  • New VR Motion Controller Support
  • Experimental Direct X 12 Support
  • Full Scene Particle Collision with Mesh Distance Fields
  • Hierachical LOD Fast Preview and Clustering
  • Arch VIS Character Controls
  • Widget Depth ordering
  • Area Shadows (For Stationary Lights)
  • Ambient Occlusion Material Mask
  • Mesh Distance Field Materials
  • Improved Distance Field Ambient Occlusion
  • Content Browser Advanced Search
  • Collection Improvements
  • Plugin Creation Wizard
  • Enhanced Curve Editor
  • Multiple Return Nodes in Blueprints
  • Construct Custom Objects in Blueprints
  • Blueprint Class Defaults
  • Blueprint Communication
  • Optimized Math Expression
  • Blueprint Asset IDS
  • Montage Element Timing Interface
  • Non-Linear Animations Blending
  • Bone Driven Animation Controllers
  • Animation Transition Rules
  • Animation Curve Evaluation Change
  • Animation Asset Metadata Support
  • Sound Quality Levels
  • Custom Audio Attenuation Curves
  • Actor Tick Intervals
  • Actor Encroachment Detection
  • Post Process Blending
  • Runtime Asset Cache
  • Volume Decals (Experimental Only)
  • UE4 Documentation Tags, Version and Skill Level
  • Updated UE4 Documentation
  • Async Real-Time Audio Decompression
  • Shared Resources for Feature Packs and Templates
  • Improved HTML5 (Easy Setup, Amazon S3 Support, Networking)


This only represents the highlighted features too, be sure to check the full release notes for more details.


23. June 2015


With the release of version 4.8 of Unreal Engine, playing audio actually became a great deal easier for 2D games with the addition of PlaySound2D.  In this section we are going to learn how to import and play audio files in Unreal Engine.  For the application controller I created a simple UI that fire off the playing of audio.  If unfamiliar with creating a UI with UMG ( Unreal Motion Graphics ), be sure to read the previous tutorial.


As always there is an HD video version of this tutorial available right here.

We are going to be creating a simple UI to fire off audio events:



We will simply wire each button to fire off our examples.  I also needed several audio samples.  I personally downloaded each one from


Importing Audio Files


First we need some audio to work with.  So then… what audio files work with Unreal Engine?  Mp3, mp4, ogg?  Nope… WAV.  You can import your sound files in whatever format you want, so long as it’s wav.  Don’t worry, this isn’t as big of a hindrance as it sounds, as Unreal simply takes care of the compression and conversion steps required for you.  So the fact your soundtrack is 10MB in size isn’t as damning as it seems, as Unreal will take care of the required conversions for you.  Being in an uncompressed source format enables Unreal to offer a lot of power as you will see shortly.  Also it neatly steps around a number of licensing concerns, such as the patent minefield that is mp3.  If you’re source files aren’t in wav format, you can easily convert using the freely available and completely awesome Audacity sound editor.


Your WAV files can be in PCM, ADPCM or DVI ADPCM format, although if using defaults you most likely don’t need to worry about this detail.  They should be 16 bit, little endian (again… generally don’t worry) uncompressed format at any bitrate. 22khz and 44.1khz are recommended however, with the later being the bit rate CD quality audio is encoded at.  Your audio files can be either mono (single channel) or stereo (dual channel), plus you can import up to 8 channels of audio ( generally 8 mono WAV files ) to encoded 7.1 surround sound.  This is way beyond the scope of what we will be covering but more details about 7.1 encoding can be found here.  Importing audio is as simple as using the Import button in the Content Browser, or simple drag and drop.


Once imported, you can double click your audio asset to bring up the editor.



Here you can set a number of properties including the compression amount, wether to loop, the pitch, even add subtitle information.  There isn’t anything we need to modify right now though.  I have imported a couple different mono format wav files, like so:



And created a simple button to play the audio when pressed:



Playing Sounds


Now let’s wire up the OnClick event to play Thunder.wav, with the following blueprint:



Yeah… that’s all you need to do, drop in a Play Sound 2D function, pick the Wave file to play and done.  Before 4.8 the only option was Play Sound at Location, which is virtually identical but required a Position component as well.  You can achieve the same effect this way:



Both Play Sound at Location and Play Sound 2D are fire and forget, in that you have no control over them after the sound has begun to play (other than at a global level, like muting all audio ).  Neither moves with the actor either.


What if you want the audio to come from or move with a node in the scene?  This is possible too.   First let’s create a Paper2D character to attach the audio component to.  This process was covered in this tutorial in case you need a refresher.  Don’t forget to create a GameMode as well and configure your newly created controller to be active.


Using the Audio Component


I created this hierarchy of a character:


Notice the Audio component I’ve added?  There are several properties that can be set in the Details panel for the audio component, but the most important is the sound.


I went ahead and attached my “music” Sound Wave.  You can set the music file to automatically play using the Activation property:


There is also an event available that will fire when your audio file has finished playing. 


Unlike PlaySound2D, this sound isn’t fire and forget.   It can also be changed dynamically using the following Blueprint:


This blueprint finds the Audio component of our Pawn and then set’s it’s Sound using a call to Play Sound Attached.  As you can see, there are several available properties to set and you can easily position the audio in the world.


As I mentioned earlier, you can also manipulate a running Sound wave when attached as an audio component, like so:



Paradoxically, there doesn’t actually seem to be a method to get the current volume.  The obvious solution is to keep the volume as a variable and pass it to Adjust Volume Level.


Sound Cues

So far we’ve only used directly imported Sound Wave files, but every location we used a Wave, we could have also used a Cue.  As you will see, Cues give you an enormous amount of control over your audio.


Start by creating a new Sound Cue object:


Name it then double click to bring up the Sound Que editor:


This is well beyond the scope of this tutorial, but you can essentially make complex sounds out of Sound nodes, like this simple graph mixing two sounds together:



Again, any of the earlier functions such as Play Sound 2D will take a Cue in place of a Wave.


We have only scratched the very surface of audio functionality built into Unreal Engine, but this should be more than enough to get you started in 2D.


The Video


10. June 2015
Unreal Engine 4.8 Released!


Unreal just released version 4.8 of their popular Unreal Engine.  This is some very good timing as my recently released Tilemap tutorial depended on some key new features in the 4.8 preview release.


The timing of this announcement seems somewhat…  shocking, given that Unreal 5.1 was just released.  That said, this tit for tat between Unreal and Unity has nothing but advantages for us game developers.  The more they push each other, the better they get, the more we benefit.


The following are from the key features:



Grass Rendering and Procedural Foliage Systems

We've optimized our Grass Systems for use with large open worlds. Use it to produce huge amounts of grass and ground cover with temporal LOD cross-fading. We're also releasing an experimental preview of the procedural foliage system we used to paint foliage across our GDC 2015 Kite Demo.


Plugins Available in Marketplace

We've partnered with Allegorithmic to provide our first plugin available in Marketplace. Download the plugin today, and look for more plugins from select partners in the future!


Post Processing Enhancements and Tools

Major increase in accuracy of our Motion Blur, including morph target animations that can now generate motion blur. We've also updated our depth of field to be more physically-based, as well as added a new Tone Mapper to achieve more filmic look.


Multiplatform VR Support

Support for all the latest VR hardware including Oculus Rift, Samsung Gear VR, Steam VR and HTC Vive,Leap Motion, and Sony's Project Morpheus for PlayStation 4.


Network Replays

"Scrubbable" network replays with rewind support and live time scrubbing.


Asset Size Mapper

Visualize the memory footprint of game assets in an interactive tree map UI.



The full release notes are available here.  Some of the changed to Paper2D, the 2D game library built on Unreal Engine are game changers. has a complete set of Unreal Engine tutorials if you are interested in learning more.


9. June 2015


This isn’t actually a topic I intended to cover, I was actually working on demos for a Sound tutorial and needed a simple UI.  I started using UMG to knock up a simple HUD, then realized the UI layer itself probably required a tutorial of it’s own!  So here we are, we are going to quickly explore the widgets of UMG to create a simple UI.  As always there is an HD video version of this tutorial.

First we should touch upon some of the technologies available in Unreal Engine, as it can get a bit confusing.  There are two different technologies for UI in Unreal,  Slate and Unreal Motion Graphics(UMG).


Slate is a UI framework built on top of Unreal Engine.  Much of the Unreal Engine editor itself was built using Slate.  Slate fills the same role as UI solutions such as Scaleform would often perform, although Slate is a bit lower level than that.  Slate uses a declaration language that is a subset of C++.

Unreal Motion Graphics

UMG is a more recent development and is in-fact built over top of Slate.  It is a collection of UI Widgets ( buttons, labels, panels, etc ) exposed using Blueprints.  On top it includes visual designer for composing UIs.  UMG is the preferred technology for creating in game UIs.  In simple terms, it’s a UI layer that enabled you to work visually and using blueprints.


Creating a Widget Blueprint


To start creating your own UI, create a Widget Blueprint via Add New->User Interface->Widget Blueprint



I renamed it MyUI, somewhat unimaginatively.


Double click the Widget Blueprint to bring up the Designer:



The Palette has a collection of UI Widgets you can assemble in your own widget.  You may notice in the Hierarchy panel, we start with a Canvas Panel as our root element.


Creating a UI is as simple as drag and drop, like so:



As you can see, the properties for each widget can be set on the right hand side.  You can then wire events up to the UI component by clicking the + icon to the right of the Event you want to respond to.


This will create a new event in the UI widget event graph. 



We will do a simple Print String on button click, like so:



Now that we have a UI we need to display it.  To do so, in the Level Blueprint, add the following:


When the level loads, we create a new MyUI widget, and add it to the viewport.  The other bit of this blueprint gets the character controller and sets the mouse cursor visible.

Now when you run it, you should see:



The following function I wired up to a On key handler for toggling the visibility of the UI.  UI layer is a variable I set from the return type of Create MyUI Widget from the blueprint above.



Of course, this only brushes the very surface of what you can do with UMG, you can do very flash like timeline based animations and create much more involved UIs, but that goes beyond the scope of what I intend to cover today.


The Video


1. June 2015


Today we are going to look at creating 2D maps composed of tiles.  You can think of tiles as re-usable lego block like sprites that are assembled to create a more detailed map.  Tiles are stored in a data structure called a tileset, where collision details can be added.  These tiles and tile sets are then used to “paint” 2D scenes in something called a tilemap.  A tile map itself can contain multiple layers of tiles stacked on top of each other.  Don’t worry, it will make sense once we jump in.



When I wrote this tutorial, the majority of functionality I cover is currently under very active development. In order to follow along with this tutorial you need to have version 4.8 installed. Currently 4.8 is in preview release only, hopefully it will be released soon and I can remove this message. For now however, if you want to work with 2D tilemaps with collision data, you need to install the development release. For details on how to do this please read this post.


So, at this point I assume you either have the developer preview download, enough time has elapsed that this functionality is in the main release or you are simply reading on for future reference.  All the disclaimers out of the way, let’s jump in!


There is an HD video version of this tutorial available here: [Coming Soon].


Creating a Tileset


First start off by loading a sprite sheet texture in Unreal Engine, details of loading a sprite are available here.

For  this particular example, we need some tiles to work with.   Instead of creating my own spritesheets, I am going to use some of the free graphics that makes available, specifically the Platform Pack.  Obviously you can use whatever image you wish, just be sure that the tiles are size the same and ideally that your image is a power of two in size. 

Import the spritesheet you are going to use for your tiles, in my case I selected Spritesheets/spritesheet_ground.png.  Make any changes you wish to the texture, such as disabling mipmaps and turning filtering to nearest.

Now right click your newly created texture and select Sprite Actions->Create Tileset:



This will then create a TileSet object, double click it to open the editor.



The TileSet editor should appear:



Across the left hand side are all of the tiles that are in your imported sprite.  Selecting one will make it visible in the top right window.  The bottom right window has properties for the entire texture set.  The most important to set right away is the Tile Size:



Here you enter the pixel dimensions of each individual tile within your image.  In the spritesheet from, each tile is 128x128 in size.  The remaining settings are for tilesets that have gaps between tiles and aren't applicable in this case.  Both the left and top right window can be zoomed and panned using the regular commands.


Now let’s look at setting up collision shapes for a few tiles.  First select a tile from the left side, like so:



A white rectangle will bound around the selected tile.  It will now appear in the top right window:



We can now define bounding shapes using the toolbar:



In this case, a simple box is the easiest ( and least processing intensive.  So click Add Box:



This will now make it so the entire surface causes a collision.   For non-box shaped tiles, you are often going to want to use the Add Polygon option instead, then define the collision boundary accordingly, like so:



Simply click for each vertices you wish to create.  Once done hit enter to finish your shape.  You can shift click to add new points to an existing shape.

Repeat this action for each tile that has collision data.  If a sprite is able to pass completely through the sprite without collision you don’t need to provide a collision shape at all.  Repeat this step for each tile in your set that can be collided with.

You can easily check which tiles you’ve defined a collision shape for by clicking Colliding Tiles:



When done click Save and we have just created our first TileSet.


Creating a TileMap


Now it’s time to create a Tilemap.   To create a tilemap select Add New –>Paper2D->Tile Map



This will create a new tile map object.  Double click it to bring up the tilemap editor.



Here is the tilemap editor in action:



On the left hand side is a selection of tiles you can paint with.  In the middle is the canvas you paint on, while on the right are your layer controls and the layer properties.  There are a couple critical things you need to configure right away.


First select your tileset.  On the left hand side, drop down the Active Tile Set dialog ( hit the grid icon ) and select the tile set we just created.



Now in the layer properties, we set the size of our tiles and the overall width and height of our layer ( in tiles ):


Start by selecting a base tile to fill the entire map with, select file mode and then click somewhere inside the map grid, like so:


Select base tile:



Choose Fill:



And click:



Now select an individual tile to paint with, click Paint, then draw it on the map, like so:



Quite often you are going to want tiles to appear “over” other tiles.  This can be accomplished using layers.  To add a layer simply click the Add New Layer button:



The order layers are drawn is the same as they are displayed:


You can use the up and down icons to change the layer order.  The layer selected ( the one highlighted ) is the layer that all drawing will occur on.


Adding your Tilemap to the Scene


Now that you’ve created your map, you can use it like you would any Sprite object.  Simply drag it into your scene:



The positioning of the tilemap is important, the Y value is going to determine what is drawn over or under when drawing the scene, just like with sprites.  In this case however, sometimes you want to position your sprite in front of the background, but behind a foreground layer, like so:



This is done using a property called Separation Per Layer in the Tilemap details.


This is the Y coordinate ( confusingly called Z order in the tooltip ) of the layer within the game world.  For example if you position your tilemap at Y= –10 and set Separation Per Layer to 50, the first layer will be at Y=40, the second at Y=90, etc.  Therefore a sprite at 0 will draw in front of the bottom layer, but behind the top layer.

If you want to see a more detailed example showing collisions in action, be sure to watch the video version of this tutorial.


The Video


Coming soon


AppGameKit Studio

See More Tutorials on!

Month List