A Talent System in Contra Mobile

Hi, everyone. I am a vfx artist for the Contra team at Tencent. I am currently responsible for the visual effects in Contra Mobile and the new project has produced an amazing game. Today, I would like to share a game system we have in Contra and discuss with everyone how inspiration hits my brain and how I make visual effects from it.

It is called Talent System, from which you can unlock your skills by powering so you can have a stronger character. This is one of the methods that you can use to achieve this. There are three different stones with different colors that represent different abilities that you can unlock.

The first question: What elements should I use in the device to make it fit the art style of Contra Mobile? As we all know, Contra is a game that it happens in the future, although it was invented a few decades ago. So, elements can be about hi-tech, science, or anything that we might not be able to imagine now. The first things that come to my mind are energy, electricity, and maybe a little magic.

energy GettyImages-504281324-ccba1e1

As we see in the picture, the entire color theme is blue with three different stones that are orange, red and green. We need to make sure these three parts of the effect are interrelated. So, the main difference lies in the colors. The core occupies the major part of the device and obviously, if we are going to have a huge effect, that is where you can see it.

The three stones move in three different directions, and the major effect is in the middle. If we successfully power one of the stones, it will insert into the glass in three directions, and the energy will be passed down to the core. This will enable the core to have a huge impact because energy hits the core, resulting in an energy explosion to tell our players they have successfully upgraded the device and unlocked the abilities of the characters they use in the game.

There are three requirements from our game designers: (1) Some effects on the model in standby mode. (2) Stronger effect to tell players that it is successfully upgraded. And (3) The most powerful effects to show the device has unlocked new abilities for the characters. As long as I know what the requirements are, I prefer to start from the easy to the complicated.

This is the model we have after it is animated by our animator. We can see it only has an up and down idle animation. It is not hard to figure out what we can do to perfect this device with the magic we have created.

First, we need to give the stones some unique material to show the value of the stone. I was thinking some shiny surfaces might be a good direction. Thanks to our technical artist, we have a perfect shader for the material of our stones. This is what it looks like after applying the shader, shiny but solid.
rock

1-2

After finishing the stone materials, we need to give them containers to cover the stones. The energy stones cannot be exposed since they are the keys to upgrade the device. So, I built three container meshes to cover them up according to the colors of the stones. We also need some effects to perfect the containers, so I decided to use smoke as the elements. This is how it looks when this step is done.

https://youtu.be/RFM3eNigt14

The core of this device is the most important part. It is where the most powerful effect should be. But in its standby mode, I prefer to keep it simple with some little dots and twirl effect. Combining these elements is how I think it should look in standby mode. The effects should not be complicated but should be clean and easy to tell where the magic will happen when you insert the stones and unlock the skills.

Once we have finished the idle vfx, the next step should be deciding how to let our players know the device is upgraded after they do something with it. This is the second reason why this device is attractive to our players. The strength of the visual effects of this part should be the second strongest. Therefore, upgrade means the devices are being given some power. We can see a lot of stuff being energized in the movies, especially superhero movies. They will always have power hit the center of their body and give them the energy to pass to their arms and legs. So, I think this part of the effect should be energy that is sucked into the core causing the whole body to be energized and ready to release the power, which is our third step of this device.
From this inspiration, the major part of this effect is energizing the model. But the model is way too complicated; it is not easy to have energy flows on the surface of the model so that it will look more like it is being energized. After thinking about this for some time, I realized that there might be a trick I could use that works. Additionally, if we want to make a UV animation, we need a gradient texture and the UV mapping needs to be rearranged so the texture can fit the UV and make it flow.

1

Considering that the structure of this device is complicated, I knew it would take a lot of time for me to rearrange the UV, so I took a shortcut. This figure shows the new UV that resulted from this rearrangement.


3

I imported the mesh into Maya and used a function to get the front view to become the new UV. However, there is still another question we have to answer: How do I use a single gradient texture to make the UV flows? The answer is that instead of using a single gradient, I used a sequence texture to make it flow. And, that is why I wanted to make a Front view UV so that the sequence can slide over the surface of the device.

4

1-5

https://youtu.be/yXVzjtC3_fo

Next, we made some curves to be the sucking part. If something is sucked into the core, the whole body gets the energy, and something comes out of the core. This signifies that the device is going to have a huge impact soon. Now, on to the most important part that describes why this system exists. Our animator made animation revealing that stones will be inserted into the container, transferring the energy from the stones into the device. The core will be powering after that, and the energy is 100% full. The result is that it will have a huge impact to release the power to signify that some skill will be unlocked.

https://youtu.be/9Jpn22kmZKI

As we see in the video, when the stone is inserted, the strength is very powerful, so we need to have some feedback to tell the players that the stone is inserted. Next, I wanted to add some elements to show that the process where the energy flows into the core is also strong. It took a while to test which element was better for the device, and as I mentioned earlier, I chose electricity. The reason I chose lightning is because all devices are activated by electricity, so lightning and electricity would be a great option that can be used to describe how powerful the energy passes into the core.

https://youtu.be/wKX-Hvc1n6s

After electricity passes down to the core, it will be energized until the power is full. Next, we needed a huge impact to tell everyone that the device has unlocked some of the skills

https://youtu.be/V4Dzfqkhetk

With the elements and effects added, this is the final that we can see in our Contra Mobile

Well, that is it for now. Thank you for reading my article. I know I still have many things to learn, so I welcome any comments and suggestions you have for improvements. Now, I am onto a new project that is occupying most of my time This new project will result in the creation of another awesome game!!! I will summarize something about it when we finish the game. Again, thank you for reading and have a good one!!

20 Likes

This one of the best breakdowns i’ve seen and it was a pleasure to read your approach to solving the problems and how you collaborate with other disciplines to deliver the final result.

Thank you!!! It is always good to share with others:)

1 Like

Yeah definitely, always nice to see how it works behind the scenes at other studios. is the model used also built from scratch or did it already exist in the franchise. it seems that you guys came in and worked on it after all the systems were already set up. did you have to request any support from tech design to get any effects implemented?

1 Like

Yes, it already exist in the franchise. But I need to discuss with my coworkers how the entire system should look like. It is team work by not only visual effect artist, but also animator, illustrator, ui designer, game desinger and even programmer.

We receive the requirements from our game designers, and then illustrator and ui designer would start their works. But it doesn’t mean we don’t need to step in. As long as we want to make sure the entire system is on the right track. Every position needs to step in from the beginning to the end.

So yeah, it is a team work by everybody. I have many cases with the same working procedure haha

1 Like

For the last question you asked. The answer is the effects on this system is causing more draw calls than we expected in the beginning. So I did ask our programmers and technical artist for help. The fact is they didn’t do much on shaders or scripts to kill the draw calls. All they require was I need to try to use particle system as less as possible so our players can open the page smoothly.

so yeah, I think we didn’t use many techincal helps from the others, most of the time, we vfx artists will try to achieve the effects we want without using too many particle systems. Hopefully that helps:)

1 Like

the breakdown of the effect design is really cool.
I think you should add more flash when the upgrade is done.
Personal view for reference. Cheers.

1 Like

Thanks , will do next time

this turned out real nice

1 Like

Thank you very much :stuck_out_tongue:

Good job man, thx for sharing ! How could i possibly miss it…on my way to the app store now :blush:

1 Like

Thanks man ,and yeah, it’s a great game you shouldn’t miss!!!