Riemers2DXNA18alphablending
The major issue with the result of the last chapter is that the explosion images are rendered in their original format to the screen, exactly as they are defined in the image file. As a result, the black borders are rendered on top of the contents already present in the backbuffer of our graphics card.
In this chapter, we will fix this by turning additive alpha blending on before the particles are rendered.
First a few words about alpha blending, in alpha blending you are interested in obtaining a new color for a pixel, given the following two factors:
- The SourceColor: The new color, coming from the image that is being requested to be drawn.
- The DestinationColor: The current color for that pixel that was already present in the backbuffer and is about to be overwritten.
Both colors are mixed together to obtain a new color for the pixel. In MonoGame, both the SourceColor and DestinanationColor are multiplied by a factor:
NewColor = SrcBlend * SrcColor + DestBlend * DestColorBoth SrcBlend and DestBlend can be defined by us, which By default MonoGame expects to come from the images by supplying transparency information for each pixel. Within images that support transparency (for example PNG's), next to the R,G and B channel each color has a corresponding A (Alpha) channel, which contains the transparency information (which is references as RGBA). Some image formats, like PNG, store this information while others, like JPG, do not.
Which brings us to the default alpha blending in MonoGame. By default, the SpriteBatch uses this Alpha value as the SrcBlend factor and the inverse value (1-SrcBlend) as the DestBlend, as follows:
NewColor = SrcAlpha * SrcColor + (1-SrcAlpha) * DestColorAn example of this is the image of our carriage which is not transparent for each pixel of the carriage itself and is fully transparent for all other pixels. So for the pixels of our carriage, we get this:
NewColor = 1 * SrcColor + 0 * DestColorWhich is the same as:
NewColor = SrcColorThis means that the carriage pixels will completely overwrite the colors already present in the backbuffer, exactly as it should be.
For the other pixels of the image, where A=0, we get this:
NewColor = 0*SrcColor + 1*DestColorWhich is the same as:
NewColor = DestColorSo these pixels will not change anything to the backbuffer. Any pixels with Alpha values between 0 and 1 will receive a mix of new (source) and old (destination) colors.
Enough about alpha blending for now, let us discuss the case of our explosion particles. Before rendering them we will change our SrcBlend and DestBlend in such a way that MonoGame will add the colors inside the explosion images to the colors already present in the backbuffer (instead of overwriting them as they do now).
As you can see the Explosion texture has large black sections, Black is actually not a color at all as it is actually a total lack of color: R,G,B = 0,0,0. So when we add this color to the color already in the backbuffer, this will have no impact. The more we get to the center of the image, the more red-yellow the image becomes. These pixels, when rendered, will add their R,G,B values to the colors already present in the backbuffer. When we render a lot of them on top of each other, in the center we will end up with a bright white-yellow spot in the center, caused by the colors of all explosion images added together!
The only question that remains is: how do we add all the colors of all images together? The answer is in setting both blending factors to 1:
NewColor = 1 * SrcColor + 1 * DestColorWhich is the same as:
NewColor = SrcColor + DestColorLet us see what happens, the moment before rendering the explosion images the backbuffer already contains the scenery and cannons. Now when the first image is drawn, its colors are added to the corresponding pixels in the backbuffer and as a result, a region in the backbuffer corresponding to the center of the explosion will have gained some yellow and red.
Now when the second particle is rendered, its colors are once again added to the backbuffer, after the second particle has been rendered the backbuffer will already show a visible increase in yellow and red, this yellow-red glow will be increased after each particle is rendered.
So how do we set these blending factors to 1? We can set these values in MonoGame by setting the following lines before rendering anything: (you don’t have to put this code)
BlendState blendState = new BlendState();
blendState.AlphaSourceBlend = Blend.One;
blendState.AlphaDestinationBlend = Blend.One;
blendState.ColorBlendFunction = BlendFunction.Add;
_device.BlendState = blendState;Thankfully, the SpriteBatch has built-in "Additive Blending" functionality and since this is used quite often in 2D game programming, it can be enabled in the SpriteBatch.Begin method. However, once you specify Additive Blending in the SpriteBatch.Begin method, all images you render will be drawn this way (unless you specify SpriteSortMode.Deferred option).
As we only want to enable Additive Blending for our explosion images, we can use a second SpriteBatch, or, since we want to render our explosion particles as last element of our scene, we can reuse the existing SpriteBatch and will render our explosion images in a separate SpriteBatch.Begin … SpriteBatch.End block after the previous block has finished rendering:
_spriteBatch.Begin();
DrawScenery();
DrawPlayers();
DrawText();
DrawRocket();
DrawSmoke();
_spriteBatch.End();
_spriteBatch.Begin(SpriteSortMode.Deferred, BlendState.Additive);
DrawExplosion();
_spriteBatch.End();After our SpriteBatch has finished rendering the main scene with the default settings, we start it again with Additive Blending enabled. Using this setting, we only render our explosion particles, effectively adding the colors of all our explosion images to the scene that was already present in the backbuffer.
When you run this code, your explosions should look a lot smoother, as shown in the image below:
You can try these exercises to practice what you have learned:
- No exercises this time, but get ready for the next section!
using System;
using System.Collections.Generic;
using Microsoft.Xna.Framework;
using Microsoft.Xna.Framework.Graphics;
using Microsoft.Xna.Framework.Input;
namespace Series2D1
{
public struct PlayerData
{
public Vector2 Position;
public bool IsAlive;
public Color Color;
public float Angle;
public float Power;
}
public struct ParticleData
{
public float BirthTime;
public float MaxAge;
public Vector2 OriginalPosition;
public Vector2 Acceleration;
public Vector2 Direction;
public Vector2 Position;
public float Scaling;
public Color ModColor;
}
public class Game1 : Game
{
//Properties
private GraphicsDeviceManager _graphics;
private SpriteBatch _spriteBatch;
private GraphicsDevice _device;
private Texture2D _backgroundTexture;
private Texture2D _foregroundTexture;
private Texture2D _carriageTexture;
private Texture2D _cannonTexture;
private Texture2D _rocketTexture;
private Texture2D _smokeTexture;
private Texture2D _groundTexture;
private Texture2D _explosionTexture;
private SpriteFont _font;
private int _screenWidth;
private int _screenHeight;
private PlayerData[] _players;
private int _numberOfPlayers = 4;
private float _playerScaling;
private int _currentPlayer = 0;
private bool _rocketFlying = false;
private Vector2 _rocketPosition;
private Vector2 _rocketDirection;
private float _rocketAngle;
private float _rocketScaling = 0.1f;
private Color[] _playerColors = new Color[10]
{
Color.Red,
Color.Green,
Color.Blue,
Color.Purple,
Color.Orange,
Color.Indigo,
Color.Yellow,
Color.SaddleBrown,
Color.Tomato,
Color.Turquoise
};
private List<Vector2> _smokeList = new List<Vector2>();
private Random _randomizer = new Random();
private int[] _terrainContour;
private Color[,] _rocketColorArray;
private Color[,] _foregroundColorArray;
private Color[,] _carriageColorArray;
private Color[,] _cannonColorArray;
List<ParticleData> _particleList = new List<ParticleData>();
public Game1()
{
_graphics = new GraphicsDeviceManager(this);
Content.RootDirectory = "Content";
}
protected override void Initialize()
{
// TODO: Add your initialization logic here
_graphics.PreferredBackBufferWidth = 500;
_graphics.PreferredBackBufferHeight = 500;
_graphics.IsFullScreen = false;
_graphics.ApplyChanges();
Window.Title = "Riemer's 2D MonoGame Tutorial";
base.Initialize();
}
private void SetUpPlayers()
{
_players = new PlayerData[_numberOfPlayers];
for (int i = 0; i < _numberOfPlayers; i++)
{
_players[i].IsAlive = true;
_players[i].Color = _playerColors[i];
_players[i].Angle = MathHelper.ToRadians(90);
_players[i].Power = 100;
_players[i].Position = new Vector2();
_players[i].Position.X = _screenWidth / (_numberOfPlayers + 1) * (i + 1);
_players[i].Position.Y = _terrainContour[(int)_players[i].Position.X];
}
}
private void GenerateTerrainContour()
{
_terrainContour = new int[_screenWidth];
double rand1 = _randomizer.NextDouble() + 1;
double rand2 = _randomizer.NextDouble() + 2;
double rand3 = _randomizer.NextDouble() + 3;
float offset = _screenHeight / 2;
float peakheight = 100;
float flatness = 70;
for (int x = 0; x < _screenWidth; x++)
{
double height = peakheight / rand1 * Math.Sin((float)x / flatness * rand1 + rand1);
height += peakheight / rand2 * Math.Sin((float)x / flatness * rand2 + rand2);
height += peakheight / rand3 * Math.Sin((float)x / flatness * rand3 + rand3);
height += offset;
_terrainContour[x] = (int)height;
}
}
private void CreateForeground()
{
Color[,] groundColors = TextureTo2DArray(_groundTexture);
Color[] foregroundColors = new Color[_screenWidth * _screenHeight];
for (int x = 0; x < _screenWidth; x++)
{
for (int y = 0; y < _screenHeight; y++)
{
if (y > _terrainContour[x])
{
foregroundColors[x + y * _screenWidth] = groundColors[x % _groundTexture.Width, y % _groundTexture.Height];
}
else
{
foregroundColors[x + y * _screenWidth] = Color.Transparent;
}
}
}
_foregroundTexture = new Texture2D(_device, _screenWidth, _screenHeight, false, SurfaceFormat.Color);
_foregroundTexture.SetData(foregroundColors);
_foregroundColorArray = TextureTo2DArray(_foregroundTexture);
}
private void FlattenTerrainBelowPlayers()
{
foreach (PlayerData player in _players)
{
if (player.IsAlive)
{
for (int x = 0; x < 40; x++)
{
_terrainContour[(int)player.Position.X + x] = _terrainContour[(int)player.Position.X];
}
}
}
}
private Color[,] TextureTo2DArray(Texture2D texture)
{
Color[] colors1D = new Color[texture.Width * texture.Height];
texture.GetData(colors1D);
Color[,] colors2D = new Color[texture.Width, texture.Height];
for (int x = 0; x < texture.Width; x++)
{
for (int y = 0; y < texture.Height; y++)
{
colors2D[x, y] = colors1D[x + y * texture.Width];
}
}
return colors2D;
}
protected override void LoadContent()
{
_spriteBatch = new SpriteBatch(GraphicsDevice);
_device = _graphics.GraphicsDevice;
// TODO: use this.Content to load your game content here
_backgroundTexture = Content.Load<Texture2D>("background");
_carriageTexture = Content.Load<Texture2D>("carriage");
_cannonTexture = Content.Load<Texture2D>("cannon");
_rocketTexture = Content.Load<Texture2D>("rocket");
_smokeTexture = Content.Load<Texture2D>("smoke");
_groundTexture = Content.Load<Texture2D>("ground");
_explosionTexture = Content.Load<Texture2D>("explosion");
_font = Content.Load<SpriteFont>("myFont");
_screenWidth = _device.PresentationParameters.BackBufferWidth;
_screenHeight = _device.PresentationParameters.BackBufferHeight;
_playerScaling = 40.0f / (float)_carriageTexture.Width;
GenerateTerrainContour();
SetUpPlayers();
FlattenTerrainBelowPlayers();
CreateForeground();
_rocketColorArray = TextureTo2DArray(_rocketTexture);
_carriageColorArray = TextureTo2DArray(_carriageTexture);
_cannonColorArray = TextureTo2DArray(_cannonTexture);
}
private void ProcessKeyboard()
{
KeyboardState keybState = Keyboard.GetState();
if (keybState.IsKeyDown(Keys.Left))
{
_players[_currentPlayer].Angle -= 0.01f;
}
if (keybState.IsKeyDown(Keys.Right))
{
_players[_currentPlayer].Angle += 0.01f;
}
if (_players[_currentPlayer].Angle > MathHelper.PiOver2)
{
_players[_currentPlayer].Angle = -MathHelper.PiOver2;
}
if (_players[_currentPlayer].Angle < -MathHelper.PiOver2)
{
_players[_currentPlayer].Angle = MathHelper.PiOver2;
}
if (keybState.IsKeyDown(Keys.Down))
{
_players[_currentPlayer].Power -= 1;
}
if (keybState.IsKeyDown(Keys.Up))
{
_players[_currentPlayer].Power += 1;
}
if (keybState.IsKeyDown(Keys.PageDown))
{
_players[_currentPlayer].Power -= 20;
}
if (keybState.IsKeyDown(Keys.PageUp))
{
_players[_currentPlayer].Power += 20;
}
if (_players[_currentPlayer].Power > 1000)
{
_players[_currentPlayer].Power = 1000;
}
if (_players[_currentPlayer].Power < 0)
{
_players[_currentPlayer].Power = 0;
}
if (keybState.IsKeyDown(Keys.Enter) || keybState.IsKeyDown(Keys.Space))
{
_rocketFlying = true;
_rocketPosition = _players[_currentPlayer].Position;
_rocketPosition.X += 20;
_rocketPosition.Y -= 10;
_rocketAngle = _players[_currentPlayer].Angle;
Vector2 up = new Vector2(0, -1);
Matrix rotMatrix = Matrix.CreateRotationZ(_rocketAngle);
_rocketDirection = Vector2.Transform(up, rotMatrix);
_rocketDirection *= _players[_currentPlayer].Power / 50.0f;
}
}
private void UpdateRocket()
{
if (_rocketFlying)
{
Vector2 gravity = new Vector2(0, 1);
_rocketDirection += gravity / 10.0f;
_rocketPosition += _rocketDirection;
_rocketAngle = (float)Math.Atan2(_rocketDirection.X, -_rocketDirection.Y);
for (int i = 0; i < 5; i++)
{
Vector2 smokePos = _rocketPosition;
smokePos.X += _randomizer.Next(10) - 5;
smokePos.Y += _randomizer.Next(10) - 5;
_smokeList.Add(smokePos);
}
}
}
private Vector2 TexturesCollide(Color[,] tex1, Matrix mat1, Color[,] tex2, Matrix mat2)
{
Matrix mat1to2 = mat1 * Matrix.Invert(mat2);
int width1 = tex1.GetLength(0);
int height1 = tex1.GetLength(1);
int width2 = tex2.GetLength(0);
int height2 = tex2.GetLength(1);
for (int x1 = 0; x1 < width1; x1++)
{
for (int y1 = 0; y1 < height1; y1++)
{
Vector2 pos1 = new Vector2(x1, y1);
Vector2 pos2 = Vector2.Transform(pos1, mat1to2);
int x2 = (int)pos2.X;
int y2 = (int)pos2.Y;
if ((x2 >= 0) && (x2 < width2))
{
if ((y2 >= 0) && (y2 < height2))
{
if (tex1[x1, y1].A > 0)
{
if (tex2[x2, y2].A > 0)
{
return Vector2.Transform(pos1, mat1);
}
}
}
}
}
}
return new Vector2(-1, -1);
}
private Vector2 CheckTerrainCollision()
{
Matrix rocketMat = Matrix.CreateTranslation(-42, -240, 0) *
Matrix.CreateRotationZ(_rocketAngle) *
Matrix.CreateScale(_rocketScaling) *
Matrix.CreateTranslation(_rocketPosition.X, _rocketPosition.Y, 0);
Matrix terrainMat = Matrix.Identity;
Vector2 terrainCollisionPoint = TexturesCollide(_rocketColorArray, rocketMat, _foregroundColorArray, terrainMat);
return terrainCollisionPoint;
}
private Vector2 CheckPlayersCollision()
{
Matrix rocketMat = Matrix.CreateTranslation(-42, -240, 0) *
Matrix.CreateRotationZ(_rocketAngle) *
Matrix.CreateScale(_rocketScaling) *
Matrix.CreateTranslation(_rocketPosition.X, _rocketPosition.Y, 0);
for (int i = 0; i < _numberOfPlayers; i++)
{
PlayerData player = _players[i];
if (player.IsAlive)
{
if (i != _currentPlayer)
{
int xPos = (int)player.Position.X;
int yPos = (int)player.Position.Y;
Matrix carriageMat = Matrix.CreateTranslation(0, -_carriageTexture.Height, 0) *
Matrix.CreateScale(_playerScaling) *
Matrix.CreateTranslation(xPos, yPos, 0);
Vector2 carriageCollisionPoint = TexturesCollide(_carriageColorArray, carriageMat, _rocketColorArray, rocketMat);
if (carriageCollisionPoint.X > -1)
{
_players[i].IsAlive = false;
return carriageCollisionPoint;
}
Matrix cannonMat = Matrix.CreateTranslation(-11, -50, 0) *
Matrix.CreateRotationZ(player.Angle) *
Matrix.CreateScale(_playerScaling) *
Matrix.CreateTranslation(xPos + 20, yPos - 10, 0);
Vector2 cannonCollisionPoint = TexturesCollide(_cannonColorArray, cannonMat, _rocketColorArray, rocketMat);
if (cannonCollisionPoint.X > -1)
{
_players[i].IsAlive = false;
return cannonCollisionPoint;
}
}
}
}
return new Vector2(-1, -1);
}
private bool CheckOutOfScreen()
{
bool rocketOutOfScreen = _rocketPosition.Y > _screenHeight;
rocketOutOfScreen |= _rocketPosition.X < 0;
rocketOutOfScreen |= _rocketPosition.X > _screenWidth;
return rocketOutOfScreen;
}
private void CheckCollisions(GameTime gameTime)
{
Vector2 terrainCollisionPoint = CheckTerrainCollision();
Vector2 playerCollisionPoint = CheckPlayersCollision();
bool rocketOutOfScreen = CheckOutOfScreen();
if (playerCollisionPoint.X > -1)
{
_rocketFlying = false;
_smokeList = new List<Vector2>();
AddExplosion(playerCollisionPoint, 10, 80.0f, 2000.0f, gameTime);
NextPlayer();
}
if (terrainCollisionPoint.X > -1)
{
_rocketFlying = false;
_smokeList = new List<Vector2>();
AddExplosion(terrainCollisionPoint, 4, 30.0f, 1000.0f, gameTime);
NextPlayer();
}
if (rocketOutOfScreen)
{
_rocketFlying = false;
_smokeList = new List<Vector2>();
NextPlayer();
}
}
private void NextPlayer()
{
_currentPlayer = _currentPlayer + 1;
_currentPlayer = _currentPlayer % _numberOfPlayers;
while (!_players[_currentPlayer].IsAlive)
{
_currentPlayer = ++_currentPlayer % _numberOfPlayers;
}
}
private void AddExplosion(Vector2 explosionPos, int numberOfParticles, float size, float maxAge, GameTime gameTime)
{
for (int i = 0; i < numberOfParticles; i++)
{
AddExplosionParticle(explosionPos, size, maxAge, gameTime);
}
}
private void AddExplosionParticle(Vector2 explosionPos, float explosionSize, float maxAge, GameTime gameTime)
{
ParticleData particle = new ParticleData();
particle.OriginalPosition = explosionPos;
particle.Position = particle.OriginalPosition;
particle.BirthTime = (float)gameTime.TotalGameTime.TotalMilliseconds;
particle.MaxAge = maxAge;
particle.Scaling = 0.25f;
particle.ModColor = Color.White;
float particleDistance = (float)_randomizer.NextDouble() * explosionSize;
Vector2 displacement = new Vector2(particleDistance, 0);
float angle = MathHelper.ToRadians(_randomizer.Next(360));
displacement = Vector2.Transform(displacement, Matrix.CreateRotationZ(angle));
particle.Direction = displacement;
particle.Acceleration = 3.0f * particle.Direction;
_particleList.Add(particle);
}
protected override void Update(GameTime gameTime)
{
if (GamePad.GetState(PlayerIndex.One).Buttons.Back == ButtonState.Pressed ||
Keyboard.GetState().IsKeyDown(Keys.Escape))
{
Exit();
}
// TODO: Add your update logic here
ProcessKeyboard();
if (_rocketFlying)
{
UpdateRocket();
CheckCollisions(gameTime);
}
base.Update(gameTime);
}
protected override void Draw(GameTime gameTime)
{
GraphicsDevice.Clear(Color.CornflowerBlue);
// TODO: Add your drawing code here
_spriteBatch.Begin();
DrawScenery();
DrawPlayers();
DrawText();
DrawRocket();
DrawSmoke();
_spriteBatch.End();
_spriteBatch.Begin(SpriteSortMode.Deferred, BlendState.Additive);
DrawExplosion();
_spriteBatch.End();
base.Draw(gameTime);
}
private void DrawScenery()
{
Rectangle screenRectangle = new Rectangle(0, 0, _screenWidth, _screenHeight);
_spriteBatch.Draw(_backgroundTexture, screenRectangle, Color.White);
_spriteBatch.Draw(_foregroundTexture, screenRectangle, Color.White);
}
private void DrawPlayers()
{
for (int i = 0; i < _players.Length; i++)
{
if (_players[i].IsAlive)
{
int xPos = (int)_players[i].Position.X;
int yPos = (int)_players[i].Position.Y;
Vector2 cannonOrigin = new Vector2(11, 50);
_spriteBatch.Draw(_carriageTexture, _players[i].Position, null, _players[i].Color, 0, new Vector2(0, _carriageTexture.Height), _playerScaling, SpriteEffects.None, 0);
_spriteBatch.Draw(_cannonTexture, new Vector2(xPos + 20, yPos - 10), null, _players[i].Color, _players[i].Angle, cannonOrigin, _playerScaling, SpriteEffects.None, 1);
}
}
}
private void DrawText()
{
PlayerData player = _players[_currentPlayer];
int currentAngle = (int)MathHelper.ToDegrees(player.Angle);
_spriteBatch.DrawString(_font, "Cannon angle: " + currentAngle.ToString(), new Vector2(20, 20), player.Color);
_spriteBatch.DrawString(_font, "Cannon power: " + player.Power.ToString(), new Vector2(20, 45), player.Color);
}
private void DrawRocket()
{
if (_rocketFlying)
{
_spriteBatch.Draw(_rocketTexture, _rocketPosition, null, _players[_currentPlayer].Color, _rocketAngle, new Vector2(42, 240), _rocketScaling, SpriteEffects.None, 1);
}
}
private void DrawSmoke()
{
for (int i = 0; i < _smokeList.Count; i++)
{
_spriteBatch.Draw(_smokeTexture, _smokeList[i], null, Color.White, 0, new Vector2(40, 35), 0.2f, SpriteEffects.None, 1);
}
}
private void DrawExplosion()
{
for (int i = 0; i < _particleList.Count; i++)
{
ParticleData particle = _particleList[i];
_spriteBatch.Draw(_explosionTexture, particle.Position, null, particle.ModColor, i, new Vector2(256, 256), particle.Scaling, SpriteEffects.None, 1);
}
}
}
}