Overwatch FX - Pharah Rocket Study


#1

Let me just geek out a little, and say my favorite flipboard in Overwatch is this one.


Love the Pharah rocket impact so much. Its the kind of FX I’m most interested in lately. Its cartoonish, snappy feels anime inspired. This particular flipbook is played back at like 30 or even 24fps, so its ever so studdery just like anime fx animation where they hold frames, and it feels great, while being so counter intuitive.
This kind of FX is also outside my comfort zone as I’m normally a simulation realistic fx guy. But I grow tired of that (whats that Zenyatta FX guy?) I want to get better (as a lot of us here do) at hand drawn fx. I’m sure the person who made this is on this forum. I’d be super interested to hear whatever you’re willing to share on workflows to create a flip book like this.

My guess is.
Draw silhouette shapes in illustrator.
Make b/w gradients from that in photoshop
Color = Lerp between yellow-red based on flipbook in material in engine.

even if thats the way any tips always help. Especially on making gradients on curves.


Stylized Frag Launcher Explosion - Overwatch Inspiration - Breakdown Posted
#2

Yeah her rockets are awesome the style is just so cool xD

I find myself always trying to avoid flipbooks so I’d like to entertain the idea of using stepped alpha erosion to achieve the effect.
Essentially using one texture that as it alphas out in stages also changes its colour from bright yellow to the darker orange.
Though I suppose using the stepped erosion method I speak of could very well be created the same way as a flipbook, but all the sprites are stacked in the alpha channel.

Do you hope to recreate this FX? I might have a go at it when I have the time, would be interesting to compare results and techniques :slight_smile:


#3

Hey there!

I think that this technique used in Overwatch may not actually be flipbooks :slight_smile:

check out this thechnique, pretty smooth, looks good and no flipbooks just fancy shaders!

http://www.alkemi-games.com/a-game-of-tricks-iii-particles-fun-part1/


#4

That’s awesome, pretty much what I was trying to get at but shows that it works! Thanks for sharing the link.


#5

Thanks I’m aware of that technique, but haven’t fully tried it (only using a alpha gradient to fade out fx in material). I see that in Overwatch too, the ring that follows the distortion in Pharah’s rocket appears to be like that. You can even add flow maps to make that even more dynamic if needed.

But really thats not what interests me as much as hand drawn style. I’m not looking to reproduce this, no. More study it as the best mix of hand drawn with more traditional game fx for a look all its own. I love stylized cg, and Overwatch is such a great example of that.

Fortnight is another very neat stylized FX game, for example. Something to study and tuck away in your head.


#6

Hmm, I apologize then if this is hijacking the thread but,
I did a quick recreation of the effect using the frame by frames you provided.
https://youtu.be/qmiuhK5wyBo

Its far from perfect but demonstrates that the method works.

Process
The Sprite:
Key to the effect is the 2D sprite.
I didn’t worry about multiple textures at this stage but it certainly could make the effect better.

To create this sprite I cut out the explosion above, stacked them on top of each other and incrementally lowered their alpha and turned them all completely white.
I baked this down onto a flat black sheet.

This kinda worked but needed some touch ups. I added gradient from the bottom left to the top right.
I blurred the entire effect with a Gaussian blur and some hand painted blurring along some of the edges.

The Shader
The Shader is pretty simple, it just alphas out the texture based on the formula found here Alkemi games link above
new_luminosity = saturate ( ( old_luminosity – B ) * S ) ;

The particle system
I used a particle system to handle the control of the alpha and RGB, this with a slight upwards velocity worked pretty well to give it another layer of motion.

As a proof of concept I think it works great, I hope to explore using an actually deliberate texture in the future.


#7

Hi everyone,
For Phara’s rocket explosion, we did use a flipbook. That flipbook was made by one of our concept artists, he is also an awesome animator. He painted the flipbook in photoshop. The flipbook ended up getting converted to grayscale and a gradient map is used for the color.

The ring is just a static texture that we erode the alpha on. We use that technique quite a bit as well.

That was one of the really early effects in the project and it really helped to establish the FX style for Overwatch.
Its really awesome to see the interest in Overwatch fx :slight_smile:

nick


#8

No doubt, Overwatch FX are simply mind blowing in the cartoon FX category, I feel like that these are at the next level. Would love to recreate one of those soon. @neberle is flipbook technique has been used majorly in the entire fx of the game? Can you shed some more light on it.


#9

We really like doing animated flipbooks when possible because they really do give a unique stylized look to Overwatch, however they have some downsides…

  • lots of texture memory
  • take quite a bit of time to create.
  • you don’t get variation within the flipbook so fx that are used very often like muzzle flashes can look repetitive.

So there is a balance we have to strike. We want to make sure the flipbook is going to give us good bang for the buck.
One of the best reasons to use a flipbook for us is to help give a unique look and feel to a hero.

We also use lots of flowmaps, alpha erosion, and uv distortion to help with the animated feel of the fx.

nick


#10

Hey Gaxx, thanks for sharing this very interesting link!
I’m trying to recreate the formula in UE4 but having no success so far :frowning: Could someone help me with that?

Thanks and best regards,
Daniel