The Great UE4 Pixel Art Project! #5 - Pixel Perfection!

I was cleaning up stuff yesterday and then I got distracted. I was tinkering around with a lightshaft material and I made some simple dust particles.

Lightshaft

The lightshaft I was stuck on for ages, as I was trying to do it all without using any textures, because I hate myself...

The reason I was stuck though was because I was trying to scale a linear gradient so I can control the width of the lightshaft. The scaling part is easy, but I had issues trying to work out what number to offset the UVs by in order to center the gradient.

Scaling Material Script

The lightshaft is actually on a material billboard, so it always faces the camera, I also used a custom rotator node in order to control the direction of the lightshafts. All of this can be altered in the blueprint, which contains the billboard and some config options for the material.

When I come back to this I may add a function to the lightshaft blueprint that reads the angle of the directional light in the scene and uses that to drive the lightshaft direction. This would be similar to the script in the default BP_Sky_Sphere included in the engine.

BP_LightShaft construction script to set beam width and overall size.

Pixel Perfection!

This is something I have wanted to figure out how to do for a while: to get 1:1 pixel art inside Unreal Engine, with the characters and other stuff working correctly and to scale.

The first thing I was looking at was how to change the size of the standalone play window. I wanted something small, like old console small. I googled common 16:9 resolutions and I originally went with 640x360 but after I initially got everything pixel perfect I doubled it to 1280x720. This can be done in the engine settings if you search for 'Window Size'

Note: I believe you have to do something with the .ini files to get this to work in a packaged game. I'll cover that stuff next time.

Engine Settings for changing the window size in standalone.

According to one of the sources I looked at, it tells me to make sure the default paper2d scaling in the engine settings is set to 1.0. For my project I had the default value set to 0.16. What this means is that for every 16 pixels, that will equate to 100 unreal units (Or 1 meter.) At least I think that is what it does, my tile size in my tilesets are 16x16 so that works out fine.

The next step was to go into my player character and change the camera to orthographic and to change the orthographic width. I was looking at the stuff on google as reference but I couldn't really understand it. I thought I was supposed to set it to be a multiple of the screen size but that wouldn't work, I set it to 640, then 1280, then to 2560, then I doubled it to 5120. I compared the size to one of images out of tiled to see where I would need to adjust it and figured out I was just under double the size of the tileset.

From this point on I eyeballed the rest. I kept reducing the value until I realized at 4000 it was pixel perfect. I imagine this has something to do with the scale of paper2d in the world.

I then made the screen resolution larger, when I did this the tiles doubled in size, so I doubled the orphographic width to 8000.

Later I will create something that automatically scales the orpho width on the player camera according to the window size, but for now... PIXEL PERFECTION! It might not look much like it but this screen below is running inside Unreal Engine. :D

(There will be a video/gif or whatever but I can't get the quality as pixel perfect as the game at the moment.) ;)

Shot of FX running in engine at the proper size.

-James

Sources:

1. https://answers.unrealengine.com/questions/262218/how-to-obtain-pixel-perfect-with-any-resolution.html
2. https://docs.unrealengine.com/latest/INT/Engine/UI/LevelEditor/InEditorTesting/Settings/
3. https://pacoup.com/2011/06/12/list-of-true-169-resolutions/