วิธีที่ดีที่สุดในการปิดบังสไปรต์ 2D ใน XNA

ฉันกำลังพยายามปกปิดผีสางบ้าง แทนที่จะอธิบายเป็นคำฉันได้สร้างภาพตัวอย่าง:

บริเวณที่สวมหน้ากาก (สีขาว)

ทีนี้สไปรท์สีแดงที่ต้องถูกครอบตัด

ผลสุดท้าย

ตอนนี้ฉันทราบแล้วว่าใน XNA คุณสามารถทำสองสิ่งเพื่อบรรลุเป้าหมายนี้:

1. ใช้ Buffer ฉลุ
2. ใช้ Pixel Shader

ฉันได้ลองทำพิกเซลเชดเดอร์ซึ่งทำสิ่งนี้เป็นหลัก:

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

ดูเหมือนว่าจะครอบตัดรูปภาพ (ถึงแม้ว่าจะไม่ถูกต้องเมื่อรูปภาพเริ่มเคลื่อนไหว) แต่ปัญหาของฉันคือภาพเคลื่อนไหวตลอดเวลา (ไม่คงที่) ดังนั้นการครอบตัดนี้ต้องเป็นแบบไดนามิก

มีวิธีที่ฉันสามารถเปลี่ยนรหัส shader เพื่อพิจารณาว่าเป็นตำแหน่งหรือไม่

อีกวิธีหนึ่งคือฉันได้อ่านเกี่ยวกับการใช้ฉลุบัฟเฟอร์ แต่ตัวอย่างส่วนใหญ่ดูเหมือนจะใช้การเรนเดอร์เป้าหมายซึ่งฉันไม่ต้องการทำ (ฉันใช้เกม 3 หรือ 4 เกมที่เหลืออยู่แล้วและเพิ่มเกมอื่นที่ด้านบนของเกม)

กวดวิชาเดียวที่ฉันพบว่าไม่ได้ใช้ Rendertargets เป็นหนึ่งในบล็อกของ Shawn Hargreaves ที่นี่ ปัญหาของอันนั้นก็คือสำหรับ XNA 3.1 และดูเหมือนจะแปลได้ไม่ดีนักกับ XNA 4.0

สำหรับฉันแล้วดูเหมือนว่า pixel shader เป็นวิธีที่จะไป แต่ฉันไม่แน่ใจว่าจะทำให้การวางตำแหน่งถูกต้องได้อย่างไร ฉันเชื่อว่าฉันจะต้องเปลี่ยนพิกัดบนหน้าจอของฉัน (เช่น 500, 500) เพื่อให้อยู่ระหว่าง 0 ถึง 1 สำหรับพิกัด shader ปัญหาเดียวของฉันคือพยายามหาวิธีใช้พิกัดที่แปลงแล้วอย่างถูกต้อง

ขอบคุณล่วงหน้าสำหรับความช่วยเหลือใด ๆ !

คุณสามารถใช้วิธี Pixel Shader แต่ไม่สมบูรณ์

นอกจากนี้คุณยังจะต้องเพิ่มพารามิเตอร์บางอย่างเพื่อแจ้ง pixel shader ที่คุณต้องการให้ 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);
}

ในรหัส C # ของคุณคุณจะส่งผ่านตัวแปรไปยังตัวแบ่งพิกเซลก่อนที่จะSpriteBatch.Drawโทรออกดังนี้:

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

ขั้นตอนแรกคือการบอกกราฟิกการ์ดว่าเราต้องการบัฟเฟอร์ลายฉลุ ในการทำเช่นนี้เมื่อคุณสร้าง GraphicsDeviceManager เราได้ทำการตั้งค่า PreferredDepthStencilFormat เป็น DepthFormat.Depth24Stencil8 ดังนั้นจึงมี stencil สำหรับเขียน

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

AlphaTestEffect ใช้เพื่อตั้งค่าระบบพิกัดและกรองพิกเซลด้วยอัลฟาที่ผ่านการทดสอบอัลฟา เราจะไม่ตั้งค่าตัวกรองใด ๆ และตั้งค่าระบบพิกัดเป็นพอร์ตมุมมอง

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

