My 2019 Year In Review: Working on the Call of Duty Companion App

Hello. I'm Tim Jung and I work on the Call of Duty Companion App at Activision Blizzard. The quick rundown of the app is that it's a way for our players to stay connected to the franchise, earn rewards, and interact in cool ways with the games. It's written using React Native, JavaScript, Redux, & React Navigation.

This post is a look back on things I built or worked on - especially things that I had ownership over - during 2019. It's not comprehensive but it's some of the things I'm really proud to have shipped. I'm mostly writing this for myself as a way to remember 2019 (my first full year in the games industry) but perhaps you'll get some enjoyment out of reading it too.

A quick note: Shout out to my amazing team. I couldn't have done all of this without your guys hard work, contributions, help, code reviews, good attitudes, willingness to grow, & commitment to helping others learn. We've all collaborated, teamed up, touched each others code, looked out for each other, and contributed to this project in ways that can't be quantified. Super lucky to work with you all. What we do is truly a team effort.

THE LOADOUT EDITOR

I joined the team in November of 2018 and immediately I thought it would be a good idea to take on the hardest, most complex feature I could convince everyone to trust me with. On some level I felt like I needed to prove myself and on another level it seemed like a lot of fun. This feature was the in app Loadout Editor (also called Create A Class) for Call of Duty: Black Ops 4 (BO4).

In BO4, players have the ability to maintain and customize a number of classes (aka loadouts). This means that a player can have multiple setups with their favorite combinations of things such as guns, gun attachments, gear, equipment, perks, and wildcards.

The idea was to bring this functionality into the Companion App. Players would be able to access their personal inventory of loadout options, select new combinations, and then press save - which would update their loadout in Black Ops 4.

This was hands down the most elaborate feature I've ever built in my career. The BO4 loadout editor actually has a lot of rules that needed to be accounted for. Here's a few so you can get an idea of what needed to be coded for:

Players may have loadout options unlocked and available to use based on in game level or store purchases. Weapons have different sets of attachments that can be added to them. Some of these attachments required a different attachment be equipped already for it to be equipable. Some attachments can't be equipped at the same time as others. Players have a limit of 10 points they can spend on a loadout and each equipable item has an associated point cost. Some items cost 2 points to equip. Some items from the "equipment" category had the option to equip a second of the same item once the first was equipped. A user can equip perks (these are special class power ups). They had three categories: perk 1 (blue), a perk 2 (green), and perk 3 (red). Each color of perk category had multiple perks to select one from.

Then there's wildcards which make this all even more complex. Wildcards modify the rule set of how a loadout works. One wildcard lets the player equip two primary weapons or two secondary weapons (so long as that weapon isn't already equipped). One unlocks a new kind of attachment called an operator mod for some weapons. Some wildcards unlocked additional attachment slots for weapons. Gluttony wildcards allow a user to use all three perk slots to select perks from a specific color of perk category. Greed wildcards would allow a player to unlock a second color of a perk category.

Because a user could perform the action of equipping something when they were at the 10 point maximum I also needed to display a screen that warned them of this and gave them options for what items to remove so they weren't exceeding the 10 point limit - called the max 10 screen. This screen also needed logic to make sure things made sense to the user. For example, selecting to remove a wildcard that allowed two primary weapons to be equipped also needed to indicate that any second primary weapon a user may have equipped would also be removed as a consequence of removing the wildcard. These rules cascade into a large number of situation I need to account for in the code, UX, and UI.

Ultimately there's a fair amount of state and a large amount of checks that happen when a potentially state changing action is initiated by a user. I had to be especially thorough with checking and testing all of the actions a user could take (and there were a lot of them) so that they never experienced a situation where a loadout was in an invalid configuration.

This feature was especially fun and challenging for me. In a way it's the closest I've ever been to real game development. In a way I like to think it is real game development. It required me to reverse engineer BO4's in game loadout editor, build a mobile experience of the feature, coordinate with Treyarch, and because it updates players loadouts in the game. It's one of our most used features in the app.

VERSION 2.0

After the Loadout editor released, I started focusing with the team on the 2.0 version of the app which was set to launch alongside the release of Modern Warfare later in the year. So much went into this effort that to me it feels insane that we successfully executed on it. Going into depth on everything that went into the 2.0 release probably deserves its own blog post. But I will try to summarize the key objectives. Essentially, the majority of the app was rewritten.

The 2.0 release consisted of revamping existing features (e.g. the entire Ops section), building new features (e.g. the new Social section), refreshing the design, UI, and UX experience of the entire app, upgrading from React Native 55 to 59, moving from React Native Navigation to React Navigation, rewriting class components to be functional components and using React hooks, more thorough analytics, a rethinking of our file organization and component practices, thorough and proper usage of Redux throughout the app, and meticulous identification and remedying of performance issues (thanks React.memo!).

