Skip to content

Easily Create Retro Pixelated Graphics for WebGL Browser Games

So here’s just a quick one. Since these days pixelated “retro” graphics are hot, there’s a way you can turn your uncool Full HD browser game into a cool retro game. The key is changing how the browser handles upscaling of images. By default linear filtering is used to upscale lower resolution images. With the CSS property “image-rendering” you can control this (source):

image-rendering: -moz-crisp-edges;         /* Firefox */
image-rendering:   -o-crisp-edges;         /* Opera */
image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */
image-rendering: crisp-edges;
-ms-interpolation-mode: nearest-neighbor; /* IE (non-standard property) *

All you need to do is take your (WebGL) canvas, set the resolution down to something retro-y (e.g. 320×240 px),  scale it up to the full window size and apply the aforementioned styles to the canvas element.

Advertisements

2 replies »

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s

Bunkerbewohner1

  • RT @allowe: A hundred years ago everybody owned horses and only the rich had cars. Now everybody has a car and only the rich own horses. 1 week ago
  • @viquizru hi! excuse me for using English, but my Russian sucks: Is it possible to liccense any of your questions for commercial use? 1 week ago
  • RT @thinkmariya: "Now that Uber doesn't have a CEO, COO, CTO, or CFO, I guess this is the closest it's ever been to a self-driving car comp… 1 week ago
  • I'm totally hooked on Visual Studio Team Services. It's great! 1 week ago
  • Having a look at Visual Studio Team Services and it actually looks pretty good wrt integrated agile workflow and unlimited git repos. 1 week ago

My Del.icio.us

%d bloggers like this: