Introduction

One of my favourite visual effects in Flappy-vaders is the CRT TV style border around the screen, making it look very similar to what I remember my ZX Spectrum looking like back when I was little.

Creating the border graphic was fairly straight forward using Paint.net, but implementing it in game was slightly trickier.

When I initially put the border in place, I simply resized it to fit the dimensions of the screen. Which works fine when working on a screen the same aspect as the original image, but when using screens of different aspects then distortion soon becomes apparent in the corners and edges of the image.

The easiest way I could think of to remedy this was to use a technique called Nine slice scaling ( or sometimes 9 Slicing, or Scale 9).

How it works

Nine slice scaling is a way of scaling 2D images proportionally, which helps maintain rounded corners, borders and the like.

Normally Nine slice scaling is used for buttons or UI panels, where you would divide up a panel like the one below into 9 pieces, but it works just as well for the CRT TV outline shape as well.

Now, with the shape above, you can see that if you were to stretch it horizontally the corners would deform, becoming elongated horizontally, as would the borders on the left and right sides of the box.

With the Nine slice scaling, you divide the box into 9 smaller sections. And resize them all individually. The corners remain the same size no matter what happens. The top and bottom edges can resize horizontally but not vertically, and the left and right edges are resized vertically but not horizontally. The middle section is resized both horizontally and vertically as this has no details which can be distorted.

In the image above, the shape on the left has been resized using the nine slice scaling technique, the one on the right has just been resized to fit. You can see the difference in quality.

This technique means you can simply have 1 image for all the different sized buttons your UI needs, or for all your UI Panels etc.

Use in Flappy Vaders.

I decided to use 8 individual sprites, as I don’t want the big middle piece to be used for the border. This prevents the device from having to render a huge chunk of alpha transparency, which is never good for performance.

I also converted the original image into a texture atlas, so I could assign the sprites the correct section of image. Using texture atlases also speeds up render times because fewer draw calls are made.

Conclusion

And that’s all for now 🙂 I hope you found this blog informative.

Welcome to the first of the blog posts relating to our second P in the list, Programming!

Comments

Today I’m going to be talking about commenting code. Something I was first introduced to back in the 80’s with the Rem command on my ZX Spectrum. My commenting back then though was limited to a small asterisked box at the top containing the name of the project and my name, and then the occasional comment at the top of a section labelling it as the “movement bit” or the “game over bit”.

Now as with GDD’s there are those out there who advocate for commentless code, saying that if the code is well written that comments are un-necessary. And while this is perhaps true to a degree, I find it quicker to read a commented description of what a function does rather than having to read through the code to discover it.

That being said, comments can sometimes be used to explain bad code rather than rewriting the bad code into something better. Which isn’t an ideal practice.

And even worse are bad comments. I’m guilty of writing some of these myself, especially late at night after a beer or two. I’m sure you’ve all seen comments like “This is the bit that does the thing”. Comments like this are a complete waste of time and definitely should be avoided.

Writing useful comments

I find comments to be exceedingly helpful, especially when I’m returning to a project which I haven’t touched for a while. When you’re working in a team comments can easily inform a team member what code does, or how.

So, how to write good comments? The first piece of advice I can give you is to make your comments clear and concise. Don’t assume the person reading the comments has any idea of how the code works so please avoid using ambiguous terms in them.

Try to keep comments brief. Apart from a comment block at the start of a script file which can be any length really without disrupting someone trying to read the code. Even for a function description there is no real reason to use more than two or three lines of comments.

When it comes to commenting source files, I always try and include a header comment block which gives details like what project it’s from, what the file contains, and in the case of the main source file, a revision history. As I said earlier, it doesn’t matter so much about the length of this first comment block as it doesn’t interfere too much with reading the code. But obviously don’t write the comment equivalent of Tolstoy’s War and Peace.

Another thing I find really helpful to comment is variables. I usually leave a single line comment above the variable declaration describing what the variable keeps track of, I find this combined with a fairly clear variable works well.

//	Sets the players initial velocity
player.yVelocity#=0.0

I also add a comment block to the top of every function definition. This contains the usage details of the function, as well as a couple of lines of description.

//********************************************************************************
//	null = UpdateZones( speed# as float)
//********************************************************************************
//	This function updates the positions of the zone sprites and maintains the 
//	distance variable
//********************************************************************************

As for the rest of my code, I certainly don’t comment every line as some code is so obvious that it’s not necessary. Instead I add a title comment at the start of a particular bit of code, be it in a loop, or a function, or wherever, and then a comment which breaks down what the next few lines are doing.

//	Creates the sprite and sets the properties
bgLayers[layerID].spriteID[0]=CreateSprite(imgID)
SetSpritePosition(bgLayers[layerID].spriteID[0] , 0 , 0)
SetSpriteSize(bgLayers[layerID].spriteID[0] , width# , height#)

Practice makes perfect

When it comes to commenting, there is no better way to get experience than actually writing some. Just remember to keep them concise and useful. There is no better feeling than returning to some code after a break and be able to just pick it up where you left off thanks to the brilliant comments you’d left 🙂