From d7ababa39872e2e6b934037398fc44c63b84e50a Mon Sep 17 00:00:00 2001 From: photonstorm Date: Fri, 21 Feb 2014 15:09:04 +0000 Subject: [PATCH] BitmapData.alphaMask will draw the given image onto a BitmapData using an image as an alpha mask. --- README.md | 1 + examples/wip/alpha-mask.js | 31 ++++------------- examples/wip/blendmodes.js | 62 +++++++++++++++++++++++++++++++++ src/gameobjects/BitmapData.js | 64 ++++++++++++++++++++++++++++++----- 4 files changed, 124 insertions(+), 34 deletions(-) create mode 100644 examples/wip/blendmodes.js diff --git a/README.md b/README.md index aeed9a2a..b73192ff 100644 --- a/README.md +++ b/README.md @@ -135,6 +135,7 @@ Updates: * World.reset now calls Camera.reset which sends the camera back to 0,0 and un-follows any object it may have been tracking. * Added hostname: '*' to the grunt-connect in Gruntfile.js (fixes #426) * Device, Canvas and GamePad classes all updated for better CocoonJS support (thanks Videlais) +* BitmapData.alphaMask will draw the given image onto a BitmapData using an image as an alpha mask. Bug Fixes: diff --git a/examples/wip/alpha-mask.js b/examples/wip/alpha-mask.js index 137aa40b..72d6824f 100644 --- a/examples/wip/alpha-mask.js +++ b/examples/wip/alpha-mask.js @@ -1,10 +1,9 @@ -var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update: update, render: render }); -// var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render }); +// var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update: update, render: render }); +var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render }); function preload() { - game.load.image('bg', 'assets/pics/color_wheel_swirl.png'); game.load.image('pic', 'assets/pics/questar.png'); game.load.image('mask1', 'assets/pics/mask-test.png'); game.load.image('mask2', 'assets/pics/mask-test2.png'); @@ -12,34 +11,16 @@ function preload() { } var pic; -var mask; function create() { - game.add.image(-200, 0, 'bg'); + var bmd = game.make.bitmapData(320, 256); - pic = game.add.sprite(0, 0, 'mask1'); - // pic = game.add.sprite(0, 0, 'pic'); + bmd.alphaMask('pic', 'mask2'); - // mask.addChild(pic); + pic = game.add.sprite(0, 0, bmd); - // pic.blendMode = Phaser.blendModes.NORMAL; - // pic.blendMode = Phaser.blendModes.ADD; - // mask.blendMode = Phaser.blendModes.MULTIPLY; - // pic.blendMode = Phaser.blendModes.SCREEN; - // mask.blendMode = Phaser.blendModes.OVERLAY; - // pic.blendMode = Phaser.blendModes.DARKEN; - // pic.blendMode = Phaser.blendModes.LIGHTEN; - // pic.blendMode = Phaser.blendModes.COLOR_DODGE; - // pic.blendMode = Phaser.blendModes.COLOR_BURN; - // pic.blendMode = Phaser.blendModes.HARD_LIGHT; - // pic.blendMode = Phaser.blendModes.SOFT_LIGHT; - // pic.blendMode = Phaser.blendModes.DIFFERENCE; - // pic.blendMode = Phaser.blendModes.EXCLUSION; - // pic.blendMode = Phaser.blendModes.HUE; - // pic.blendMode = PIXI.blendModes.SATURATION; - pic.blendMode = Phaser.blendModes.COLOR; - // pic.blendMode = Phaser.blendModes.LUMINOSITY; + pic.scale.set(2); } diff --git a/examples/wip/blendmodes.js b/examples/wip/blendmodes.js new file mode 100644 index 00000000..b8fc2a71 --- /dev/null +++ b/examples/wip/blendmodes.js @@ -0,0 +1,62 @@ + +var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update: update, render: render }); +// var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render }); + +function preload() { + + game.load.image('bg', 'assets/pics/color_wheel_swirl.png'); + game.load.image('pic', 'assets/pics/questar.png'); + game.load.image('mask1', 'assets/pics/mask-test.png'); + game.load.image('mask2', 'assets/pics/mask-test2.png'); + +} + +var pic; +var mask; + +function create() { + + var bmd = game.make.bitmapData(320, 200); + + // bmd.draw('pic'); + + bmd.alphaMask('pic', 'mask2'); + + pic = game.add.sprite(0, 0, bmd); + + // game.add.image(-200, 0, 'bg'); + + // mask = game.add.sprite(0, 0, 'mask1'); + + // pic = game.add.sprite(0, 0, 'pic'); + + // mask.addChild(pic); + + // pic.blendMode = Phaser.blendModes.NORMAL; + // pic.blendMode = Phaser.blendModes.ADD; + // pic.blendMode = Phaser.blendModes.MULTIPLY; + // pic.blendMode = Phaser.blendModes.SCREEN; + // mask.blendMode = Phaser.blendModes.OVERLAY; + // pic.blendMode = Phaser.blendModes.DARKEN; + // pic.blendMode = Phaser.blendModes.LIGHTEN; + // pic.blendMode = Phaser.blendModes.COLOR_DODGE; + // pic.blendMode = Phaser.blendModes.COLOR_BURN; + // pic.blendMode = Phaser.blendModes.HARD_LIGHT; + // pic.blendMode = Phaser.blendModes.SOFT_LIGHT; + // pic.blendMode = Phaser.blendModes.DIFFERENCE; + // pic.blendMode = Phaser.blendModes.EXCLUSION; + // pic.blendMode = Phaser.blendModes.HUE; + // pic.blendMode = PIXI.blendModes.SATURATION; + // pic.blendMode = Phaser.blendModes.COLOR; + // pic.blendMode = Phaser.blendModes.LUMINOSITY; + +} + +function update() { + + +} + +function render() { + +} diff --git a/src/gameobjects/BitmapData.js b/src/gameobjects/BitmapData.js index 2e8f503c..7a3d313f 100644 --- a/src/gameobjects/BitmapData.js +++ b/src/gameobjects/BitmapData.js @@ -278,31 +278,77 @@ Phaser.BitmapData.prototype = { /** * Copies the pixels from the source image to this BitmapData based on the given area and destination. * - * @param {HTMLImage} source - The Image to copy from. If you want to use an image in Phasers Cache, use game.cache.getImage(key). + * @param {HTMLImage|string} source - The Image to draw. If you give a key it will try and find the Image in the Game.Cache. * @param {Phaser.Rectangle} area - The Rectangle region to copy from the source image. * @param {number} destX - The destination x coordinate to copy the image to. * @param {number} destY - The destination y coordinate to copy the image to. */ copyPixels: function (source, area, destX, destY) { - this.context.drawImage(source, area.x, area.y, area.width, area.height, destX, destY, area.width, area.height); + if (typeof source === 'string') + { + source = this.game.cache.getImage(source); + } + + if (source) + { + this.context.drawImage(source, area.x, area.y, area.width, area.height, destX, destY, area.width, area.height); + } }, /** - * Alpha mask. + * Draws the given image to this BitmapData at the coordinates specified. If you need to only draw a part of the image use BitmapData.copyPixels instead. * - * @param {HTMLImage} source - The Image to copy from. If you want to use an image in Phasers Cache, use game.cache.getImage(key). - * @param {Phaser.Rectangle} area - The Rectangle region to copy from the source image. - * @param {number} destX - The destination x coordinate to copy the image to. - * @param {number} destY - The destination y coordinate to copy the image to. + * @param {HTMLImage|string} source - The Image to draw. If you give a key it will try and find the Image in the Game.Cache. + * @param {number} destX - The destination x coordinate to draw the image to. + * @param {number} destY - The destination y coordinate to draw the image to. */ - alphaMask: function (source) { + draw: function (source, destX, destY) { + + if (typeof source === 'string') + { + source = this.game.cache.getImage(source); + } + + if (source) + { + this.context.drawImage(source, 0, 0, source.width, source.height, destX, destY, source.width, source.height); + } + + }, + + /** + * Draws the given image onto this BitmapData using an image as an alpha mask. + * + * @param {HTMLImage|string} source - The Image to draw. If you give a key it will try and find the Image in the Game.Cache. + * @param {HTMLImage|string} mask - The Image to use as the alpha mask. If you give a key it will try and find the Image in the Game.Cache. + */ + alphaMask: function (source, mask) { var temp = this.context.globalCompositeOperation; + if (typeof mask === 'string') + { + mask = this.game.cache.getImage(mask); + } + + if (mask) + { + this.context.drawImage(mask, 0, 0); + } + this.context.globalCompositeOperation = 'source-atop'; - // this.context.drawImage(source, area.x, area.y, area.width, area.height, destX, destY, area.width, area.height); + + if (typeof source === 'string') + { + source = this.game.cache.getImage(source); + } + + if (source) + { + this.context.drawImage(source, 0, 0); + } this.context.globalCompositeOperation = temp;