Going Back To Breakout

Breakout is a game with simple mechanics and familiar territory for me due to the MDN tutorial I previously completed. But it was 2D and I needed to start tackling efforts on a 3D engine. So this lead me to the idea of attempting to learn how to make a 3D engine by recreating Breakout in 3D. Nothing complex or fancy, just the bare minimum to realise the 2D Breakout from the tutorial but in 3D.

To start this I needed to look at the 2D Breakout code and think about how I should approach this. The first thing I realised is that Breakout 2D was so small that it had been done just in 1 single file. This really wasn’t ideal for the 3D effort so I set about looking at ajax3d and trying to split similar parts of Breakout 2D functions into groups the same way that ajax3d was organised. This proved an interesting exercise as when I finished, I found that there were only 4 or 5 aspects to Breakout 2D. The last part of my efforts revolved around creating blank files for Breakout 3D based on the 2D aspects, but also with the additional 3d aspects ajax3d had. I now had the beginnings of my Breakout 3D engine files.

And this is where the blog kinda halts slightly…

I am now trying to stream my efforts as I tackle the challenge of learning programming, game dev, and as if that wasn’t enough actually learning how to make a 3D engine. I am still in HTML5/JavaScript using CANVAS but this will be my last time as once I complete Breakout in 3D, I will be moving to C for the Zeewolf remake.

More blog posts will follow as I learn, mess up, have something to share.


Back Down To Earth, Fast!

Write about how looking at code in ajax3d was not easy to follow as it wasn’t commented and showed that due to my lack of knowledge, I needed a different approach. Going back to the start of how 3D engines are made was a better idea. This needed a trip back into learning instead of doing and I accepted that I couldn’t just bumble my way through like I had foolishly hoped. There are a lot of books out there aimed at all types of people and mindsets, there are also vast amounts of content online such as videos, tutorials lessons etc. I don’t know why but when I start out learning something new, I tend to find it easier to just read a book, even a few times before I try to apply its subject matter. This is what I did by reading a very old book on 3D graphics programming. Even though the book was from 1995, to me with no knowledge of game dev and engine architecture, this book was a serious wealth of exactly what I needed to learn and start to try and begin to understand. At the end of the book I now knew more of the terminology used regarding game engine aspects, and when I revisited ajax3d source code, I was actually able to see some of its functionality and make my own comments.

Pixel Art in MSPaint

Floppy Disk
This was mainly done to take a break from the level 1 tile map as it was 256×256 and I was having to colour each tile 1 at a time while flying the helo around in WinUAE to recreate each tile colour by hand. I wanted to try and keep using MSPaint and thought a high res 800×800 pixel art of an Amiga floppy disk would be a good asset to create and have for future use. It is about 90% finished with just final little details to add.

Pixel Art in MSPaint

Starting level 1 tilemap
I don’t know why but I seriously underestimated how long it would take to map out each level for my Zeewolf remake. In an ideal world I would just be able to extract the contents from the Zeewolf Amiga floppy and then speed up the level creating process. I am still looking for ways to achieve this, but so far I have tried with Total Commander, an ADF plugin and then extract the contents of a Zeewolf disk image, but it fails with an error. So all I can currently do is continue meticulously recreating each Zeewolf levels tile map by hand, 1 coloured tile at a time. This is of course, a lengthy and inefficient process and with 256×256 tiles per level 65,536 tiles takes some time to complete.
I stopped about 80% complete on level 1 tile map and I will be going back to it to finish soon, but until then, I am all ears for better suggestions process-wise!

Breakout in JavaScript with MDN


(Discuss making breakout following the tutorial)

(Discuss being able to use Fiddle.js for real-time results)

(Discuss zero compile time just need text editor and web browser)

(Discuss EMCAScript and how Mozilla is the home of JavaScript)

(Discuss the wealth of info and reference material on MDN)

(Discuss the problem with learning from others and following blindly)

(Discuss the mistakes and how serious the consequences are)

(Discuss what it is to be a bad programmer)

(Discuss what it takes to be a good programmer)

(Discuss how a little effort can go a long way eg the people good enough to contribute to the MDN Breakout tutorial in the first place and the fact that everyone is capable of making mistakes, at any level and the fact that anyone can contribute, at any level)

(Finally discuss what I got from the 2D Breakout tutorial)

Hello World Canvas!

Starting out in programming can be quite daunting for some and I was no exception.

All those years ago when I found myself beginning that journey, I was lucky in a way as I started with raw HTML using just the Notepad text editor and a book I had hired from my local library (remember those?).
It wasn’t long before I got to grips with the basic tags and had managed to make my first web page. Zip forward a bit and I found myself in college taking my first programming lecture…

