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.
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 →
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 inspiration from this tutorial comes from Yung Jake’s emoji portraits, cleverly crafter using a website called Emoji.ink.
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:
Calculating the average colour of a block of pixels,
Finding the closely matching emoji
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.
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:
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.
// Loops over all the 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.
// Average colour
// All empty
// Final colour
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.