Froggy Rush

Hello!

 We are Lars Korden and Marc Liebler, the creators of Froggy Rush! We would like to take you through the development process of Froggy Rush and show you our little journey in a bit more depth! Summer of last year, we had the idea to create our own mobile game, we wanted to create a game that was easy to understand, yet fun and challenging to play with great replayability. 

Froggy

As for our main character, we wanted to create someone who looks cute, appealing and maybe a bit derpy, too! After exploring and thinking of different ideas, we both really liked the idea of having a cute and funny looking frog as our main protagonist. After exploring a few concepts of how Froggy could look we decided to go with the sketch below as our main concept.

Taking the character further, we wanted to allow the player to customize Froggy and give him a personal touch. Creating a separate mask texture that we used in a custom shader allows us to change Froggy’s colour in the game. Now froggy can be customized in a wide variety of different colour combinations! Being able to change Froggy’s colours is definitely a cool feature, but we felt like we could take the customization a bit further…

A Frog and it‘s fashion

Who doesn’t like different costumes and outfits, Froggy surely does. In the game you can unlock and choose different outfits for froggy. Each outfit consists of a hat/ topper a body/skin and a base. … and the best part about is that you can combine every element as you like. Furthermore, you can unlock different colour combinations for each item. As of now the game features over 1.000.000 unique custom combination! We choose a few of our favourite outfits to showcase them here and we can’t wait to see what combinations others will create. Here’s a look at some of the costumes you can unlock in Froggy Rush:

Since we are using a rather heavy PBR workflow on mobile devices, we wanted to keep the in-game models as optimized and performant as possible. Carefully optimizing each mesh for the maximum amount of silhouette, custom packed unwraps to keep textures as sharp as possible and avoiding artifacts and maintaining the texel density. A lot of love went into each costume in both designing and creating it in 3D. After testing a few meshes in game, Lars set up a maximum vertex budget which the different outfits should not exceed to ensure they all have about the same performance impact and a uniform amount of detail.

Here are a few examples of how the meshes were optimized that Lars created:

As for texturing we also thought of ways to improve and speed up the pipeline. Since all 3D assets and costumes were created by Lars, he created a custom smart material in Substance Designer to save time. This material has a few custom parameters that allows to quickly add a stylized noise, wear and tear and damages in Substance Painter. Furthermore, using different inputs like the world space normal and ambient occlusion, the materials allow for adding a more ‘painterly’ feel in colour and lighting. Here is an example of the smart material in action. Note that the lighting in the scene is the same on both images, only the smart material is applied, and the parameters are set:

That way Lars could save a lot of time in the texturing phase while creating each costume. You might be wondering by now, where and how can you unlock all these costumes? Good question, let us show you…  

Blubba’s Boutique 

… Oh psst! We should be a bit quieter right now, looks like Blubba is sleeping at the moment. Do not be confused by his shop, it looks a bit all over the place and indeed, there’s no doubt about that, but Blubba sure will make you great and fair offers. He has all sorts of rare and unique costumes in his backyard, why don’t we have a closer look…  

Here you can spend your currencies for the outfits we talked about earlier. Blubba does accept your coins but he does not trade for flies. Flies are his friends and not food! That’s what he would say if he would be awake right now.

Upgrades and perks 

Talking about flies, these can be spent to upgrade your abilities in game. Whether you want to boost the duration of the gameplay power-ups or have more life at the start of each round, the upgrade menu offers a variety of upgrades for Froggy which in turn help you to get an even better highscore!

Environments

We wanted the environments in Froggy Rush to feel colourful and fun to travers through. Using trim-sheets and modular assets we kept the overall memory usage low and saved a lot of time creating the environments as well. Furthermore, we both really like procedural workflows, since these can speed up the whole production and iteration process. For Froggy Rush, most trim-sheets and tilling textures are created procedurally in Substance Designer. Moreover, the vegetation and plants were also created procedurally. That allowed us to quickly test a lot of different shapes and colour combinations in the game. Here is a look at a few examples:

World Distortion

We tried to achieve a more 3d like feeling in the world by using world offset in the environment shaders. We simply shift the z axis of each point down by the distance to the camera. This creates as small issue. The touch-input to place a wave becomes inaccurate since the bend is not accounted for in the line trace to the world plane. We corrected this by creating a grid of for points and moving them according to the shader. Then we could line trace on the newly created plane.

Rigging for mobile games:

There's a couple of challenges that arise when making rigable characters for mobile game. Firstly there's a limit on the amount of bones you can use. So we had to be cautious and try to get as much expression as possible with as little bones as possible. We scraped the limits with 68 bones on our main character, by keeping bone-count low on the feet as well as the face. Secondly getting a rig that allows for stretch to achieve cartoon-like animations is a tricky venture. You can't simply scale your bones, since you'll be getting errors trying to export from Blender to Unreal Engine. Unreal Engine scales the child bones with its parent bones, which introduces shear. The solution is to create an extra bone layer which simply copies the translation of the correctly scaling bones as to not introduce any scaling in the animation. Now the bones simply move apart from each other, which still leaves you with a acceptable cartoon-like stretch.

Season Pass

To keep Players more motivated to play as well as offering more ways to unlock items we wanted to include a Season Pass with different items and costumes that you can unlock. We liked the idea of having the season pass themed according to real seasons of the year to create a nice and fitting atmosphere whenever you play froggy splash. That being said, the first season is summer themed, including a new beach biome, the crab kingdom, along with 30 summer themed season rewards to unlock.

Sticking to our goals

With Froggy Rush being our very first mobile-game we made, it was quite the challenge. We both learned a lot in regard to game development and teamwork. Since we created everything from scratch we had to carefully plan and stick to our own sprints and planning. 

What’s next? 

Even at the very start of our journey it was clear that we wanted to publish our mobile game first on the Google Playstore and after that on IOS. Before we do that we definitely want to improve our game as much as possible for example by adding more content such as more gameplay elements and additional costumes for different seasons.

Thanks for reading through our presentation, since you made it so far, froggy would like to give you a something to say thank you! *01011* you can enter this code in the games extras menu to receive a special reward! I hope you enjoy playing Froggy Rush!

You can download the apk here: 

https://drive.google.com/file/d/1WjQsMu9PD1SPK9whZ3-6Jyymggzb-hXN/view?usp=sharing