rickydamta

sprite.tint white color problem

Recommended Posts

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 :)

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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;}

 

Share this post


Link to post
Share on other sites

?

 

 

?

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.

Share this post


Link to post
Share on other sites

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. KappaRoss.png

 

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

1 - Make the sprite an mask of an white square

2 - blendDestinationAtop

Share this post


Link to post
Share on other sites

 

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.

Share this post


Link to post
Share on other sites

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()

Share this post


Link to post
Share on other sites

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]
    

 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.