crisp-pixel scaling

[andrew gardner]

Hey everyone,

First, as a first-time contributor to the group here, and a relative newbie dev, I wanna say I've had a heck of a lot of fun with gamejs - kudos, Simon, on an excellent project.

Now my question: Like a lot of indie devs, I have a fondness for low-res, pixelly games, and I'm wondering if anyone has any recommendations for methods of scaling up a canvas / gamejs display, keeping the pixels crisp. The built-in transform.scale or just making the canvas bigger have a blurring effect.

I've tried using an outside js script called PixelZoom (https://github.com/wthit56/PixelZoom), but to perform this function every tick becomes very processor heavy, and my 60fps game barely runs at a frame per second. (But the look ends up being PERFECT!)

Anyone have any suggestions?

Thanks!

-Andrew G

[Domas Lapinskas]

Hey and welcome :)

I'm also building a game with pixelated look. Firefox and webkit (Chrome) have canvas context options to disable image smoothing:

var display = gamejs.display.setMode([600, 400]);
display._context.mozImageSmoothingEnabled = false;
display._context.webkitImageSmoothingEnabled = false;


You'll have to set these options for any gamejs.Surface object you draw/scale images on. 
I haven't yet done any research about Internet Explorer though.

@Simon: maybe a global option for this?

--
Domas

[si...@nekapuzer.at]

hi guys,
good point! gamejs needs this.

i have played around with those options, as you can see here:

https://github.com/oberhamsi/gamejs/blob/master/lib/gamejs.js#L566

.. and i set them exactly wrong for pixel art :) the other "image-rendering" and interpolation properties are related
to how the canvas gets scaled if the browser zooms. i suggest we extend _smooth() to work for all browser and
document what the other options related to this do and how to properly set them. i would not expose _smooth() (it
stays hidden and internal as it is).

a global option would totally make sense. I would make it a flag on display.setMode(); e.g.:

gamejs.display.setMode([800, 600], gamejs.DISABLE_SMOTHING)

...and that would make sure every created surface and of course the display itself have smoothing disabled.

i don't see anything about this in the w3c spec... does anyone know what they think about that?

simon

[Domas Lapinskas]

Sounds good!

It's in the WHATWG, dunno why w3c did not pick it up yet. Hopefully they will.

--
Domas