Mask with transparency

[Piwie]

Hello there,

 

I'm starting to learn PIXI, and it seems to fit my needs for a future project. 

 

I'm currently trying to create a mask with transparency, more precisely gradient transparency. If you don't see what I mean, here is what I try to achieve :

 

 

I saw that I have to use PIXI.Graphics for my mask but there is not gradientFill ( as i would have do it in AS3 ) or createLinearGradient  (in plain canvas) method in the class… What is the best way to do it?

 

I tried with a PIXI.Sprite and it's loaded PIXI.Texture but no chance… (the texture was black to white, in an other attempt black to transparent).

 

Thanks for your help !

 

 

[d13]

You might be able to use an `AlphaMaskFilter` for this?

 

http://www.goodboydigital.com/pixijs-webgl-filters/

 

The `AlphaMaskFilter` isn't one of the demos but it's in the Pixi source.

I haven't used it yet, but try supplying a texture with an alpha gradient to the filter's `map` property and you might get the effect you're looking for.

Hopefully more experienced Pixi users out there  can let us know for sure.

[trusktr]

This is easy to do!

So, you presumably have a Sprite that contains the Google logo image. Now, you can create a white-to-black linear gradient and apply that as a texture.

Here's a function I made that creates a gradient using a new canvas:

function createLinearGradient(width, height, stops, mapFn) {
    mapFn = typeof mapFn == 'function' ? mapFn : function(canvas) {return canvas}

    var canvas = document.createElement('canvas')

    canvas.width = width
    canvas.height = height

    var ctx = canvas.getContext('2d')
    var gradient = ctx.createLinearGradient(0, 0, width, 0)
    var stopPoints = Object.keys(stops)

    for (var i=0, n=stopPoints.length; i<n; i+=1)
        gradient.addColorStop(parseFloat(stopPoints[i]), stops[stopPoints[i]])

    ctx.fillStyle = gradient
    ctx.fillRect(0, 0, width, height)

    return mapFn(canvas)
}

Now, create a Sprite using that function, the Sprite will contain the gradient that we'll use as a mask:

var gradient = createLinearGradient(googleSpriteWidth, googleSpriteWidth, {
    // These are the gradients stops, starting at the beginning (0.0) with white and ending with black at the end (1.0).
    0.0: 'white',
    1.0: 'black', // black color will make pixels transparent.
}, function mapToSprite(canvas) {
    return new PIXI.Sprite(new PIXI.Texture(new PIXI.BaseTexture(canvas)))
})

Assuming that your sprite is called "google", and "googleSpriteWidth/Height" are the width and height of the Sprite. Then you can apply the mask:

google.mask = gradient

Lastly, make sure that the mask is positioned at the same place as the "google" Sprite. So, for example, if you are adding the "google" Sprite to a container, you can also add the gradient Sprite to the same container:

someContainer.addChild(google)
someContainer.addChild(gradient)

// then you can move both sprites around at the same time
someContainer.position.x = 100
someContainer.position.y = 100

That will do the trick!

[xerver]

Note that this works now, but not 2 years ago when this question was asked.

[trusktr]

Hehe, well, now there's an answer. :}