Twilight Princess Eyes Breakdown

I’ve been playing through the Zelda games again and I just couldn’t get over how expressive the eyes are in Windwaker and Twilight Princess (I haven’t played Skyward Sword yet, but I’m sure the eyes are done in the same way).

There will be lots of GIF’s in this post. Here are some of Toon Link, Link, and Midna

windwaker_link_lowres

link_lowres

midna_loewres

The eyes move around freely, and the blinking feels fleshy with both the lower and upper lid animating. The slight eye jitters in Twilight Princess also adds more realism. The eyelids are sprite animations while the eyeball itself is a texture that slides around in UV space. There are two layers of geometry that make up the eye. The top layer is the eyelid and the bottom layer is the iris.

I wanted to really understand how the eyes were done so I ripped the models and dumped the textures from Twilight Princess.
I ran Dolphin in DirectX 9 and then used 3D Ripper DX to extract the 3D model of Link from the start screen of Twilight Princess. I exported the model as OBJ from 3D Ripper DX and imported it into Maya.

I selected the geometry around the eye moved it and discovered there were two layers of geometry

eye_selected

The top layer was flush with the rest of the face and the bottom layer was just underneath the top layer. Normally these two pieces of geometry are right on top of one another but I moved the top layer so I could see the bottom layer.
I selected the faces and took a look at their UV’s

uv_top

The UV’s of the bottom layer were scaled up larger than the UV’s of the top layer. Probably to increase the pixel resolution of the iris.
I used Dolphin’s texture dump feature to extract the textures. The textures are pretty low resolution since I grabbed them from the start screen, but we can still learn how it works. Most of the eye images have an alpha channel, which I colored green so you can see it.
Here is the image sequence that makes up Link’s eye blink.

eye_sprites2

The iris is behind the eyelids and is masked off by the eyelid’s alpha channel.

eye_iris

When they are combined they look sort of like this

eye_combined2

The eyes in Twilight princess are much fleshier because of the third frame in this sequence.

eye_explained2

When you blink, your bottom lid moves up just a little bit. Wind Waker didn’t have any movement on the bottom lid, which might have been intentional since it has a cartoony look to it.

Here is a GIF of the blink using just those 4 images so you can see it. The sequence of playback is 1, 2, 3, 4, 3, 1.

blink

If we slide the UV’s of the bottom layer we can animate the iris to make it look in different directions without baking sprite animations for each position. So you get something like this:

eye_explained_directions2

You can combine the eyelid sprites with the iris position to get more natural eye behavior. Like this:

eye_explained_directions_correct2

I put together a simple scene in Unity and created two shaders in Strumpy Shader Editor to mimic the eyes in Twilight Princess.

eyelid_shader

This is the Eyelid shader. You would have to code a script to swap out the textures to create the blinking.

eye_shader

This is the Iris shader. Adjusting the sliders for the X and Y offsets slides the UV’s position around. One thing to note is that you need to set the texture to clamped so it doesn’t repeat if you offset the UV’s all the way.

You could control where the eye is looking either through code or using Unity’s animation system. You could even make an IK looking rig. I’m pretty sure that’s what they did for Wind Waker. If you watch Link’s eyes he will look at things that are interesting and give you hints. It would be nice to have a script automatically switch the eyelid sprites based on where you are looking. In real life your upper eyelid moves down when you look down, and moves up when you look up, try it out 🙂

eye_unity2

Link Eye Shader Unity Package

Here is my Unity test scene, which includes the shaders I built. You will need to download the Strumpy Shader Editor if you want to edit the shaders, but it’s free on the asset store.

I hope this was helpful. I was geeking out about the eyes for the past week and needed to get this out of my system 🙂

-Ben

 



6 responses to “Twilight Princess Eyes Breakdown”

  1. Farhan says:

    i’m SO GLAD i came across this article. I’m doing a similar style of “flat eye” for a game i’m making in unity, and this breakdown is just…amazing. You even made shaders for it in unity, perfect!!!! Fantastic job.

  2. coute says:

    Same here, this post is most helpful. I’m new to Unity and I was wondering how 2D eye movements work.

    Thanks a lot!

  3. marco says:

    this shader not works Unity 5

  4. […] shadows, so that’s good 🙂 I found a neat article by a gentleman named Ben Jones who probed how the Zelda series created expressive eyes, and I took a shot at implementing it in Unity. I still need to work out some of the math (note the […]

  5. Alon says:

    Now the challenge of converting real world coordinates to eye offsets.

Leave a Reply

Your email address will not be published. Required fields are marked *