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.
Top comments (38)
Can you please fix the blank screen issues?
Everytime I open the app on Android I have to log out and sign back in for it to load anything.
Sorry for posting this on here but I just stumbled upon this post/website and happen to have an issue with the app that didn't seem to be getting fix from what I can tell.
I love the app, it's just this issue makes me not want to use it anymore.
Hey zXenn_VS, thanks for reaching out. I always love seeing our users getting in touch with us about ways we can improve the app. We take those concerns seriously and always investigate them so thank you.
That said - we actually have an update coming out next week which addresses issues users were experiencing where they needed to sign out and in. Hang tight and keep an eye out for it. If you still experience the same issue after the update comes out then please DM me on Twitter and we can dig a little deeper into the issue.
Hey Tim, Thanks for the reply and I appreciate the info. I'll look out for the update, thanks.
Update is a little bit delayed but I promise it's coming soon! 😅
Hey zXenn_VS. The update is now live. Feel free to test again and DM me on Twitter if it's not working. I wasn't able to DM you because of your current message settings.
Hey Tim, strangely I decided to see if the update was available yet and it was and within 30 secs of pressing update got notified by Twitter that you followed me.
I'll check out the update soon and get back to you. Thanks for keeping me upto date.
My squad won the weekly tournament that had just ended last night. We were placed into a new tournament with two squads already up to 390 and 208 wins at only 11 hours in. Only problem is, these wins are coming from only one person in each squad. When I look at their recent activity or matches, I noticed they lose a lot more than they are getting wins and they have only been playing for 8 hours. When we won last week, we had to add active friends to our squad and play for a whole day with almost every game being a win but that was with the whole squad, this is one dude getting 390 points in 11 hours!! How are we supposed to even compete with that???
Update: Misread the tournament requirements for this week! Didn't know it changed from "wins" to "tdm kills"
Hi Lauren. Thanks for reaching out. I've passed your feedback along. Please note that this weeks challenge isn't "wins" it's actually "kills".
I found this out after I posted! I apologise! Thanks for the reply though! These weekly tournaments are honestly the only thing I really play Modern Warfare for
It's okay. I'm happy to hear you enjoy the weekly tournament because I was primarily the one who built it. It's always nice to see it being enjoyed. Please feel free to reach out in the future if you see any issues. :)
Curiously what was the reason moving from React Native Navigation to React Navigation?
One time in a bar Nader Dabit told me he liked it better. Just kidding. Though that did happen.
RNN wasn't a good fit for us. A lot of apps that have a significant enough amount of native modules tend to use it. But we basically don't have any native modules. Nor do we care about features RNN offers. We felt RN was simpler, had a more reliable buy-in (meaning better maintained), & fit our upcoming use cases for deeplinks better. We liked how it worked with react-native-screens too. It has cool stuff like lazy loading too which was easy for us to take advantage of.
Thanks for response! We've lived with RNN for a while now and found it quite difficult to work with, however have enjoyed the native feel and performance.
I'll have a look into react-native-screens with react-navigation, so thanks for that tip.
Personally I can't tell any difference in terms of performance. If it's there it feels negligible enough that the pros of RN still count much more heavily in its favor. Though to be fair we did a lot of performance improvements alongside moving away from RNN so I don't have a proper comparison - I just know our performance now with RN doesn't appear to be any sort of problem.
If your application uses a lot of native modules your experience may indeed be different. That is not an area I am particularly knowledgeable about.
Hello Tim, is there a way to edit squad info. Specifically the about section? You know just in case there is a typo 🤷🏽♂️. Thanks in advance.
Hey Alex. Thanks for reaching out. We have an update coming out sometime later this week that adds the ability to edit your squads info if you are the owner. Please keep an eye out for it. :)
Hey wow thanks for the quick response. I will be looking out.
Hey Alex. Thank you for your patience. Update is live on Android and will be out on iOS sometime today.
Thank you for the update. I already logged in and checked it out. It works great! Thank you again.
Glad you're enjoying it. I didn't personally work on this addition but I will forward your thanks along to the engineer who did. :)
Can you help with The app crashes? Many people have this problem but I and Many others cant find any help to get around it. The app crashes when I try to open it.
Hey Joni. If you could let me know your username in the app that might be a good starting point for me to investigate further. Thanks
I think it's FinXIII.
We have an update coming out later today (update 2.3.0). When it's out can you please download it from your app store and let me know if you're still experiencing the crash?
I downloaded the new update 2.3.0 and it still keeps crashing. I tried to redownload the whole app but it didn't work. My phone is a few years old and has Android 6.0 so that May affect the app from working but I've heard other people with newer phones and android versions having the same problem.
Thanks Joni. I'll keep investigating. In the meantime, could you send a video of how you trigger the crash as a DM to me on Twitter please?
Are there any plans for a load out editor on the app? I think it would be really useful and is honestly the only thing I think the app could use to make it better.
Hi Sierra. Thanks for reaching out.
We currently support a loadout editor in the app for BlackOps 4. The loadout editor for Modern Warfare is actively being worked on. Please stay tuned. :)
Awesome!
Any news on loadout editor for mw?
Hi Don. Same status as above. It's actively being worked on. Thanks for your patience.
Still no news on that?
Thanks for sharing Tim, 👏👏👏
I like COD very much. This game is really great and the best part is Modern Warfare 2. If someone is looking for a good price for this game, I recommend this online store: royalcdkeys.com/products/call-of-d...
Great post, Tim. Shared this in my react native newsletter
Awesome. I'm actually subscribed already too so that was cool to see. :)
Some comments may only be visible to logged-in visitors. Sign in to view all comments.