1. Alpha blending within games
3.2. Graphics I
Alpha blending within games

2. Alpha Blending
An exploration of the use of alpha blending within games

3. How do we want to combine images?
In games there are two common ways in which images are combined...
‘Normal’ alpha blending, i.e. drawing a transparent or translucent image so that it shows what is underneath (e.g. drawing the pipes so that the background is seen)
Additive blending, i.e. adding some image to the existing image (e.g. adding an effect image so that it brightens some region of the image)

4. Alpha blending (or more generally Alpha Compositing)
Alpha blending is typically done in hardware and controls how two images are combined to produce a single composite image (one image is termed the source, the other the destination – the source image is added to the destination image).
The most common blend function is:
OutputColour =
SourceColour * SourceBlend
+ DestinationColour * DesinationBlend
Aside: Each channel (i.e. red, green, blue, alpha) is separately blended based on the blend function)

5. Alpha blending (blend functions)
A wide range of different blend functions are defined, including those shown:
Each component of the colour is multiplied by (0, 0, 0, 0).
Zero
Each component of the colour is multiplied by (1, 1, 1, 1).
One
Each component of the colour is multiplied by the source colour, i.e. (Rs, Gs, Bs, As).
SourceColor
Each component of the colour is multiplied by the alpha value of the source, i.e. (As, As, As, As).
SourceAlpha
Each component colour is multiplied by the destination colour, i.e. (Rd, Gd, Bd, Ad).
DestinationColor
Each component of the colour is multiplied by the alpha value of the destination, i.e. (Ad, Ad, Ad, Ad)
DestinationAlpha
Inverse functions are also defined, e.g. InverseSourceAlpha

6. Alpha blending (normal alpha blending)
The combination of blend functions that provides ‘normal’ alpha blending, i.e. enabling translucency, is shown below:
OutputColour =
SourceColour * SourceAlpha
+ DestinationColour * InverseSourceAlpha
As SourceAlpha increases, SourceColour dominates, and DestinationColour reduces.
Source Alpha
Src
Dest
Output
1.0
S * 1.0
D * 0.0 S
0.0
S * 0.0
D * 1.0 D
0.5
S * 0.5
D * 0.5
(S+D)*0.5

7. Alpha blending (getting the right order)
The order in which images are combined is important if using this form of blending, i.e. Images that are ‘behind’ a transparent image must be drawn first before the transparent image is drawn
Aside: In XNA use SpriteBatch SpriteSortMode BackToFront to draw back to front.
If player is to be drawn behind pillar, player must be drawn before pillar
Player (transparent background)
Pillar (50% transparency)

8. Alpha blending (additive blending)
A less common, but popular, means of alpha blending is additive blending:
OutputColour =
SourceColour * SourceAlpha
+ DestinationColour * One
Additive blending is commutative, i.e. It does not matter the order in which images are combined, the end result is the same.
Using this form of blending there is no need to sort by depth order when combining images (although it can be more difficult to ‘visualise’ the output)

9. Aside: The code repository uses normal alpha blending by default.
Alpha blending (in Java)
The java.awt.AlphaComposite class uses what are called the Porter-Duff compositing rules to implement alpha compositing.
Mostly commonly the SRC_OVER rule is used (equivalent to normal alpha blending).
AlphaComposite alpha =
AlphaComposite.getInstance( AlphaComposite.SRC_OVER,0.5f);
graphics2d.setComposite(alpha);
graphics2d.drawImage(image,…);
Aside: The code repository uses normal alpha blending by default.

10. Alpha blending (in XNA)
SpriteBatch supports both normal alpha blending and additive blending, via the BlendState (which can be AlphaBend, Additive, or None).
Other forms of additive blending can be directly specified by changing the render state within the sprite batch.
Example: for 2x multiplicative blending (which lightens/ darkens the destination based on the source colour – good for applying lighting effects)
BlendState blendState = new BlendState();
blendState.ColorSourceBlend = Blend.DestinationColor;
blendState.ColorDestinationBlend = Blend.SourceColor;
GraphicsDevice.BlendState = blendState;
Aside: For more info see:

11. Summary: Steps in Your Game Design
Image loading, management and rendering summary

12. Summary: Image loading and management
To do:
Develop design
Summary: Image loading and management
In your game design you should consider the following separate-but-dependent processes.
Q1: What graphics need to be loaded? In what order? All at once?
Q2: How are assets managed? (The default managers will likely suffice)
Load graphics
Asset Manager
Request / receive graphics
Q3: Which graphics are used by each game object? How/when do game objects obtain graphics from the manager.
Game objects

13. Summary: Image drawing
To do:
Develop design
Summary: Image drawing
Layers
Game objects
Drawing a layer
Visible objects
Draw ordering
Q1: Which layers should be drawn? In what order?
Q2: Which layer objects are visible and should be drawn?
Q3: In what order should visible objects be drawn?
Drawing
Q4: How will each object be drawn?

14. Developing Your Game Design
Having another stab at producing your own game design

15. To do:
Develop design
Graphics in your game…
Using your own game idea, take a game screen (I’d suggest the main game layer) and:
Briefly identify key game objects within the layer
Decide if any visibility culling is possible, and if so, what.
Decide the order in which the game objects should be drawn.
Question Clinic : This process should result in questions. Feel free to ask (and/or include in the Question Clinic)
Start
2 mins
1 min
30 sec
Finished
3 mins
6 mins
9 mins
10 mins
8 mins
7 mins
5 mins
4 mins

16. Extracting Images
Making a transparent / translucent image

17. Extracting images
Most popular image editing programs, e.g. GIMP, will enable you to make/edit transparent/ translucent images.
To do this you may need to make sure the image has an alpha channel
The ‘magic wand’ selection tool can be used to select regions (it may be necessary to play with the selection threshold). Once selected, unwanted regions can be cut.

18. It may be necessary to use the selection tool a number of times to refine the cut.
Translucency can often be varied in a number of different ways. Simply changing the layer opacity is often easiest.
Images shown below can be used to practice (easy/medium/hard cut)

19. To do: Summary Complete Question Clinic
Today we explored:
The theory and uses of alpha blending
Summary of key questions when using graphics
Started to plan how graphics will be selected, drawn in your game.
To do:
Complete Question Clinic
Complete/iterate the design for loading, selecting, ordering and drawing images in your game.
Write some code that loads and displays images.