AS3面具奇怪的结果

Question

我正在为我正在制作的益智游戏的一部分进行动态遮蔽。

我有一个6件套的测试拼图。这个难题有三层：

• 黑色形状=这是你放置你的作品的地方
• 成品件=这是显示已找到件的组合结果的图层
• 松散的碎片=可以移动到位。

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

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

我想到的一种方法是在完整的结果精灵上放置一个遮罩，这样只有找到的碎片可见。我会在碎片周围添加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;

完整形状和面具形状如下所示：

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

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

提前Tnx，

亲切的问候， 的Jeroen

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;
}