Particles in canvas javascript

cocos2d-x JavaScript
#1

Hello,

I’m trying to load a plist with a particle system in it. I am using cc.ParticleSystem to load the plist.

Everything works nice except the fact that the image provided as a texture is not loaded. no matter what image i provide a small white circle is created as a particle.

I am using canvas without webgl.

Any ideas?

#2

Alright, it seems that particles from a specific image work only on WebGL.

But now I have another problem. When I enable WebGL my canvas background turns black. How do I set it to transparent?

#3

By turning on alpha when generating the webgl context and adding clearColor when clear is called for the webgl the background is now transparent, but all my pngs with transparency are rendered with a black tint.

If I cannot solve this issue I will go back onto using the 2d context from canvas.

Why can’t the CCParticleSystem work with a png if the renderType is set to canvas without webgl?

#4

You can have textured particles in Canvas, it’s just the default configuration is the shape mode for performance concern.

particle.setDrawMode(cc.ParticleSystem.TEXTURE_MODE);

Be noted that the performance with texture mode is really limited under canvas render mode, so you probably want to limit the particle number of your particle system.

About this, @ludingping do you have a possible explanation ?

#5
  1. I have tried the TEXTURE_MODE settings, but without webgl my particles still do not load the texture.
  2. I have found that using blendFuncSeparate instead of blendFunc on webgl and enabling ‘premultipliedAlpha’ when the context is created for webgl it now works and shows the correct alpha for my images.

Thanks,
Radu

#6

Have you preloaded your texture file ?

#7

Yes, I have preloaded the texture file.

Anyway as long as it is working on webgl, I am good, because I would like to target webgl compatible browsers.

Thank you.