SCHOOL OF COMPUTING

UNIVERSITY OF TEESSIDE
MIDDLESBROUGH
TS1 3BA

Fight or Flight First Person Shooter

Computer Games Design

Callum Golds

11/05/2018

Supervisor: Martin Kane

Abstract

Hello my name is Callum Golds and this is my report following the work of my final
year project, in this report I will cover all areas of my project and explain how I did it
and all reasoning behind it. Over the course of the project I used 3 different pieces of
software and these were Unreal Engine 4 (UE4), Adobe After Effects CC 2017 and
Adobe Photoshop CC 2017, I chose to use Unreal Engine 4 as my game engine of
choice because of its accessibility and due to having used the platform before. I
needed to use Adobe Photoshop for concept designs and to create the menu and
HUD pieces for UE4 and the reason for using After effects is to make an game intro
screen for the start-up of my game.

Introduction

For my project I wanted to design create an advance user interface (UI) and heads
up display (HUD) that was going to include multiple different menus for
customisation of settings, inventory and possibly cosmetics, I was not focused on
gameplay because instead I planned on having a complex professional looking in
game HUD interface. However soon into the project and speaking with Martin I
started to have a change of direction of what I wanted the final product to be and so I
started to research into creating a first person shooter (FPs) game and felt it was the
best thing to do that was new and interesting to me and so my finished project is a
working FPS with multiple different HUD and game features found in most modern
day shooting games.

Research

For my initial research I looked back on a lot of past research I had done in a
previous user interface module and research module to refresh myself and I felt this
was the best start and I originally felt happy with the level of knowledge that research
gave me but after a couple of talks with Martin I realised more aspects I could
explore/research and so I looked into areas I missed in the past.
Next I started looking into games similar to what I wanted to create and so I looked
into games such as Arma 2 DayZ Mod, DayZ Standalone, Escape from Tarkov and
The Division. I looked at these specific games because of their realism and different
designs and styles of inventory systems in a survival shooter game and because
these are all games I have played and enjoyed and a big part to these games are the
UI and inventory system. The two games that influenced me the most was Escape
from Tarkov for its realism and more gritty approach and The Division for its futuristic
style that is very visually entertaining.
Because of this I realised the potential a more futuristic style UI and game could offer
and so I decided the style of my game should be a slightly futuristic but also post-
apocalyptic to give it a more gritty feel and because I felt it works best with a loot
based game.

Concepts

For the first task I worked on my Pre Production and this consisted of menu and
HUD designs, to create these I used Photoshop and started with images from
Escape from Tarkov for the background due to its realistic and first person look, from
here I created and imported loads of different images, shapes and vectors to make a
basic looking interface and I then played around with different layouts, colours and
effects, I then asked a couple of friends what they preferred and I took the feedback
and input into the designs of both the menu and HUD and I ended up with a style
similar to that of The Division with the eye catching orange futuristic theme.
Level Building

The next step in my project was to create a map/Level that would fit the theme of the
my game and so I did some research on asset packs I could use for my project and
un fortunately I couldn’t find much related to my theme that was free to use, however
I found a recent asset pack called “Soul: City” on the Epic Games marketplace that
fit my style better than anything else I could find but it still was not perfect as it was a
slum Asian city style. However with its dark rustic look and slight futuristic and
apocalyptic vibe it was a good enough find.

Another downside to using this pack was its availability because it would only run on
the latest version of UE4 (4.18) and so this limited my work space options because
this version was not available on allot of the computers within Athena and the select
machines it is available on it takes a while to install and so this was the primary
reason for my lack of presence within classes but because of this it enabled me to
update to version 4.19 when it was available so I was working in the most capable
version.

When I had the asset pack installed I looked through all available parts and tested
them within my level and realised that allot of them would not load textures or
wouldn’t appear and so this ended leaving me with a much more limitations to what I
could make and so I looked through what was available to me and decided my best
bet was to make a warehouse style structure because It was possible with the art I
had and it would fit the style of game I wanted.