ต่อไปเราต้องตั้งค่า DepthStencilStates สองรายการ สถานะเหล่านี้กำหนดเมื่อ SpriteBatch แสดงผลเป็น stencil และเมื่อ SpriteBatch แสดงผลเป็น BackBuffer เราสนใจในตัวแปรสองตัวคือ StencilFunction และ StencilPass

• StencilFunction กำหนดเมื่อ SpriteBatch จะวาดแต่ละพิกเซลและเมื่อพวกเขาจะถูกละเว้น
• StencilPass กำหนดเมื่อพิกเซลพิกเซลที่วาดมีผลกับลายฉลุ

สำหรับ DepthStencilState แรกที่เราตั้งค่า StencilFunction ให้เป็น CompareFunction นี่เป็นสาเหตุให้ StencilTest ประสบความสำเร็จและเมื่อ StencilTest SpriteBatch แสดงผลพิกเซลนั้น StencilPass ถูกตั้งค่าเป็น StencilOperation แทนที่ความหมายที่ว่าเมื่อ StencilTest ประสบความสำเร็จพิกเซลนั้นจะถูกเขียนไปที่ StencilBuffer ด้วยค่าของ ReferenceStencil

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

สรุปโดยย่อว่า StencilTest ส่งผ่านเสมอภาพจะถูกวาดไปที่หน้าจอตามปกติและสำหรับพิกเซลที่วาดไปที่หน้าจอค่า 1 จะถูกเก็บไว้ใน StencilBuffer

DepthStencilState ที่สองนั้นซับซ้อนกว่าเล็กน้อย ในครั้งนี้เราต้องการวาดลงบนหน้าจอเมื่อค่าใน StencilBuffer เป็นเท่านั้น เพื่อให้บรรลุผลดังกล่าวเราได้ตั้งค่า StencilFunction ให้เป็น CompareFunction.LessEqual และ ReferenceStencil เป็น 1 ซึ่งหมายความว่าเมื่อค่าในบัฟเฟอร์ stencil เท่ากับ 1 theStarTestTest จะประสบความสำเร็จ การตั้งค่า StencilPass เป็น TencOperation Keep ทำให้ SignatureBuffer ไม่อัปเดต สิ่งนี้ทำให้เราสามารถวาดได้หลายครั้งโดยใช้มาสก์เดียวกัน

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

กล่าวโดยสรุปเครื่องมือตรวจสอบ StencilTest จะส่งผ่านเฉพาะเมื่อ StencilBuffer น้อยกว่า 1 (พิกเซลอัลฟาจากมาสก์) และจะไม่มีผลกับเครื่องมือนี้

ตอนนี้เราได้ตั้งค่า DepthStencilStates ของเราแล้ว จริงๆแล้วเราสามารถวาดโดยใช้หน้ากาก เพียงวาดหน้ากากโดยใช้ DepthStencilState ตัวแรก สิ่งนี้จะมีผลกับทั้ง BackBuffer และ StencilBuffer ตอนนี้บัฟเฟอร์ stencil มีค่าเป็น 0 ซึ่งคุณ mask มีความโปร่งใสและ 1 ซึ่งมีสีที่เราสามารถใช้ StencilBuffer เพื่อปกปิดรูปภาพในภายหลัง

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

SpriteBatch ตัวที่สองใช้ DepthStencilStates ตัวที่สอง ไม่ว่าคุณจะวาดอะไรมีเพียงพิกเซลที่กำหนดให้ TencelBuffer เป็น 1 เท่านั้นที่จะผ่านการทดสอบ stencil และวาดลงบนหน้าจอ

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

ด้านล่างนี้คือรหัสทั้งหมดในวิธีการวาดอย่าลืมตั้งค่า PreferredDepthStencilFormat = DepthFormat.Depth24Stencil8 ใน Constructor ของเกม

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();

ในคำตอบข้างต้นมีสิ่งประหลาดเกิดขึ้นเมื่อฉันทำตามที่อธิบายไว้

สิ่งเดียวที่ฉันต้องการคือทั้งสอง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,
};

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();

และทุกอย่างก็ดีเหมือนที่คาดไว้