Spider Solitaire v0.1 September 2024

Made by Zane

In Vanilla JS, WebGL, GLSL

• Functioning implementation of the classic Solitaire variant, Spider.
• Satisfying card animation inspired by Balatro.
• Dynamically rendering selective regions of a texture atlas.
• Post-processing fragment shader with a framebuffer object.
• Custom, original sprites for 2 suits of a card deck.
• All written in vanilla Javascript with direct calls to the WebGL API.

This project began with some attempts to mimic Balatro's card feel. I've been obsessed with Balatro all year, and the satisfying feel of the cards inspired me. Being a LOVE2D game, it's actually very easy to access Balatro's source code and shaders, but for the most part I challenged myself to create the effect just by opening up the game and looking closely.

It was important to me to experiment with lower level graphics work, interfacing with the WebGL API directly in vanilla Javascript, no existing game engines involved. I had done a lot of this lower level work in my Computer Graphics course, but practice makes perfect, and I felt like I hadn't fully retained everything I learned.

Unlike Ping and Darwinism, this game was not made for a game jam, and so I was beholden to no deadlines other than the end of the month. This made it a little harder to block out time but also gave me a lot of time to work on this. Unfortunately, I wasn't able to finish everything I wanted in time.

I was very successful at imitating the specific card effects of Balatro. The cards have an small idle 3D rotation, and pop up satisfyingly when you hover or click them. The way a card follows the cursor when you drag it is not 100% accurate, (in Balatro, it moves at a linear top speed to the cursor's location. mine speeds up the further away it is) but the rotation on the movement is pretty accurate.

Balatro does not have the same concept of a card pile that Solitaire does, so I had some creative freedom when implementing that. I made the whole stack pop up and curl up on hover, and move with increasing delay when dragged. It's very satisfying to slide the cursor up and down them.

One feature I was very excited to include was a texture atlas. This was totally new for me to implement, and after a lot of work I was able to draw any card from the one texture that contains them all.

A surprisingly difficult thing was loading multiple textures, one for the cards and one for the background. I repeatedly had issues where this would break the card rendering.

Another graphics challenge was the CRT post-processing shader. The shader itself was the only thing I referenced Balatro's actual code for. (NOTE: I definitely have the bloom tuned way too strong, but oh well.) Implementing this shader required rendering my initial scene to a Framebuffer object and then rendering that to a textured quad with the CRT fragment shader applied to it. This was covered briefly in my Computer Graphics class, but I came to understand the process much better implementing it myself from scratch.

I made an attempt to separate the responsibilities of the game model and a combined view/controller, but I wouldn't say I was very successful. There ended up being a lot of duplicated code across both which only made things more fragile.

My hope was that this separation would make some features like an undo button easy, as I could just track the state of the game in the model and pop the latest move off. However, the way I handled animating moves made this very difficult in practice, and I ended up scrapping it for time.

I was successful with some game engine-y features, like a resource manager to handle loading images and audio files.

The game has some performance issues. It gets inconsistent framerate and runs very poorly on some machines. I wasn't able to implement performance fixes, but I could have improved it a lot by batching the card's draw calls.

This game is not complete. It is playable but I have not implemented everything I intended to. I would like to come back and complete this in the future. Here are some of the items leftover from my to-do list:

• Finish the spritework (face cards and aces are placeholder)
• Shadows under the cards. They look quite flat against the background without them.
• Undo button. I made this one much harder on myself with a poor MVC attempt.
• Ghost cards showing on which pile a held card is going to place.
• Batching draw calls for performance.
• Onscreen buttons for undoing/starting a new game.
• Score tracking.
• SFX/VFX when dropping cards onto a pile.
• Animation for initial deal.
• Card animations should be framerate independent.
• Parameterize CRT effect with uniforms so the player can tweak it.