Как вырезать «дыру» внутри прямоугольного спрайта, чтобы увидеть спрайт внизу?(ActionScript 3) - PullRequest
4 голосов
/ 04 февраля 2010

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

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

Как мне поступить так динамически (т. Е. Динамически рисовать маскирующий спрайт и дыру с помощью графических вызовов Actionscript)?

Ответы [ 6 ]

7 голосов
/ 28 марта 2012

Я знаю, что это было давно, но только для людей, которые могут искать ту же проблему. На самом деле это довольно просто (если вы рисуете свой Sprite с классом графики).

1) Негибкое вырезание отверстий:

this.graphics.beginFill(0x666666);
this.graphics.drawRect(0,0,256, 256);
this.graphics.drawCircle(128,128,32);
this.graphics.endFill();

это создаст прямоугольник 256 на 256 с отверстием в 64 пикселя.

2) Резка гибких отверстий:

Очевидно, это не будет работать, если вы не используете графический класс. В этом случае я бы пошел с BlendMode.ERASE.

var spr:Sprite = new Sprite();
var msk:Sprite = new Sprite();

addChild(spr);
spr.addChild(msk)

spr.graphics.beginFill(0x666666);
spr.graphics.drawRect(0,0,256, 256);
spr.graphics.endFill();

msk.graphics.beginFill(0x000000);
msk.graphics.drawEllipse(0,0,64,64);
msk.graphics.endFill();
msk.x = 128;
msk.y = 128;

spr.blendMode = BlendMode.LAYER;
msk.blendMode = BlendMode.ERASE;

При использовании BlendMode.ERASE вы должны ВСЕГДА установить режим смешивания родительского контейнера в BlendMode.LAYER, иначе он не будет работать.

Я надеюсь, что это может кому-то помочь

2 голосов
/ 04 июля 2013

Если я правильно помню, если вы нарисуете два перекрывающихся объекта на одной и той же графике без остановки заливки, они будут работать почти так же, как blendmode.erase. Псевдокод будет выглядеть так:

graphics.beginFill (any color, any alpha);
graphics.drawRect(0,0,256, 256);
graphics.drawRect(128,128,64, 64);
graphics.endfill ();

Если это действительно работает (и я думаю, что я использовал это решение много лет назад и совсем недавно увидел, что SVG-файлы работают таким образом), это должно дать вам гораздо лучшую производительность.

РЕДАКТИРОВАТЬ: Я только что использовал это сам в одной из моих игр.

0 голосов
/ 17 апреля 2014

В случае, если кому-то нужно иметь градиентное отверстие, можно использовать трюк от Раймундаса. Допустим, вам нужен эллиптический градиент, идущий изнутри наружу (внутренний радиус альфа = 0, внешний радиус альфа = 1).

Сначала нарисуйте фон без эллипса

var gfx:Graphics;
gfx.clear();
gfx.beginFill(color, alpha );
gfx.drawRect(0, 0, width, height); // fullscreen

gfx.drawEllipse(e_x, e_y, e_width, e_height); // trick - drawn in the same beginFill

gfx.endFill();

Затем нарисуйте эллипс градиента внутри результирующего отверстия!

var mat : Matrix = new Matrix();
mat.createGradientBox(width, height, 0, e_x, e_y);

gfx.lineStyle(); // I think it resets lineStyle
gfx.beginGradientFill(GradientType.RADIAL, colors, alphas, ratios, mat);
gfx.drawEllipse(e_x, e_y, width, height);
gfx.endFill();

Эллипс будет точно совпадать с отверстием, с точностью до пикселя.

0 голосов
/ 08 февраля 2010

Проверьте этот метод, он учитывает дополнительный параметр "дыры".Это найдено в классе ProgrammaticSkin гибкой платформы.

http://opensource.adobe.com/svn/opensource/flex/sdk/trunk/frameworks/projects/framework/src/mx/skins/ProgrammaticSkin.as

