devblog_header03

Welcome back, followers of the fearsome! Nick here, with a bit of info on the tech stuff going on behind the scenes here at Slick Entertainment.

This week I’ll be talking a bit about supporting 4k TV’s in Viking Squad. As you probably know, the regular PS4 supports up to 1080p, which is the resolution we initially designed our game for. 1080p should be enough for everybody, right? Recently 4k monitors and video cards have become more affordable, so naturally there is more of a demand to support 4k resolutions. So it was about time I started looking into what would be required to get our game to run at 4k, in a way that makes it ‘worth it’.

The nice part about our user interface (UI) system is that it is able to work with different screen aspect ratios and sizes, because the UI elements are not linked to exact pixels, but rather to more abstract coordinates. For some games pixel-precise UI is super important (for example RTS’s), but for our type of games with not-so-complicated UI it’s less important. The nice thing about linking UI to abstract window coordinates is that it’s quite easy to scale to different resolutions. So switching to 4k shouldn’t be too hard, right?

So, the first step was to actually get a 4k monitor. I bought an ASUS 4k monitor at NCIX, and connected it, but it turned out that monitor didn’t support HDMI 2.0. This, I found out the hard way, means it will only do 4k resolutions at 30fps. Unacceptable! So I checked Staples, and they had a 4k Samsung monitor for sale for $550 CAD, and it had HDMI 2.0 support. That’s more like it!

I set it all up, connected the monitor, ran the game, and boom 4k! It just worked. Well, sort of. There’s a few little gotcha’s that I solved to make it run smoothly at 60fps in 4k.

4k screens, or 2160p as it really should be called, means you need to fill 3840×2160 pixels = 8,294,400 pixels. That’s a LOT of pixels. We’re using a 32 bit color buffer, which takes up just under 32Mb. That’s a LOT of GPU bandwidth. My old programmer brain thinks “this can’t possible be fast” every step along the way. Modern GPU’s have surprisingly little issues with it though! Of course, our game’s rendering complexity is not anywhere near a AAA type game, but it’s still pretty easy to miss frames at 4k because of the massive amounts of data flying around.

One frame in Viking Squad is rendered as follows:

Step 1: Background. All background elements are rendered to a render-target 2/3’s the size of the front buffer, which is then blurred vertically and horizontally, in two steps, requiring one more render target of 2/3s the size of the front buffer.

Step 2: Foreground. All foreground elements are rendered to a render-target 2/3’s the size of the front buffer, also blurred vertically and horizontally

Step 3: Game. The main view is rendered using a full size render target (same size as the front buffer). First the background texture from Step 1 is drawn, then all the gameplay elements are drawn over top of that, and last the texture from Step 2 is rendered over top of everything using alpha blending.

Step 4: Bloom. The texture from Step 3 is down-scaled and to a render target of 1/2 the size of the front buffer. This texture us blurred horizontally and vertically using one more render target of 1/2 the size of the front buffer.

Step 5: Combine. The texture from Step 3 is combined with the texture from Step 4, and in the same step the Color Gradingvignette, chromatic aberration and filmgrain are applied.

The texture coming out of Step 4 is now used in the UI system to render the game, and it then renders any UI over top of this.

So as you can see, there are quite a few render targets, which take up a lot of GPU bandwidth. The textures in Step 1, 2 and 4 are all blurred, so to speed up the 4k performance, I made those render targets max out at 1280×720 (which happens to be 2/3 of the front buffer at 1080p). Because of the blur, this reduction in size is hardly noticeable, except for the increased frames per second.

Polygons and Textures

I’ve written a little bit about how we polygonize our textures, and this came in really handy when rendering to 4k. The edges of our characters stay super crisp, and while we need MSAA at 1080p, at 4k resolutions the MSAA can be lowered a bit to save speed and bandwidth.

Inside the polygonized textures we still display the regular texture. I’ve also previously blogged about how I rescale all textures to 1080p resolution. Jesse usually draws all textures at a bit higher resolution than they appear in 1080p, so to get nice crisp textures in 4k, I just turned the re-scaling off.

 
And here is the result of all this:

 
Alright, that’s it for this week, keep those games rendering at 60fps!

 

-Nick

Twitter: Nick: @nickwaanders Jesse: @jouste Caley: @caleycharchuk SlickEntertainment: @SlickEntInc

Facebook: https://www.facebook.com/SlickEntertainmentInc

Twitch: http://www.twitch.tv/slickentertainmentinc

Posted by: Under: Slick Entertainment,Tech,Vikingsquad

Search:

RSS Get the feed here

titlebutton_twitter titlebutton_facebook titlebutton_youtube titlebutton_twitch titlebutton_spreadshirt

Categories:

Date:

Follow us!

titlebutton_twitter titlebutton_facebook titlebutton_youtube titlebutton_twitch titlebutton_spreadshirt

Join our mailing list!

/ /

Dev Blog

January 20 2017

I almost can’t believe it: Slick Entertainment is a decade old! In the last 10 years we’ve made a bunch of great games, and I am super proud of what we’ve achieved with our small team: 4 fun games, custom C++ engine on 6 different platforms, 3 games feature online multiplayer, all hand-drawn art for […]