The first version was rough. A basic game loop, two players taking turns playing cards, castles going up and coming down. It worked, but it felt lifeless. The cards were static, turns had no weight to them, and the whole thing looked like a prototype because it was one.

The stack

I went with Node.js and Express on the backend, with server-side rendered JSX templates and HTMX handling most of the interactivity. The real-time multiplayer runs over WebSockets. State lives in Valkey (a Redis fork) for persistence. It is not a typical setup for a game, but it works surprisingly well for a turn-based card game. Pages load fast, the server does the heavy lifting, and the client stays light.

No React, no Vue, no build step for the frontend. Just plain JSX templates rendered on the server and HTMX swapping in the updates. It sounds old-fashioned but it keeps things simple. When a player plays a card, the server calculates the new state, renders the HTML fragments, and pushes them to both players over the WebSocket. Both sides always see the same thing because there is only one source of truth.

Getting the game right

The card balance took a long time to get anywhere close to right. There are 57 cards in the game right now, split across offense, defense, magic, resource, and special types. Each one interacts with castle HP, wall height, and three resource pools (bricks, crystals, weapons). Early on, some cards were obviously broken. A well-timed Dragon could end games in three turns. Resource generation cards felt pointless when you could just rush offense. It took dozens of playtesting rounds and small tweaks to get the pacing where it should be.

The AI opponent went through several iterations too. The first version just picked random legal cards. Then it got some basic heuristics, like preferring offense when the opponent has low walls, or building walls when under pressure. It is not going to fool anyone into thinking they are playing a human, but it gives new players something to practice against and fills the gap when nobody else is online.

Campaign mode

Single player campaign was one of the bigger additions. Six levels, each with a different AI personality and modified deck. Some levels limit your resources, some give the AI a head start, one gives the AI a stacked deck of high-cost cards. The idea was to teach different strategies through the level design itself rather than through tutorials. There is a star rating system for each level based on how quickly you win, which gives people a reason to replay.

Going cross-platform

The game runs as a PWA, so you can install it on your phone or tablet and it works. It is also a Discord Activity now, so people can play directly inside Discord voice channels with friends. That was an interesting integration. Discord's Embedded App SDK handles the auth flow and lets you pull in the player's Discord identity, so their username shows up in-game automatically.

There is a Steam release in the works too. That one is an Electron wrapper that loads the web version but adds Steamworks SDK integration for achievements, cloud saves, and the Steam overlay. The game itself stays the same, just packaged differently.

Multiplayer and matchmaking

The matchmaking is intentionally simple. Click play, get put into an open room or create a new one. No queues, no ranked tiers, no wait times. For a small player base, anything more complicated would just mean longer waits. There is an ELO rating system running in the background that powers the leaderboards, but it does not gate who you can play against.

One thing I added recently is the ability to join games that are already in progress against AI. If someone is playing solo and you click play, you get a choice: jump in and replace the AI, or start a fresh room. Small feature, but it makes the game feel more alive when there are only a handful of players online.

Push notifications handle the asynchronous side. In long game mode, you can play a turn and close the browser. When your opponent plays, you get a notification to come back. It is not real-time at that point, more like correspondence chess but with castles.

Tournaments

The tournament system runs on a scheduled bracket format. Players sign up, get matched into a single-elimination bracket, and play through the rounds. Each match is a standard game with a time limit. The bracket updates live on a hex-grid map that shows which castles are still standing and which have fallen. It is probably the most over-engineered feature in the whole project, but it looks cool and gives the competitive players something to aim for.

What I learned

Building a multiplayer game on web tech taught me a lot about state management and the thousand ways things can go out of sync. WebSocket connections drop. Sessions expire. Players close their browser mid-turn and come back three days later expecting everything to still be there. Every edge case you can think of will happen, and a few you would never think of.

The HTMX approach turned out to be a good fit for this kind of game. Turns are discrete, state changes are well-defined, and the server already knows everything. There is no need for a thick client keeping its own copy of the game state. The trade-off is that you lose the ability to do complex client-side animations, but for a card game about building castles, simple transitions and CSS animations do the job.

If I were starting over, I would probably make the same tech choices. The simplicity of the stack means I spend most of my time on game features instead of fighting tooling. And for a solo project, that matters more than anything.

What is next

Steam launch is the immediate goal. After that, more campaign levels, more eye candy, and some kind of clan or guild system tied into the Discord integration. The leaderboard already tracks which Discord servers have the most active players, so building on that with server-vs-server competitions is the natural next step.

