Stage.smoothed allows you to set if sprites will be smoothed when rendered. Set to false if you're using pixel art in your game. Default is true. Works in Canvas and WebGL. Setting the game anti-aliased parameter now works properly too.

Sprite.smoothed and Image.smoothed allows you to set per-Sprite smoothing, perfect if you just want to keep a few sprites smoothed (or not).
Fixes phaserjs#381.

Author: photonstorm

README.md

@@ -112,6 +112,8 @@ New features:
 * TileSprites can now receive full Input events, dragging, etc and be positioned in-world and fixed to cameras.
 * The StateManager now looks for a function called 'resumed' which is called when a game un-pauses.
 * Key.onHold added. This event is dispatched every time the browser sends a keydown event and the key is already being held down.
+* Stage.smoothed allows you to set if sprites will be smoothed when rendered. Set to false if you're using pixel art in your game. Default is true. Works in Canvas and WebGL.
+* Sprite.smoothed and Image.smoothed allows you to set per-Sprite smoothing, perfect if you just want to keep a few sprites smoothed (or not)
 
 
 Updates:

examples/display/render crisp.js

@@ -1,25 +1,34 @@
 
-var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create });
+var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create });
 
 function preload() {
 
     game.load.image('boss', 'assets/misc/boss1.png');
+    game.load.image('melon', 'assets/sprites/melon.png');
     game.load.spritesheet('button', 'assets/buttons/button_sprite_sheet.png', 193, 71);
 
 }
 
 var boss;
+var melon;
 var button;
 
 function create() {
 
-    //  For browsers that support it, this keeps our pixel art looking crisp
-    // This only works when you use Phaser.CANVAS as the renderer
-    Phaser.Canvas.setSmoothingEnabled(game.context, false);
-
     boss = game.add.sprite(game.world.centerX, game.world.centerY, 'boss');
     boss.anchor.setTo(0.5, 0.5);
 
+    melon = game.add.sprite(500, game.world.centerY, 'melon');
+    melon.anchor.setTo(0.5, 0.5);
+
+    //  For browsers that support it, this keeps our pixel art looking crisp (works across Canvas and WebGL)
+
+    //  You can either set smoothing on a specific sprite, like this:
+    // boss.smoothed = false;
+
+    //  Or across the whole stage, like this:
+    game.stage.smoothed = false;
+
     //  Zoom in each time we press the button
     button = game.add.button(32, 32, 'button', clickedIt, this, 2, 1, 0);
 }
@@ -28,5 +37,8 @@ function clickedIt() {
 
     boss.scale.x += 0.5;
     boss.scale.y += 0.5;
+
+    melon.scale.x += 0.5;
+    melon.scale.y += 0.5;
 
 }

src/Phaser.js

@@ -48,9 +48,6 @@ var Phaser = Phaser || {
 	STATIC: 2,
 	KINEMATIC: 4,
 
-	CANVAS_PX_ROUND: false,
-	CANVAS_CLEAR_RECT: true,
-
 	// the various blend modes supported by pixi / phaser
 	blendModes: {
 	    NORMAL:0,
@@ -70,6 +67,13 @@ var Phaser = Phaser || {
 	    SATURATION:14,
 	    COLOR:15,
 	    LUMINOSITY:16
+	},
+
+	// the scale modes
+	scaleModes: {
+	    DEFAULT:0,
+	    LINEAR:0,
+	    NEAREST:1
 	}
 
 };

src/core/Game.js

@@ -20,7 +20,7 @@
 * @param {string|HTMLElement} [parent=''] - The DOM element into which this games canvas will be injected. Either a DOM ID (string) or the element itself.
 * @param {object} [state=null] - The default state object. A object consisting of Phaser.State functions (preload, create, update, render) or null.
 * @param {boolean} [transparent=false] - Use a transparent canvas background or not.
-* @param  {boolean} [antialias=true] - Anti-alias graphics.
+* @param  {boolean} [antialias=true] - Draw all image textures anti-aliased or not. The default is for smooth textures, but disable if your game features pixel art.
 * @param {object} [physicsConfig=null] - A physics configuration object to pass to the Physics world on creation.
 */
 Phaser.Game = function (width, height, renderer, parent, state, transparent, antialias, physicsConfig) {
@@ -564,7 +564,6 @@ Phaser.Game.prototype = {
                 }
 
                 this.renderer = new PIXI.CanvasRenderer(this.width, this.height, this.canvas, this.transparent);
-                Phaser.Canvas.setSmoothingEnabled(this.renderer.context, this.antialias);
                 this.context = this.renderer.context;
             }
             else
@@ -580,6 +579,11 @@ Phaser.Game.prototype = {
             this.context = null;
         }
 
+        if (!this.antialias)
+        {
+            this.stage.smoothed = false;
+        }
+
         Phaser.Canvas.addToDOM(this.canvas, this.parent, true);
         Phaser.Canvas.setTouchAction(this.canvas);
 

src/core/Stage.js

@@ -381,3 +381,31 @@ Object.defineProperty(Phaser.Stage.prototype, "backgroundColor", {
     }
 
 });
