Article brought to you by Intel®

During GDC 2016, Intel was hosting sessions to give developers advice on how to improve the performance of their games using Intel® Graphics Performance Analyzers (Intel® GPA), a suite of tools designed to help game developers debug, analyze, and optimize their games. We at MovieStarPlanet jumped on the opportunity and thanks to optimizations we found, we now have a better performing product.

RoboBlastPlanet is a free social-block-builder vs. multiplayer-action-game allowing kids to create their own avatar and world using not only wacky and funny blocks, but also entire models made by other kids. This makes creativity truly sharable and puts a collaborative twist on the building-genre. Playing on our secure servers, the kids can safely chat with their friends in their own language, all monitored by our advanced chat filtering safeguards, or blast them with funny gadgets in the blazing battle mode.

Download Intel® GPA for free from https://software.intel.com/gpa.

Optimization pass

Particles & Overdraw

Initially when a player had low health, we needed a way to show it. Having a smoke effect is as good as anything, so we decided to go for it and created some particle effects. Unfortunately, the simple particle effect we had was too heavy since it was occupying a large portion of the screen and drawing many layers. This caused the frame rate drop during the most critical time in the game when you had to evade all incoming attacks from other players!

Using Intel® GPA’s overdraw visualization feature it was really easy to see what was going on, and as soon as the designer saw the hit we got from the overdraw it was time to change it.

We did an initial investigation using meshes to see the effect that had on the overdraw.

Instead of using textured quads as particles, we went ahead and used meshes that would scale down to 0 and become invisible. This gave us virtually no overdraw and managed to keep the cartoony feeling of the game

Fast Clear

There was an interesting finding which had to do with us clearing the back buffer to a grey-ish color. Something that worked was to clear the back buffer to either white (0xffffff) or black (0x000000).  There was a hardware mechanism in place which activates a clearing fast path when clearing to these colors. This was much faster than the grey clear we originally had in place.

To simulate the performance gains, we used the state modification feature in Intel® GPA to immediately change the clear color to white (0xffffff).  We were able to see that the fast clear path saved us a couple ms on each frame.

Front to back rendering

There’s been some issues with overdraw and since our geometry is mostly opaque, it was recommended we do front to back rendering. This helped us to reduce our frame time by quite a bit. For example, the below images show the draw order of two draw calls. The magenta region is the portion of the current draw call. Using Intel® GPA’s pixel history feature, we were able to see that the floor is being drawn before the geometry directly in front of the camera. This caused quite a bit of overdraw and wasted cycles in our fragment shader.

The floor is first rendered as api call 461.

Then the boxes closer to the camera are rendered as api call 1124.

We learned that whenever possible, always draw fully opaque geometry front to back to achieve the best performance.

UI Draw Call Batching

One of the biggest issues we had was the Draw Call batching and our UI. There are places in the game where just bringing up the UI will escalate the number of draw calls to around 300. Using Intel® GPA we were able to see both the impact of each draw call and the texture being used for it.

This made us think outside the box a little bit, and we ended up adding a bitmap font to our UI sprite sheet. This allowed us to batch even more draw calls together and retrieve some precious frame time!
 

State Overrides

Determining whether you’re doing too much on the CPU or if you’re doing too much on the GPU is a fine art.

Fortunately, Intel® GPA allows you to find out where you’re bound to the CPU or GPU in a rather simple way by providing support for State Overrides, essentially showing you where your bottlenecks are:

In this example, you can see that using the Disable Draw Calls state override we were able to get the frame rate back up to 60FPS, which means that we were GPU bound. This allows us to focus our efforts to the right location rather than aimlessly trying to figure out if our code is too slow or if we’re submitting too much data to the GPU at once.

Fortunately, our textures are quite small so making all Textures 2x2 or having a Simple Fragment Shader doesn't make a dramatic change, although these things do matter depending on the complexity of your shaders.

Shader Permutations

Although we used Adobe’s own shading language, we still had some tweaks that could be done. We needed to inspect what some of our shaders were doing and our main shader for the Voxels looked like it could have been simplified. The idea here was to eliminate branching or to completely reduce logic that was redundant when it was not being used.

We split up the shaders and specialized them for the various tasks for which they were needed. This simplified the amount of instructions we were executing for each shader and reduced our total complexity.

Geometry Viewer

Something else that we found very useful was to visually inspect just how much data was being passed to the GPU via index & vertex buffers using the geometry viewer that comes with Intel® GPA.

With the geometry viewer we were able to see just how much data we were submitting to the GPU for each of our Voxel chunks.

Being able to see where your bottlenecks are is extremely valuable, not only due to the development time saved by removing the guess work, but also by the simplicity of looking at a graph and seeing where performance bottlenecks exist. Without being able to visualize the issues caused by overdraw, we would have probably wasted time and effort trying to determine the exact cause of our frame drops. Thanks to Intel® GPA, we were able to improve the responsiveness of the game and drop a minimal amount of frames while in the heat of battle!

About Intel® Graphics Performance Analyzers

Intel® Graphics Performance Analyzers can help you optimize your games to go faster by giving you the tools to iterate on your optimization pass without changing a line of code. Deep dive into the performance bottlenecks within your game to ensure there aren’t milliseconds left on the table. Download Intel® GPA for FREE from https://software.intel.com/gpa.

About the Author

Javier Abud has been working over 12 years in the games industry. Beginning with PlayStation 2 development, making Nintendo DS games and some PC development using Unreal Engine 3. Currently he's using Adobe AIR to make Web, iOS and Android games at MovieStarPlanet in Copenhagen, Denmark. His current role is Principal Programmer at MovieStarPlanet which means he's responsible for ensuring the best possible client code is being written across all company projects.

About RoboBlastPlanet

RoboBlastPlanet is an innovative next step for creative builder games: It allows kids to FREELY use each other's content, under our belief that CREATIVITY SHOULD BE SHARED. It allows Casper from Denmark to use a mansion made by Ramiro from Spain, add a UFO built by Emma from England, and top it off by inserting an army of zoo animals, lovingly created by Frank from Germany. He'll end up with a block world representing international collaboration. Letting the kids use each other’s creations allows them to unleash their inner ARTIST collaborating on something bigger than anything they could achieve on their own.

Built in Flash using Flare3D, this is a cross-platform game (web, iOS, Android) featuring realtime-multiplayer across countries, allowing a Danish kid on PC playing with or against a German kid using her iPad. This technical feat sets new standards for what developers can achieve with Flash, and allows as many kids as possible to join in on this playful and creative social game! And when creating an user account on RoboBlastPlanet the user can play across all of our 3 games with the same userID and then Casper from Denmark can still chat with Emma from England, when she decides to jump to MovieStarPlanet while Casper continues playing RoboBlastPlanet or jumps to BooniePlanet.

About MovieStarPlanet

MovieStarPlanet ApS is the company behind the games and social networks for kids aged 8-13 years - MovieStarPlanet, BooniePlanet and RoboBlastPlanet. In the virtual worlds each user designs their own MovieStar avatar, Robot and Boonie, which are used to play the games, engage and have fun with other friends. In the games there is a wide spread of options to dress-up, chat with friends, design looks, making movies and scrapbooks, design clothes, building robots and play mini games.

Launched in Denmark in 2009, MovieStarPlanet ApS has since experienced explosive growth. Currently, the games are live in 16 countries across 11 European markets as well as the United States, Canada, Australia and New Zealand. Globally we rank among the most popular virtual worlds for the target group with more than 300 million registered profiles.

MovieStarPlanet ApS employs +100 staff at the Headquarter based in the attractive surroundings of the new and modern part of Copenhagen called Ørestad.