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

Learning Shaders

Making games is hard. Engines like Unity and Unreal have massively lowered the barrier to entry into this industry. And now that making games is easier than it has ever been before, developers are facing a new crisis. More and more people are joining this industry every day, making it harder to succeed in such an overcrowded market.

Many games that were popular and successful five years ago, would go mostly unnoticed today. More skills are needed to make a game stand out from its competitors, and this is why I believe that learning shaders is so important.

Shaders are the paintbrushes developers use to render graphics. The look and aesthetic of many iconic games, such as Journey, Antichamber and No Man’s Sky, was made possible only by the clever use of shaders.

Whether you are a new developer wanting to make games, or a veteran of the industry, learning how to write shaders can make the difference. This unusual tutorial pays homage to some of the best online content creators that you should know if you want to start your journey into shader coding. Continue reading

Make Your Own Emoji Portrait

This form allows to  create your very own emoji portrait from any picture. Use the sliders to customise the size and angle of the emojis. When you’re happy, right click on the image to save it.

The rest of this article explains how to replicate this effect using JavaScript.

The inspiration from this tutorial comes from Yung Jake’s emoji portraits, cleverly crafter using a website called Emoji.ink.

tumblr_ni6mutZHom1qcfy5po5_1280-1024x768

The technique used in this tutorial is based on a more automatic approach. Emojifying a picture means replacing some of its pixels with emojis that have a similar colour. The steps requires are:

  1. Calculating the average colour of a block of pixels,
  2. Finding the closely matching emoji
  3. Drawing the selected emoji on top of the block

This is the bare minimum requires to create an emoji mosaic. The first step is achieved by resizing the original image to a smaller size. This scaling operation automatically merges colours together, so that one pixel of the thumbnail will correspond to one emoji. It’s fast and reliable, but creates very regular mosaics. To compensate for this, emojis are slightly rotated and moved around. You can see the difference this makes in the comparison box below.

The most expensive part of this technique is checking each pixels against every emoji. To speed up the emojification process, the average colour of each emoji is calculated and stored into a JSON file for fast retrieving.

The next pages of this tutorial will show how this has been done in JavaScript. This very technique can also be used to create emoji animations.

Star Wars: The Force Awakens

Reading the pixels of an image is possible using getImageData. This method is available only on a canvas, so it is necessary to draw the emoji map onto a canvas. The code below shows how this technique works.

An image is loaded asynchronously; its load handler creates a hidden canvas, draws the image onto it and gets its data. The structure returned by getImagedata is an array which contains, for each pixel, its R, G, B and A colour components. Pixels can be retrieved using their position within the image:

Extracting emojis

The following code loops over all the emojis within the image file and extract them, one by one. As the name suggests, the function averageColour is used to find the average colour of the current emoji. If null, it means the sampled rectangle was empty and it is not added to the list of emojis.

Now that the pixels are available, we need to calculate their average colour. The following code calculates the average colour of an image, by independently averaging the R, G and B components of each pixel. Fully transparent pixels are discarded.

The result of averageColour is represented in the HSL colour space. This function by Garry Tan has been used for the conversion, with some minor changes. Both RGB and HSL components are in the [0-255] range.

The distance between two colours is calculated using the euclidean distance between their HSL components.

Comparing colours in the HSL space clusters them in a more natural way, as described in The Incredibly Challenging Task of Sorting Colours.

To get better results, the original image is scaled down. This automatically smooths pixels together.

Each pixel in the thumbnail version of the original image will be replace with the emoji with the closest colour.

The closest emoji is found by looping over the previously generated array.