wassname/phaser
1
0
Fork 0
mirror of https://github.com/wassname/phaser.git synced 2026-06-27 16:10:15 +08:00
Code Issues Packages Projects Releases Wiki Activity

BitmapData.alphaMask will draw the given image onto a BitmapData using an image as an alpha mask.

Browse Source
This commit is contained in:
photonstorm
2014-02-21 15:09:04 +00:00
parent 07af06fc4e
commit d7ababa398
4 changed files with 124 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+1
View File
@@ -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:
examples/wip/alpha-mask.js
+6 -25
View File
@@ -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);
}
examples/wip/blendmodes.js
+62
View File
@@ -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() {
}
src/gameobjects/BitmapData.js
+55 -9
View File
@@ -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;