As the first article in series got quite popular, we decided to go for the second part.
UI
Circular Progress/Loading Bars
Progress bars are a common feature in game UI design when representing mechanics such as character interaction, weapon reloading, power meters, etc. A circular progress bar is simply one that fills/empties radially rather than linearly. They have become more popular recently as they are more appealing to the eye than the traditional straight progress bar.
The markup engine uses little strategies (I called them resolvers) to translate from an attribute string to whatever it needs to render the markup, e.g. the image resolver translates a string into a Texture2D. The source text is “compiled” into an representation that can be drawn repeatedly without generating garbage (at least this was my intention).
The looks and behaviour of the dialogue system and dialogue wheel.
The most important element of the sample is the Cursor class. This is a DrawableGameComponent the handles the updating and drawing of the cursor. To add a cursor to your game, you simply add a cursor instance to your Components list.
After I’ve seen some people asking how to do this on the forums, I decided to make a small class that allows us to draw Pies in 2D in XNA.
Particles
Well now onto something I know even less about, 2D particles. As you may or may not have seen I have had a play with these in my GSM Library where I have put a star field in as an optional background, but I said I would post my current knowledge of particles both 3D and 2D so here is my tutorial on 2D particles.
In this chapter, we will see how to implement a particle system with all the update and animation code running entirely on the GPU, inside some pixel shaders.
Post-Processing
Post-process Framework Sample - #2
Today I’m posting a post processing framework sample. For those that don’t know, post processing is any manipulation of the frame buffer after the scene has been rendered (but usually before the UI), hence the word “post” in the name. This process could be a simple blurring, or it could be a motion blur or depth of field technique. But what if you have many post processes? For instance, maybe we have bloom, motion blur, heat haze, depth of field, and other post processes that we need to apply after we render our scene. Connecting all these post processes together can get a little hairy, and that’s what this sample helps us do.
This one’s a quite easy one, and even with shaders the process would be similar. But when using shaders, this could just be one step towards more interesting effects, like Bloom.
Post-process Effect: Random Noise
My original inspiration for this was the subtle ‘film grain’ effect seen in the first Mass Effect, though by no means do I think my version is anywhere near in quality and subtleness. Actually, I kinda pushed it to be more visible for the sake of this article.
Post-process Effect: Negative Image, Color Boost
The purpose here is to achieve the negative of an image. In HLSL this is easily achieved by subtracting the original color from (1,1,1).
This time, we have a smaller sample. This sample shows the implementation of a “rim lighting” shader, customizable by a series of parameters.
The theme in November was “Text Based” and its rule was that you were only allowed to use text in the visuals of your game. I saw some of the cool stuff other developers were working on, including one that looked like it had text characters that could walk and talk, like people. But my mind immediately went to a different solution: I wanted to make a game that was fully 3D (effectively breaking the rule of rendering text), but then post-process the render into ASCII art, so it would look like it was text.
The demo consists of the 11 useful HLSL post effects. The parameters of the each effect can be changed at runtime to adjust the final result.
If you have any questions please don’t hesitate to send a comment!