The game is free to play at https://cwl.proclive.io and as a Discord Activity. If you have any feedback or want to follow development, the in-game chat is usually the fastest way to reach me.

Trooper

Packed with dodging bullets there are ninjas coming out of walls, constant rain of plasma in the arena and surprising frags even Nostradamus didn't see coming! Check it out we even got featured by iHASYOU and it hasn't even been a week!

We also launched a patreon site

You can support us there with about three fiddy a month so one day we might even shed the weight of creative chains that is ad-based revenue. We will put more updates there as well so you can do some corporate spying of our team, our process, and our awesome ideas (again, for about three fiddy).

As of writing this article PIXI.js version is 4.5.1 and lights are still not a part of official release, but if you really really want to have lights in your pixi project, there is a way.
All thanks to a guy called finscn, I don't know much about him, but he'll be a hero of this article.

Anyway, let's get to the juicy part. You can grab his pixi version from here but you'll probably have to build it yourself, or in case if lights get removed, I'll upload a pixi version which I have built from his repo, tested and wrote this article on so chances are it will most likely work if you download this file. Hopefully I'll update this version as new pixi versions get out, or feel free to remind me once in a while in the comments if necessary.

Before we start, here is what you're after:

To make that, you'll need at least 2 images, a normal one and a normals map one, here are the two from the example, courtesy of Proclive artist Pjero Jericic:

I've pushed this one a bit too far with settings for generating the normals image, pushed sharpness to the max and crazy stuff like that. This can probably look a lot better with more experimenting but I was just glad it worked and moved on.

Time to filter out people who came to copy/paste so here you go:

First, project structure.

image/  
image/bg.jpg  
image/bgNormals.jpg  
image/alien.png  
image/alienNormals.png  
lib/  
lib/pixi.js  
main.html  
main.js  

main.html

<!DOCTYPE html>  
<html>  
    <head>
        <meta charset="utf8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui" />

        <title>Pixi v4.5.0 Lights with finscn and proclive</title>
        <style>
            html, body { margin:0; padding: 0 }
        </style>
    </head>

    <body>
        <canvas id="canvas"></canvas>
        <script src="lib/pixi.min.js"></script>
        <script src="main.js"></script>
        <script>

        </script>
        <br>Number of Lights: <span id="numLights">1</span>
    </body>
</html>

main.js

var DirectionalLight = PIXI.lights.DirectionalLight;  
var PointLight = PIXI.lights.PointLight;


var canvas = document.getElementById("canvas");  
var viewWidth = 512;  
var viewHeight = 512;

var renderer = new PIXI.WebGLRenderer(viewWidth, viewHeight, {  
    view: canvas
});

var stage = new PIXI.Container();  
var lightCount = 1;


var lightHeight = 90;  
var allLights = [];


var dirLight = new DirectionalLight({  
    color: 0xffdd66,
    brightness: 0.25,
    ambientColor: 0x555555,
    ambientBrightness: 0.6,
    position: {
        x: 0,
        y: 0,
        z: lightHeight,
    },
    target: {
        x: 0,
        y: 0,
        z: 0,
    }
});

var mouseLight = new PointLight({  
    color: 0xffffff,
    brightness: 4,
    position: {
        x: viewWidth / 2,
        y: viewHeight / 2,
        z: lightHeight,
    }
});

allLights.push(dirLight);  
allLights.push(mouseLight);


function createClickLight(x, y) {  
    var clickLight = new PointLight({
        color: 0xee3311,
        brightness: 8,
        falloff: [0.3, 6, 60],
        position: {
            x: x,
            y: y,
            z: lightHeight,
        }
    });
    allLights.push(clickLight);
}

PIXI.loader  
    .add('alien_diffuse', 'image/alienpng')
    .add('alien_normal', 'image/alienNormals.png')
    .add('bg_diffuse', 'image/bg.jpg')
    .add('bg_normal', 'image/bgNormals.jpg')
    .load(function(loader, res) {
        var bg = new PIXI.Sprite(res.bg_diffuse.texture);
        stage.addChild(bg);

        var alien = new PIXI.Sprite(res.alien_diffuse.texture);

        alien.position.set(0, 0);
        alien.scale.set(0.5, 0.5);

        dirLight.target.x = alien.x;
        dirLight.target.y = alien.y;
        dirLight.updateDirection();

        bg.normalTexture = res.bg_normal.texture;
        alien.normalTexture = res.alien_normal.texture;

        bg.pluginName = "lightSprite";
        alien.pluginName = "lightSprite";

        bg.lights = allLights;
        alien.lights = allLights;

        stage.addChild(alien);

        canvas.addEventListener('mousemove', function(e) {
            var rect = e.target.getBoundingClientRect();

            mouseLight.position.x = e.clientX - rect.left;
            mouseLight.position.y = e.clientY - rect.top;
        });

        canvas.addEventListener('click', function(e) {
            var rect = e.target.getBoundingClientRect();

            createClickLight(e.clientX - rect.left, e.clientY - rect.top);

            document.getElementById('numLights').textContent = ++lightCount;
        });

        animate();
    });

