Search code examples
javascripthtml5-canvaspaperjs

Detect Transparent Image Collisions on paper.js

Right now I'm trying to make a game where a ball bounces off of some transparent images in paper.js. What happens is the ball is on the image but on the transparent part, therefore saying that it intersects. Right now I'm using

circle.intersects(raster)

Is it possible in paper.js to detect when the ball touches the not-transparent part of the image?

Solution

  • From the reference http://paperjs.org/reference/raster/#getaveragecolor-object, you can check the not-transparent intersection by

    var color = raster.getAverageColor(circle);
var nonTransperentIntersection = color && (color.alpha !== 0);