Jump to content

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

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.

Link to post
Share on other sites
  • 1 month later...

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

 

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

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.

Link to post
Share on other sites
  • 3 months later...

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()
Link to post
Share on other sites
  • 7 months later...

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.

×
×
  • Create New...