function animate() {  
    requestAnimationFrame(animate);
    renderer.render(stage);
}

People who kept reading and didn't copy/paste directly into their working project parts of code which they thought they need will know that this only works with WebGLRenderer, apart from that, all you need to do when adding a new sprite is:

• add a new sprite created with diffuse image
• set ".normalTexture" to normal map (name from loader.add first param)
• set ".pluginName" to "lightSprite"
• set ".lights" to array containing all lights that should affect that sprite

Simple enough, now let's hope finscn PR gets merged into official pixi.js repo and get released soon so I can rewrite this tutorial.

That's all folks, now I can't wait to see some lights flickering on some game character using minigun

Finished product

This is a npc character from our upcoming game Trooper, which will be a fun and cool 2D shooter, with signature style and enemies. We are doing all of our animations in "frame by frame"(pretty awesome, right?). I chose this type of character for the tutorial because it only has two actions: "walking" and "idle". Let's break down all the steps and then you can watch the video at the bottom of this post.

Alright, let's get started!

Step 1: Drawing

Choose your character or draw something similar, whatever you like. Style and coloring is not important, be creative.
Start with a sketch and try to visualize how your character will look and what parts will be animated.
The most important thing is to draw all the body parts in different layers. In this case, we have a non playable character that doesn't have so much actions so I separated the head, body and legs(leg-front and leg-back).
As you can see I have layers for the lineart(head, body, legf,legb) and colors(headx,bodyx,legfx and legbx) of each part of our soldier.
When I'm happy and satisfied with the finished look of my character I merge the matching layers and I create a group, in this case called "1". That will be the first frame for our animation.

Fun facts:
Sometimes you can make things easier. I simply copied the front leg, reduced the size and there you go...now you have both legs.
You can notice that my lineart for the head wasn't the same color as the rest of our soldier. I had to do some color blending for my "head" layer. Mistakes do happen but there is always a way to correct them as you go. :)

Step 2: Animation

After our soldier/character is all nice and ready we can start bringing him to life. I copied the group 3 more times so all together I have 4 same groups. I've done this many times so I kinda know up front that I will need 4 frames for walking. For each frame a matching group(frame 1=group 1,frame 2 =group 2,etc). You don't have to do things like this, you can just start with first one and copy it as you go.
First open up the Timeline window. Go to the top navigation, choose Window > Timeline. The Timeline will let you turn on and off or move different layers for each frame.
The Timeline window will appear at the bottom of your screen. In the Timeline window, click "Create Frame Animation".
Your Timeline should look something like this. I have marked the important things that you can change/edit.
For each frame you can choose which layers/groups will be visible or you can move different parts of our solider to create movement. For frame 1 you turn on just group 1, for frame 2 just group 2, etc. When you click on the first frame it will show that the group "1" is only visible. So you choose layer legf(front) and you move it as the character is walking.
Repeat the process with other frames, try to experiment and play with the movement of the character as you like.
This is the process of "walking". As you can see I'm moving his body and head a little because people do lean a bit when they are walking. Try to add small details like that.
For the "idle" process i just wanted to look like that the character is breathing. Of course, you have to create new frames and matching groups, in this case it was two new frames. I just moved "head" and "body" down a little for one frame to create movement.
You can always click "play" button at the bottom of the panel to see your animation and look for mistakes. Always remember, if you want to draw/add new things just create a new layer and copy it if you need it for more than one frame.

Step 3: Exporting

