Opacity

[dferasmus]

Dear Panda.js

 

I would like to minimise my usage of images in a little tile based 'gem' game. Its a match three game, as might have be seen in an earlier post.

 

I was thinking of making a few gems and turning them into greyscale - this will reduce the size of each gem as a side benefit. Then Id like to place a colour flood over, or under, the gem using "graphics.drawRect" and make the one on top have a opacity of 50%. Would this work? Will I have a problem with the background? Are there functions like multiply, screen, etc that I could use to only act on non-transparent pixels?

 

Also, I have been looking into text and noticed "game.PIXI.Text". Could I run into trouble with this between devices, such as positioning, scale, hires, and stuff? If I confirm it on one device will it be identical on others? Would it rather be recommended to use bitmap graphics?

 

Thanks

dferasmus

[SkyzohKey]

Hello !

 

You can change the opacity of a sprite, graphic, text, etc via the alpha propertie.

 

Example: 

this.sprite.alpha = 0; // Opacity 0%.this.sprite.alpha = .5; // Opacity 50%.this.sprite.alpha = 1 // Opcatiy 100%.

Then, for the multiply, screen, etc. functions I don't think it's possible without a handmade plugin. :/

 

Also, Enpu said that BitmapText is more optimized than Text.

 

Greets,

ThanosS.

[dferasmus]

Mr T

 

Thanks, I like bitmap anyway as I can have blood, liquid, fire, candy, cloud, etc fonts if they are bitmap, and I dont have to worry about monospace, so its a win win.

 

I caught wind of pixi.js' tinting which solves my problem perfectly. I have only done a minor test, but it was hugely successful and I suspect I wont have further problems.

 

Example 17

 

Thanks

dferasmus

[hamdirizal]

You can also do tinting in panda js like this; 

this.sprite.tint= 0xFF0000;