/**
     *  Programatically draws a rectangle into this skin's Graphics object.
     *
     *  <p>The rectangle can have rounded corners.
     *  Its edges are stroked with the current line style
     *  of the Graphics object.
     *  It can have a solid color fill, a gradient fill, or no fill.
     *  A solid fill can have an alpha transparency.
     *  A gradient fill can be linear or radial. You can specify
     *  up to 15 colors and alpha values at specified points along
     *  the gradient, and you can specify a rotation angle
     *  or transformation matrix for the gradient.
     *  Finally, the rectangle can have a rounded rectangular hole
     *  carved out of it.</p>
     *
     *  <p>This versatile rectangle-drawing routine is used by many skins.
     *  It calls the <code>drawRect()</code> or
     *  <code>drawRoundRect()</code>
     *  methods (in the flash.display.Graphics class) to draw into this
     *  skin's Graphics object.</p>
     *
     *  @param x Horizontal position of upper-left corner
     *  of rectangle within this skin.
     *
     *  @param y Vertical position of upper-left corner
     *  of rectangle within this skin.
     *
     *  @param width Width of rectangle, in pixels.
     *
     *  @param height Height of rectangle, in pixels.
     *
     *  @param cornerRadius Corner radius/radii of rectangle.
     *  Can be <code>null</code>, a Number, or an Object.
     *  If it is <code>null</code>, it specifies that the corners should be square
     *  rather than rounded.
     *  If it is a Number, it specifies the same radius, in pixels,
     *  for all four corners.
     *  If it is an Object, it should have properties named
     *  <code>tl</code>, <code>tr</code>, <code>bl</code>, and
     *  <code>br</code>, whose values are Numbers specifying
     *  the radius, in pixels, for the top left, top right,
     *  bottom left, and bottom right corners.
     *  For example, you can pass a plain Object such as
     *  <code>{ tl: 5, tr: 5, bl: 0, br: 0 }</code>.
     *  The default value is null (square corners).
     *
     *  @param color The RGB color(s) for the fill.
     *  Can be <code>null</code>, a uint, or an Array.
     *  If it is <code>null</code>, the rectangle not filled.
     *  If it is a uint, it specifies an RGB fill color.
     *  For example, pass <code>0xFF0000</code> to fill with red.
     *  If it is an Array, it should contain uints
     *  specifying the gradient colors.
     *  For example, pass <code>[ 0xFF0000, 0xFFFF00, 0x0000FF ]</code>
     *  to fill with a red-to-yellow-to-blue gradient.
     *  You can specify up to 15 colors in the gradient.
     *  The default value is null (no fill).
     *
     *  @param alpha Alpha value(s) for the fill.
     *  Can be null, a Number, or an Array.
     *  This argument is ignored if <code>color</code> is null.
     *  If <code>color</code> is a uint specifying an RGB fill color,
     *  then <code>alpha</code> should be a Number specifying
     *  the transparency of the fill, where 0.0 is completely transparent
     *  and 1.0 is completely opaque.
     *  You can also pass null instead of 1.0 in this case
     *  to specify complete opaqueness.
     *  If <code>color</code> is an Array specifying gradient colors,
     *  then <code>alpha</code> should be an Array of Numbers, of the
     *  same length, that specifies the corresponding alpha values
     *  for the gradient.
     *  In this case, the default value is <code>null</code> (completely opaque).
     *
     *  @param gradientMatrix Matrix object used for the gradient fill. 
     *  The utility methods <code>horizontalGradientMatrix()</code>, 
     *  <code>verticalGradientMatrix()</code>, and
     *  <code>rotatedGradientMatrix()</code> can be used to create the value for 
     *  this parameter.
     *
     *  @param gradientType Type of gradient fill. The possible values are
     *  <code>GradientType.LINEAR</code> or <code>GradientType.RADIAL</code>.
     *  (The GradientType class is in the package flash.display.)
     *
     *  @param gradientRatios (optional default [0,255])
     *  Specifies the distribution of colors. The number of entries must match
     *  the number of colors defined in the <code>color</code> parameter.
     *  Each value defines the percentage of the width where the color is 
     *  sampled at 100%. The value 0 represents the left-hand position in 
     *  the gradient box, and 255 represents the right-hand position in the 
     *  gradient box. 
     *
     *  @param hole (optional) A rounded rectangular hole
     *  that should be carved out of the middle
     *  of the otherwise solid rounded rectangle
     *  { x: #, y: #, w: #, h: #, r: # or { br: #, bl: #, tl: #, tr: # } }
     *
     *  @see flash.display.Graphics#beginGradientFill()
     *  
     *  @langversion 3.0
     *  @playerversion Flash 9
     *  @playerversion AIR 1.1
     *  @productversion Flex 3
     */
    protected function drawRoundRect(
                            x:Number, y:Number, width:Number, height:Number,
                            cornerRadius:Object = null,
                            color:Object = null,
                            alpha:Object = null,
                            gradientMatrix:Matrix = null,
                            gradientType:String = "linear",
                            gradientRatios:Array /* of Number */ = null,
                            hole:Object = null):void
    {
        var g:Graphics = graphics;

        // Quick exit if weight or height is zero.
        // This happens when scaling a component to a very small value,
        // which then gets rounded to 0.
        if (width == 0 || height == 0)
            return;

        // If color is an object then allow for complex fills.
        if (color !== null)
        {
            if (color is uint)
            {
                g.beginFill(uint(color), Number(alpha));
            }
            else if (color is Array)
            {
                var alphas:Array = alpha is Array ?
                                   alpha as Array :
                                   [ alpha, alpha ];

                if (!gradientRatios)
                    gradientRatios = [ 0, 0xFF ];

                g.beginGradientFill(gradientType,
                                    color as Array, alphas,
                                    gradientRatios, gradientMatrix);
            }
        }

        var ellipseSize:Number;

        // Stroke the rectangle.
        if (!cornerRadius)
        {
            g.drawRect(x, y, width, height);
        }
        else if (cornerRadius is Number)
        {
            ellipseSize = Number(cornerRadius) * 2;
            g.drawRoundRect(x, y, width, height, 
                            ellipseSize, ellipseSize);
        }
        else
        {
            GraphicsUtil.drawRoundRectComplex(g,
                                   x, y, width, height,
                                   cornerRadius.tl, cornerRadius.tr,
                                   cornerRadius.bl, cornerRadius.br);
        }

        // Carve a rectangular hole out of the middle of the rounded rect.
        if (hole)
        {
            var holeR:Object = hole.r;
            if (holeR is Number)
            {
                ellipseSize = Number(holeR) * 2;
                g.drawRoundRect(hole.x, hole.y, hole.w, hole.h, 
                                ellipseSize, ellipseSize);
            }
            else
            {
                GraphicsUtil.drawRoundRectComplex(g,
                                       hole.x, hole.y, hole.w, hole.h,
                                       holeR.tl, holeR.tr, holeR.bl, holeR.br);
            }   
        }

        if (color !== null)
            g.endFill();
    }       
}
0 голосов
/ 04 февраля 2010

ОК, то, что я хочу, можно сделать так же просто, как дважды вызвать drawRect на полупрозрачном слое ... один раз, чтобы нарисовать полупрозрачный прямоугольник, и снова, чтобы нарисовать «дыру»

Подробности здесь: http://www.actionscript.org/forums/showthread.php3?p=965632

Не совсем маска, но достаточно для моих целей.

0 голосов
/ 04 февраля 2010

Не разработчик AS, но взгляните на это: http://code.google.com/p/gpcas/

Это должно позволить вам выполнять логические операции "вырезания" для двух полигонов.

...