Koiba uses a pixelated, retro look. This style is quite popular at the moment, because it looks great and is much easier for indie devs to create. For a great pixel art look, you need the expanded pixelated images to look sharp and crisp. Unfortunately for pixel artists, modern browsers are made to smooth images and perform anti-aliasing on fonts, so expanded images/fonts don’t have a grainy look. Let’s turn this off where we can, and use some workarounds where we can’t.

Disclaimer: modern browsers only.

Fonts

We’ll start with fonts, as this is the easiest. Koiba uses the pxlplz font, which I will use to demonstrate this.

Font with anti-aliasing
With anti-aliasing
Font with anti-aliasing turned off
Anti-aliasing turned off
          
html {
  -webkit-font-smoothing: none;
}
          
        

And we’re done! Now let’s render some images.

Canvas

Canvas has also made it easy for us to render pixel art. Let’s take the small Koiba logo:

small Koiba logo

Now, we want to scale this, so we get a pixelated effect. How you do this in canvas is up to you. Canvas will by default smooth scaled images, but let’s us disable this very easily.

canvas image with smoothing
With canvas image smoothing


Boo! This is not the pixelated effect we wanted. Luckily, all we have to do is disable the image smoothing.

  
$.each($('canvas'), function(i, canvas) {
  context = canvas.getContext("2d");
  context.imageSmoothingEnabled = false;
  context.mozImageSmoothingEnabled = false;
  context.oImageSmoothingEnabled = false;
  context.webkitImageSmoothingEnabled = false;
});
  
canvas image with smoothing disabled
Canvas image with smoothing disabled


Wonderful!

HTML

Unfortunately, this is where it gets a little more difficult. Currently, you can scale up in IE, Firefox and Opera with the following:

  
img {
  image-rendering: -moz-crisp-edges;
  image-rendering: optimizeSpeed
  -ms-interpolation-mode: nearest-neighbor; 
}
  

But Chrome and Safari don’t support this! Hopefully they will in the near future, but for now, you’re out of luck. Scaling the image up in your favourite image editor is unfortunately the best option.



blog comments powered by Disqus