+
+/**
+* Enable or disable texture smoothing for all objects on this Stage. Only works for bitmap/image textures. Smoothing is enabled by default.
+*
+* @name Phaser.Stage#smoothed
+* @property {boolean} smoothed - Set to true to smooth all sprites rendered on this Stage, or false to disable smoothing (great for pixel art)
+*/
+Object.defineProperty(Phaser.Stage.prototype, "smoothed", {
+    
+    get: function () {
+
+        return !!PIXI.scaleModes.LINEAR;
+
+    },
+
+    set: function (value) {
+
+        if (value)
+        {
+            PIXI.scaleModes.LINEAR = 0;
+        }
+        else
+        {
+            PIXI.scaleModes.LINEAR = 1;
+        }
+    }
+
+});

src/gameobjects/Image.js

@@ -698,3 +698,37 @@ Object.defineProperty(Phaser.Image.prototype, "fixedToCamera", {
     }
 
 });
+
+/**
+* Enable or disable texture smoothing for this Image. Only works for bitmap/image textures. Smoothing is enabled by default.
+*
+* @name Phaser.Image#smoothed
+* @property {boolean} smoothed - Set to true to smooth the texture of this Image, or false to disable smoothing (great for pixel art)
+*/
+Object.defineProperty(Phaser.Image.prototype, "smoothed", {
+    
+    get: function () {
+
+        return !!this.texture.baseTexture.scaleMode;
+
+    },
+
+    set: function (value) {
+
+        if (value)
+        {
+            if (this.texture)
+            {
+                this.texture.baseTexture.scaleMode = 0;
+            }
+        }
+        else
+        {
+            if (this.texture)
+            {
+                this.texture.baseTexture.scaleMode = 1;
+            }
+        }
+    }
+
+});

src/gameobjects/Sprite.js

@@ -951,3 +951,37 @@ Object.defineProperty(Phaser.Sprite.prototype, "fixedToCamera", {
     }
 
 });
+
+/**
+* Enable or disable texture smoothing for this Sprite. Only works for bitmap/image textures. Smoothing is enabled by default.
+*
+* @name Phaser.Sprite#smoothed
+* @property {boolean} smoothed - Set to true to smooth the texture of this Sprite, or false to disable smoothing (great for pixel art)
+*/
+Object.defineProperty(Phaser.Sprite.prototype, "smoothed", {
+    
+    get: function () {
+
+        return !!this.texture.baseTexture.scaleMode;
+
+    },
+
+    set: function (value) {
+
+        if (value)
+        {
+            if (this.texture)
+            {
+                this.texture.baseTexture.scaleMode = 0;
+            }
+        }
+        else
+        {
+            if (this.texture)
+            {
+                this.texture.baseTexture.scaleMode = 1;
+            }
+        }
+    }
+
+});

src/system/Canvas.js

@@ -26,7 +26,6 @@ Phaser.Canvas = {
         width = width || 256;
         height = height || 256;
 
-        // var canvas = document.createElement('canvas');
         var canvas = document.createElement(navigator.isCocoonJS ? 'screencanvas' : 'canvas');
 
         if (typeof id === 'string')