Jump to content

PIXI.js v3 - Can't change alpha in Particlecontainer


Recommended Posts

Hey everyone,
I've recently upgraded my game to v3. But now i'm running into an issue.
I have a lightmap in a two dimensional array, which holds tiles that have a black sprite. I change the alpha of these sprites to create the idea of lightning. 


I used a SpriteBatch in v2, and with the recent update it seemed to make sense to update this to the ParticleContainer.

But now it seems that you can't change the Alpha of items in the ParticleContainer after they are created. In the initial initialization functions you can still change the alpha. In the 2nd gameloop and so on, it's not possbile to change the alpha of these tile sprites in the ParticleContainer. So I can't update my lightning. 


I can solve this to just use the Container instead of the ParticleContainer. But I want to know if this is intentional and if it is, why!


Thanks in advance and keep up the good work.



Link to comment
Share on other sites

  • 3 weeks later...

Hi, I'm wondering if it's possible to do the same thing for tint, and if so how?

Unfortunately, no. You can see all the supported properties in the constructor params here:


You can also see in the description of the container there that advanced properties (such as tint) are not supported. If you need to use those properties, just use a normal Container.

Link to comment
Share on other sites

  • 11 months later...

Hello, I'm try to simulate movieclip with ParticleContainer and I have the same problem with alpha resetting. I set every properties to true but nothing happens, every sprites stay to alpha = 1.

I used a clone of this code http://www.goodboydigital.com/pixijs/bunnymark/ and the version 3.0.11 of pixi


container = new PIXI.ParticleContainer(60, [true, true, true, true, true]);

I post my code because I missed something

var renderer = PIXI.autoDetectRenderer(1070, 600, {backgroundColor : 0x1099bb});
var stage = new PIXI.Container();

var bunnys;

var count = 0;
var frame = 0;
var nb = 5;

var loader = new PIXI.loaders.Loader("http://localhost/myFolderGameProject/img/")
	.add('wabbit', 'bunnys.png')

function start(loader, assets){
	stats = new Stats();
	document.body.appendChild(stats.domElement );
	stats.domElement.style.position = "absolute";
	stats.domElement.style.top = "0px";

	// [scale, position, rotation, uvs, alpha]
	container = new PIXI.ParticleContainer(60, [true, true, true, true, true]);

	bunny0 = new PIXI.Texture(assets.wabbit.texture, new PIXI.math.Rectangle(2, 47, 26, 37));
	bunny1 = new PIXI.Texture(assets.wabbit.texture, new PIXI.math.Rectangle(2, 86, 26, 37));
	bunny2 = new PIXI.Texture(assets.wabbit.texture, new PIXI.math.Rectangle(2, 125, 26, 37));
	bunny3 = new PIXI.Texture(assets.wabbit.texture, new PIXI.math.Rectangle(2, 164, 26, 37));
	bunny4 = new PIXI.Texture(assets.wabbit.texture, new PIXI.math.Rectangle(2, 2, 26, 37));

	bunnyTextures = [bunny0, bunny1, bunny2, bunny3, bunny4];

	bunnys = [];

	for (var i = 0; i < nb; i++) 
		bunnys.push(new PIXI.Sprite(bunnyTextures[i]));
		// bunnys[i].alpha = 0;


function update(){
	if(frame == 10){
		frame = 0;
		count = (count+1)%nb; // 1,2,3,4,0,1,...

		for(var i = 0; i < nb; i++){
			// reset alpha for all
			bunnys[i].alpha = 0; // this don't work !
			bunnys[i].x = 0; // for debug, i changed his position
		// set alpha for one
		bunnys[count].alpha = 1;
		bunnys[count].x = 200;


Any idea ?

Thanks in advance

Link to comment
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.

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.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...