The Great UE4 Pixel Art Experiment! #3 - Testing custom tileset material.

Today I looked into creating a custom material for the tilemap. This was to see if I will be able to create custom effects and such on the 2d graphics themselves, for now I'm going to create a simple emissive lighting effect that I want masked to certain tiles.

First, I made some new tile additions: These sections will light up with my emissive effect, which will have a slight flicker to it:

Before I started investigating the material I had a go at trying to import the map from Tiled Editor. For some reason though when I go to import the JSON file all it would generate is the Tilemap but there would be no tiles places and no texture imported, I couldn't find anything online about this issue so I think I will try to do that again another time. I created a new tileset and map manually using Paper2D in Unreal Engine.

After looking around in the tilemap editor I realized that the tilemap only has only material that can be applied. This could be problematic, I was hoping that different materials could be applied per layer so objects with fancy effects could be separated from the simpler background materials, this currently means that the same material has to be applied to everything which isn't very efficient. I'll have to look for a work-around.

By default the tilemap editor provides you with a material set up specially for 2d assets. However to get the effect I want I need to create my own:

In the material I import my two tileset textures, my base colour (albedo) texture and a separate texture for the emissive channel.

Note: I would have put the emissive channel into the alpha channel of the tilemap but it is already being used for transparency.

Tilemap textures.

Custom Tileset Mat in it's entirety.

Most of the material is fairly simple to put together. I have the material set to be masked lit, but I have added an emissive boost using the base texture to make sure that the map doesn't go completely black whilst in shadow.

Using the Emissive mask I created, I apply a pixelated noise animation to just those parts:

Pixelated Noise Animation Material Graph section.

If I just plugged in the noise to my mask then I would end up with a very high res noise compared the the look of the tiles I am using, I need to apply a filter that pixelates the noise to make it fit with the look I'm going for. There is actually a mat function already in the engine that allows you to do this: Search for the MosaicUvs Mat Function in the Engine and just drag and drop it into your mat graph. Then link up the texture coordinates (I put in a controller for tiling.)

In the tiles input of the MosaicUVs you need to put the amount of pixels you want to divide your noise into. So I put in a parameter for pixelation size and I set it to be the width of my tileset texture. (It's 256, the image is wrong.)

After this you can simply plug in your pixelated UVs into a panner and then your texture, allowing you to have a moving pixelated texture that follows the look of your pixel art.

Add some parameters for colour and intensity and you should have something like this:

Final effect in motion, the emissive effect has the noise pan over it to alter it's intensity, giving the appearance of a flickering light.

Other bits:
I was looking to see if there was a node that would just automatically get the texture width inside the material but there doesn't appear to be anything that does that as far as I can find, would be a really useful function to have.

-James