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 »

Floating Islands (update 2)

Islands are finally done – for now. I’ve managed to finish this project and pass an exam with the highest grade (It was my project for university). You can check the walkthrough video below.

My job was to use all UDK’s sample content to create something extraordinary with one rule: “Make two paths from point A to point B, one with obstacles”. You can tell that jumping on the rocks supposed to be the harder route, because it requires you to jump. There’s another, much longer route by the stairs.

I’m not done with this project yet! UDK is great tool to quickly set-up your world with sample assets. But you know whats better? Unreal Engine 4. Floating Islands are going to be my bachelors degree project so if I’m gonna make improvements to this world, I’ll need to change my tools. I’ve already played around with UE4 before getting started with UDK and I can already tell, that thanks to my little experience with both tools, I am able to re-create the whole project with much more efficiency then if I were to keep on improving it in UDK alone.

EDIT: I didn’t had time to update it to the UE4, but I managed to finish this project in time and pass my bacherols degree 🙂 Below is my updated video.

Watch

Screenshots

UDK – Floating Islands.

Step 1: palm trees grow on islands

Floating Islands is a project for studies. We’re limited to use UDK so it’s a little step backward for me. Gaah, that interface 🙁 The plan is to make 1 level where player needs to go from point A to B directly or by alternative route. See that island on the left? Thats my point B. I’m going to put a lot of floating rocks and lower the gravity a bit for some jump-action.

Performance wise, I’ve discovered that default UDK’s grass isn’t well optimised. Static mesh doesn’t have any LOD meshes and the best way to gain some performance is to force it disappear from the screen somehow (‘m not an expert, but I know some stuff). But I wanted to see more grass in the distance! So I imported this grass into Blender somehow, put 2 planes in the center, fix UV maps and export it back inside UDK. Now just set LOD 1 mesh, tweak some properties and Voila! From 50 to 100 FPS just as it should be. Now the rendering runs much faster and I can still see some grass in the distance 🙂 Screenshot below:

Screenshot_2zoom