CANNOT disable image smoothing in Chrome - getting frustrated

[ryoshenron .]

I have been working on one of those retro 8-bit style games (everyone is well familiar with those by now) in Crafty, and I upscale the canvas so that all the graphics are larger and can be seen more easily, and to make the graphics look "blocky."

When left to default settings, all the browsers like to "smooth out" all the graphics in the canvas when you scale it like that, making your pixel art look muddy and ugly. I have been able to disable that in Firefox, but despite using all the different methods I could find for disabling it in Chrome, I can't get Chrome to stop blurring my graphics.

I am using both CSS and JavaScript code to try and disable this in Chrome. Here is the CSS I have in the HTML file of my game:

<STYLE type="text/css">
 canvas {
  image-rendering: optimizeSpeed;
  image-rendering: crisp-edges;
  image-rendering: -moz-crisp-edges;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: optimize-contrast;
  -ms-interpolation-mode: nearest-neighbor;
  image-rendering:-o-crisp-edges;
 
 }
</style>

And here is the first function in the game that loads Crafty, with the JS code I'm using to also try to disable image smoothing:

start: function() {

    //The initial size of the game
    var GAMEWIDTH = 240, GAMEHEIGHT = 160;
   
    //Initialize the game engine
    //Crafty.mobile = true;
    Crafty.init(GAMEWIDTH, GAMEHEIGHT);
    Crafty.background('black');
   
    //Stretch the game stage to double size (for a pixellated look)
    var stageStyle = Crafty.stage.elem.style;
    stageStyle.transformOrigin = stageStyle.webkitTransformOrigin = stageStyle.mozTransformOrigin = '0 0';
    stageStyle.transform = stageStyle.webkitTransform = stageStyle.mozTransform = 'scale(' + Game.scale + ')';
   
    Crafty.canvas.init();
   
    //Disable image smoothing
    Crafty.canvas.context.imageSmoothingEnabled = false;
    Crafty.canvas.context.webkitImageSmoothingEnabled = false;
    Crafty.canvas.context.mozImageSmoothingEnabled = false;
   
    //Go to the loading scene to get the game started
    Crafty.scene('Loading');
},

Despite trying to use both the CSS method and the JS method to disable image smoothing, nothing is working for Chrome. If someone knows how to get this working in Chrome, PLEASE let me know.

P.S. I don't think it's working in Internet Explorer right now either, but I'm just worrying about one thing at a time (and I don't like IE anyway).

[Kevin Simper]

The problem is there and there is no easy solution to the problem as it is right now.

The ImpactJS guy found a solution where he would scale the images beforehand pixel by pixel and thereby avoid scaling it by streching, which as you are experincing, makes fussy images.

You can read about it here.

It could be cool to have that in Crafty.js 

http://phoboslab.org/log/2012/09/drawing-pixels-is-hard

[ryoshenron .]

I happen to have found a workaround that seems to be working great for Chrome so far. Instead of using transformOrigin on the stage's style, I am now instead setting the initial size of Crafty's stage to the full size I wanted it to be scaled to, then zooming the viewport.

So the Crafty stage size is set like this now:

var GAMEWIDTH = 480, GAMEHEIGHT = 320;

instead of 240 x 160 like it was before, and after my main game scene is loaded, I run this:

Crafty.viewport.zoom(2, 0, 0, 0);

This ends up blowing everything up to double the size like I wanted, and strangely enough Chrome decides to behave when I do it this way. And when I make the mobile version, I'll just calculate what the stage size and viewport zoom amount should be based on the window display size.

IE10 is still smoothing everything, but I remember reading somewhere that Microsoft added support for imageSmoothingEnabled in IE11, so I should probably try updating IE and seeing if that version starts working right in my game.

For now, I'm pretty happy that I have my game displaying the way I want it to in both Firefox and Chrome, though.

[Kevin Simper]

What crafty does it quite simple

https://github.com/craftyjs/Crafty/blob/develop/src/viewport.js#L283

It does the same with scale as you, but it seems you forgot a comma in your first code.