Sprite Doodle Shader Effect

This online course will teach you how to recreate a popular sprite doodle effect using Shaders in Unity. If this is an aesthetic that you want in your game, this tutorial will show you how to achieve it without the need to draw dozens of different images.

Such a style has become increasingly popular over the past few years, with many games such as GoNNER and Baba is You heavily relying on it.

This tutorial covers everything you need to know, from teaching the basics of shader coding to the maths used. At the end, you will also find a link to download the complete Unity package.

This series is also strongly inspired by the success of Doodle Studio 95!.

Continue reading →

Parallax Shaders & Depth Maps

In the previous part of this series, Inside Facebook 3D Photos, we have explained how modern mobile phones are able to infer depth from pictures. Such a piece of information is stored in a depth map, which is used for a variety of effects. From blurring the background to three-dimensional reconstruction, this type of technology will become more and more present in our daily lives.

This is a two-part series. You can read all the posts here:

Part 1. Inside Facebook 3D Photos
Part 2. Parallax Shaders & Depth Maps

A link to the complete Unity package is available at the end of the tutorial.

Continue reading →

Inside Facebook 3D Photos: Parallax Shaders

In the past few months, Facebook has been ~~plagued~~ filled with 3D photos. If you have not had the chance to see one, 3D photos are images inside a post which gently change perspective as you scroll the page, or as you move your mouse over them.

A few months prior to their introduction, Facebook had been testing a similar feature with 3D models. While it is easy to understand how Facebook can render 3D models and rotates them according to the mouse position, the same might not be as intuitive for 3D photos.

The techniques that Facebook is using to create the illusion of three-dimensionality on two-dimensional pictures is sometimes known as height map displacement, and it relies on an optical phenomenon called parallax.

This is a two-part series. You can read all the posts here:

Part 1. Inside Facebook 3D Photos
Part 2. Parallax Shaders & Depth Maps

A link to the complete Unity package is available at the end of the tutorial.

Continue reading →

Shader Showcase Saturday #11: Return of the Obra Dinn

Most indie developers might know Lucas Pope as the developers of the critically acclaimed Papers, Please. Thanks to its simple, yet thoughtful mechanics, Papers, Please helped to shape an entirely new genre of video games. And it even inspired a short film with the same name.

Despite its success, one of the most recurring criticisms the game has faced is related to the apparent simplicity of its execution. With Return of the Obra Dinn, Lucas Pope clears any doubt with a game that, by itself, is nothing less than an achievement in technical excellence.

Continue reading →

Shader Showcase Saturday #10: Fortnite Procedural Animations

It is no mystery that Fortnite has now become one of the most successful computer games of all time. While many see it as a case study for excellence in marketing and game design, the game itself features some very interesting shader effects.

From a Technical Artist perspective, the most striking effect featured in Fortnite is the self-building effect. When an object is being constructed, its individual pieces appear one by one out of thin air, and fly into position. The same effect is somehow played, in reverse, when an object is damaged, by showing those very pieces flying away and disappearing (above).

Continue reading →

Shader Showcase Saturday #7: Billboard Impostors

Some of the readers might have heard of a game called Duke Nukem 3D. Released in 1996, it was one of the first 3D games I had the chance to play. An interesting feature of that game is that most of the interactive elements (including the enemies) were not actually 3D. They were 2D sprites rendered on quads which are always facing the camera (below).

This technique is called billboarding, and early 3D games were using it extensively. Even today it is still used for some background details, such as trees in a forest far away. For instance, one of them is Massive Vegetation, which uses billboarding to render grass blades in a very realistic way.

Continue reading →

Inverse Kinematics in 2D – Part 2

You can read the rest of this online course here:

Part 1. Inverse Kinematics in 2D: The Mathematics
Part 2. Inverse Kinematics in 2D: The Code

A follow-up that focuses on 3D is also available:

Part 3. Inverse Kinematics in 3D

Continue reading →

Inverse Kinematics in 2D – Part 1

If you have been following this blog for a while, you might have noticed some recurring themes. Inverse Kinematics is definitely one them, and I have dedicated an entire series on how to apply it to robotic arms and tentacles. If you have not read them, do not fear: this new series will be self-contained, as it reviews the problem of Inverse Kinematics from a new perspective.