Software Engineer

Dev Blog

To The Death Post-Mortem

TitleScreenShot.jpg

Project Pitch:

"To The Death" is a networked, 2-4 player, one hit one kill, combat game, where the goal is to be the first to person to get a certain number of kills without killing themselves or be taken out by traps.

OUR EXPERIANCE

We wanted to build a project that tested what we could accomplish in four months. Prior to this we had only built a few smaller game projects, and had a limited Unreal Engine experience. Obviously we over scoped, like every "good" developer does, and learned with-in the first month, what unforeseen issues can do to all good intentions. We decided to not let it get us down, and we learned from it. Ultimately we got a modern networked multiplayer game, with lobby and scene transitions, while incorporating a dynamic combat system, and a really unique control system, along with a clean, professional, UI presentation.  

 
This project took us over 1280 hours...
— Jeff Yanick

Detailed Development Breakdowns

UI (User Interface)

CharacterSelect.gif

The two biggest things I wanted to accomplish with the UI systems was being able to use different types of controls at any moment, and make it flexible with a modular design.  I was able to get both implemented as well a 3D character select system within an environment, for a "Smash Bros." style menu. 
To get the interoperability with the controls, I had to built multiple ways to interact with the menus. The mouse interface had an easy prebuilt-in system, but it was a little lackluster, only really offering color changing on "mouse on," "mouse off," and "on click" actions. I had to build out some other features we needed, and the other control types by hand. The other control types include controller, and keyboard keys; keys being WASD, IJKL, and arrows.  That system for the other control types includes, Detection, Highlighting, Movement, Selection, Sub-selections, and Backtracking.

Menu.gif

Highlighting, the ability to press a key, button, or direction on the analog stick and have the desired icon change in a way to stand out amongst the others, worked more or less the same so I was able to reuse the system for all of the "other control types" with a little tweaking. Due to the behavior of these systems, I was able to make a part, copy and tweek, and rinse and repeat. For the highlighting, I’m really happy I was able to incorporate the animations, it had a certain technical, twitchy, nature in the system that I haven't encountered in other animation systems before. Also having to build the Selection ability into the “other control types” allowed me to build Sub-selection with ease. 

OptionsMenu.gif

Along with the multiple control options, I made sure there is a hot swapping nature between the different control types. One of the biggest complaints I hear from friends and game journalist with PC games is the lack of a control schemes working from beginning to end, throughout the menus and into the the game. And it wasn’t just being able to change from control type to another on the fly, it was also the polish to make sure the menus updated accordingly, along with the mouse disappearing when not being used. This makes it feel seamless and not like an afterthought. 


One of the more challenging parts of this polish is the mouse detection, and I had to do a couple of little tricks to check if the mouse is being used, because UE4 doesn’t have constant mouse update. So instead of creating a constant check on the mouse every tick and putting on unnecessary strain on the game, I decided to combine several event checks to detect the mouse instead. 

CharacterSelectLayers.gif

Character select and character battle UI was built with modularity in mind. The button position imagery for the character is actually fleshed out with shaders, allowing for wide variety of imagery with a low amount of assets. This had unforeseen benefits; one of those benefits allows the option for a new game mode that leveraged who the player had to attack and how to draw their attention. Also in the character select scene, I created an association with actors in the 3D scene to reflect interactions with the UI, bringing models to life, and allowing for color management. 

UI Menu Screenshots


Networking

 

Networking was super crucial for this project, considering it’s a major feature of this game. The most obvious type of networking would be for combat, and I did contribute to that code base. Since gameplay wasn’t my focus on the project I only aided with small parts, bug fixing, and some feature needed to get done by deadlines. 

NetworkWrapper.gif

The major part I worked on was the Character Select/ Networked Lobby. After players would connect to the lobby, I had to make sure they were slotted to the right position of the UI, scene, and 3D model. Once slotted into that position I had to give the controls of that avatar to that player, and then update their inputs to the server, and then pass that back down to the other clients/players. It wasn’t just updating, it was also seeing what the other players are doing, it’s updating the receiving client’s UI to reflect other choices made by other players. It also enabled or disabled certain options for the receiving client as well. So there was a lot of correlating information being received to the server, having to parse it, and then pushing it back out to the clients. 

ColorManagement.gif

Color management was related to the Character Select/Networked Lobby, where the player would select their color/position, and then from scene to scene I had to make sure it passed that information and update their avatars colors/information. Not only did I have to pass the information over a networked scene transition, I also had to set up a system that the position/color chosen translated between control schemes. In the options, when the player would choose what type of control scheme they wanted, keyboard, Xbox, PS4, etc, it would reflect in that client’s/player’s lobby, and would correlate with other positions/buttons on other control schemes. It became what button position ⁘, either top, right, bottom, or left, was the player, and then passing that data to update accordingly. So it was slightly more in depth than just passing a color. 

UpdatingCombat.gif

So when I reference a “wrapper” for colors or battle position, that is part of what it refers to.  Also part of this, combat feedback gets tied into it as well. We have indicator arrows on the players to show who they are targeting, that way when there is a lot of things going on, the targeted player is aware of who is out to get them. This required to update that arrow when targeting happens, and that was part of my work too. It also deals with color/position management too. One current downside is, in this version, the one available to play, forced “hard player positions” from the server on the clients. This circumvents the code I had wrote for varying control schemes, so it just looks like a bug when looking for this feature. The “wrapper” code still exists and can be seen at the 10:15 minute mark in my longer overview video of TTD, that video is at the end of this page if you want to check it out. Another way is in combat, while playing the demo, the user can press 1-5 on the numpad to manually change the control scheme.

