sprite.tint white color problem

[rickydamta]

Hi!

I am new to phaser.

 

I have a sprite called Ground in the group called Platforms

var platforms = game.add.group();platforms.enableBody = true;var ground = platforms.create(0, game.world.height - 30, 'ledge');

The ground sprite has to be white,I use this line of code for that

ground.tint = 0xffffff;

I don't know why but it does not work with the color white,it works with any other color but not with white.

 

Thanks for help

[rich]

Tinting is an additive process (the name is a bit misleading imho), so you cannot tint something white as it's effectively turning off tinting in the process. To fully disable a tint on a sprite you'd set it to 0xffffff. You'll need to find another solution to making something change to white I'm afraid.

[webcaetano]

Searched for "Phaser Full White sprite" on google it drive me to this topic.

Is there anyway to make sprite full white , in this current version?

I know that in PIXI 3 is possible.

[webcaetano]

Oh @jmp answered this recently here: http://www.html5gamedevs.com/topic/18126-painting-a-reveal-mask/

You can make a sprite full white by making it a mask.

[qdrj]

Here is my method (this is TypeScript, not JS):

public static createColorImage(_game:Phaser.Game, source:Phaser.Image, color:string = "#ffffff"):Phaser.Image {    var anchorX:number = source.anchor.x;    var anchorY:number = source.anchor.y;    source.anchor.set(0, 0);    var bmd:Phaser.BitmapData = this.createRectTexture(_game, source.width, source.height, color);    bmd.blendDestinationAtop();    bmd.draw(source, 0, 0, source.width, source.height);    source.anchor.set(anchorX, anchorY);    return _game.make.image(0, 0, bmd);}

public static createRectTexture(_game:Phaser.Game, width:number, height:number, colorHex:string = "#000000", cacheKey?:string):Phaser.BitmapData {    var color:any = Phaser.Color.hexToColor(colorHex);    var addToCache:boolean = !!cacheKey;    var texture:Phaser.BitmapData = _game.add.bitmapData(width, height, cacheKey, addToCache);    texture.fill(color.r, color.g, color.;    return texture;}

 

[webcaetano]

@qdrj thanks good sir.

I'll test this method too.

Much obliged.

[icp]

@qdrj thanks good sir.

I'll test this method too.

Much obliged.

Or you could use:

ground.tint = 0xfeffff;

[webcaetano]

?

 

 

Or you could use:

ground.tint = 0xfeffff;

 

?
I'm afraid you don't understand the subject of this topic, or don't know the behavior of the `.tint`.

`ground.tint = 0xfeffff`; will does nothing.

[icp]

?

 

 

?

I'm afraid you don't understand the subject of this topic, or don't know the behavior of the `.tint`.

`ground.tint = 0xfeffff`; will does nothing.

I had the same issue, so instead of using a pure white tint I switched the color to the closest white value.

[webcaetano]

I had the same issue, so instead of using a pure white tint I switched the color to the closest white value.

I understand. it does not work too. It will change 0.01% of the sprite color.

What we are looking is Full Pure Titanium White. 

 

And we already got it, by some good answers about it: 

1 - Make the sprite an mask of an white square

2 - blendDestinationAtop

[webcaetano]

 

Here is my method (this is TypeScript, not JS):

public static createColorImage(_game:Phaser.Game, source:Phaser.Image, color:string = "#ffffff"):Phaser.Image {    var anchorX:number = source.anchor.x;    var anchorY:number = source.anchor.y;    source.anchor.set(0, 0);    var bmd:Phaser.BitmapData = this.createRectTexture(_game, source.width, source.height, color);    bmd.blendDestinationAtop();    bmd.draw(source, 0, 0, source.width, source.height);    source.anchor.set(anchorX, anchorY);    return _game.make.image(0, 0, bmd);}

public static createRectTexture(_game:Phaser.Game, width:number, height:number, colorHex:string = "#000000", cacheKey?:string):Phaser.BitmapData {    var color:any = Phaser.Color.hexToColor(colorHex);    var addToCache:boolean = !!cacheKey;    var texture:Phaser.BitmapData = _game.add.bitmapData(width, height, cacheKey, addToCache);    texture.fill(color.r, color.g, color.;    return texture;}

 

 

Simplified version of your code in ES6 :

var createColorImage = function(game, source, color="#ffffff") {	var color = Phaser.Color.hexToColor(color);        return game.make.image(0, 0, game.add.bitmapData(source.width, source.height).fill(color.r, color.g, color.	.blendDestinationAtop()	.draw(source, 0, 0, source.width, source.height));}

Works like charm. 

Then i swaped textures.

 

And this method works better than mask.

[shnfara]

EDIT: it should be ...

var createColorImage = function(game, source, color="#ffffff") {	
var color = Phaser.Color.hexToColor(color);        
return game.make.image(0, 0, game.add.bitmapData(source.width, source.height).fill(color.r, color.g, color.b).blendDestinationAtop().draw(source, 0, 0, source.width, source.height));
}

 

something funky going on right about here.. 

color.	.blendDestinationAtop()

[mokargas]

I cheated on this one a bit, since I was using WebGL.

I set the tint to black, then I set Pixi's InvertFilter on the sprite. Probably a bit expensive performance-wise but works in my use case

 

sprite.tint = Phaser.Color.hexToColor('#000000')
sprite.filters = [new PIXI.InvertFilter]