At Super Evil we know that gamers expect the very best when it comes to performance. When you’re in the middle of a team fight, every millisecond counts! That’s why we spend a lot of time making sure that Vainglory is always fully optimized for the latest generation of mobile devices, such as the powerful iPhone 8 and iPhone X. 

To celebrate the release of the gaming inspired film by Apple, showcasing Vainglory and the power that the iPhone X brings to gamers, we wanted to give you a little sneak peek at what goes on behind the curtain when our technology team designs, implements and optimizes a new feature like true line-of-sight fog of war for Apple’s A11 Bionic chip. 

Vainglory is the first game to ever provide a smooth real time line-of-sight fog of war effect on a mobile device. Previous generation of devices simply weren’t powerful enough to compute and display this visual effect. But it wasn’t enough for devices to get faster. We actually had to invent an entire new way to calculate the fog of war effect. Because on top of just getting it to work, we also wanted it to look really beautiful as well.

  Figure 1.  At Super Evil we wanted to make fog of war accurate, high performance, and beautiful all at the same time.  

Figure 1. At Super Evil we wanted to make fog of war accurate, high performance, and beautiful all at the same time. 

Traditionally, fog of war is calculated on a grid (figure 2a). But in games that use this method, you often see that the fog of war looks blocky. We felt that the fog of war should truly follow the ‘line of sight’ of the player, because we think it looks better and it’s competitively more accurate. 

  Figure 2.  Left: Fog of war on a grid  (a)  vs.  Right:  true line of sight fog of war in the EVIL engine (b)

Figure 2. Left: Fog of war on a grid (a) vs. Right: true line of sight fog of war in the EVIL engine(b)

Instead of implementing fog of war the standard way, we came up with an entirely new approach. Instead of using pixels, the EVIL engine calculates fog of war using geometry. Each unit that provides vision starts out as a perfect circle. Then we iterate over all objects in the level that block vision, such as walls and brush, and we subtract their shape from the circle of vision of each unit. By extending their geometry outwards, away from the unit for which we’re calculating it’s fog of war contribution, we’re left the exact geometric shape for the vision of that unit (figure 2b). 

If there are a lot of units and objects blocking vision, this means a lot of calculations in every frame (figure 3a). And this is where the power of the A11 Bionic chip really shines. The A11 is a multi-core chip meaning that instead of just being able to calculate one thing at a time, with some clever programming, the A11 is capable of calculating 6 operations all at once. Vainglory uses the A11 chip to greatly speed up fog of war calculations on the iPhone X. The work for calculating each batch of vision geometry is spread out over the available CPU cores, making the calculation up to 6 times as fast (figure 3b). 

  Figure 3a.  All fog of war geometry is calculated on the main CPU. The graph above shows the workload of the engine over time, with longer bars representing more time spent on a calculation. From the profiling instrumentation you can clearly see that calculating the fog of war effect takes up a big chunk of the frame time

Figure 3a. All fog of war geometry is calculated on the main CPU. The graph above shows the workload of the engine over time, with longer bars representing more time spent on a calculation. From the profiling instrumentation you can clearly see that calculating the fog of war effect takes up a big chunk of the frame time

  Figure 3b.  All fog of war geometry calculations are distributed over the available additional cores of the A11 chip. Compared to figure 3a, you can see in the graph above that by spreading out the workload for calculating the fog of war effect over all available cores, means that overall the calculations are completed faster, resulting in higher frame rates and better responsiveness

Figure 3b. All fog of war geometry calculations are distributed over the available additional cores of the A11 chip. Compared to figure 3a, you can see in the graph above that by spreading out the workload for calculating the fog of war effect over all available cores, means that overall the calculations are completed faster, resulting in higher frame rates and better responsiveness

This was just a quick sneak peek at some of the technology that goes into optimizing Vainglory for the latest generation of devices such as the iPhone 8 and iPhone X. At Super Evil we want to make sure when you’re battling on the Rise, you can be assured that you’re getting the absolute best performance and everything runs buttery smooth™.
 

  Figure 4 . A sneak peek at a few of the millions of lines of code that make the Vainglory magic happen

Figure 4. A sneak peek at a few of the millions of lines of code that make the Vainglory magic happen

See you on the Rise! 
-- Tommy, TheRealKrul, co-founder and CTO at Super Evil Megacorp