Wallpaper Engine Wiki

This tutorial will show you how to add an eye blink animation to a character. Make sure you checked out the basic guides for the Editor and Scene Wallpaper!


  • Open the Editor.
  • Alyx close up.jpg
    Get an image with a character to animate, like this one. It must be suitable for this effect, meaning that you need to have some kind of skin/eyelids visible for animation!

Import the Image

Tutorial image import drag.png

Drag and drop the image into the editor.

Editor scene initial import options.png

The project name and scheme color will be automatically set, you can change them if you like. Press OK to import the image and create the wallpaper.

Tutorial image in editor.png

A new wallpaper will be created and the image should become visible.

Add Shake Effect

Tutorial add effect.png

Select the image on the left and then click Add in the effects menu to add a new effect.

Tutorial fur add shake.png

Select Image Effect Shake and click OK.

Limit Shake to Eyelids

First the eyelid animation needs to be limited to the eyelids. This will avoid distortion on the eyes or surrounding skin later.

Alyx blink paint opacity.png

Click on Paint near the opacity mask to start masking the eyelid area.

Alyx blink paint skin.png

Clear the entire area with black (value 0). Then paint the eyelids with white (value 255). Click on Show mask at the bottom to see exactly where you are currently painting the mask.

💡 Pro tip: Click on Show mask to make the mask visible. It is crucial here because there is no movement yet.

Paint Eyelid Animation

Alyx blink distort options.png

Set the direction to left and change the bounds to this temporarily: -1 to 0. These bounds will make the animation always be in full effect at all times, making it easier to paint the eyelid movement and smooth out distortions!

Alyx blink distort paint.png

Start painting the movement for the eyelids by clicking Paint next to the Shake Direction. (in previous versions of Wallpaper Engine, this was named Flow map) Click Show mask again to make painting an even surface easier.

Alyx blink paint distort 1.png

Move the eyelids down by painting downward strokes. Make sure everything is evenly distributed at this step and that you reach the very bottom of the eyes.

Alyx blink paint distort 2.png

Now adjust the Strength option so that the eyelids reach exactly at the bottom of the eye! In this case the strength has to be increased from the default 0.1 to about 0.2.

Alyx blink paint distort 3.png

Continue painting, set the value to 0 and reduce the Opacity to about a low 5. Try to achieve smooth gradients over the eyelids, so that the top completely fades out while the bottom is still in full effect. Check the picture on the right, you can see that the bottom of the eyes is still fully red, while it fades out completely as you move up over the eyelids!

💡 Pro tip: Adjust the strength back and forth to see where the eyelids are still distorting in an uneven manner, this makes it much easier to reach a good result later. You can always come back to this step if you are not happy with the final result.

Alyx blink test.gif

If you think you're done, manually move the strength slider back and forth to check the animation. If it looks good, continue below to set up the parameters for automatic blinking. If it still needs tweaking, go back one step to adjust the distortion.

Finalize Eye Blink Timing

Alyx blink final parameters.png

To achieve a short blink, set the Bounds to 0.99 to 0.997 and keep the Strength at the maximum value you used in the steps before, in this case, about 0.2. The strength is completely dependent on your picture.


Alyx blink final.gif