Building Fortress

Building Fortress

I always wanted to build a game but lacked fundamental knowledge needed to execute. Typically games are built with popular engines like Unity and Unreal, but I was more interested in learning how to build 3D games using web technologies.

Maybe it’s because I lived through the evolution of technologies on the internet and was inspired by the progress. Browser capabilities evolved all the way from 2D pixel art to complex 3D scenes with post processing effects.

At the time, what was challenging about building games in the browser was that there were no commercial or open source engines available that were easy and intuitive to use. When shopping for an engine I noticed a lot of the abstractions used to facade complicated functionality were also equally as complicated to implement and use.

It’s possible I just wasn’t equipped with enough foundational knowledge of game development to use them effectively. Maybe these engines were really not for beginners but for intermediate and advanced users that had already built games before. This inspired me to build my own engine, so I could learn more about all the moving pieces.

Game engines solve a long list of deep and narrow problems. Problems I was curious to learn more about were client/server netcode and game loop design. I was also interested in figuring out how far we could push game UI’s using HTML and CSS that would be of comparable quality to UI’s made by studio artists.

I set clear goals for Fortress. I was going to build a WebGL based casino game with lock step netcode and a responsive UI made with hand painted art.

The game worked like this. A 3D castle made up of blocks represented the total pot size. The materials of the blocks indicated the value of the pot. After players placed their bets, the castle would change in appearance. For example, a high value pot may turn the castle from bronze to gold.

In Fortress you could bet on green, pink or purple. The castle would spew gems of the winning color from the top and the winners would split the pot.

For this game I could simplify the net code a little bit because the step size was so large. There was only 1 move per round, and rounds were 15 seconds long. With a step size so large it also didn’t make sense to interpolate game state over a fixed interval.A little bit of pub sub with a socket connection was all that was really needed.

The game loop was probably the most challenging part of the project. I found it difficult to manage the internal state of entities in the scene because I was unfamiliar with ECS architectures.

Since I was a beginner using WebGL, I faced a skill gap with some of the things I wanted to do artistically. I worked with a talented texture artist for the castle block variations but had trouble getting the image maps to look good in the models. I learned more about:

In the end I was able to get wood to look like wood, and gold to look like gold. The render style leaned into stylized realism because the UI was also designed that way. It was important to me that everything felt cohesive artistically.

Fortress App Desktop 1Fortress App Mobile 1

The gems and magic dust that spewed out of the castle at the end of each round were tweened over curved splines arranged in a radial distribution. Using a little bit of variance in the splines shape I was able to get a nice fountain effect.

When a block was upgraded it “popped” before another one took its place. I built a sprite based animation for the cartoonish puff of smoke coming from the pop. I learned more about:

The last challenge was the game’s responsive artistic UI. I had to design each piece of the interface in such a way that if it were to collapse horizontally or vertically, the object would still make sense artisitcally. The artist I worked with was excellent in understanding the engineering constraint and nailed the delivery on the assets.

Fortress App Elements 1Fortress App Elements 2

The biggest lesson I learned on this project was how much depth there is in game development. I also learned that some of the netcode and entity component architectures really only work “one way” so you really have to understand the concept before implementing it. I think this project was a good stepping stone towards building more complex games in the future.