First step to building the warehouse was to figure out the size I felt worked best for
realism and playability and then I researched lots of different styles of abandoned
and new warehouses to get ideas of architecture that linked well with the Soul: City
parts and so I next built one long walkway that travelled the length of the warehouse
and this acts as an inspection bridge because it overlooks everything and in terms of
gameplay it acts as a great vantage point due to its elevation and visibility but this
point would not be easily defended due to having two different entry point at both
ends of the building and so I thought this would be a great design for if the game was
to become multiplayer.
For the rest of the map I had to get a little bit creative with my limited sources on the
first half as I used different drain, wall and pipe assets to make what looks to be big
rotating cogs that are all connected by one axel that connects to one big
room/generator at the end and I made this to look like some style of believable
power generator, for the other half of the level I didn’t want to do a copy and paste so
I played around with different assets again but couldn’t build anything I was happy
with and so I used a single asset that looked best and worked being repeated down
the factory and it was at this point I decided to move onto something else as I had
taken longer than I expected and this is not the focal point of my project.
Menus (UI)

The next step I took after creating my level was to get the basic menu system built to
navigate my game easily for testing, this step was very simple as I have done this
many times before but its always good practise to get simple navigation into your
game early on. For my main menu I used a technique I have used in the past where
the menu widget is over the top of a matinee playing in a copy warehouse level in
the background, I like to do this because it adds a nice 3D/moving environment
instead of having a solid picture that can often be boring to look at, to stick with my
design and concept I also created some buttons in Photoshop to give it the theme I
wanted.

HUD Elements

Now I had a clean navigation system into the game my next task was to create a
heads up display that matched my concept art I had done earlier, the first parts I
decided to tackle was the health and stamina progress bars, the health I have done
in the past and so setting that up was nothing new except from playing around with
the progress bar settings and playing around with background and fill images to get
the same design I had done in Photoshop and I was pleased how it looked and
worked.

The stamina was next and this I had never looked into before and so after some
research I found a couple of helpful pointers on Google and YouTube, the way it
works it similar to the health with its variables but more complicated because it’s not
just as simple as destroy actor, the blueprints required for the most part was
sequences, branches and delays to get the stamina bar to shrink when in sprint and
when at zero it slows the player back down to walking speed and slowly recharges
(Unfortunately I forgot to include these blueprints and video example in my upload as
I forgot as this is in an old file)

Changing Game Mode

After researching how to create the stamina I came across other cool
recommendations for aspects of making first person shooter and it was interesting
and it got me thinking about my project and what direction would be best as after
talking with Martin I was worried it might not work and so after some more research
and thought I decided I wanted to concentrate on making FPS mechanics and
gameplay instead of an advance UI system and so I created a new UE4 file but this
time it was using the third person character default project.

The reason for creating a new file was because using the third person game mode
enabled much more flexibility with the character, cameras and weapons and this
meant I could build it all from scratch and get a better result. Luckily I made this
decision earlier on because it was fairly simple to transfer everything from my last
project file but I did have to spend some time changing all the blueprints I had made
in the past to fit the third person character instead of the first person character, the
most annoying part was having to create all the variables and bindings again and set
and get them in allot of places but it was worth the small set back because I now had
allot more flexibility.

Character

Now I was in the new game mode I first wanted to make my character look like a real
person dressed in a similar theme to my game and so a friend directed me to a
website called ‘Maximo’ that had a military/police style character that worked well
with my theme and on top of this it comes with a full list of animations ready to import
into UE4 and so this gave me the opportunity to work with animating my character
for the first time.

Ones the character and animations had been imported into my project file I first
replaced the character mesh with the new one and this was just one simple mesh
setting within the viewport. Next process was to get all the different animations to
work together and to get this to work you have to create different blend spaces for
walking, sprinting and crouching, a blend space allows you to drag and drop
animations into a grid like pattern, the grid values are customisable and for my
horizontal (X) value I had direction and the vertical (Y) set to speed, after this I set
the values to these axis to control them, for example setting max speed to 600
because the characters walk speed value is 600 and making sure the rotation values
are -180 and 180.

After building these blend spaces it was time to build an animation blueprint to
control them, the first step within this blueprint is to create a state machine to
connect to the final animation pose that will transfer to our third person character,
inside this state machine is where you can create and link multiple states such as
idle, walk, run and crouch and inside these states is where you link the blend space
blueprints.

