Rendering Pixel Art (From "Japanese Patterns" to "Emulators" throughout "1980's Classics")
Tags: design, coding, testing, webdev
Published: 2023-10-23 07:39:34

**We will visualize multiple grid patterns:** Squares, Hexagon, Kikko, Omniscale, xBRZ... All that are available in https://pixa.pics/  (a project of mine to design pixel art)

> When it comes to rendering pixel art, the key is to maintain the artwork's integrity, especially when upscaling or downsampling. The method you use for rendering can heavily affect how the artwork looks.

## Why might it look blurry?

One of the most straightforward methods is the Nearest Neighbor algorithm. It simply takes the nearest pixel's color value and uses that for the new pixel. This results in a crisp-edged look, ideal for preserving hard edges in pixel art. Other algorithms like bilinear or bicubic interpolation take the average of several neighboring pixels. For photos, this can produce smoother transitions, but for pixel art, it results in a blurry look, diluting the distinct hard edges.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qju6t2t61xew8kucrcmc.png)



# Emulator Upscaling

Modern emulators often upscale older, low-resolution games to make them more visually appealing on current high-resolution displays.


## xBRZ:
xBRZ (Scale By Rules) is an upscaling filter that enlarges images by an integer factor. It's designed to convert raster graphics into vector graphics, which are then rasterized back at a higher resolution. This makes the upscaled image smoother and free of artifacts, preserving the sharpness of pixel art while improving the visual quality.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f0w7d8zcg0fvc3283zh4.png)



## OmniScale:
OmniScale is another modern algorithm. While it's somewhat similar to xBRZ, it uses different techniques to provide even smoother and more detailed upscaling. It focuses on ensuring that edges are crisp and avoids blending unrelated pixels.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wrxtds6771otrtitixja.png)




# Pixel Upscaled: Square vs. Hexagon vs. Kikko:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/buqoa4oa6u29bpugc4wa.png)



## Square Pixels (Nearest Neighbor):
The traditional way of displaying pixel art is using squares. This is mainly because the vast majority of screens are made up of square pixels. When upscaling using squares, the artwork maintains its original look, and each pixel just becomes a bigger square.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ckw0sog4tn5u39d9j0bx.png)




## Hexagonal Pixels:
Upscaling using hexagons offers a different visual aesthetic. It can make the image look more organic due to the six-sided nature of hexagons. However, it's a departure from the traditional pixel art look, and it might not always be faithful to the original design.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ho633prhagmorlz6ek36.png)


## Bishamon Kikko Pattern:

Kikko is a traditional Japanese pattern based on hexagons. The word "Kikko" refers to the shell of a tortoise, and the hexagonal pattern is reminiscent of its shape. In Japanese culture, the tortoise is a symbol of longevity, and hence this pattern is often associated with wishes for a long life.

In the context of pixel art, if one were to upscale using a Kikko pattern, it would be a fusion of traditional Japanese aesthetics with digital art. It would be a unique look, different from traditional pixel art, but could be visually appealing in its own right.



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n53ig2z61uotmxmv5kp5.png)



*Click on the image to zoom in ;)

# Conclusion:

The choice of rendering and upscaling method for pixel art boils down to the aesthetic you're aiming for. Nearest Neighbor and modern algorithms like xBRZ and OmniScale ensure crisp edges and an improved visual quality. However, choosing to upscale with different shapes like hexagons or patterns like Kikko introduces a unique visual flair, bridging the old with the new.