Side Note - Smooth Pixel Setup for Godot4

Before setting up my Godot editor for pixel art, I had to decide on a screen size. I watched this excellent video from Adam C Younis, a fantastic gamedev artist with a very pedagogic approach.

I settled in my case on a screen size of 480x270, with a default zoom set to 4, to nicely fit with the standard 1920x1080 resolution. The travel screen, of which I discussed last time, will be a bit bigger, at 640x320, to always have the feeling that the world is bigger than you are.

So, Godot settings. First, I set the Display Window Viewport Width and Heigth to 480x270, and in Advanced Settings, the Window Width and Height Override to 1920x1080, to have a scale of 1. Stretch mode should be set to canvas_items, the rest is the default Godot

An equivalent setup to the width and height override is to set the scale to 4, and put the width and height directly to 1920x1080. However, doing so makes everything very small in the editor, and it’s harder to see what the scene will look like inside the editor.

The general consensus on having clear images in Godot 4, is to change the default Rendering Texture in Project Settings rendering/textures/canvas_textures/default_texture_filter (you need to activate Advanced Settings), to Nearest instead of Linear.

The top, center book has it’s filtering manually changed to Linear, which renders badly in the editor.

Setting the default filtering to Nearest fixes the look in the editor (bottom left). However when doing this, the sprite jitters while in motion, or when zooming, when playing the scene. This is not a good.

The Godot community came up with a shader to make a smooth motion: see the explanation in the video. It works with having linear filtering, and applying the custom shader. The additional issue is that this shader needs to be applied to every single texture added to the game.

It seems then complicated to have both something good looking in the editor and in the scene playback. To fix this, I set up the default filtering to Nearest, to have a nice editor experience, and created a base class, SmoothSprite2D, simply inheriting from Sprite2D:

class_name SmoothSprite2D extends Sprite2D

var smooth_material = load("res://shaders/SmoothPixel.tres")

func _ready() -> void:
	texture_filter = CanvasItem.TEXTURE_FILTER_LINEAR
	material = smooth_material

Now, to add a new resource, it just needs to be of the type SmoothSprite2D to work nicely in both places. Thanks to Godot 4, simply declaring the class_name is enough to have it available as a custom node in the node selection.

This has the only downside of not being able to simply drag-and-drop the png on the 2D scene, because this sets the node type to Sprite2D. It can be changed manually afterwards, but it’s still something to remember. I could not find a way to override this default type.

With this setup, everything is smooth in editor, and changed at runtime to be smooth when the camera is moving. I hope that this write-up clarifies things for other pixel-art gamedevs wanting to benefit from GDScript improvements in Godot 4 and leaving the well-charted coasts of Godot 3 for this. Have fun, and keep creating!