Animated Sprite with custom shader (material)

Mathieu_Branchaud · June 7, 2022, 2:11am

In some of our games we use custom material chunks on sprites, image and text elements and it work fine but with animated sprites it look like we’re limited to a single custom material.

From the source code

github.com

playcanvas/engine/blob/6564b03857e1e7079e6d46070e61283136ecce1a/src/framework/components/sprite/component.js#L605

      
        
                    const layer = this.system.app.scene.layers.getLayerById(this._layers[i]);
                    if (layer) {
                        layer.removeMeshInstances(meshInstances);
                    }
                }
            
            
    this._addedModel = false;
            }
            
            
// Set the desired mesh on the mesh instance
            _showFrame(frame) {
                if (!this.sprite) return;
            
            
    const mesh = this.sprite.meshes[frame];
                // if mesh is null then hide the mesh instance
                if (!mesh) {
                    if (this._meshInstance) {
                        this._meshInstance.mesh = null;
                        this._meshInstance.visible = false;
                    }

Since animated sprite fetch the default material on every frame change, the only way to have a custom material on then seems to be to overwrite the sprite component default material. (defaultMaterial / default9SlicedMaterialSlicedMode / default9SlicedMaterialTiledMode). This is fine with one custom material, but if we want to have, different animated sprites use different materials it will not work as each need to change the default one used by all animated sprite.

Ideally, we should be able to set the material for a single animated sprite like we can for images, text and normal sprite:

this.entity.element.material = ...
this.entity.element._text._setMaterial(...)
this.entity.sprite.material = ...

Leonidas · June 7, 2022, 9:16am

Calling @mvaligursky in case he has a workaround for this.

I think there is a feature request for being able to set a custom material on text elements in the engine repo.

mvaligursky · June 7, 2022, 9:46am

@jpaulo spent some time looking on the materials of elements … he might know more?
But I agree this needs to be exposed using some API, that is definitely missing.

yaustar · June 7, 2022, 10:16am

Only thing I can think of short term is to monkey patch the function and change this check: engine/component.js at 6564b03857e1e7079e6d46070e61283136ecce1a · playcanvas/engine · GitHub

So that it doesn’t change the mesh instance material if it’s not the default sprite one.

That way, you can assign your custom material to the mesh instance without it being overridden every sprite frame.

yaustar · June 7, 2022, 10:20am

Added ticket as a feature request: Add API to assign material to a sprite · Issue #4303 · playcanvas/engine · GitHub