All Blog Posts

Freeish Time: Game Programming

Time for the latest and greatest to come out of Freeish Time! Just to refresh your memory, “Freeish Time” is the opportunity for our Cubes to focus on their passion projects outside of their work commitments. We got to sit down with Tom, our INSANELY talented developer and, server team lead extraordinaire to chat about his week of innovation…

Innovation

0_OlVTuxFz-Qn7oTUn

Time for the latest and greatest to come out of Freeish Time! Just to refresh your memory, “Freeish Time” is the opportunity for our Cubes to focus on their passion projects outside of their work commitments. They have an entire week to identify a problem, build and create a solution, then present it to the rest of the team during our Friday Happy Half Hour meeting.

This has become an integral part of 3 Sided Cube. The encouragement and time to work purely on whatever their heart desires, all while getting a little reprieve from the normal hustle and bustle from the normal workload is a welcomed treat. Whether they opt to go the “innovation” or “education” route, that invaluable time to focus purely on whatever it is that intrigues them is pretty rad.

The sky’s the limit when it comes to Freeish Time. We got to sit down with Tom, our INSANELY talented developer and, server team lead extraordinaire to chat about his week of innovation.

What inspired your innovation time?

I love making small games using HTML, CSS, and JS. It reminds me of the early days of the internet when independent developers would build games using Flash and ActionScript. I guess I was hungry for some “circa 2008 Newgrounds” game development!

Candy Crush is a fairly well-known game so I thought it would be a good one to copy. I prefer to work this way as it allows me to focus on the programming as opposed to the gameplay design. 

And imitation is the sincerest form of flattery, right?!

Talk us through what you did

I started off with a minimal HTML document and underscore.js. Side note: I love underscore.js, I don’t think I could build anything substantial in JavaScript without it! From there I set up my stage and began working my way through the various scenes that make up the game. The scene pattern (I’m not sure if that’s its real name) is so powerful and it really helps you to separate your game into logical chunks.

I opted not to use a framework, and while the end result is obviously lower quality and less performant than something built with Unity or Unreal, I really enjoyed the whole process. Researching how game loops work and implementing different patterns in JavaScript was really interesting! I must stress that if I were working on a commercial project this would have been the wrong way to approach the task at hand.

Because I was focused on the development side of this project I decided to use emojis as the artwork (shout out to Twitter for open sourcing their emoji artwork). This meant I didn’t waste time trying to perfect the graphics before the core mechanics were solid. In the future, it wouldn’t be hard to reskin the game as I made sure to stick to the 16:9 ratio and use relative widths and heights for everything.

After hammering away at my keyboard for three days (and consuming a four-pack of Red Bull) the game was complete. 

It’s quite a light codebase as there are only 600 lines of code or so (excluding underscore.js) and I’d like to think that makes it reasonably straightforward to understand… the source is unminified so you can try to read it and make up your own mind!

I think the next steps would be to :

  • Improve the replacement of emojis, as mentioned below they’re a bit primitive.
  • Give the UI some love. It’s rustic, to say the least…

Because it uses JavaScript I’m sure it would be possible to embed this in a WebView inside a mobile app. Perhaps I could then release it on an app store?

What were the key learnings?

It’s entirely possible to build small games using nothing but HTML, CSS, and JavaScript. You don’t necessarily need a framework if you’re building games for fun on your own, plus you’ll learn a lot along the way about how games engines work!

JavaScript’s template literals (or template strings as they’re also known) are really powerful. Being a backend developer my front end skills are a bit out of date and I hadn’t used them properly before. They’re definitely a new tool in my JavaScript arsenal.

Modern JavaScript has almost removed the need for jQuery. Between the document.querySelector and document.querySelectorAll functions and the classList and fetch APIs you can do a lot on your own. I will admit that if you need to support older browsers I think jQuery still has value!

Netlify is an awesome platform! Everything about their developer experience is stress-free. For our commercial work, we host our front ends in S3 buckets sitting behind CDNs, however, if I was going to start another project elsewhere I would definitely consider Netflify for the front end.

Were there any challenges?

The recursive animation was a real pig to implement. It took me three attempts to write it in a way that didn’t suck. This has reinforced to me that mixing presentation logic and business logic is not the way to go if you want maintainable software!

Managing global state was a big problem in the beginning… I ended up simply having half a dozen globals attached to the window by the end of the project. While this is okay for a hobby game I’m not sure this approach would scale very well in time. A singleton with getters and setters would work better, although I don’t think you can escape the fact that all games need some sort of global state!

In the end, I had to change tact and implement a simple emoji replacement strategy. Ideally, the emojis would cascade down as Candy Crush does, however, I had to switch to a fading in the system. This limits the gameplay slightly (as there’s not as much variation in the board) so this is one area where I could definitely improve things!

How can you use this within your role at 3 Sided Cube?

I’m going to recommend the other members of the backend team to have a play with Netlify. I’m sure we could use it at Cube to save time and deliver prototypes with minimal fuss.

This project has reinforced my view that the split between frontend and backend will only grow larger in the future. It’s just not feasible for a full stack developer to compete with dedicated frontend and backend developers these days, especially as projects demand more from each role. That’s not to say that developers from each discipline can’t learn skills from each other by any means!

Low-level programming is good for the programmer's soul.

John Carmack

As always, it’s so great to hear about what exciting things our team gets up to when they get the time to run wild with their ingenuity! Until the next Freeish Time, everyone.

Published on October 22, 2020, last updated on October 22, 2020

Give us the seal of approval!

Like what you read? Let us know.

17

Tags