Shannon McSheehan - LoL FX + Knowledge Share

We have a global pass system that we can set by each group inside an emitter.

Batching limitations aren’t something I can speak all that in depth about for worry of miss information in regards to how League as a whole renders all of it’s many assets. I do know that it wasn’t till about a month ago we ran into a batch load issue, as we generally keep things very cheap. Older content of course doesn’t always follow that same rule, but we’re always working to make it better haha.

2 Likes

Aha noted :smiley: No problem!

I meant for these, it looks like you’re panning your tiling trail texture along your UV’s but to achieve the nice fade at the right hand side of the trail it (and a little bit at the front) you’d need transparency on the vertex colours at these points.

https://realtimevfx.com/uploads/default/original/2X/7/7e218899277918296bddb5b50b3ee543dc613e67.gif

I started trying to work out how I’d achieve something like that on my trail effects, but I’ve since figured out that this is precisely how Unity’s trail effect works - I didn’t realise it gave me access to colours/transparency at set point along the trail :smiley:

I’m sure this is done differently in different engines but I’m guessing this is possible, and generally how it’s achieved across the board?

Thanks again for the great tut! I coincidentally watched the LoL art panel last night and realised I recognised your name, fun moment :smiley:

2 Likes

The mesh for the trail is tapered from left to right, which is how it pinches down. The blue (and the one above it) just have some darker values in the center of the texture. The whole thing is multiplied by a non-panning gradient, slightly soft at far left, built up quickly to white, then faded smoother to black from center to right. The bottom fire has a separate noise texture panning across it from left to right as well at a different speed to give the holes in the texture for extra randomization. It’s possible to use vertex colors/alpha on the mesh, but if you are using ribbons/trails and aren’t able to control the vert colors, you just multiply a gradient with your texture instead.

4 Likes

LOL I WAS SO NERVOUS I’m pretty sure I was breathing into the mic too hahaha hope it was useful! ;D

Yes, key framing opacity and hue are very handy basic functions of trails, glad you found those perimeters!

3 Likes

Haha don’t worry, you got away with it :smiley: Yeah definitely, such an inspiring panel as a whole.

Yeah, my friend at work pointed it out and I felt a little dumb for overthinking it. Ah well, s’all learning :smiley:

Ah yes, I forgot about tapering, definitely adds to the effect.

And of course! Such a simple solution if you don’t have access to trail tools or vertex colours. Thanks a lot for the help Travis! :slight_smile:

(Edit: Sorry for double post for each reply, maybe should have rolled that into one!)

1 Like

Thanks you so much! I will try it
And i Just see Championship Kalista Skin! Can you make detail explanation How to create the animation of the trail arrow slowly disapearring

5 Likes

Sure thing! Though as to not misrepresent the original author of the work @Troyzilla, I’ll pick something that I’ve worked on that uses the same technique. :slight_smile:

4 Likes

thanks you very much! I very expect :heart_eyes:

1 Like

It looks like a single texture that follows the spear. When the spear hits, the spear mesh itself disappears, and the trail texture slows its velocity, scales larger on its X axis, and the color tint shifts from teal to darker blue/purple. Hard to tell, but there may be a secondary texture panning over the main trail texture.

Impact has directional velocity ring textures and then multi-colored bits to represent her spear breaking on hit.

5 Likes

Hey magnificent work, i’m trying to get into this world that FX is, and i wanted to know which programs you use, in overall, and some guidance for a newbie if possible, like where to start. The more i read about the subject, the more i see myself lost, there’s a lot of this world for a beginner. If i shouldn’t ask it in here, i’m sorry for that, i’m new in this forum too.

That’s totally alright, questions are always encouraged :slight_smile:
The particle tools that Riot uses are proprietary, though that just means it has a unique GUI for typical FX functions.
I use Maya and Photoshop a ton for all rigging/modeling/uv/painting/texturing needs :slight_smile:
That’s it for FX related things

edit: I’ll be slowly making tutorials in my “free time” at work in hopes of making the transition into stylized FX a little easier. Hopefully those will address your guidance questions. :slight_smile: If there is anything in particular you’d like me to go over a little sooner feel free to DM me!

6 Likes

What DM mean? In Maya you use FumeFX? Still learning everything. Gonna start learning Maya and Unreal Engine 4

DM = Direct Message

No FX are simulated in League, it’s all hand painted and animated (except for Nocturn’s tail, but we don’t talk about that >.> ). Maya is typically for making meshes and animating.

There are awesome tutorials for Unreal on youtube, and Maya comes with it’s own getting started tutorial popup when you launch it. Good luck, and have fun with it :smiley: There is a lot to learn even to get started, but don’t be discouraged! If you stick with it you’ll be creating cool stuff in no time.

10 Likes

Looking forward to those tutorials.

PS: Would be awesome if you start from way beginning :smiley:

This is some real awesome stuff down here. Wonderful work @ShannonBerke

1 Like

I want to apologize for the delay on getting out more tutorials. GDC has really taken a lot of my time with the mixer and prep. I am still working on them, just much slower than anticipated. The tentative list of tutorials people have shown interest in learning:

  • Overall workflow
  • Shield FX (How to make Ryze’s sheild)
  • Projectile (How to make Kog’Maw W)
  • Impact FX (How to make Sion’s W explosion)
  • Kalista Q trail (which may get covered with the projectile tutorial)
  • Weapon trail (Taric passive Basic Attack)

I’m finding these are very geared towards how something was made, but I’m really looking for opportunities to delve into WHY something was made. Again, sorry for the slowness <: ) After GDC I’ll have a bit more breathing room.

25 Likes

As a beginner this post just blew my mind, and I can’t wait to incorporate this awesome tutorial in to my learning. Thanks so much!

1 Like

It made sense to me to keep all my stuff in one post, but let me know if you think I should move it all somewhere else under resources. :slight_smile:


Hey buddies! Here is one of the things I promised, again sorry that I’m pretty slow <: )

This is also in no way meant to be prescriptive, but hopefully helpful info to get you started. It’s not meant to be too in depth as I wanted it to be more general art focused, that way it’s not limited to one engine or method. Hopefully it’s useful :octopus:

82 Likes

I made a thing! I noticed some of the shields in league are billboards so I wanted to make a shield with some action, but wasn’t too resource intensive :smiley: The shader has an outer rim glow with a panning smoke mask. The core is just a simple glow, and the panning bar is just a bar with the mask of the core! It was fun to make a cool looking shield with some different parameters :smiley:

*its also set to render on top of the character so it gives the illusion that its 3D

18 Likes