Hey everyone

This is a question relating to the league of legends animated login screens (though you do not need to be familiar with the game to answer the question ).

Every time Riot releases a new champ I look forwards to the login screen just as much as the champion itself. This is a playlist on YouTube that contains some, if not all, of the login screens:

I would like to learn how to apply the same animation effects to my own art. Any one know how I could replicate these sort of effects? How can I take a simple painting and apply some movement and depth?

Thanks

I don't know how did they do it, but I would do it this way:

.. Okay, so you paint your image in different layers. And if your character has a weapon that covers his body, you have to paint the body under the weapon anyways, because when it will be moving - you will see the body (or blank space if you ignore this).

.. You export you image to a software which allows a still image to be animated. There are few options available. For example, you can use Adobe Flash and rig (make a skeleton) your character and then animate it. Another option - animate the character in compositing software. After Effects is good pick. I believe there was some kind of rigging functions too, but I am not sure. And third option: you pick your favourite 3d application, make orthographic camera, rig the character as you would rig any 3d character. So you rig your 2d planes with the character image as texture, and animate it.

.. Apply effects like flying leaves or dust. You can do particle effects in compositing software (After Effects again) or you can do them in you favourite 3d application. Though you will have to throw those particles into compositing software anyways.

Wow, that looks like 3D to me. Was some of it actually done in 2D? It would be incredibly complicated to make an all-2D animation that looked like that. I personally could not do it, no matter how much time I was given.

Wow, that looks like 3D to me. Was some of it actually done in 2D? It would be incredibly complicated to make an all-2D animation that looked like that. I personally could not do it, no matter how much time I was given.

Yeah, I'm not sure. I think it's a blend of both, looks like they might have rendered the base animation then taken those frames and put on a 2D layer of detail and effects.

Wow, that looks like 3D to me. Was some of it actually done in 2D? It would be incredibly complicated to make an all-2D animation that looked like that. I personally could not do it, no matter how much time I was given.

Yeah, I'm not sure. I think it's a blend of both, looks like they might have rendered the base animation then taken those frames and put on a 2D layer of detail and effects.

This is what I'm thinking as well. Some of the animation seems a little.... I dunno, gyrating and just sort of weird, like everything is trying to dry-hump the air in a universe where the laws of perspective have been themselves dry-humped into submission, if you'll pardon the vulgar expression. Too weird to be fully 3D animated. I bet they render it in pieces and use a custom tool to animate and/or distort some of the pieces. The overall effect (especially sped up as the linked videos seem to be) is rather bizarre I must say. Things just don't seem to move all that realistically. I think that without a custom tool, it might be difficult to hammer down an efficient workflow for this.

Agreed, it looks like 2D animation of pre-rendered 3D graphics.

You need to work with a lot of animated layers to get that, including 2D skeletal animation (if you study Flash animation you'll learn all this). The special effects can be done in After Effects as mentioned.

I do not think they look weird. Very impressive work to say the least.

EDIT: After seeing the rest of them I changed my mind; I wouldn't be surprised if most of the material to be animated through 2D rigging was painted by hand instead of modelled and rendered. There's just too much detail in some characters - it's much cheaper to paint all the separable layers by hand (which is not hard at all if you know what you're doing), and animate them with 2d rigs according to how the composition was planned.

A simpler 3D model of the character (like the ingame one) would serve to render the character in pose to use as a guide for correct perspective and how to break on layers, then the artist would paint the final version by hand based on this reference.

Of special note is the shading of some elements. Whoever did this really knew their After Effects.

Notice the leg of the creature on the right side of the screen, it has a reflection effect.

[media]http://www.youtube.com/watch?list=PL3B1F171F3009BE74&feature=player_detailpage&v=OTBfu9-nhuY[/media]

They are drawn, see this for example:

and the matching login screen:

Don't know how it is animated though

Hello. I found some more information on this subject.

These login screens are produced as Flash SWF files. You can find them in the game's folder.

You can even see one in your browser, such as this: http://dl.garenanow.com/lol/loltw/web/pre_index/120920/images/syndra.swf

(Alternative link: http://www.mediafire.com/?7dyn17k1d8dwtak)

Now, seeing that the graphics are painted by hand based on the post above, you can have each part of the character in layers (the hands, the fur and hair etc.).

Considering you need 2D bone deformation to be able to animate these layers, they couldn't have used Adobe Flash to produce these animations - Flash does not support deforming bitmap\raster graphics with bones, only vector graphics.

However, there are major software packages that do support this:

- Anime Studio

- Toon Boom

- After Effects.

Considering that these login screens have advanced particle effects, morphing, shading and a general sophisticated look (which is not easily achievable with Toon Boom or Anime Studio), I believe that these screens have been produced with After Effects.

- It has bitmap deformation with bones under the "Puppet Tool".

- It can also export the final movie composite to SWF.

Software like this could help to easily animate the 2D elements you paint. Certain post processing effects are used as well as particle systems to create the real polish but otherwise it's the grunt work of 2D animation. The 3D look is achieved with the overlapping layers moving with a slight offset. Like the weapon in the foreground of the example you posted. Its broken into 3 maybe even 4 parts in front of the character's hand. Using dark areas to separate the areas and offsetting the movement by a pixel or two. The blink is huge, past login characters haven't had it and it looks terrible. The more layers the more complicated the workflow as you attempt to give the character a sense of weight and natural movement but the better it will look. Subtle movements will look better since your movement is limited to hinge and chain movement. But exploring a variety of transform, scaling, skew and perspective alterations can allow for a bit more flexibility. Photoshop enables a transformation called warp that could enable a lot of the bending you see in the video. I look forward to see what you come up with.

The game that kind of popularized this style of animation in my opinion is Homeworld and Homeworld II cut scenes.