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:

tl:dr – use require/module.exports, leave transpiling for the client-side code.

So I did. And with clean heart I could continue.

Continue reading »

Monstrous Escape – first try at tabletop game

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.

So I begun first prototypes. Just use a regular playing cards deck and go from there. I changed diamonds to monsters, other numbers were attacks and faces (J, Q, K, A) action cards. I drew over them silly faces and weapons. First version was tested only by myself and 2 to 4 “imaginary” testers, so when I played it with a real person for the first time, the game usually ended by 3 to 6 turns… That’s not good. After that came another prototype, with some rules to make game longer and also with powerful monsters that can act as action cards when you defeat them (this one was brilliant). For example, you could place monstrous Queen on player’s battle zone. Whoever defeats this monster, can use it as an action card called Headshot – kill any monster immediately.

I quickly realized that preparing each version of prototype and playing it even by myself took more time than I expected…

While ago I purchased Tabletop Simulator on sale and I realized that it could be perfect prototyping tool. No paper cutting required anymore. Just make a quick card deck in PNG, import and play. TTS has a scripting ability, so being a programmer i couldn’t resist hacking some logic controller in, but days passed and I didn’t do any actual progress on the game itself. I ditched Lua, and just started playing with rules displayed on another monitor. Shuffling was much faster, just press R on keyboard. Deal 8 cards with a click. Test, test, test.

On one bus ride back from work I tried to find a place where I can test this game with people I don’t know. Pyrkon quickly appeared in my search results with its “testing with Pyrkon” program. It’s a Polish convent located in POZNAŃ (300 km away from me). The idea was wild at first but I had to be there! For Adventure! I signed in with my girlfriend (she does all the graphics now) and we waited. We’ve got a reply, but I wasn’t sure if they chose us or not. So days passed and I stopped thinking about this game and moved on to another idea.

We’ve got a reply just a week away from the convent. WHAT. They gave me only a week to re-print the cards, cut them up, write the rules in human-readable format for new players, make a box, find a hotel and get train tickets… Busy week.

We made it! It was kinda great, I came there without knowing what to expect. The beginning was stressful but we got over it quickly. I counted 25 games played with strangers in 2 days (5 hours each day, during the weekend). We’ve got people in different age groups, which was great. Guys with other prototype played with us for a while and gave really constructive criticism. Woman in her 40s didn’t get the game but his husband was having fun. One teenager almost broke the game but came up with a sick combo which was amazing and still logical (he used a landmine action on himself, which I never though of doing). One kid spent over 2 hours with us!

This whole weekend was a real mind opener. We found some time to just walk around and see what other guys have. I even played 1 other prototype. It was 2 player card game with a Sherlock theme. Mechanically the goal was to place down cards in 3 columns and finish round with advantage of points in each column. There were so many other things to see. So many possibilities to create tabletop game, tokens, dice, counters, square cards, cubes. This event got me inspired.

Now I’m trying to come up with other game ideas, watching a lot of board game reviews online, gathering some tools to help me prototype in-real-life. I’m digging through my old list of video game ideas to see if any of those could work in tabletop format. In my job we now have a 2 hour meeting, once per 2 weeks, where we just play some games during working hours. Maybe one day I’ll bring my game there and see how it plays 🙂

I’m not sure yet if I’ll come to another Pyrkon next year. But I’m sure I’ll keep prototyping!

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.

A little white box is replaced with a robot guy from the original GrayScale prototype! Fun fact: head and legs are animated independently (2 different sprites) which saves me a lot of sprite animation drawing. Head will always follow a mouse cursor, that’s aim direction, and legs will animate independent of the head.

I started using TexturePacker to merge (almost) all the textures, which didn’t work well with luxe’s SpriteAnimation component. I drew all player animation frames in one file: head looking around, legwork and other animations are put in 16×16 grid, in 4 rows. TexturePacker treats that whole file as one “frame” in a frameset. Luxe’s SpriteAnimation component can’t guess if given packed texture is a mixture of actual frames and independent animations, which in my case it is. I had to modify this component a bit to correctly setup player animation.

