Jump to content

Search the Community

Showing results for tags 'alphaMask'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 Game Coding
    • News
    • Game Showcase
    • Facebook Instant Games
    • Web Gaming Standards
    • Coding and Game Design
  • Frameworks
    • Phaser 3
    • Phaser 2
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Website URL





Found 6 results

  1. Can you create a alphaMask from bitmapdata rather than images? I have a circle loader that I am building as bitmapData and I have the source image I want to mask, but I can't figure out how to use the mask bitmap data for bmd.alphaMask or convert the mask bitmapData to a image that the method can use. Any help would be appreciated. createPie : function (game, w, h) { console.log("create pie", w, h, this); var mask = game.add.bitmapData(w, w), bmd = game.add.bitmapData(w, w), canvas = bmd.canvas, context = bmd.ctx, size = 270, degreesToRadians = function (degrees) { return (degrees * Mat
  2. Hi all - new to the forum! I've been working on something recently and had to use a bit of a wonky (slow) workaround to get the desired effect and was wondering whether anyone here had had the same issue. I'm finding it difficult to blend two images together using a bitmask without first rendering the results to a separate canvas, then drawing the blended image from the other canvas to the 'main' canvas. All my images are the same rectangular shape, and also the same size. For simplicity let's say that the first image is solid blue and the second image is solid green. The bitmask ima
  3. Hello, I've got this issue and I'm not able to find any answers. I have 2 images - background and a soft edged circle for a mask. Background stays in same place, but the circle should be able to move. As far as I understand I can send mask coordinates when using alphaMask(source, mask, sourceRect, maskRect) by sending maskRect settings, but if I create rectangle (var rect2 = new Phaser.Rectangle(200, 200, 300, 300);) before applying alphaMask, the mask doesn't work. How can I send maskRect options? Or I should approach this somehow differently? Current code I have: var bmd =
  4. Hi, I have made this sample using pure html5 canvas http://www.solarahosting.com/texture/image.html, is there a way I can simulate it using Phaser?
  5. What is the proper technique for resizing an alpha mask before application? I have already loaded the mask using load.image. I've also created a bitmapdata that the mask is to applied to. However, I have been unable to change the mask's size using the code below: var bmd = this.state.game.add.bitmapData(this.detectionRange * 2, this.detectionRange * 2);var finalBmd = this.state.game.add.bitmapData(this.detectionRange * 2, this.detectionRange * 2);var sensorCircleRadius = this.detectionRange * GlobalVariables.pixelToKilometerRatio;var mask = new Phaser.Image(this.state.game, 0, 0, 'collision
  6. I am trying to create functionality similar to a scratch off lottery ticket: you have an image in the background with another over the top and you can scratch off the top layer to reveal what lies underneath. So far I have come up with the below. It works fine in very up to date devices and in the iOS simulator, but is completely unusable (slow to respond) in anything less than cutting edge. Does anyone have any suggestions how this could be improved for better performance or alternatively, a completely different way to tackle the situation? var scratchState = {create: function(){ this.ma
  • Create New...