Jump to content

Mask with transparency


Recommended Posts

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 !



Link to comment
Share on other sites

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




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.

Link to comment
Share on other sites

  • 2 years later...

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:


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

That will do the trick!

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...