If you're happy with your animation and want to save it as a gif to use it online(or just brag about it to your friends), go to the top navigation bar and click File > Export > Save for Web (Legacy).
If you want to export each layer cos you need them for sprite sheets(like we do in Proclive) the first thing to do is to merge your layers in each group and rename them as you wish.
I had problems with exporting cos when I would select all the layers in the layer panel and then Right Click > Quick Export as PNG the Photoshop would trim the transparent pixels and the images won't be the same size.
You can always click on File > Export > Quick Export as PNG but you will need to do that for each frame and it can take a lot of time when you have many frames.
So, the best way to do this, go to the top navigation bar and click File > Export > Layers To files. I'm not sure if the older versions have this option but this is the easiest way to export your layers.
After I export my layers I use TexturePacker to create sprite sheets. I know there are maybe some scripts for
Photoshop but I find this program very easy to use.

I hope you guys liked this tutorial and enjoy the video.

preview

var renderer = PIXI.autoDetectRenderer(800, 600,{backgroundColor : 0x1099bb});  
document.body.appendChild(renderer.view);

// create the root of the scene graph
var stage = new PIXI.Container();

// create a texture from an image path
var texture = PIXI.Texture.fromImage('assets/bunny.png');  
var carrotTex = PIXI.Texture.fromImage('assets/carrot.png');

// create a new Sprite using the texture
var bunny = new PIXI.Sprite(texture);

// center the sprite's anchor point
bunny.anchor.x = 0.5;  
bunny.anchor.y = 0.5;

// move the sprite to the center of the screen
bunny.position.x = 200;  
bunny.position.y = 150;

var background = new PIXI.Graphics();  
background.beginFill(0x123456);  
background.drawRect(0,0,800,600);  
background.endFill();  
stage.addChild(background);

stage.addChild(bunny);

stage.interactive = true;

stage.on("mousedown", function(e){  
  shoot(bunny.rotation, {
    x: bunny.position.x+Math.cos(bunny.rotation)*20,
    y: bunny.position.y+Math.sin(bunny.rotation)*20
  });
})

var bullets = [];  
var bulletSpeed = 5;

function shoot(rotation, startPosition){  
  var bullet = new PIXI.Sprite(carrotTex);
  bullet.position.x = startPosition.x;
  bullet.position.y = startPosition.y;
  bullet.rotation = rotation;
  stage.addChild(bullet);
  bullets.push(bullet);
}

function rotateToPoint(mx, my, px, py){  
  var self = this;
  var dist_Y = my - py;
  var dist_X = mx - px;
  var angle = Math.atan2(dist_Y,dist_X);
  //var degrees = angle * 180/ Math.PI;
  return angle;
}

// start animating
animate();  
function animate() {  
  requestAnimationFrame(animate);

  // just for fun, let's rotate mr rabbit a little
  bunny.rotation = rotateToPoint(renderer.plugins.interaction.mouse.global.x, renderer.plugins.interaction.mouse.global.y, bunny.position.x, bunny.position.y);

  for(var b=bullets.length-1;b>=0;b--){
    bullets[b].position.x += Math.cos(bullets[b].rotation)*bulletSpeed;
    bullets[b].position.y += Math.sin(bullets[b].rotation)*bulletSpeed;
  }
  // render the container
  renderer.render(stage);
}

To further improve this code, you should remove bullets when they hit something or get out of the screen. I use bullet manager class to recycle sprites instead of removing them and creating new ones. With any serious game you'll eventually want to avoid Garbage Collector calls and to save memory. You can also adjust functions to include distance from player and to add an offset to initial coordinates (like if you want to give a gun to the bunny), something like this:

{
  x: bunny.position.x+Math.cos(bunny.rotation)*distance+offset.x,
  y: bunny.position.y+Math.sin(bunny.rotation)*distance+offset.y
}

I'll have to make our illustrator Pjero draw a carrot gun so we can rotate that instead of the bunny but for quick and simple tutorial it will serve the purpose and push you in the right direction.

This tutorial can also be further improved with your suggestion so use that weird thing below this article in which you can write something so I can read it later.

var drag = false;  
createDragAndDropFor(container)

function createDragAndDropFor(target){  
  target.interactive = true;
  target.on("mousedown", function(e){
    drag = target;
  })
  target.on("mouseup", function(e){
    drag = false;
  })
  target.on("mousemove", function(e){
    if(drag){
      drag.position.x += e.data.originalEvent.movementX;
      drag.position.y += e.data.originalEvent.movementY;
    }
  })
}

Cheers!

TV Series Tracker

Get notified of new episodes of your favorite TV series as they come out!

No need to install anything - TV Series Tracker will send you a Facebook notification when a new episode airs. You can check it out here for yourself, or see the video demonstration (0:45) below: