Preserving Pixel Art Fidelity When Scaling Resolutions
The Core Problem of Scaling Pixel Art
Pixel art is a unique digital art form that relies on deliberate color choice and pixel placement to convey shapes, textures, and details. When scaling pixel art to higher resolutions, special care must be taken to preserve these hand-placed pixels as much as possible. Standard scaling algorithms used for regular images introduce interpolation and blending between pixels, degrading pixel perfection and causing undesirable artifacts.
Choosing the correct scaling algorithm is crucial. The ideal algorithm will sharp preserve pixel boundaries and hard edges as they are duplicated linearly across the target resolution. This “nearest neighbor” approach maintains the purity of the artist’s original pixel vision. Soft resampling algorithms interpolate pixel color and introduce anti-aliasing based on automated assumptions, directly conflicting with the exactness intrinsic to pixel art.
Choosing an Appropriate Scaling Algorithm
Nearest Neighbor Scaling
Nearest neighbor is the most basic scaling algorithm and works by duplicating pixel color values without any blending. Pixels are replicated linearly as needed to fill out the dimensions of the target resolution. This hardness holds the integrity of the original art as much as possible during enlargement.
The pixel grid nature is fully kept with nearest neighbor scaling. Hard edges stay perfectly sharp. Details remain well-defined and crisp. There is no color blending between pixels or anti-aliasing applied across edges. The pixel art simply gains more pixels repetitively inline with the artist’s placements.
Hqx Scaling Algorithms (2xSaI, Super 2xSaI, Super Eagle)
Hqx scaling algorithms are a family of pixel art focused scaling filters that aim to reduce staircasing artifacts during enlargement. They analyze local pixel areas and use pattern matching to determine pixel doubling orientations that better hold diagonal and curve shapes.
2xSaI and Super 2xSaI help reduce the blockiness of nearest neighbor scaling by detecting line edges and diagonals to double pixels along those orientations instead of just square stepping. This helps better preserve the angular forms common in pixel art.
Super Eagleextends this edge analysis further to improve duplication of curved forms. It doubles pixels outward following the implied lines of curvature to achieve less stairstepping on graduated curves and diagonals.
XBR Filtering Algorithms
XBR filtering provides an advanced class of pixel targeting scaling filters for enlargement. Building on the concepts of hqx scaling, these filters incorporate robust pattern matching, gradient analysis, and feature detection to expand details while limiting blurring and artifacts.
Polygonal lines, shading gradients, corner shapes, and even anti-aliasing are detected locally and scaled appropriately based on pixel relationships. This allows improved handling of the intricacies in complex pixel artwork.
Factors like edge smoothness, threshold curves, and color resemblance metrics allow remarkably sharp upscaling attuned to pixel art elements without introducing notable resampled blending between pixels.
Scaling Pixel Art in Unity
Setting Filter Mode to Point
When importing pixel art textures into a Unity project, it is vital to set the correct import settings to avoid automatic bilinear filtering and artifacting.
Under Texture Type, choose Advanced then set Filter Mode to Point (no filtering). This will use direct nearest neighbor style texture sampling instead of blurred interpolation when transforming or scaling the art asset during rendering.
Using Shader Graphs for Custom Scaling
For complete control over scaling methods, a custom shader graph can be implemented to leverage GPU power for specialized enlargement logic attuned to pixel art.
Sampling nodes allow manually defined texel duplication akin to nearest neighbor while pattern analysis logic approximates intelligent oriented doubling for clean curves.
External texture resources can drive edge masking, gradient detection, and other pixel feature tests to trigger the suitable scaling output.
Example Code for Point Filter Scaling
Shader "PixelPerfectScaling" {
Properties {
_MainTex ("Base Texture", 2D) = "white" {}
}
SubShader {
Pass {
CGPROGRAM
#pragma vertex Vert
#pragma fragment Frag
sampler2D _MainTex;
struct VertInput {
float4 position : POSITION;
float2 uv : TEXCOORD0;
};
struct VertOutput {
float4 position : SV_POSITION;
float2 uv : TEXCOORD0;
};
VertOutput Vert(VertInput input) {
VertOutput output;
output.position = UnityObjectToClipPos(input.position);
output.uv = input.uv;
return output;
}
float4 Frag(VertOutput input) : COLOR {
return tex2D(_MainTex, input.uv);
}
ENDCG
}
}
}
This simple shader passes texture coordinates straight to a point filtered texture lookup, avoiding any automatic bilinear interpolation.
Scaling Pixel Art in Unreal Engine
Material Domain Setting to Nearest Neighbor
Similar to Unity, setting the material domain in Unreal is necessary for proper pixel art texture import and sampling. Under the material’s Texture Sample node, change the Sampler Type to NearestNeighbor.
This matches pixels 1:1 instead of blending, preserving hard definition when rendering.
Blueprint Scaling with Preserve Ratio
Scale blueprints provide the nodes for enlarging meshes and components. When scaling pixel art assets and UI, enable Preserve Ratio to lock isotropic pixel doubling instead of skewed stretches.
Hook an input controller axis to drive integer ratio scaling factors matching display pixel steps for clean magnification.
Common Mistakes and How to Avoid Them
Banding Artifacts from Bilinear or Bicubic Sampling
Gradient banding in skies, color blending, lighting, and other features comes from using bilinear texture filtering instead of point filtering on pixel art materials. The gradient steps become pronounced as interpolation struggles with limited color variation.
Ensure nearest neighbor point filtering is configured per above guidelines. Sample shader code demonstrates explicit control to lock correct domain behavior.
Blurriness from Overly Aggressive Anti-Aliasing
Too much post-process anti-aliasing causes detail loss and blurring by trying to blend and smooth hard pixel edges. Temporal AA with motion vector sampling is especially bad.
Disable AA features completely if possible. FXAA and low sample count MSAA offer minor blends with less impact. Sharp pixel corners are integral to the medium.
Moire Patterns from Improper Downsampling
Occasionally pixel art needs to be scaled down in size as well for diffusion or stylistic reasons. Basic decimation introduces spatial aliased textures like moire patterns and noise.
Sophisticated area resampling with pattern analysis avoids artifacts. Radial distribution of pixel weight during downsize averages color corridors cleanly between decided end points.
