We have a cool little update to share with you on the ongoing system upgrades in 100% Orange Juice, this time regarding one of the main components of the game – the cards!

Although we’ve updated the card frame art before, the entire card is starting to look very low resolution in the present day, and readability can be an issue, so we’ve been working on improving it for quite some time.

Since its inception, 100% Orange Juice has primarily used what computer nerds call “blitting” to render in-game cards. Essentially, you take one image, place another on top of it (while accounting for transparency and blending), and go about your day.

While this generally works, images are finite resources. Unless you have infinitely high-resolution versions of every asset, you eventually have to settle for sub-optimal resolutions. When these smaller images are scaled up, they become pixelated. That’s why we are revamping the card rendering system!

Vector Graphics and Scalability

Most simple shapes can be described mathematically, and mathematically described shapes can scale infinitely. This is the principle behind SVG (Scalable Vector Graphics). While our game has supported SVGs for some time, simply importing everything as an SVG is difficult because many of the complex elements that make up our cards are too intricate to manage that way.

So?

We have rewritten the card rendering code from scratch. This new system doesn’t just draw elements in a scalable way, it also implements our new SDL_TTF/Freetype text rendering. This ensures you get crisp, clear text regardless of your resolution. We are also able to show much more detail in the card arts!

As a bonus, we have written the core of this system in Lua. This means card models can now be swapped internally by the game (so multiple styles can coexist) or even be modded without much effort!

We still have some questions to solve, but we think the new design is getting there!

What do you think?