Is there a way to apply an alpha mask to a FlxCamera? - camera

Question

I'm trying to implement this camera but one of the obstacles I'm facing right now, is the merging of two cameras (what he describes here).
At first I tried to make a non-rectangular camera, but I don't think it's possible without changing a lot of things in the way HaxeFlixel renders.
And then I found the alphaMask() function in the FlxSpriteUtil package and I think it would be a better solution.
Not only would it solve my problem, it would actually permit all kinds of funky-shaped cameras, you just have to create the right mask!
But the new problem is that I don't know how to (and again, if it's possible without changing a bit the FlxCamera) apply it to the camera.
Internally, the FlxCamera might use a FlxSprite, but only in blit render mode, and I am in tiles render mode (haven't found how to change, not good enough solution in my opinion), which uses a Flash Sprite instead and I don't know what to do with it.
So in short, do you have an idea how to apply an AlphaMask to a FlxCamera? Or another way to achieve what I'm trying to do?
PS: If you want to have a look at the (ugly and frenchly commented) code, it's over here!

Answer 1

You can render the contents of a FlxCamera to a FlxSprite (though it does require conditional code based on the render mode). The TurnBasedRPG tutorial game uses this for the wave effect in the combat screen, see CombatHUD.hx:
if (FlxG.renderBlit)
screenPixels.copyPixels(FlxG.camera.buffer, FlxG.camera.buffer.rect, new Point());
else
screenPixels.draw(FlxG.camera.canvas, new Matrix(1, 0, 0, 1, 0, 0));
Here's a code example that uses this to create a HaxeFlixel-shaped camera:
package;
import flixel.tweens.FlxTween;
import flash.geom.Matrix;
import flixel.FlxCamera;
import flixel.FlxG;
import flixel.FlxSprite;
import flixel.FlxState;
import flixel.graphics.FlxGraphic;
import flixel.system.FlxAssets;
import flixel.util.FlxColor;
import openfl.geom.Point;
using flixel.util.FlxSpriteUtil;
class PlayState extends FlxState
{
static inline var CAMERA_SIZE = 100;
var maskedCamera:FlxCamera;
var cameraSprite:FlxSprite;
var mask:FlxSprite;
override public function create():Void
{
super.create();
maskedCamera = new FlxCamera(0, 0, CAMERA_SIZE, CAMERA_SIZE);
maskedCamera.bgColor = FlxColor.WHITE;
maskedCamera.scroll.x = 50;
FlxG.cameras.add(maskedCamera);
// this is a bit of a hack - we need this camera to be rendered so we can copy the content
// onto the sprite, but we don't want to actually *see* it, so just move it off-screen
maskedCamera.x = FlxG.width;
cameraSprite = new FlxSprite();
cameraSprite.makeGraphic(CAMERA_SIZE, CAMERA_SIZE, FlxColor.WHITE, true);
cameraSprite.x = 50;
cameraSprite.y = 100;
cameraSprite.cameras = [FlxG.camera];
add(cameraSprite);
mask = new FlxSprite(FlxGraphic.fromClass(GraphicLogo));
var redSquare = new FlxSprite(0, 25);
redSquare.makeGraphic(50, 50, FlxColor.RED);
add(redSquare);
FlxTween.tween(redSquare, {x: 150}, 1, {type: FlxTween.PINGPONG});
}
override public function update(elapsed:Float):Void
{
super.update(elapsed);
var pixels = cameraSprite.pixels;
if (FlxG.renderBlit)
pixels.copyPixels(maskedCamera.buffer, maskedCamera.buffer.rect, new Point());
else
pixels.draw(maskedCamera.canvas);
cameraSprite.alphaMaskFlxSprite(mask, cameraSprite);
}
}