AS3 маска странный результат

Question

Я играю с динамическим маскированием для части головоломки, которую я создаю.

У меня есть тестовая головоломка с 6 кусочками.Загадка существует из 3 слоев:

• черная фигура = это место, куда вы кладете свои кусочки
• готовые кусочки = это слой, показывающий объединенный результат найденных кусочков
• свободные кусочки = могут быть перемещены на место.

Черная фигура не проблема, это просто простое преобразование цвета на результирующем спрайте.кусочки в одном спрайте, я замечаю меньшие, чем волосяные промежутки между кусочками.Это выглядит не слишком хорошо, поэтому я думал об этом:

Один из способов, о котором я подумал, - это наложить маску на законченный спрайт результата, чтобы были видны только найденные фрагменты.Я бы добавил границу в 1 пиксель вокруг кусочков, чтобы избежать зазоров в волосах.

Итак, я начал играть с масками:

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