Now I have a smoothly animated character I felt it was time to move the third person
camera to a first person position but this is where I hit a seemingly unfixable problem
that I believe to be a fault of the engine, the problem I had was I couldn’t rotate the
camera within the third person character viewport and the camera was in a funny un
wanted position and after researching to see what I was doing wrong I couldn’t find
any explanation or reason why I couldn’t and this is why I believe it was an engine
fault, after spending time on trying to figure it out I decided to just play the game and
see what it did and the view rotation and position was completely different to how it
looked in the viewport and so I was able to play around with a seemingly still camera
until the gameplay looked first person.
Weapon

My next task was to add a weapon to my character, first I looked on websites such
as Turbo Squid to find a decent looking free mesh that would work with the
modern/futuristic theme and so I found a M4 style rifle but when imported I could not
get the textures to work and I tried replacing the textures and playing with materials
but I wasn’t happy with how it looked and so I did some more searching and I found
a great AK-47 asset on ‘Vertis’ website that I downloaded and imported and the
texture worked and it looked great.

Now I had the asset as an actor it was time to open up the character skeleton and
add a socket to the right hand and connect this socket to the AK-47 actor, and then
while previewing the idle aiming animation I had to adjust the size and position so I
looked like the character was holding the weapon correctly. From here we have to
spawn the weapon actor in for it to be visible in game and to do this you have to use
the third person character event graph and use the spawn actor blueprint as well as
attach to component.

Next I created a projectile (bullet) for the weapon to fire, the projectile is a simple
actor blueprint that holds a pill shaped bullet with a gold texture to look close to
realistic, realism is not needed for this because it moves to quickly to notice so this
works just fine. When inside the projectile actor I added a ‘ProjectileMovement’
component and this gives me settings to control the speed and physics of the bullet.
To get the weapon to fire I added a socket onto the AK-47 skeleton as a spawn point
and then created a custom ‘fire’ event inside the weapons event graph to spawn the
projectile from a reference to the socket, after this I created a left mouse button input
in the project settings called ‘Fire’ and then back in third person character call on this
input action.
To make the weapon more realistic I wanted to add a sound and muzzle flash for
better player feedback and so for the sound I decided to use a default UE4 explosion
sound but for the muzzle flash I needed to source something and so I did some more
research and found a pack on the Epic Games marketplace called ‘Infinity Blade:
Effects’ that has a muzzle flash included in the pack, to spawn the flash when the
weapon is fired I first added the flash preview to the skeleton of the AK-47 and edited
it until it was a suitable size and from here I went into the weapon actor event graph
and used spawn emitter at location and socket location.

Pick Up Items

For my next task I decided to add features to allow the player to pick up ammo and a
different weapon, first I worked on the ammo pick up and for this I first looked on
Turbo Squid to find a free bullet asset to use because the pickup has to be
understood for better player feedback and I found a bullet that would work perfectly
and so after importing it into UE4 I created an actor and added and duplicated the
bullet mesh and added a gold texture to make it clearly look like a pile of ammo. To
get the ammo pickup to work you have to enable overlap in the ammo actors physic
settings and then in the event graph you cast to third person character, reference,
get and add to players max ammo.

For the weapon pickup I sourced a new weapon mesh (M4A1) from ‘Vertis’ website
and imported it just like the AK-47, now before we put the M4A1 in the level to pick
up I had to set another two inputs in the project settings to enable the player to
change weapon when they press ‘1’ or ‘2’ and then set the blueprints within the third
person character ready for the pickup. For the pickup in game I created another
actor with the M4A1 mesh with overlap physics and a destroy actor on collision to
allow me to walk through the pickup and it to disappear and then from here I
connected this to the spawn of the weapon when 2 is pressed.

AI

For the AI I started off by creating a character blueprint and selecting the UE4 default
character as the character mesh and then inside the AI event graph I cast to my
projectile and created a health float with the value of 1 (1 being 100%) and then from
there I set health to reduce 20% after each overlap of the projectile. For player
feedback of hurting the AI I created a hit marker widget to appear shortly when the
overlap happens.

My next task for the AI was to get it to follow the player and the first step for this is to
drop a nav mesh bounds volume into my level and this highlight where the AI can
and can’t go, when this is set I opened up my AI and added a pawn sensing and
what this technically does is give the AI an eye sight radius and within the details of
this you click on ‘on see pawn’ and then cast to third person character then ‘AI move
to’ and reference to third person character, after I had this set I also made the AI
chase you when they get shot (overlap with projectile) and to make the AI more
realistic on event tick it has delayed random movement that uses its own location
and it roams within the radius set.
HUD Elements 2

