Search the Community

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 * Math.PI) / 180; }; var drawPie = function () { bmd.clear(); context.save(); var centerX = Math.floor(w / 2); var centerY = Math.floor(w / 2); var radius = Math.floor(w / 2); var startingAngle = degreesToRadians(270); var arcSize = degreesToRadians(size); var endingAngle = startingAngle + arcSize; context.beginPath(); context.moveTo(centerX, centerY); context.arc(centerX, centerY, radius, startingAngle, endingAngle, false); context.closePath(); context.fillStyle = 'rgba(0, 0, 0, 1)'; context.fill(); context.restore(); bmd.render(); }; drawPie(); game.cache.addBitmapData("loaderMaskBMD", bmd); var maskImage = game.add.image(348, 221, bmd); console.log("maskImage", maskImage); // doesn't work //game.cache.addImage("loaderMaskImage", maskImage); game.load.onFileComplete.add(function (progress) { console.log("load", progress); size = (360 / 100) * progress; drawPie(); }); // doesn't work //mask.alphaMask('preloaderRingLoaded', maskImage); // doesn't work //mask.alphaMask('preloaderRingLoaded', game.cache.getBitmapData("loaderMaskBMD")); // doesn't work //mask.alphaMask('preloaderRingLoaded', game.cache.getImage("loaderMaskImage")); var sp = game.add.sprite(348, 221, mask); sp.width = w; sp.height = h; console.log("sp", sp);},

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 image is a left-to-right gradient ranging from transparent to solid black. What I'm trying to achieve is to make the green image transition into the blue image without, as I say, using a separate canvas and then transplanting the result into the main canvas. Here's the JS that I'm using at the moment to achieve this in a separate canvas: context.drawImage(sprites, 96, 0, 32, 16, 0, 0, 32, 16); // Draw bitmap image context.globalCompositeOperation = 'source-in'; context.drawImage(sprites, 0, 0, 32, 16, 0, 0, 32, 16); // Draw green image over the bitmask context.globalCompositeOperation = 'destination-over'; context.drawImage(sprites, 32, 0, 32, 16, 0, 0, 32, 16); // Draw blue image under the current canvas content I should probably mention that all my sprites are in a single image referenced by 'sprites'. The reason why I'm forced to use a separate canvas is because I need to *first* render my bitmask on a transparent canvas (which my main canvas isn't, there's a solid background colour) in order to retain the bitmask's transparency. In this contrived example I could just create a transparent image sized gap in the correct region of the main canvas, then perform all my operations there. This is fine when the shapes I'm rendering cover the entire sprite rectangle, although I have a case where I'm rendering circle & diamond shaped sprites and this would result in transparent gaps appearing around the resulting shape in the canvas. I've been referencing this article in my use of 'globalCompositeOperation': https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation Am I approaching this in a reasonable way or is there a better tactic to achieve this?

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 = game.make.bitmapData(2141, 800); bmd.alphaMask('BG_Dark', 'Mask'); game.add.image(0, 0, bmd); Now it simply places both the BG and Mask at 0,0. But I need the mask to be, for example, at 300,300;

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?

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, 'collisionCircle', 0); mask.height = sensorCircleRadius * 2;mask.width = sensorCircleRadius * 2;finalBmd.alphaMask(bmd, mask);

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.maskPoint = game.add.image(0,0,'mask'); this.bmd = game.add.bitmapData(game.width, game.height);this.bmd.addToWorld(); this.bmd.smoothed = false; game.input.addMoveCallback(this.scratch, this);},update: function(){ },scratch: function(pointer,x,y){if (pointer.isDown){if (this.activeMask){this.activeMask.destroy();}this.bmd.draw(this.maskPoint,x-50,y-50);this.mask = game.make.bitmapData(game.width, game.height);this.mask.alphaMask('atlas2', this.bmd);this.activeMask = game.add.image(0,0,this.mask);}}}