DEV Community

loading...

GameDev Adventures in Lockdown: Part 1

vikkio88 profile image Vincenzo ・6 min read

published also on my blog cipudda.

When I grow up I wanna be an astronaut

Me (and probably other 6 billion people when they were kids) when I was asked what I wanted to be when I grew up.

Eventually I realised how hard that would be, and as all the other hard things of life, I gave up, along side other dreams, like:

  • Being an astrophysicist.
  • Being Spiderman.
  • Being a writer.
  • Being a guy who takes care of his beard.
  • Being a good developer.

... and much more

One of the dreams I never left behind though, as I said in one of my previous posts, was to create video games.

I have always, since my first line of Pascal in 2001, though about ways of converting those disgusting lines of code to a game.

When I moved to VB6, a year later, I created a silly RPG fighting game with it.

Jesus was horrible, but I loved it so much. I might still have the source somewhere, I might try to find them and publish them on github at some point.

After that I discovered GameMaker. And I had a blast!

I created 2 games with it, before growing up and changing my interests from games to marijuana and girls.

The first game was some kind of rugby 2 vs 2 and the one I loved the most was a Sailing Simulator.

This year has been shit for most people, covid, lockdown, losing jobs etc..., but for me, being that kind of nerd that tries to find the bright side on anything, and always makes do with the time to pursue passions and stupid side-projects, for me was an ok-ish year overall so far.

I changed job in March, just few weeks before the UK lockdown, and even though I moved back into a forced fully remote position, I didn't despair.

I tried to make the most of it, trying to revamp some of the things that pushed me towards computers and coding from day 1.

One of those things was, as I said before on this blog, VIDEO GAMES.

I have always wanted to become a game developer, and now with some more spare time I decided to give it a go.

Rocky Road to GameDev

I started by looking at some of the 70 thousands udemy courses I have enroll throughout the years, and I had one that was something like "Phaser 2 - Do Some Shit with some crappy js".

Mostly because having worked as web developer for all of my career, would be nice to see what my field has to offer.

The course was shit, but the tech was interesting.

Seems like all games do one single thing in general:

loadAssets();

initGameStuff();

updateDrawnStuff();
Enter fullscreen mode Exit fullscreen mode

The first step, since I was looking at js/html games, were just HTTP calls to fetch images and sounds.

That step is the one that happens during the Loading screen.

The second step is the one where the assets, images and sounds, get sort of "converted" in object that the game engine can understand and work with.

The third step is the most interesting one. The UPDATE.

That function will be called, depending on your machine, ~60 times per second, and will take care of drawing on the screen the state of your game.

I had seen all of this in a course of pygames, years before, it was just nicer to look at some javascript version of it.

I started to look up at some Youtube videos, and I fell in love with a couple of channels.

In those channels people were speaking not only about programming, but about Game Design and it was genuinely mind-bending.

I studied quite a lot of theory there then, and watched an amazing set of videos from one of The Escapist: Yahtzee Croshaw.

Yahtzee's Dev Diaries

In this series of video, we see this guy, a youtuber and writer, challenge himself into creating a game a month for one year, and we can see what it goes in his mind, his process on how to start a new project and the design decisions behind all of those games.

That pushed me to try and find out more stuff around, and to finally start to invest some proper time into properly developing some of the game ideas I have had for a long time.

Down Ara

The first project I wanted to focus on had to be about my childhood. Being a geeky dude, I have always been a magnet for bullies, like many of you who are reading this.

So I thought it would be nice of me to pay a tribute to a bit of a shitty moment of my childhood by making a game where I actually kick bullies asses.

RPG is an amazing game genre. You can customise your character, and make everything you want out of the world you live in.
I have always loved them, so it was an easy choice to fit my purpose.

In my hometown in Sicily, there is a countryside area, called Daunàra, which is some Arab-Sicilian for Water Source or something, I have always liked that name, but I thought that was a bit hard to type down, especially because of the special character. Spelling it as it sounds though, Downara it was google-able and easy to remember, so there I had also the game name.

I did go for a top-down gba-pokemonish type of rpg, and the fighting system it had to be turn-based, only though with movement on a square grid, just because I wanted it to be a bit less static and boring than a typical final-fantasy nes style game.

Now I had to choose between all of the technologies in the universe to actually create it.

I decided to go with Javascript and to create a browser game. I started with React as it is one of the frameworks I have used the most in the last few years, but soon enough, even if I had a decent plan on paper, I hit the limitations, especially related to animations. I created a tiled based world map and it came out like something disgusting like this:

I TDD-ed all the functionality of the fighting system, but to actually make everything play in order, on a DOM it was a bit of an annoying process, especially the animations related to the battle actions.

So I decided to look into a proper javascript game engine and ended up using Phaser3.

After few weeks of experimenting I managed to re-use the React UI into a Phaser template source.

And it looks like this Youtube Video.

What I found out though is that I made the scope too big, a giant map, dialogues, quests, that is too much for a small test project.

So I decided to focus on the cool thing, the battles, so I made a branch that converts the game to a simple random battle. The idea is to make it become a bit like a slightly more chessy version of Slay The Spire, where you get better the more you fight and eventually you kill a boss or something.

You can play the prototype in here.

I loved spending time on this small project, but as always, my interest died out, and eventually I moved to something else.

I found quite interesting the way that I make Phaser and React communicate with each other using an event bridge.

And making both apps aware of each other like so.

// when phaser is ready the store of the react app knows it
window.eventBridge.on('phaser:ready', () => {
  console.log('phaser ready received');
  store.dispatch('phaserReady');
});
Enter fullscreen mode Exit fullscreen mode

And also I can dispatch store actions from phaser with a small snippet

window.eventBridge.on('phaser:storeon', ({ type, payload = null }) => {
  console.log('bridge event received', { type, payload });
  store.dispatch(type, payload);
});
Enter fullscreen mode Exit fullscreen mode

I used storeon not redux for this project and I loved it.

This piece of tech was also useful in my day job recently. So yeah, side project, even if they get boring, kind of teach you to solve problems in weird ways, that you can eventually reuse in a work situation.

More GameDev and Haxe/Heaps

Once this project got boring, I decided to go back to another nice game I had done in my youth, a Sailing Simulation (source code available here).

But to do so I ended up on one of those rabbit holes, following the traces of another programming language Haxe.

I think I will speak more about it, and about Heaps on another post, and how I ended up translating some docs from Russian in order to be able to make my small sail boat foam to appear on the sea layer and not on top of the boat itself.

But until then I guess this is enough for one post.

See ya,

vikkio

Discussion (0)

pic
Editor guide