Game Progress Update #7

Update #7

Hello world, welcome to the seventh Dev with Dave Game Progress Update. I’m happy to say that I have at least managed to get the button handling system working this time round, even if there is only one button so far!

Buttons

The button handling system is a simple set of functions which can add a button to a UI page in a single command, check for button presses every frame, and also handle the response to each button press.

The system uses variables to track whether the mouse has been pressed, is being held down, or has been released. This will allow the buttons to animate eventually.

The button properties are all stored in an array the same as the other two UI element types I’ve created.

Problems I’ve faced

The biggest issue I have had whilst creating the button handling system, was the fact that the scanlines overlay was interfering with the button sprite detection. Any checks were simply returning the overlay sprite ID instead of the button below it which was the intended target.

I fixed this by simply moving the sprite offscreen which I check for button presses, then move it back before the screen updates. It’s not an elegant fix, but It will do for now.

The second problem is that I have found it very difficult to make recognisable icons using the low resolution that the game is based on.

In the next update

Over the next two weeks I’m going to spend some time creating graphics for the various UI screens, so hopefully lots more buttons and stuff for you to see (even if it’s not entirely working by the time the next update is here)

I also need to add a system to allow pickups to the gameplay, to allow the player to use powerups. Although I doubt this will make it in until the update after the next one.

See you next time 🙂

Game Progress Update #6

Update #6

Hello world, welcome to the sixth Dev with Dave Game Progress Update. This time round I have a whole new zone to show off, as well as having fixed a couple of niggling issues with restarting the game and some work on the UI handling system with the buttons.

Asteroid Zone

The first addition in this update is the new Asteroid Zone (Section 3.3.4. in the GDD). I’m currently using an asteroid asset which I found on Open Game Art, I like the style, but it’s not using the correct colour palette.

Because of the Zone systems I’ve already set up, spawning the asteroids was fairly straight forward. I did however have to make a small modification to the UpdateZones() function. It now checks to see if the current sprite is an asteroid or not, and if it is it adds a y velocity to the movement as well.

I expanded on the zone description a little on the Trello as well, which I need to update on the GDD, but that will probably wait till Monday now.

Game Restart

The changes here are mostly just bug fixes. The particles now no longer remain on screen when the game restarts, most (if not all) game related variables now reset when you restart the game.

The last thing I changed here was adding a function to remove any of the existing zone sprites ready for a new game.

UI Handling System

The one thing currently missing from the UI Handling System is buttons. I’ve added some variables and some empty functions ready for this, and created some place holder graphics which you can see below.

I had a real issue trying to create the settings icon in such a low resolution and sticking to the design principles.

In the next update

Next time I hope to have the buttons working, and have made a start on creating some of the other UI screens.

See you again in two weeks 🙂

Rubber Duck Debugging

Introduction

Rubber Duck Debugging (or simply Rubber Ducking) is one of the most crazy sounding debugging techniques available to programmers.

The premise is simple, when you get stuck with a problem with your code that the usual debugging techniques have failed to solve, then simply grab an inanimate object and explain to it slowly and step by step what your code does.

How does it work?

There are a few reasons why Rubber Ducking works.

Firstly, when you’re explaining your code to your duck, your are forcing your brain to think about the code much more slowly than when you are simply skimming over the code and thinking about it in your head. This in turn allows your brain more time to consider exactly what is happening in the code.

Secondly, explaining to your Duck switches your focus from an observer of the code, to that of a Teacher. This change of mindset causes you to evaluate your code from a different perspective, which can in turn help with finding and fixing bugs.

It might sound silly (and you’ll probably feel quite silly when you first start talking to a rubber duck), but you would be surprised how well this technique actually works. Especially for logic problems which aren’t easy to spot when simply checking variables in the debug console.

Why a rubber duck?

The name Rubber Duck Debugging comes from a story in the book “The Pragmatic Programmer” by David Thomas and Andrew Hunt, where a programmer would carry around a rubber duck and explain his code to it.

You can of course use anything you like. If you want to explain your code to your mug, then feel free. If you have a favourite cuddly toy then they would be just as happy to listen to you.