Networking Code ScreenShots


Design

 

I guess I am the “genius” 😒 behind “To The Death”. I say that with some sarcasm, if it’s obvious. Having a the idea of “a 4-player brawling game, with instant combat targeting” for quite some time, I decided to flesh it out and pitch it to the team for this project, and they liked it. We thought it would be simple enough of a concept with a small scope and could be done in four months, which is our deadline. But due to several factors I’d rather not get into right now, it turned out to be ambitious 🤭; I find it quite amusing at this point actually 😊. Even with all the circumstances, I still think we were able make a decent project in spite of them.

CombatControls.gif

The game is a ¾-ish perspective brawler game in the vain of “Nidhogg” 1 & “Towerfall”, but with more weapons and 2.5D movement. Different weapons had slightly different effects, but those weapons were supposed to be a sword, spear, axe, shield, and fists. Each was going to have 3 options, vertical attack, horizontal attack, & throw attack. The vertical and horizontal attacks were similar to “Soul Calibur”, with similar effects; vertical, or direct attacks, are more powerful, while horizontal are wide sweeping and less powerful. The game is designed to give a player instant controls and reactions with its unique control scheme. The bottom face button, whether it’s an “X” on PS4, “A” on Xbox, “B” on Nintendo, or “K”/down arrow on a keyboard, instead of it causing the users avatar to slash/ attack with their weapon in a general direction, that button would represent a unique opponent player, and would cause the user’s avatar to attack that specific opponent it represents. So 3 of the face buttons would represent 3 other opponents, and the remaining face button that represents the user would do a secondary attack. And if the one of the 3 buttons that represents the user’s opponents is held it would throw a weapon in that correlated opponent's direction. If it’s not obvious with the descriptions, opponent’s button attacks are vertical attacks, the user’s button/ secondary attacks are horizontal attacks, and holding buttons are for throws. 

TTD 2 Minute Pitch VIdeo

When I designed the menu layout, I wanted to copy the layout of the directional pad on a controller & WASD/ Arrow keys on keyboard. That way when the user wanted to select something they just press one of the 4 directions available to them, and it visualy correlates to and option they can select. It also alleviates the requirement to press a button several times to get to another option. I also did this with the character select, where they pressed the button/position they wanted to be, this would be one of the face buttons or IJKL/arrow keys. It did fight the standard UI philosophy, of when something is selected they have to use a back button to undo. The only time I engaged that type of thought was on the “ready to fight” confirmation, the player has to press the back key to go back to select/change their color/button position.
 

CharacterSelectSpin.gif

Without going into too much detail, I did create the lobby/character select from scratch, with a little networking help from our dedicated networking engineer. Aside from making the UI section with layers in mind for modularity, and flexibility, I also connected the 3D models, which UE4 calls actors, and lights to activate and change depending on what is selected in the UI section. The goal was to create energy and excitement with the 3D models and prep the players for action, and hopefully that emotion/feeling comes across.

Design ScreenShots

CharacterSelect.gif

Art

Since we were a team of programmers, and with very little assistance from artists, I put on my graphic artist hat and did what I could. I use to do graphic art work about 12 years ago, and still dabble here and there. I wanted this project to look professional, so I did what I could to get it there. 

TitleScreen.gif

After nailing down the theme, and narrowing our art scope, we settled on ancient Rome. We felt it lends itself to the core gameplay and the idea of arena combat. After realizing the Character Select would be the cells of a coliseum, or waiting area before battle, I wanted to explore what it would be like traveling through the coliseum. This led to the title screen becoming the base entrance to get to the combat. I found an image that had a good corridor, and then I cut up and photoshopped a wall into the photo to look like the side/ entrance of a coliseum. Next, after making an “okay” logo, I put it on the wall trying to make it look like it was painted, but still looking a little over the top for a videogame logo. 

Icons.gif

The Icons, were all bit and pieces of other images cropped and skewed to make the various icons. Some of the main ones took some time, like the Online, How to Play, The Scroll, The Rock Slab, Number of players, the buttons, and keys icons. The Online and How To Play icons had about 20+ layers each. So they definitely took some work, but I believe they look good. The icons and graphic art looks consistent, and gels with the overall theme, and that’s what I’m happiest about when it comes to the art I did. 

Graphic Art Icons

 
...I’m glad my graphic art work is consistent and melds well with the overall theme..
— Jeff Yanick

Final Thoughts

Having four months, several issues, and various team member dilemmas, I believe this project still accomplished a lot. We have a game with untraditional controls, unique combat system, modern networking design, professional looking user interface, and hot swapping control options. When I think of the context in which the project was made, this game is way better than it has any right to be. I’m glad I was able to work on this project, and I learned so much, not just about programming, UE4, or working with a team, but the hard deadlines that come with strict time frame, how life issues that could hinder the effectiveness of time spent on the project, and so much more. This was a good experience, and I’m glad I was able to work on this game.

 

11 minute in depth overview

 
Jeff Yanick