Very Cartoonic VFX for Brawl Stars made with Flash

cloud_6

Hey Guys! :smiley: I’m Woo who works as a game artist at Supercell.
I’m mainly focusing on the VFX for Brawl Stars. I want to share some of my stuff.

I assume my way to make VFX is a little bit unusual since I’ve been using Flash mostly.
(I hadn’t been using Flash before joined this team either :sweat_smile:)

After a looooong painful time, I eventually got a little bit of know-how and decided to share the idea.
Hopefully my work gives a small help to you guys. :laughing:

When I made a plan for this game my initial goals were like these

  • very cartoon style
  • avoiding to use pre-rendered sequences as possible as I can

And the concerns were like these

  • our engine doesn’t support custom shader nor 3d base meshes for a particle
  • our game has a wide range of ground colors (Desert, Snowy field, Mine, and etc)
  • each VFX has to be represented the side very clearly (blue for allies, red for enemies)

So I had to make something cool with very basic color blending shaders, just a simple plane for particles, limited color palette, and a LOT of animation. :innocent:

These are examples :

1. Gun Smoke

ezgif-2-46cb8d952d8a
ezgif-2-dbf50a0b79dc

I used these images to make those kind of gun smokes.
There is a few more different types of gun smokes depends on the weapons in the game.

5dbea9929439f

And animated them like these,


This is the basic idea. I can change angle, scale, or color to make variations.

2. Explosion

1-1
2-1

This is the resources for the explosion & cloud,

5dbea99292f69

And this is the animation frame,

I separated them as two parts, in the air / on the ground, and randomly generate a few different types of clouds for each parts to make the explosion looks less repetitive.

For example, I made these exploding cloud for the upper part.

5dbe90a6169aa

And it’s very easy to change the color.

5

It took a time to make at the beginning, but after that it’s very easy to reproduce.

3. Electricity

1-1
2-1
3-1

Used resources are like this,

5

And animation frame is like this,


Electricity is quite easier than other elements because it’s very short and usually thin.
But at the same time I should be careful, short frames mean limited time and thin graphics could be easily look noisy.

And these are a few more my favorite works :

1-1
2-1
3-1

I’m using Behance as a portfolio page. I’ve uploaded more examples, animation frames, and resources on my page. You can check them here :

I hope you guys enjoy my work! :slight_smile:
Thanks to read!

35 Likes

Super fan of Supercell stuff.

Thanks a lot for sharing! :gem:

1 Like

Thanks a lot man! :wink:

1 Like

Super instructive thanks a lot !

1 Like

Great job man, the simpler the better, although it might’ve been a bit frustrating at first !))

1 Like

Thanks for reading! :smiley:

Hahaha that’s true man :laughing: Thanks to say that!

Very interesting VFX, look forward to your future share ~

I saw your liquid animation in one of the attacks. Was it hand animated or you used sort of a shape tween or a tweened symbol for it?

I animated them by hand. Not a shape tween nor tweened symbol.
Unfortunately our engine doesn’t support that kind of function. :stuck_out_tongue:

1 Like