Stylized Rendering in WARPSQUAD

Welcome to the first development log for WARPSQUAD! For the past two years, I’ve been working on a co-op space rogue-lite. And now it’s about time I started showing off the game and getting a larger community involved with its development. In this first entry, I’ll briefly explain the game, and give a first look at the graphical style. We won’t go too deep into anything just yet, I’ll leave that for future entries!

What is WARPSQUAD?

WARPSQUAD is a space exploration rogue-lite with a stylized look to be played solo or co-op. Heavily influenced by graphic novels, and gameplay inspired by classics such as FTL where chaotic and tactical decisions play an important role in survival.

You take control of the crew in a spaceship as you travel through points in space to explore, fight, and make important decisions that shape the outcome of your adventure. You’ll be expected to die unless you master combat, make the right decisions, and perhaps have a bit of luck.

Origins of the (Moebius) Style

As I’ve been using marketplace assets I had to figure out a way to still have a recognizable look for the game. I tried to build a unique style through post-processing and was inspired by Moebius early on. Over time the style drifted towards a more general Graphic Novel aesthetic.

Another reason for this heavily stylized look is to allow for bright colors for a more appealing and approachable sci-fi game along with much better visibility of objects – something I often struggle with in space sims.

Interior Rendering

An early problem was rendering both interior and exterior of the ship using different light sources. The first step is using Light Channels and two directional-lights. One for the sun, the other attached to the ship for the interior. Since most lighting actually occurs in my post-process the coloring is sampled from a material parameter collection and the directional lights themselves are white.

To still know if pixels are interior or exterior in the post-process pass I initially tried to fetch this information from the light channel buffer. But this information isn’t readability available and required too much engine work, so I opted for the next best thing: hijacking the Ambient Occlusion Material slot! Something I am not using anyway so I am free to use it to mark-up my pixel data.

Below you can see the AO material buffer (not the same as AO buffer by the way) and how it applies lighting colors differently. You can see a neutral white interior most noticeable on the grey machinery, and exaggerated orange sunlight tint for the asteroids and hull.

More Render Tricks

There is a lot more trickery going on such as re-using Specular and Roughness channels (Even the Metallic has been re-used) to mark-up the pixels as much as possible. These solve issues such as black blobs from small objects at a distance due to lining, or emissive surfaces that require a different approach.

I’d love to eventually talk more in-depth about the ways I hacked the renderer and how you could optimize Unreal Engine for stylized games. But that’ll be another time…(FYI this is all using the stock engine without any modifications)

What’s Next?

I will be using WARPSQUAD as a reference for upcoming advanced tutorials (See my MegaGrant post)! This includes more about Utility AI, Async asset loading, ability systems, materials, and whatever else that comes along in my journey to releasing this game commercially. So join me in the WARPSQUAD Discord and help me out with your feedback!

A few things I’d like to cover in future posts:

• Utility AI for Ships and Creatures
• Text-event System & Editor (Slay the Spire, FTL)
• Async loading and minimizing hard references.
• Custom Action System
• Material tricks, post-processing.
• UMG binding, styling, …
• Custom Spatial Query System
• Runtime blackboards (not just for AI but as general data containers)

Discord!

Wishlist Today!

https://youtu.be/vLTOkeHB8sU

I’ve live-streamed some of the development for WARPSQUAD before, check it out in the embed above and on my YouTube-channel!