Sprites Blend Mode (Setting a custom material on a Sprite)?

Help & Support
1

I made my own particle system and would like to control the blend mode of the sprites. I see that we have blend modes for materials so the attribute is likely available to hack in somewhere - ideas?

Thanks,
Yohami

2

It isn’t exposed but as you say you can try cloning the default sprite material in place and play with its properties.

It should be accessible like this:

this.entity.sprite._material = this.entity.sprite._material.clone();

Here is the sprite component source code:

1 Like
3

Thanks @Leonidas I’ll try. How do I set a material blendmode to overlay, multiply etc?

4

Like this:

myMaterial.blendType = pc.BLEND_NORMAL;
myMaterial.update();

https://developer.playcanvas.com/en/api/pc.BasicMaterial.html#blendType

5

Rock on

6

Any errors here? it didn’t do nothing :frowning:

 
    var material =  this.entity.sprite._material.clone();
    
    material.blendType = pc.BLEND_ADDITIVE;
    
    material.update();
 
    this.entity.sprite._material = material;
7

No that’s correct, but I am not surprised it didn’t work since this isn’t a material exposed for editing.

Try submitting a feature request on the engine repository in case this is something that can work in another way or can be added to the engine.

1 Like
8

Hey @Yohami_Zerpa,

Did a test myself, and it seems that the _material property isn’t being monitored by the component. Setting the material directly on the meshInstance did work:

    var material =  this.entity.sprite._material.clone();
    
    material.blendType = pc.BLEND_ADDITIVE;
    
    material.update();
 
    this.entity.sprite._meshInstance.material = material;
9

That worked, thanks! @Leonidas

1 Like
10

Is this possible too with the GUI element component? tried the same code but nope so far

11

For Element components go with the official way, you can set the opacity of the element directly or even assign a custom material:

image
image.png510×667 16.4 KB

1 Like
12

Ditto

1 Like
13

This came up again recently. There is a private API to get and set the material on the sprite component: engine/component.js at master · playcanvas/engine · GitHub

Be warned that all sprite components by default share some default materials so if you are going to use a custom one (eg with a shader), be sure to create or clone your own rather than modifying the existing (default) material.

1 Like