Il modo migliore per mascherare gli sprite 2D in XNA?

Attualmente sto cercando di mascherare alcuni sprite. Invece di spiegarlo a parole, ho inventato alcune immagini di esempio:

L'area da mascherare (in bianco)

Ora, lo sprite rosso che deve essere ritagliato.

Il risultato finale

Ora, sono consapevole che in XNA puoi fare due cose per ottenere questo risultato:

1. Utilizzare il buffer di stencil.
2. Usa un Pixel Shader.

Ho provato a fare un pixel shader, che essenzialmente ha fatto questo:

float4 main(float2 texCoord : TEXCOORD0) : COLOR0
{
    float4 tex = tex2D(BaseTexture, texCoord);
    float4 bitMask = tex2D(MaskTexture, texCoord);

    if (bitMask.a > 0)
    { 
        return float4(tex.r, tex.g, tex.b, tex.a);
    }
    else
    {
        return float4(0, 0, 0, 0);
    }
}

Questo sembra ritagliare le immagini (anche se, non corretto una volta che l'immagine inizia a muoversi), ma il mio problema è che le immagini sono in costante movimento (non sono statiche), quindi questo ritaglio deve essere dinamico.

C'è un modo per modificare il codice shader per tener conto della sua posizione?

In alternativa, ho letto sull'uso dello Stencil Buffer, ma la maggior parte dei campioni sembra dipendere dall'uso di un rendertarget, cosa che non voglio davvero fare. (Sto già usando 3 o 4 per il resto del gioco e aggiungerne un altro sembra eccessivo)

L'unico tutorial che ho scoperto che non usa Rendertargets è quello del blog di Shawn Hargreaves qui. Il problema con quello, però, è che è per XNA 3.1 e non sembra tradursi bene in XNA 4.0.

Mi sembra che il pixel shader sia la strada da percorrere, ma non sono sicuro di come ottenere il posizionamento corretto. Credo che dovrei cambiare le mie coordinate sullo schermo (qualcosa come 500, 500) per essere tra 0 e 1 per le coordinate dello shader. Il mio unico problema è cercare di capire come usare correttamente le coordinate trasformate.

Grazie in anticipo per qualsiasi aiuto!

Puoi utilizzare il tuo approccio pixel shader ma è incompleto.

Dovrai anche aggiungere alcuni parametri che informano il pixel shader dove desideri posizionare lo stencil.

sampler BaseTexture : register(s0);
sampler MaskTexture : register(s1) {
    addressU = Clamp;
    addressV = Clamp;
};

//All of these variables are pixel values
//Feel free to replace with float2 variables
float MaskLocationX;
float MaskLocationY;
float MaskWidth;
float MaskHeight;
float BaseTextureLocationX;  //This is where your texture is to be drawn
float BaseTextureLocationY;  //texCoord is different, it is the current pixel
float BaseTextureWidth;
float BaseTextureHeight;

float4 main(float2 texCoord : TEXCOORD0) : COLOR0
{
    //We need to calculate where in terms of percentage to sample from the MaskTexture
    float maskPixelX = texCoord.x * BaseTextureWidth + BaseTextureLocationX;
    float maskPixelY = texCoord.y * BaseTextureHeight + BaseTextureLocationY;
    float2 maskCoord = float2((maskPixelX - MaskLocationX) / MaskWidth, (maskPixelY - MaskLocationY) / MaskHeight);
    float4 bitMask = tex2D(MaskTexture, maskCoord);

    float4 tex = tex2D(BaseTexture, texCoord);

    //It is a good idea to avoid conditional statements in a pixel shader if you can use math instead.
    return tex * (bitMask.a);
    //Alternate calculation to invert the mask, you could make this a parameter too if you wanted
    //return tex * (1.0 - bitMask.a);
}

Nel tuo codice C # passi le variabili al pixel shader prima della SpriteBatch.Drawchiamata in questo modo:

maskEffect.Parameters["MaskWidth"].SetValue(800);
maskEffect.Parameters["MaskHeight"].SetValue(600);

Il primo passo è dire alla scheda grafica che abbiamo bisogno del buffer di stencil. Per fare ciò quando crei GraphicsDeviceManager, impostiamo PreferredDepthStencilFormat su DepthFormat.Depth24Stencil8 in modo che ci sia effettivamente uno stencil su cui scrivere.

graphics = new GraphicsDeviceManager(this) {
    PreferredDepthStencilFormat = DepthFormat.Depth24Stencil8
};

AlphaTestEffect viene utilizzato per impostare il sistema di coordinate e filtrare i pixel con alfa che superano il test alfa. Non imposteremo alcun filtro e il sistema di coordinate sulla porta di visualizzazione.

var m = Matrix.CreateOrthographicOffCenter(0,
    graphics.GraphicsDevice.PresentationParameters.BackBufferWidth,
    graphics.GraphicsDevice.PresentationParameters.BackBufferHeight,
    0, 0, 1
);
var a = new AlphaTestEffect(graphics.GraphicsDevice) {
    Projection = m
};

Successivamente è necessario impostare due DepthStencilStates. Questi stati determinano quando lo SpriteBatch esegue il rendering sullo stencil e quando lo SpriteBatch esegue il rendering sul BackBuffer. Siamo principalmente interessati a due variabili StencilFunction e StencilPass.

• StencilFunction determina quando SpriteBatch disegna singoli pixel e quando verranno ignorati.
• StencilPass determina quando i pixel disegnati hanno effetto sullo Stencil.

Per il primo DepthStencilState impostiamo StencilFunction su CompareFunction. Questo fa sì che lo StencilTest abbia esito positivo e quando lo StencilTest SpriteBatch esegue il rendering di quel pixel. StencilPass è impostato su StencilOperation. Sostituire significa che quando lo StencilTest ha esito positivo, quel pixel verrà scritto nello StencilBuffer con il valore di ReferenceStencil.

var s1 = new DepthStencilState {
    StencilEnable = true,
    StencilFunction = CompareFunction.Always,
    StencilPass = StencilOperation.Replace,
    ReferenceStencil = 1,
    DepthBufferEnable = false,
};

In breve, lo StencilTest passa sempre, l'immagine viene disegnata sullo schermo normalmente e per i pixel disegnati sullo schermo un valore 1 viene memorizzato nello StencilBuffer.

Il secondo DepthStencilState è leggermente più complicato. Questa volta vogliamo disegnare sullo schermo solo quando il valore in StencilBuffer è. Per ottenere ciò, impostiamo StencilFunction su CompareFunction.LessEqual e ReferenceStencil su 1. Ciò significa che quando il valore nel buffer dello stencil è 1, StencilTest avrà esito positivo. Impostazione di StencilPass su StencilOperation. Keep fa sì che StencilBuffer non si aggiorni. Questo ci consente di disegnare più volte utilizzando la stessa maschera.

var s2 = new DepthStencilState {
    StencilEnable = true,
    StencilFunction = CompareFunction.LessEqual,
    StencilPass = StencilOperation.Keep,
    ReferenceStencil = 1,
    DepthBufferEnable = false,
};

In breve, StencilTest passa solo quando StencilBuffer è inferiore a 1 (i pixel alfa della maschera) e non ha effetto su StencilBuffer.

Ora che abbiamo impostato i nostri DepthStencilStates. Possiamo effettivamente disegnare usando una maschera. Disegna semplicemente la maschera usando il primo DepthStencilState. Ciò avrà effetto sia sul BackBuffer che sullo StencilBuffer. Ora che il buffer dello stencil ha un valore di 0 in cui la maschera aveva la trasparenza e 1 in cui conteneva il colore, possiamo usare StencilBuffer per mascherare le immagini successive.

spriteBatch.Begin(SpriteSortMode.Immediate, null, null, s1, null, a);
spriteBatch.Draw(huh, Vector2.Zero, Color.White); //The mask                                   
spriteBatch.End();

Il secondo SpriteBatch utilizza il secondo DepthStencilStates. Indipendentemente da ciò che disegni, solo i pixel in cui StencilBuffer è impostato su 1 supereranno il test dello stencil e verranno disegnati sullo schermo.

spriteBatch.Begin(SpriteSortMode.Immediate, null, null, s2, null, a);            
spriteBatch.Draw(color, Vector2.Zero, Color.White); //The background
spriteBatch.End();

Di seguito è riportato l'intero codice nel metodo Draw, non dimenticare di impostare PreferredDepthStencilFormat = DepthFormat.Depth24Stencil8 nel costruttore del gioco.

GraphicsDevice.Clear(ClearOptions.Target 
    | ClearOptions.Stencil, Color.Transparent, 0, 0);

var m = Matrix.CreateOrthographicOffCenter(0,
    graphics.GraphicsDevice.PresentationParameters.BackBufferWidth,
    graphics.GraphicsDevice.PresentationParameters.BackBufferHeight,
    0, 0, 1
);

var a = new AlphaTestEffect(graphics.GraphicsDevice) {
    Projection = m
};

var s1 = new DepthStencilState {
    StencilEnable = true,
    StencilFunction = CompareFunction.Always,
    StencilPass = StencilOperation.Replace,
    ReferenceStencil = 1,
    DepthBufferEnable = false,
};

var s2 = new DepthStencilState {
    StencilEnable = true,
    StencilFunction = CompareFunction.LessEqual,
    StencilPass = StencilOperation.Keep,
    ReferenceStencil = 1,
    DepthBufferEnable = false,
};

spriteBatch.Begin(SpriteSortMode.Immediate, null, null, s1, null, a);
spriteBatch.Draw(huh, Vector2.Zero, Color.White); //The mask                                   
spriteBatch.End();

spriteBatch.Begin(SpriteSortMode.Immediate, null, null, s2, null, a);            
spriteBatch.Draw(color, Vector2.Zero, Color.White); //The background
spriteBatch.End();

Nella risposta sopra , sono successe alcune cose strane quando ho fatto esattamente come spiegato.

L'unica cosa di cui avevo bisogno era entrambe DepthStencilStates.

var s1 = new DepthStencilState {
    StencilEnable = true,
    StencilFunction = CompareFunction.Always,
    StencilPass = StencilOperation.Replace,
    ReferenceStencil = 1,
    DepthBufferEnable = false,
};

var s2 = new DepthStencilState {
    StencilEnable = true,
    StencilFunction = CompareFunction.LessEqual,
    StencilPass = StencilOperation.Keep,
    ReferenceStencil = 1,
    DepthBufferEnable = false,
};

E i sorteggi senza il AlphaTestEffect.

spriteBatch.Begin(SpriteSortMode.Immediate, null, null, s1, null, null);
spriteBatch.Draw(huh, Vector2.Zero, Color.White); //The mask                                   
spriteBatch.End();

spriteBatch.Begin(SpriteSortMode.Immediate, null, null, s2, null, null);            
spriteBatch.Draw(color, Vector2.Zero, Color.White); //The background
spriteBatch.End();

E tutto andava bene come previsto.