AS3 掩码奇怪的结果

Question

我正在制作的益智游戏中使用动态遮罩。

我有一个有 6 块的测试拼图。拼图共有 3 层：

• 黑色形状 = 这是您放置碎片的地方
• 完成的碎片 = 这是显示找到的碎片的组合结果
• 松散碎片 = 可以移动到位。

黑色形状没问题，这只是结果精灵上的简单颜色转换。

当我将完成的碎片组合成一个精灵时，我注意到碎片之间的间隙小于发际线。这看起来不太好，所以我一直在考虑解决这个问题的方法：

我想到的一种方法是在完整的结果精灵上放置一个遮罩，以便只有找到的部分可见。我会在碎片周围添加 1px 边框以避免细线间隙。

因此，我开始尝试使用蒙版：

// test
var test: Sprite = new TestSprite() as Sprite;
test.x = test.y = 100;
addChild(test);

// puzzle pieces            
var pieces: Vector.<Sprite> = new Vector.<Sprite>;
pieces.push(new TurtlePiece1());
pieces.push(new TurtlePiece2());
//pieces.push(new TurtlePiece3());
//pieces.push(new TurtlePiece4());
pieces.push(new TurtlePiece5());
pieces.push(new TurtlePiece6());

// finished locations for each piece
var points: Vector.<Point> = new Vector.<Point>;
points.push(new Point(0.3, 7.25));
points.push(new Point(110.35, 0));
//points.push(new Point(98.25, 52.6));
//points.push(new Point(23.95, 69.30));
points.push(new Point(157.25, 61.95));
points.push(new Point(146.7, 100.70));

var mask: Sprite = new Sprite();
for (var i: int = 0; i < pieces.length; i++) {
    pieces[i].x = points[i].x;
    pieces[i].y = points[i].y;
    mask.addChild(pieces[i]);
}
test.mask = mask;

完整形状和蒙版形状如下所示：

之后应用蒙版，它看起来像这样：

我尝试将其缓存为位图，但没有结果。任何人都知道问题可能是什么？

提前告知，

谨致问候， 杰罗恩

Answer 1

我明白你正在尝试做什么，但我不确定为什么它不适合你。我创建了一个类似的程序，它按预期工作：

//Imports
import flash.display.Shape;
import flash.display.Sprite;

//Draw Background Rect
var backgroundRect:Shape = new Shape();
backgroundRect.graphics.beginFill(0x000000, 1.0);
backgroundRect.graphics.drawRect(0, 0, stage.stageWidth, stage.stageHeight);
backgroundRect.graphics.endFill();

addChild(backgroundRect);

//Build Mask From Circles
var backgroundMask:Sprite = new Sprite();

var circleA:Shape = circle(50, 0xFF0000);
circleA.x = 50;
circleA.y = 50;

var circleB:Shape = circle(50, 0x00FF00);
circleB.x = 100;
circleB.y = 50;

var circleC:Shape = circle(50, 0x0000FF);
circleC.x = 150;
circleC.y = 75;

backgroundMask.addChild(circleA);
backgroundMask.addChild(circleB);
backgroundMask.addChild(circleC);

addChild(backgroundMask);

//Assign Mask
backgroundRect.mask = backgroundMask;

//Create Circle
function circle(radius:uint, color:uint):Shape
{
    var result:Shape = new Shape();
    result.graphics.beginFill(color, 1.0);
    result.graphics.drawCircle(0, 0, radius);
    result.graphics.endFill();

    return result;
}

我唯一能想到的是您添加到蒙版精灵的片段会相互覆盖，类似于在单个图形调用中重叠两个或多个形状时发生的情况：

//Imports
import flash.display.Shape;
import flash.display.Sprite;

//Draw Circle
var circleA:Shape = circle(50, 0xFF0000);
circleA.x = 50;
circleA.y = 50;

addChild(circleA);

//Create Circle
function circle(radius:uint, color:uint):Shape
{
    var result:Shape = new Shape();
    result.graphics.beginFill(color, 1.0);
    result.graphics.drawCircle(0, 0, radius);
    result.graphics.drawCircle(50, 50, radius);
    result.graphics.endFill();

    return result;
}