GameDev Adventures in Lockdown: Part 1
Tags: haxe, heaps, phaser
Published: 2020-11-22 15:31:22

---
title: GameDev Adventures in Lockdown: Part 1
published: true
description: How I ended up learning gamedev during lockdown
tags: haxe,heaps,phaser
//cover_image: https://direct_url_to_image.jpg
---
published also on my blog [cipudda](https://vikkio.me/cipudda/#/post/gamedev-adventures-part-1-tzfvq).

> 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](https://vikkio.me/cipudda/#/post/game-programming-and-other-stuff-b7vxo), 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();
```

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.

- [GameDevToolkit](https://www.youtube.com/channel/UCqJ-Xo29CKyLTjn6z2XwYAw)
- [GDG](https://www.youtube.com/channel/UC0JB7TSe49lg56u6qH8y_MQ)

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](https://www.youtube.com/channel/UCqg5FCR7NrpvlBWMXdt-5Vg): [Yahtzee Croshaw](https://twitter.com/YahtzeeCroshaw).

[Yahtzee's Dev Diaries](https://www.youtube.com/playlist?list=PLAbMhAYRuCUibhDtVUn3WJnHojS2uSNPD)

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](https://github.com/vikkio88/downara).

And it looks like this [Youtube Video](https://www.youtube.com/watch?v=RgFe-7sm6Ug).

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](https://github.com/vikkio88/downara/tree/feature/battles) 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](https://store.steampowered.com/app/646570/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](https://down-test-battles.surge.sh/).

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](https://github.com/vikkio88/downara/blob/master/src/bridge/index.js#L4).

And making both apps aware of each other [like so](https://github.com/vikkio88/downara/blob/master/src/index.js#L19).

```
// 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');
});
```

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);
});
```

I used [storeon](https://github.com/storeon/storeon) not [redux](https://github.com/reduxjs/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](https://jebja.surge.sh/) (source code available [here](https://github.com/nientedidecente/jebja)). 

But to do so I ended up on one of those rabbit holes, following the traces of another programming language [Haxe](https://haxe.org/).

I think  I will speak more about it, and about [Heaps](https://heaps.io/) 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**