After having multiple aspects to my game now I decided to update my HUD to give
the player as much feedback as possible, first I decided to scrap the stamina from
my old HUD earlier on in the new project file and replace it with armour because I
found the stamina to un necessary, then for my ammo I had originally created a
realistic ammo based system but decided to update it to a more conservative game
like, by this it means if you reload and still have half a magazine then you won’t lose
that ammo. After this I created a kill feed widget with animations to appear when you
kill the AI and this obviously connected to the AI’s health blueprints.

Then I decided to show what weapon the player was using with images of the
weapons and a text box that would read the name of the rifle when selected, after
this I looked into creating a linear compass much like the ones on most modern day
FPS games and so I first created it in Photoshop much like everything else however
this took a couple of attempts to get it right due to the image needing to be an exact
size for UE4 and the amount of information spread across the 360° meant there had
to be allot of accurate measuring.
Adobe AFX

To have a break from UE4 I wanted to make a company intro screen for my game
because I enjoy using After Effects and so after some research into intro ideas I
decided to make a 3D glitch fade style effect but it was not easy, the process took a
while because of the amount of small settings within the process and not having the
help of any add-ons, the first step was creating the glitch effect and multiplying it and
changing different values on each layer for size of the pixel effect and fade colour.
When this was done I could copy and paste it changing the word and fade direction
and then it was a case of adding a texture and making it a 3D space and then
playing around with camera angles and sound effects.
Conclusion

My project to me was a bit of a bumpy road from the beginning as I didn’t have much
motivation for my idea but I didn’t have any other ideas so I went with it, I wish I
would had decided to create a first person shooter before the project started
because I know I could add allot more then what I have finished with, however I am
proud of what I managed to produce after changing direction mid-way through the
project, I feel I touched and learnt many different aspects of UE4, Photoshop and
After Effects. If I was to do the project again I would put more time into ideas and
research before the project started so I could finish with a more complete project with
nice polish.

My Blog: https://callummgolds.weebly.com/fyp-blog

Reference:

Epic Games (2014) [FREE ASSET] Dynamic UMG crosshair. Available at:
https://forums.unrealengine.com/community/community-content-tools-and-
tutorials/25050-free-asset-dynamic-umg-crosshair

Epic Games (2014) Animation Starter Pack. Available at:

https://www.unrealengine.com/marketplace/animation-starter-pack

Epic Games (2018) Soul: City. Available at:

https://www.unrealengine.com/marketplace/soul-city

Epic Games (2015) INFINITY Blade: Effects. Available at:

https://www.unrealengine.com/marketplace/infinity-blade-effects

Free Vectors (2018) AK 47 Vector. Available at: http://all-free-download.com/free-

vector/ak-47-vector.html
High Resolution Seamless Textures (2018) Concrete floor dirty moss texture.
Available at: http://seamless-pixels.blogspot.co.uk/2015/02/concrete-floor-dirty-
moss-textures.html

High Resolution Seamless Textures (2018) Seamless light dirt ground floor texture.
Available at: http://seamless-pixels.blogspot.co.uk/2015/02/concrete-floor-dirty-
moss-textures.html

Mixamo (2018) Swat. Available at:

https://www.mixamo.com/#/?page=2&type=Character

OpenGameArt.Org (2010) Texture. Available at:

https://opengameart.org/content/dirty-quake-ish-floor-tiles

PinArt (2018) m16. Available at:

http://moziru.com/explore/Assault%20Rifle%20clipart%20m16/

Pintrest (2018) Availible at: https://www.pinterest.com/pin/437623288768051405

YouTube (2013) Whoosh Transitions Various Sound FX. Available at:

https://www.youtube.com/watch?v=_2bEI6LiGfM

YouTube (2016) TOP10 GLITCH Sound Effect [High Quality]. Available at:
https://www.youtube.com/watch?v=jsw0dl50nxg

YouTube (2017) US military – Radio Chatter – Sound Effect – Ringtone. Available at:
https://www.youtube.com/watch?v=ekVJHsjkU20

VirtisHub (2018) Available at: http://www.virtushub.co.uk/

Vecteezy (2018) Soldiers Silhouettes. Availible at: https://www.vecteezy.com/vector-

art/76913-soldiers-silhouettes