Where can I find a good tutorial to replicate Game Maker's surfaces and blend modes in XNA?

Question

I know Game Maker's surfaces exist in XNA (It's more the othe way around, XNA's surfaces exist in Game Maker), same thing for blend modes, since (I think) they both use DirectX.

This is the question: "Where can I find a good tutorial to replicate Game Maker's surfaces and blend modes in XNA?"

I'm using XNA 4.0 and Game Maker 8.1 Pro.

Background

I'm slowly moving from Game Maker to... Something else.

I've learned some good C++ but DirectX is hardcore and OpenGL needs some pretty good understanding of the language to be able to use it correctly.

XNA and C# together seemed like a good middle but the documentation is hard to understand for a newb like me.

In the end, I chose to focus on XNA.

Answer 1

Here's a custom BlendState that should do the same as Game Maker's bm_subtract does, based on the post found here. Here's a complete example with combining two RenderTarget2Ds, so you also see how they work in practice.

private GraphicsDeviceManager graphics;

private SpriteBatch spriteBatch;

private RenderTarget2D sprites;

private RenderTarget2D shadows;

private readonly BlendState blendStateSutractive = new BlendState
{
    ColorSourceBlend = Blend.Zero,
    ColorDestinationBlend = Blend.InverseSourceColor,
    ColorBlendFunction = BlendFunction.Subtract,
    AlphaSourceBlend = Blend.Zero,                    // Not sure if these are needed.
    AlphaDestinationBlend = Blend.InverseSourceColor, // Not sure if these are needed.
    AlphaBlendFunction = BlendFunction.Subtract       // Not sure if these are needed.
};

public Game1()
{
    this.graphics = new GraphicsDeviceManager(this);
    this.graphics.PreferredBackBufferWidth = 1280;
    this.graphics.PreferredBackBufferHeight = 720;
}

protected override void LoadContent()
{
    this.spriteBatch = new SpriteBatch(this.GraphicsDevice);
    this.sprites = new RenderTarget2D(this.GraphicsDevice, this.graphics.PreferredBackBufferWidth, this.graphics.PreferredBackBufferHeight);
    this.shadows = new RenderTarget2D(this.GraphicsDevice, this.graphics.PreferredBackBufferWidth, this.graphics.PreferredBackBufferHeight);
}

protected override void Draw(GameTime gameTime)
{
    // We make it so future drawing is done to the sprites RenderTarget2D.
    this.GraphicsDevice.SetRenderTarget(this.sprites);
    // Then we clear it to one color.
    this.GraphicsDevice.Clear(Color.Black);
    this.spriteBatch.Begin(SpriteSortMode.Deferred, BlendState.AlphaBlend);

    // Here you draw your main sprites/textures/whatever.

    this.spriteBatch.End();


    // We make it so future drawing is done to the shadows RenderTarget2D.
    this.GraphicsDevice.SetRenderTarget(this.shadows);
    // Then we clear it to one color, don't know if this should be black or white.
    this.GraphicsDevice.Clear(Color.Black);
    this.spriteBatch.Begin(SpriteSortMode.Deferred, BlendState.AlphaBlend);

    // And here you draw whatever you need drawn subtractively.

    this.spriteBatch.End();


    // We then reset to the main RenderTarget2D.
    this.GraphicsDevice.SetRenderTarget(null);
    // No need to clear, as the other two RenderTarget2Ds will cover it completely.

    this.spriteBatch.Begin(SpriteSortMode.Immediate, BlendState.Opaque);
    this.spriteBatch.Draw(this.sprites, Vector2.Zero, Color.White);
    this.spriteBatch.End();

    this.spriteBatch.Begin(SpriteSortMode.Deferred, this.blendStateSubtractive);
    this.spriteBatch.Draw(this.shadows, Vector2.Zero, Color.White);
    this.spriteBatch.End();
}

If you have any questions, fire away in the comments section below this answer. And remember to mark whatever answer your satisfied with correct, so future visitors know which answer to look at.

Answer 2

You can use the RenderTarget2D class to draw parts of your game to a bitmap, which you can then apply operations to to get the desired result

check these pages: http://msdn.microsoft.com/en-us/library/microsoft.xna.framework.graphics.rendertarget2d_members%28v=XNAGameStudio.40%29.aspx

You might start here to learn the concepts: http://www.switchonthecode.com/tutorials/csharp-tutorial-convert-a-color-image-to-grayscale