Illustration

Pixel art scaling in JavaScript

hqx-thumb

While reading about canvas pixel manipulation I wondered if anyone had ported pixel scaling algorithms to JavaScript. You may have heard of Eagle, 2xSaI, or hqx which are employed by console emulators (e.g. ZSNES). The scaling algorithms are designed to make low resolution graphics look appealing on modern high resolution displays without introducing jaggy artifacts. Wikipedia has a great section explaining pixel art scalers.

A couple years ago, the source of the hqx series of scaling algorithms was put into the public domain. Dominic Szablewski ported the code to JavaScript for use with his Impact HTML5 game engine. You can get the js-hqx source from GitHub and view it in action as part of his Biolab Disaster game. The performance impact is negligible since all of the sprites get scaled once at the beginning of game instead of scaling every frame.

Aside: While researching this I rediscovered the Microsoft research paper from last summer where they developed an algorithm for turning pixel art into vector art.

Standard

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.