This was very much an all hands effort and it's especially hard to attribute specific parts of this to individuals on the team. We really united over these goals, shared ideas about performance and best practices, learned a lot, and executed on making the entire codebase something wildly less spaghetti. Ultimately, we ended up with an app that was about half the size of the previous app, had a robust set of components that could be used to rapidly develop new screens and features in the future, significantly faster performance which was especially noticeable on older or less powerful devices that would otherwise crawl or crash previously, smart usage of Redux that tamed the large amount of data we make requests for and use throughout the app, and a navigation system that was a better fit for our project.

OPS REFRESH

Another feature I worked on was doing a complete revamp of our Ops section of the app. In the original version of the app - players were placed into "Squads". They could then vote for an objective to pursue for the week (e.g. "Your squad must get 300 headshots this week") and earn a reward. Unfortunately the feature wasn't particularly engaging so we set out to revamp that entire section of the app with a new experience.

The refreshed Ops section still does stuff like placing users in a Squad, letting users create, join, report, and search for Squads. But now the UI and UX had been revamped which required a rewrite. Instead of the old voting mechanic we moved to a more competitive Weekly Tournament. This system places squads of similar skill level into a tournament each week. The squads then compete to be in the top 3 by completing the weekly objective. Being in 1st provides a better reward than being in 2nd or being in 3rd. At the end of a tournament, rewards are determined on the backend, players will then receive an in app notification detailing their reward on their next app open.

Digging into the technical a little more, one of my favorite pieces was building the ranking board for the Weekly Tournament screen. I was able to build it as an agnostic component. This means that I was able to use it in our Leaderboard screen as well. I refactored out the old ranking board in the Leaderboard which helped decouple code for that feature. Now this ranking board component can be used in future features as well. The Ops revamp allowed me to really explore building a feature that has a lot of reused components throughout it.

PUSH NOTIFICATIONS & THE MODERN WARFARE TEASE

I also have built a lot of functionality related to how push notifications are received by the app. I got to work on implementing things like rich push - which is when a notification also shows an image, or in the case of iOS, a gif or video too. One of the coolest thing I built was the custom push notification sound for the Modern Warfare reveal tease.

Android and iOS actually make it available for apps to choose a custom sound to play when an app receives a push notification. Leading up to the announcement of Modern Warfare, we wanted to put a custom push sound into the app to get players excited and talking about what the next Call of Duty could be. The sound happened to be the iconic night vision noise that players associate with the original Modern Warfare series. All the push notification itself said was the reveal date "MAY 30. 10:00 PT.".

The night vision noise is actually an mp3 file that exists in the app itself. We can specify a data field in the notification payload that is then checked for when a notification is received to determine if the custom sound or the users default notification sound should be used. When I originally received the sound file it was named something like "mw_nightvision.mp3". I had the forethought to rename it to the less revealing "push_sound_new.mp3". Later on, I was shown a Reddit thread where the file was data mined but luckily my renaming saved us from making the Modern Warfare reveal more obvious than what we wanted.

CONCLUSION

Like I said at the beginning of this blog post, this list isn't comprehensive. I worked on so many different things this year.

Some other stuff I did: Revamped our Social section including building the feed cards and pinning functionality, worked on the Leaderboard screen and settings, created widgets that appear on the Home screen such as the Ops widget, countless bug fixes that touch nearly every part of the app (especially fond of fixing ones that players report to our Support team), built reusable components, sifted through code reviews, helped teach other developers about the app and how to work with React Native, candidate interviews, going back and forth with UI and UX to make the best user experiences possible, championed adding in our new weekly rewards feature, begrudgingly checked that everything looks good using the iPhone 5s emulator with its accursed tiny screen size, drank too much coffee, collected free Activision swag, lost 25 pounds of fat and then added on 25 pounds of (mostly) muscle, played Blackout in BO4 with my coworkers, and had lots of team lunches at Fast Taco.

When I joined the Call of Duty Companion App team we had about a 2.0 star rating on both the App store and the Play store. Over this last year we all worked super hard and today the app rating is at a 4.1 on Android and a 4.8 on iOS. It's such a huge achievement for us and I'm super excited about what's next for the app. I'm working on some really cool things right now.

It's been awesome an awesome 2019. It was my first full year in the games industry. I'm the busiest I've ever been but I'm loving every minute of it. I wanted to work in the games industry my entire life and now that I get to build things that millions of players use I couldn't be more fulfilled and inspired.