As is customary, the first actual programming I did was to create the ubiquitous ‘Hello World’ example and the language used was Turbo PASCAL.
For some reason Turbo PASCAL was a blue background with yellow/white text and my lectures used to be at the end of a Monday for 2-3 hours! As I am sure you can imagine this was not an ideal scenario and often I would head home on the bus with a blinding headache.
I didn’t mind the coding so much but the combination of it being on a Monday (everybody hates Mondays right?), and the 3 hours of bright blue screen induced headaches every time did not lend itself well to me enjoying it.

This carried on until one day we switched languages to a rather forgotten language these days: Borland Delphi.
Delphi made quite an impact on me as the change from the ‘blue pain inducing text editor’ to a pleasant windows GUI based language with pleasant grey/white visuals really made me start enjoying what I was doing.

The great thing about Delphi was also the fact that it was ‘proper’ Windows software developing tools and we were lucky enough to get told by a lecturer that the next issue of a PC magazine was giving it away on the next issue (the best £5 I have ever spent on a magazine to this day I think).
The magazine came with a CD-ROM in a proper jewel case and it included Delphi 2 which allowed for making 32-Bit software applications, but also as a bonus, it included the previous version Delphi 1 which allowed for making 16-Bit applications as well.

We spent less time in Delphi 2 than we did in Turbo PASCAL but I enjoyed my time in Delphi 2 very much.
It was unfortunate that I didn’t keep going with programming after it started to get overwhelming due to other lectures being beyond my abilities and eventually I left college and put programming out of my mind due to not having the Math ability to see myself getting somewhere with it.

The crazy thing was that I had grown up in the ‘golden age’ of video games and most of my youth had been spent, eyes-glued, to a TV screen playing Spectrum and Amiga games but for some reason I didn’t quite ‘get’ the link between my enjoyment for video games as a child and the fact that programming could be pursued through making video games!
After many years away from programming I eventually got more and more interested in taking the plunge back into programming and had decided that video games were going to be the mechanism for me to attempt this.

I spent some time online doing some reading/research/learning and it wasn’t long before I realised I was in over my head again! Then I found this…


I watched this video and couldn’t believe how quickly you could have a playable game running and it was only around 130 lines of code.

What made this even more interesting was the fact that it was using JavaScript, a language I had played about with during the end of my HTML days.
Feeling like this was a good entry point back into programming (and more importantly a start into video game development), I watched the video a 2nd time and noticed it was using HTML5 and the ‘canvas’ element.
I did a quick search for HTML5 games and found that there was a huge wealth of these games made online and ranging from beginner type games right through to full releases on mobile and the likes of Steam for PC.

 I had found my motivation and the enthusiasm to give programming another try!

I spent about 2 hours typing out Mary’s code from her live presentation and at the end of it I tried to run it…

It didn’t work.

So I then went back to the video and re-watched it, pausing every few seconds to double check my code against Mary’s live coding.
What is important to note here is that at the very beginning Mary does state that she is likely to make some mistakes and true to her word there were some issues that if you followed her live exactly, you wouldn’t have a working program.

Unperturbed, I remembered my troubleshooting days of HTML and set about sectioning off my code to see where the point was that things started to go wrong.
This proved half-helpful but in the end I actually stopped as I still couldn’t understand where the issue was.
The next day I decided to just start from the beginning again but this time, every 5 minutes of her video I stopped and ran the code until it eventually didn’t work.
This was useful as the only reason it didn’t work was not due to a mistake by me, but unfortunately Mary during the live code and missed out covering a few things.

I did work this out and solve it myself after some thought but for anyone right now reading this and trying the video, the way to help solve it with zero coding experience is to head on over to Mary’s GitHub which she mentions in the video and have a look at her polished code of the space invaders example.
By doing this you can realise that something vital is missing and not mentioned during the live video and then you can add it to yours and the game will run.
Once I had this solved and the game ran like Mary’s in the live video, I carried on following and paused every 5 minutes to check it still ran and worked the same way as Mary’s.

This approach worked well and at the end of the video, not only did I have my first working game, but I also had the understanding of how to add other features to the game and potentially build upon this.
For anyone interested in learning – Do not, under any circumstance, just copy-paste the code!
This would be pointless as you won’t learn anything at all.
(Okay, maybe not completely pointless if all you want to do is play Space Invaders!)

So yeah, for me it definitely was a case of ‘Hello Canvas

Huge thanks to Mary Rose Cook for the video, I was on the fence and your video was the catalyst for my game dev finally!
I am forever grateful ;o)

Testing? Tested!

This is the very first post. What should be here is information about projects and things being worked on and a similar nature. Probably will happen over the next day or two… If you like, use this post to tell readers why you started this blog and what you plan to do with it.

This picture below should go or be changed as well, not too sure it has any relevance to projects being worked on. Nice photo though…