July Dev Update: Tech & Trailer WIP
Hello all,
How are you? We hope you’re well. We’ve been sticky in the summer heat (or is that just the sweat from hardc0re game dev?), but we’re staying hydrated so all’s good. This month Jeremy has some techy optimization hints to share and Evan’s got some sneak peaks at our upcoming trailer.
Jeremy’s Performance Party
An important part of making a video game is making sure it both looks good and performs smoothly on a large variety of computers. This means automatically adjusting various quality settings depending on how powerful your computer is. Some effects don’t have quality settings though, and can only be entirely turned off, or entirely turned on.
Most of the time, this isn’t very ideal, and it’s especially not ideal when the effect is water reflections. Let’s look at how we can maintain a reflective surface even on a low-powered computer.
This is the scene we’ll be looking at, which is a rainy street scene with a lot of reflections. Ideally, the reflections will be generated in real-time, and everything in the scene will reflect accurately. You can see this in action if you look at the reflections of the pedestrians walking across the street.
This looks great, but it’s very expensive since it draws the entire scene twice: once for the normal view the player sees, and a second time for the view the ground sees. On a medium-power computer, the scene may take 15ms (milliseconds) to draw once. So if the game needs to draw it a second time, that’s 2 * 15ms = 30ms, which gives us a framerate of 33fps, which is fine for this kind of scene.
But on a lower-end machine it might take 24ms to render the entire scene, and 2 * 24ms = 48ms = 20fps, which is pretty bad! If we turn the reflections off, we get a framerate of 41fps, which is great, but the scene looks pretty lifeless as a result.
We really lose the sense of a rainy street scene without those reflections! So how can we get those back, but without having to draw the scene twice every frame? The answer is: we cheat!
The first trick we can use is called “cubemap reflections”. We take 6 photos of the scene and stitch them together into one image using some fancy math I don’t really understand, but thankfully Unreal Engine does all this for us. Using this cubemap image, we can simulate what reflections would look like, using more fancy math. This is way cheaper since we don’t have to draw the scene twice each frame; instead we can use a premade image.
Nice! But we’ve lost the nice reflections of the pedestrians. Don’t worry, we’ll fix those using the next technique.
This is the next scene, and while cubemaps work great for big open areas, they look pretty bad in areas like this, with long straight sections that need pretty accurate reflections. Thankfully, early 3D game developers created a neat trick we can use here.
First, we take all the areas of the street that are reflective, and make them transparent. Then, take the entire scene that needs to be reflected, duplicate it, and flip it! This technique is extremely common in games even today, and has been used since the dawn of 3D graphics. One of the earliest examples I can remember is the mirror room in Super Mario 64.
In our case, we didn’t even duplicate the storefront meshes, we just took a picture of each storefront, blurred it a bit, and put it on a flat plane below each storefront. These textures are small (256px squares), so they’re much cheaper than even the cubemap we used earlier. This is how we’ll solve the pedestrian reflection issue shown earlier, as well. The final result is a “low quality” scene that looks effectively identical to the “high quality” scene.
This takes care of all the performance issues in the opening level of the game. This runs at a smooth 33fps on even a low-end computer, and we can use automatic quality scaling to switch between the real-time reflections and the super-fake reflections. Hooray!
Evan’s Trailer Talk
In addition to polishing the game I’ve been working on a new trailer for our release date announcement. We’re still in the middle of making it, but I think it’d be fun to share what the process and goals are like :)
Our previous trailer was aired at the PCGamer show at E3 2019.
[previewyoutube][/previewyoutube]
The reception to this was really good. It seemed people were really sold on the concept of The Big Bang as a noir creation myth (after they got the “bazinga”s out of their system) and intrigued by the art direction. I watched the live Twitch chat (which always devolves into a rude mob) and was amused by the “don’t do drugs” and “trippy” they were spamming; I’ve never done drugs and no one has seen the trippy stuff in GN yet but, hey, I’ll take it.
It seemed like the universal reaction was “I have no idea what this game is about, but I’m intrigued nonetheless”.
For our release trailer, I’d like the story and game to be clear while still maintaining intrigue. Not only will clarity help sell people on the idea, but setting up expectations properly will lead people to have a better experience with the game.
I’d hate to have someone watch a trailer with an interesting but opaque presentation and play our game expecting a traditional adventure game, challenging puzzler, open world, etc. etc. Genesis Noir is about the entirety of time and space, so there’s a lot of room for people to imagine their particular tastes existing in the game. If people go into the experience with an understanding of the boundaries then they can be pleasantly surprised by the deviations the author puts in, rather than be disappointed by the differences from their imagination.
The challenge for us is to clearly portray our unconventional story and interactions in a quick edit. Our tactic to accomplish this is to begin the trailer with genre expectations and then divert into the more unfamiliar territory.
Thus we’re beginning the trailer with the classic “lady shows up at the protagonists door” noir scene. Here’s a work-in-progress gif.
After this, well it gets weird as you might expect.
---
The biggest challenge is to convey the gameplay. Our game doesn’t use traditional mechanics and though we repeat interactions, they’re often re-contextualized and not immediately familiar.
Our strategy is to once again begin with a recognizable noir game interaction of inspecting a clueboard.
---
We’re also adding a textual synopsis in the edit of “A cosmic adventure of love, loss, and betrayal.” I think this is a nice balance between clarity and intrigue. You get an idea of the direction of the storytelling, but nothing too specific. It’s a nice excuse to put in some fun typography too.
---
Anyhoo, I think it’ll be a fun trailer :)
Thanks for sticking with us, hope you’re all well!
Evan + Jeremy
How are you? We hope you’re well. We’ve been sticky in the summer heat (or is that just the sweat from hardc0re game dev?), but we’re staying hydrated so all’s good. This month Jeremy has some techy optimization hints to share and Evan’s got some sneak peaks at our upcoming trailer.
Jeremy’s Performance Party
An important part of making a video game is making sure it both looks good and performs smoothly on a large variety of computers. This means automatically adjusting various quality settings depending on how powerful your computer is. Some effects don’t have quality settings though, and can only be entirely turned off, or entirely turned on.
Most of the time, this isn’t very ideal, and it’s especially not ideal when the effect is water reflections. Let’s look at how we can maintain a reflective surface even on a low-powered computer.
This is the scene we’ll be looking at, which is a rainy street scene with a lot of reflections. Ideally, the reflections will be generated in real-time, and everything in the scene will reflect accurately. You can see this in action if you look at the reflections of the pedestrians walking across the street.
This looks great, but it’s very expensive since it draws the entire scene twice: once for the normal view the player sees, and a second time for the view the ground sees. On a medium-power computer, the scene may take 15ms (milliseconds) to draw once. So if the game needs to draw it a second time, that’s 2 * 15ms = 30ms, which gives us a framerate of 33fps, which is fine for this kind of scene.
But on a lower-end machine it might take 24ms to render the entire scene, and 2 * 24ms = 48ms = 20fps, which is pretty bad! If we turn the reflections off, we get a framerate of 41fps, which is great, but the scene looks pretty lifeless as a result.
We really lose the sense of a rainy street scene without those reflections! So how can we get those back, but without having to draw the scene twice every frame? The answer is: we cheat!
The first trick we can use is called “cubemap reflections”. We take 6 photos of the scene and stitch them together into one image using some fancy math I don’t really understand, but thankfully Unreal Engine does all this for us. Using this cubemap image, we can simulate what reflections would look like, using more fancy math. This is way cheaper since we don’t have to draw the scene twice each frame; instead we can use a premade image.
Nice! But we’ve lost the nice reflections of the pedestrians. Don’t worry, we’ll fix those using the next technique.
This is the next scene, and while cubemaps work great for big open areas, they look pretty bad in areas like this, with long straight sections that need pretty accurate reflections. Thankfully, early 3D game developers created a neat trick we can use here.
First, we take all the areas of the street that are reflective, and make them transparent. Then, take the entire scene that needs to be reflected, duplicate it, and flip it! This technique is extremely common in games even today, and has been used since the dawn of 3D graphics. One of the earliest examples I can remember is the mirror room in Super Mario 64.
In our case, we didn’t even duplicate the storefront meshes, we just took a picture of each storefront, blurred it a bit, and put it on a flat plane below each storefront. These textures are small (256px squares), so they’re much cheaper than even the cubemap we used earlier. This is how we’ll solve the pedestrian reflection issue shown earlier, as well. The final result is a “low quality” scene that looks effectively identical to the “high quality” scene.
This takes care of all the performance issues in the opening level of the game. This runs at a smooth 33fps on even a low-end computer, and we can use automatic quality scaling to switch between the real-time reflections and the super-fake reflections. Hooray!
Evan’s Trailer Talk
In addition to polishing the game I’ve been working on a new trailer for our release date announcement. We’re still in the middle of making it, but I think it’d be fun to share what the process and goals are like :)
Our previous trailer was aired at the PCGamer show at E3 2019.
[previewyoutube][/previewyoutube]
The reception to this was really good. It seemed people were really sold on the concept of The Big Bang as a noir creation myth (after they got the “bazinga”s out of their system) and intrigued by the art direction. I watched the live Twitch chat (which always devolves into a rude mob) and was amused by the “don’t do drugs” and “trippy” they were spamming; I’ve never done drugs and no one has seen the trippy stuff in GN yet but, hey, I’ll take it.
It seemed like the universal reaction was “I have no idea what this game is about, but I’m intrigued nonetheless”.
For our release trailer, I’d like the story and game to be clear while still maintaining intrigue. Not only will clarity help sell people on the idea, but setting up expectations properly will lead people to have a better experience with the game.
I’d hate to have someone watch a trailer with an interesting but opaque presentation and play our game expecting a traditional adventure game, challenging puzzler, open world, etc. etc. Genesis Noir is about the entirety of time and space, so there’s a lot of room for people to imagine their particular tastes existing in the game. If people go into the experience with an understanding of the boundaries then they can be pleasantly surprised by the deviations the author puts in, rather than be disappointed by the differences from their imagination.
The challenge for us is to clearly portray our unconventional story and interactions in a quick edit. Our tactic to accomplish this is to begin the trailer with genre expectations and then divert into the more unfamiliar territory.
Thus we’re beginning the trailer with the classic “lady shows up at the protagonists door” noir scene. Here’s a work-in-progress gif.
After this, well it gets weird as you might expect.
---
The biggest challenge is to convey the gameplay. Our game doesn’t use traditional mechanics and though we repeat interactions, they’re often re-contextualized and not immediately familiar.
Our strategy is to once again begin with a recognizable noir game interaction of inspecting a clueboard.
---
We’re also adding a textual synopsis in the edit of “A cosmic adventure of love, loss, and betrayal.” I think this is a nice balance between clarity and intrigue. You get an idea of the direction of the storytelling, but nothing too specific. It’s a nice excuse to put in some fun typography too.
---
Anyhoo, I think it’ll be a fun trailer :)
Thanks for sticking with us, hope you’re all well!
Evan + Jeremy