AS3 掩码奇怪的结果

Question

我正在为我正在制作的益智游戏的一部分使用动态遮罩。

我有一个包含 6 块的测试拼图。谜题分为 3 层：

• 黑色形状 = 这是你放棋子的地方
• finished pieces = 这是一个显示找到的部分的组合结果的层
• 散件 = 可以移动到位。

黑色的形状没问题，只是对结果精灵进行简单的颜色变换。

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

我想到的一种方法是在完整的结果精灵上放置一个蒙版，以便只有找到的部分可见。我会在碎片周围添加一个 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，

致以诚挚的问候， 杰伦

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