From a1b502fc06f8f832b846444a3bdd8124e3df267b Mon Sep 17 00:00:00 2001 From: photonstorm Date: Tue, 25 Feb 2014 04:40:44 +0000 Subject: [PATCH] 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 #381. --- README.md | 2 ++ examples/display/render crisp.js | 22 ++++++++++++++++----- src/Phaser.js | 10 +++++++--- src/core/Game.js | 8 ++++++-- src/core/Stage.js | 28 ++++++++++++++++++++++++++ src/gameobjects/Image.js | 34 ++++++++++++++++++++++++++++++++ src/gameobjects/Sprite.js | 34 ++++++++++++++++++++++++++++++++ src/system/Canvas.js | 1 - 8 files changed, 128 insertions(+), 11 deletions(-) diff --git a/README.md b/README.md index 5629186b..45202c3f 100644 --- a/README.md +++ b/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: diff --git a/examples/display/render crisp.js b/examples/display/render crisp.js index 16f56fc0..44513165 100644 --- a/examples/display/render crisp.js +++ b/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; } diff --git a/src/Phaser.js b/src/Phaser.js index ae7571a0..276640b0 100644 --- a/src/Phaser.js +++ b/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 } }; diff --git a/src/core/Game.js b/src/core/Game.js index f2333726..eb779f83 100644 --- a/src/core/Game.js +++ b/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); diff --git a/src/core/Stage.js b/src/core/Stage.js index db8c4de2..cce038f4 100644 --- a/src/core/Stage.js +++ b/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; + } + } + +}); diff --git a/src/gameobjects/Image.js b/src/gameobjects/Image.js index a76285b6..60ffe2f9 100644 --- a/src/gameobjects/Image.js +++ b/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; + } + } + } + +}); diff --git a/src/gameobjects/Sprite.js b/src/gameobjects/Sprite.js index 04769f33..cd15794a 100644 --- a/src/gameobjects/Sprite.js +++ b/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; + } + } + } + +}); diff --git a/src/system/Canvas.js b/src/system/Canvas.js index 8624fe3c..31cdbd2e 100644 --- a/src/system/Canvas.js +++ b/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')