Subscribe to GameFromScratch on YouTube Support GameFromScratch on Patreon
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:

image

 

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

 

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.

image

 

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:

image

 

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

image

 

Playing Sounds

 

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

image

 

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:

image

 

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:

image

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.

image

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

image

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

image

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

image

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:

image

 

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:

image

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

image

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:

image

 

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

Programming


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:

FEATURE HIGHLIGHTS

GRASS RENDERING AND PROCEDURAL FOLIAGE SYSTEMS

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

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

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

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

Network Replays

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

ASSET SIZE MAPPER

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.  GameFromScratch.com has a complete set of Unreal Engine tutorials if you are interested in learning more.

News


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

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

image

 

I renamed it MyUI, somewhat unimaginatively.

image

Double click the Widget Blueprint to bring up the Designer:

image

 

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:

gif

 

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.

image

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

image

 

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

image

 

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

image

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:

image

 

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.

image

 

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

Programming


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.

 

WARNING!


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 Kenney.nl 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:

image

 

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

image

 

The TileSet editor should appear:

image

 

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:

image

 

Here you enter the pixel dimensions of each individual tile within your image.  In the spritesheet from Kenney.nl, 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:

image

 

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

image

 

We can now define bounding shapes using the toolbar:

image

 

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

image

 

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:

tile

 

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:

image

 

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

image

 

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

image

 

Here is the tilemap editor in action:

image

 

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.

image

 

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

image

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:

image

 

Choose Fill:

image

 

And click:

image

 

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

tile2

 

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:

image

 

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

image

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:

tile3

 

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:

tile4

 

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

 image

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

Programming


1. June 2015

 

For my most recent tutorial, I am using a feature that is currently under active development.  This means I have to use a developer preview release and I figured I would share a quick post on how to install preview releases.  Of course the standard disclaimer applies…  you should never use preview releases for production work!

 

 

Installing a Preview Release

To install a Unreal Engine preview release, launch the Epic Games Launcher.

image

 

Select Library

image

 

Click Add Versions

image

 

A new empty version will be added:

image

 

Click the arrow to the top right and select the version you wish to install.  You will note the preview release isn’t available as an option for me ( nor is 4.7.6 ), as they are already installed on my machine.

image

 

The preview release should now download and install.  Now the next time you launch Epic Games Launcher, you will have an option over which game engine to launch:

image

 

It is safe to install multiple versions side by side, although it will take 5-6GB+ of disk space per install.  However project versions may not be compatible between different engine versions.  When you go to open an existing project, the engine version of each project will be noted, like so:

image

Programming


GFS On YouTube

See More Tutorials on DevGa.me!

Month List