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.

Structure, and how to send it to browser

On server most of the objects have a reference to its parent element. This will help me decide ownership of each object and position in the game. Some cards may be held in hand, others may stay in deck of cards, and each of those containers may belong to a Player. The root object in my structure is still some imaginary “root”, because some object may just be lying on the table. Neutral and not belonging to anyone yet.

The problem appeared the first time I tried to send that data to the client. Server shuts down with stack overflow error.

Continue reading »

Multiplayer JavaScript game dev log #1

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.

Yeah… Multiplayer Javascript

So whats the plan? Express? How do I WebSockets, client connections, rooms, server-side, client-side, i hit my face with both open hands in despair again. I imagined all the work that will need to be done BEFORE actually making any game or “app”. Quick google for “multiplayer game server node js” revealed to me couple of bootstrap options.

Pomelo (which I believe I saw earlier somewhere) looked mature, but after opening their GitHub issues It was clear to me that I wouldn’t fit their community – most of the issues were in Chinese.

Lance was next in line. Went through the features list – lookin’ good! But let’s continue the research.

Then I found Colyseus. I admit, I fell for the “match-making” point from their feature list. This feature could probably be done with more or less time in other engines too. It has a client-side JS implementation in different repo, It also has client integration with Unity3D and Construct2. Colyseus is new, right now at version 0.5, still being worked on… Ah, what the hell! Let’s clone that example and see how it works. I don’t have that much time to prepare a full-blown research with pros and cons of each library.

So in couple of hours I managed to make a working chat room. My example project uses Webpack with webpack-dev-server for the client-side code, to speed up development and manage my js/html code better. I try to follow all the rules and good practices now, can’t allow myself to write spaghetti code anymore. So I start writing with ES6 and use neatly arranged modules. After a minute I hit that roadblock again:

import something from 'path'
^^^^^^

SyntaxError: Unexpected token import

Node doesn’t understand import… Let’s transpile it! Should I transpile it? That’s adding another build tool, more time, more complexity… Quickly I broke the cycle of though and found this article “Don’t transpile JavaScript for Node.js“, and I also got a reply on Twitter, extending on this topic:

Continue reading »