Multiplayer JavaScript game - dev log #3

Okay, so looking at my last dev log, a lot has changed.

It’s not a game anymore

The more I coded, the better I realized that it would be better to start chopping this one big project to separate pieces:

  • CardsGame libraries - both client and server side in one place as one big happy monorepo family.
  • Cards game “portal”, a thing which is using CardsGame libraries to provide some games for players.

CardsGame libraries are intended to be a set of tools initially for myself, but could also become a tool for other people in the future. Colyseus is still the main driver of network connectivity here (I even managed to contribute with some bug fixes for them 😇).

So what happened between now and then?

Multiplayer JavaScript game dev log #2

There’s some progress! Since I first started coding this thing it went through a lot of changes:

I ditched Redux and redux-like states on server-side. That was probably already mentioned in the last post. Generally I need to focus on mutations, not replacing the whole state with every tiny change (immutability).

I ditched React for client-side rendering. I wanted to have some nice animations which would move the cards from one place to another. That worked quite well until I then needed to position everything around the circle + around each player in a game screen, where you don’t know the exact number of players upfront.

Added pixi.js for the rendering. I’m somewhat familiar to this rendering as I played around with Phaser game engine for a tiny bit.

But let me take a few steps back and remind myself about the last time I wrote anything on this blog.

… so.

Multiplayer JavaScript game dev log #1

npm

As a guy who used to create tiny, tiny games, I thought that adding “multiplayer” to my tool-belt could be the next step forward. JavaScript is the main language for me now (as I got hired as web developer) so Node.js is the way to go. But… I quickly remembered the last time I wanted to create something with Node.js - sweat, pain, some sleepless nights and unfinished apps. Maybe that was just my ignorance back then, and general lack of discipline? I watched couple of courses about Node.js to refresh my knowledge and opened up new window in Visual Studio Code.

Monstrous Escape – first try at tabletop game

0 protype cards

It’s my first card game. Real, physical cards game. I’ve had this idea flying around my head for a month or so. I’ve never designed a tabletop game so i thought - why not?

Basic rules are simple, borrowed from Uno: get rid of your cards. But anyone can make it harder for you by placing monsters in your “battle zone” (everyone has one). Use attack cards to beat them or action cards for extra fun. At first it was (another) zombie-themed game but I quickly changed that.

GrayScale – dev log #3

Rules are made to be broken.

Player input and visuals

I decided to get rid of GameBoy style input limitation in favor of 360° walking, aiming and dashing. This will open up a lot of possibilities for puzzles and give more freedom in fighting. So in the end players will be able to play on mouse/keyboard setup or using their favorite gamepad and play with analog sticks to aim dash direction.

With this I need to get rid of smooth-follow camera I talked about last time. Right now the camera is locked on player. I got inspired by the game Awesomenauts, right now I have a similar cursor to theirs and your charactes is always in the middle.

Auto Terrain Generator for Tiled

Intro

During development of GrayScale I found myself lacking the tools or skill to create terrain in Tiled editor. Using terrains I could create pretty maps much faster than placing individual tiles for details. Now with Auto Terrain Generator I can actually focus on doing some level design.

GrayScale – dev log #2

After a few small updates to the GrayScale I’ve realized that my previous concept of timing and physics was completely wrong! In short: I believed that firing extra physics steps when the timer missed 1/60 th of a second was a good idea. But what changed?

I’ve also spent some time on graphics. Preparing terrain tiles for Tiled is difficult but the results are fun to look at and really speed up level design. The bit challenge is to make compatible tileset that will work with Tiled, It needs many combinations.

GrayScale – dev log #1

grayscale after

I’ve been posting couple of GIFs around the internet from my GrayScale game but never explained how each thing works. This post was originally written at Snowkit.org. It is a good place to start, if you’re reading this then you would find some luxe-related things interesting. In fact I think I managed to create/discover at least one interesting thing about luxe that I wanted to share with you (physiiiics).

I won’t call myself an expert in programming and this post is in no way a tutorial on ”how to do things”. With luxe you can find your own way of coding. I’m just sharing what I discovered and had fun with :)

GrayScale – Re-making from scratch

Some time ago I decided to keep updating GrayScale. It was created using HaxeFlixel, which is great for quick prototyping small games. Maybe it’s my limited knowledge of that framework but I discovered that It gave me too much problems while developing. Adding new enemy means lots of copy/pasted code or strict inheritance.

Next I found out that it tried to do most of the work for me. It’s usually not a bad thing, but when something goes wrong or when you start seeing performance issues on slower machines, you can’t quickly find what seems to be a problem. Another bad thing is that it lags horribly while recording a video, I’ve seen at least 2 lets-players who had issues with my game.

Then I found luxe engine.

1GAW – #4 Simon says

simon prev head

Press Enter to let Simon talk… and then follow his word.

This Simon says prototype was fun to create. There’s a lot of event based movements and 2 custom components. One for making buttons clickable and another to make them shine for a bit when Simon says.

If you’re new to the Luxe engine, I’d like to introduce the config.json file. With this little beauty you can make changes to your game world without needing to re-build the whole code. In this example I used it to set width & height of the game but also to change colors of Simon’s buttons, as you can see in the image above.