Pets can also work, although it’s a little frustrating when they walk off halfway through your explanation.

I’ve even successfully rubber ducked with my girlfriend (who has absolutely no idea about code or computers) whilst taking a relaxing evening walk away from the house and PCs.

Conclusion

I hope you have found this post interesting, and that it gives you another tool to use the next time you’re sat in front of the PC tearing your hair out because you cannot get the code to work.

Game Progress Update #5

Update #5

Hello world. Welcome to the fifth Dev with Dave Game Progress Update. The biggest change in this update is the work done to the UI Handling system.

UI Framework

This is where the bulk of the work has been done for this update. Continuing off from where I left it last update, I have added functions to load in the UI data as well as to change the current UI Page.

I’ve got the Text and Images working 100% but I still need to add the functionality for the UI Buttons.

I’ve created three UI pages so far. One for the pre-game, in game, and the Game over screens. UI pages are stored in an Array, and contain data relating to all the elements on that page. This allows a simple function to change the page when required, by simply hiding all the old elements and showing the new ones.

Unfortunately a bug in the UI handling code caused a big delay in development this update.

Restarting the game

I also made a start on being able to restart the game. I’ve not managed to completely finish this yet so it’s not demonstrated in the video.

Basically this bit simply resets whichever variables and sprites are necessary for the game.

Refactoring

Now that the code has been developed a little more, I have also been busy tidying up some of the less neat code and refactoring where necessary.

This has mostly just been moving code to the correct scripts and making sure that the comments are still accurate.

In the next update

I’m hoping to get another zone type working for the next update, and perhaps the beginning of the powerup collection system. I’ll also get restart game bit working properly.

See you next fortnight 🙂

Nine slice scaling

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.

Game Progress Update #4

Update #4

Hello and welcome to the fourth Dev with Dave Game Progress Update. This update sees a little bit of refinement in the graphics, as well as the introduction of a couple of new systems.

UI Framework

First, I’ve started fleshing out a UI Manager script to help make setting up and updating the UI elements of the game a little easier. Although this is currently only behind the scenes stuff at the minute.

I’ve created a typed array to store data for all three element types (Text, Image and Button) which I’ll be using for the UI, as well as an array to manage which elements are shown on each page.

Coins

The next new addition is coins! The player can now collect coins when they appear on screen. They are spawned by the existing zone handling system, and the only changes I made were adding a couple of variables to the player type to store the total coins collected, as well as the coins collected from the current game, and adding a quick check in the collision handling function to see if the sprite hit is collectable or not.

Graphics

The eagle eyed among you will have noticed that the game looks a lot more like the concept pictures now. I’ve spent a good few hours using paint.net to create some graphics which are a little closer to what I intend the game to look like, rather than those awful placeholders it was using previously.

I’ve also added the scanlines and CRT overlays for the authentic retro look.

In the next update

The next job will be to replace the current Game over screen, and create a pre-game UI screen with a play button as well. I think it would be a good idea to add a UI card or two to the Trello to help keep track of progress.

I’ll also be doing more graphics work, creating sprites for the forthcoming zones, and perhaps adding further tweaks to the existing stuff.

See you next fortnight.

Comments

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 🙂

Nice to get out again

Hello World,

I went to the Top-Deck Inn on Monday this week. It was the first time I’ve been anywhere with the tablet since before the UK went into lockdown back in March (I think anyway, feels like it was forever ago now).

It was really nice to sit and enjoy a reasonably priced cup of tea while I worked on Flappy-vaders.

I also managed to squash a bug relating to the explosion effect, despite only being there for an hour.

What’s coming next..

So, over the next couple of months I’m going to be talking about programming. On top of the rundown of the progress made on the game in the fortnightly updates, I’m going to share some thoughts on things which will help to make you a better developer.

We’ll be starting off later this week with comments, and how important it is to comment your code.

Outro..

And that’s all for now. I’m off to fire up the tablet and write some more Flappy-vaders (While I listen to Ernest Cline’s awesome second novel “Armada”)