In the mean time I’m preparing some functions and variables to be used in new powers. One example would be grab/throw mechanic. My last GBJam game RUSH used it and it was pretty fun. I can already think of much more use cases for it.

On a side note, I’m just amazed that my XBOX One Controller is natively supported on Ubuntu! I remember waiting for the official driver to come out back when I had Windows installed… Linux never stops to amaze me.

Continue reading »

Auto Terrain Generator for Tiled

Demo

Download

Just let me download it already! https://github.com/Zielak/AutoTerrainGen/releases

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.

GitHub

Download: https://github.com/Zielak/AutoTerrainGen/releases

Get the source code and play with it: https://github.com/Zielak/AutoTerrainGen

I’m open for PRs and fixing issues. I’m working only on Linux and Windows so It would be cool to see someone build this tool without problem on a Mac 🙂

Continue reading »

GrayScale – dev log #2

After a few small updates to the GrayScale I’ve realised 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 challange is to make compatible tileset that will work with Tiled, It needs many combinations.

Camera movement

Cmera from the last HaxeFlixel version of GrayScale was simply awesome:

  • It smoothly followed character while it was moving around
  • And limited the distance from camera’s center to character (deadzone), so player can always see where he’s dashing to.

You can find the example GIF of “old” camera movement in my previous GrayScale – dev log #1.

Until now only smooth-follow was implemented, and It looked pretty. But the gameplay is too fast for it. Player can quickly dash in a direction, and now not all enemies/obstacles in front of you are visible.

First try at implementing dead zone failed. I couldn’t get the character to stay still on-screen while player was moving straight. The sprite always stutters where it’s on the edge of dead zone but should remain still. I kept trying different camera settings:

Tight smooth follow, without deadzone

As you can see (or not) the character (white box) doesn’t stay still in one position, relative to camera view, when moving straight in line (tiny stutters). This won’t look good after I add character sprite to it.

Continue reading »

GrayScale – dev log #1

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 🙂

Quick intro

GrayScale is a small game I made for GameBoy Jam last year. It was made in HaxeFlixel but I wanted more control over my code and be able to easily create lots of enemies with different abilities. After few hours of googling I stopped by a thing called “Component Entity System” and finally found luxe engine (and so far I love it!). You can read more about the project itself on my blog.

Movement & “fixed time rate

Movement is the core gameplay in here, you can walk, run, dash and jump-attack. I organized each type to extend from one Mover component so each kind of mechanics share the same base (which is really thin so far). With components it’s easy to make characters controlled by player or AI and make them move by similar rules. I can make new enemies that walk around and dash-attack the same way that player does. Movement can be basically used for moving any kind of objects around the world. This way I could use it to move projectiles, doors, platforms etc.

Continue reading »

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 laggs horribly while recording a video, I’ve seen at least 2 letsplayers who had issues with my game.

Then I found luxe engine.

Component entity system would solve my problems with creating new enemies/abilities. Direct GL calls everywhere (OpenGL/WebGL). No Flash. Plus I could add fancy GLSL shaders into the game, like explosion shockwave or changing colors in runtime without using thousands of different sprites.

Luxe engine enforces programmers to do most of the job, but thats OK with me. I have more control over what I’m creating. I define how physics work, how collisions are calculated in tile-based world.

Box learned a new trick - Stomp

Continue reading »

1GAW – #4 Simon says

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.

Continue reading »

Twitter widget refresh

I couldn’t find anything in the Twitter Embedded Timelines documentation that would let me set refresh interval so I made my own. At first I thought I could simply reset the iframe’s src attribute, which usually would reload frame’s content. But Twitter’s widget didn’t had src attribute.

I found a solution. It’s really quick and dirty one, but it works. You can get and modify it to your needs. I’ve only tested it with list’s timeline.

Continue reading »