Blogs

Cyber City: Environment art from Game Jam to feature complete

author alex ferrabetta

Alex Ferrabetta

Monday 20 May 2019
gunners

image caption Grey boxes can be placed quickly in engine and help the artist get a sense of scale and shape language for the world they’re creating.

48 hours is a lot of time. You can start and finish a major university assignment, watch the complete season 5 of ‘the Simpsons’ 6 times in a row and save most of Termina before a cantankerous Skull Kid crushes the world with a maniacal-looking moon. It turns out you can make a pretty fun game in that time, too. Albeit with an unrealised environment, but the foundation can be accomplished in 48 hours – just don’t sleep.

Ok, that last part is bad advice: Always sleep! Sleep is more important than whatever you’re working on, even if it happens to be your team’s submission for the 2018 Global Game Jam. This was the first time the team had worked under such pressure. Sure, we’d crunched on our university assignments and spent hours at a time grinding in raids in Destiny 2 but we’d never built a game together in 48 hours. I was used to having an entire semester to work on my environments.

concept art of cyber city from the 2018 Global Game Jam

image caption My ‘concept art’ of Cyber City from the 48-hour ‘Global Game Jam’. “Capiche, fellas?”

2018 Global Game Jam

For creating the environment and assets for what would become ‘Rooftop Renegade’ the first step was creating the modular platforms pieces for our Renegade to move along. Pat would be placing all the foreground assets (platforms, hazards, grind rails) himself so there had to be as little confusion as possible between the two developers. We worked with a strict UE4 unit measurement, so all Pat had to do was turn on snapping and move the pieces along the track.

Texturing was kept to a minimum, there just wasn’t enough time to model, UV and texture – not with my limited skillset and Maya’s then-limited UV toolset. With the aid of a plugin, we adapted a cell-shaded look which means the 3D assets could just have a plain material applied and wouldn’t look out of place. As the background buildings wouldn’t be UV’d windows were decals projected onto the side of the buildings. Decals were also used to emulate the green ‘fog’ in the lower part of the city (as of this article, that decal is still in the current city along with added exponential height fog.)

Cyber City after the 48-hour ‘Global Game Jam’.

image caption Cyber City after the 48-hour ‘Global Game Jam’.

AVCon 2018 Build

With the Game Jam over, we felt like we had a viable product; time to build on it! Our first pass we thought the game worked best as a mobile game. Unaware of phone capabilities, I began creating the next map (A carnival level) with a hand-painted workflow.

Ah, agile development! It became obvious to us over the next month that a mobile version of Rooftop Renegade would be too restricting on features and that the platforms that would fit our gameplay best would be console and PC.

I continued hand-painting textures up until a few months before AVCon 2018. Then one day whilst during the usual tinkering, Pat and Frosty retextured some buildings with a PBR (physically based rendering) workflow – a technique where light interacts with textures the same as they would in real life. Many games use this workflow, why it hadn’t occurred to me to do this I don’t know (most of 2018 is a blur for me, what with finishing university, work and starting a game studio) – but they rightly deserve the credit for making this change. Suddenly the game was pleasing to look at, both as a player and a developer.

Cyber City as presented at AVCon 2018.

image caption Cyber City as it appears in-game at AVCon 2018. Whilst bright and engaging, I wanted a more ‘sprawling metropolis’ feel that contrasted against Svet.

Present and future

The AVCon 2018 Cyber City is not what I envisioned for the final product, but I’m still proud of it. I imagined a giant sprawling metropolis where Svet was just a spec in this world. Where detail is limited by camera field of view – not because of time and team constraints.

One issue that existed with the AVCon Cyber City was that the background was too bright and too eye catching. Whilst this does not seem like an issue, especially in screenshots, we’re trying to design a game where the players are moving fast and focusing on precise movement – anything too distracting must be toned down to ensure consistent gameplay.

Other issues I felt with the environment was the buildings looked separate from the foreground due to their design and colours. Repeating patterns were evident in the buildings’ windows, all the skyscrapers faced one direction and stretched straight up with no stagger in their silhouette. These are all issues I had to consider when designing the final iteration of Cyber City.

This final redesign of Cyber City began as every map should have; an in-engine greybox with stacks of giant cubes emphasising the scale of the complex city. By utilising basic shapes in engine, I was able to dictate the shape language for the city and create unique building designs on the fly. Once I had a good idea of scale and shape, I got to work on the texture.

Cyber City is a single 2048x2048 texture. All the building variants have been UV’d and textured on what is known as a ‘trim sheet’. The usual texturing process involves building a model, laying out the UVs and texturing accordingly. The trim sheet method involves creating a texture ‘sheet’ first and applying the necessary uvs to the corresponding ‘trims’. This is great technique for something like a building because I can decide on the fly whether I want a section to be, say, girder or window.

example of trim sheet

image caption One of the many buildings in Cyber City laid out on a ‘trim sheet’(right). This technique allows for many unique texture layouts.

My approach to environment art has changed a few times over the course of this project. As a team, we’ve learned so much on streamlining our world building which will be covered in later blogs. From following a simple photoshop design to experimenting with colour palates and world scale in engine, I feel confident that in the next environment the sky is the limit…

example of trim sheet

image caption Cyber City in its current form. Its darker palate allows for players to focus on the gameplay action and to imagine what else could exist in this over-crowded urban jungle.

Join the mailing list

where to find us

Adelaide SA 5000

hours

  • Monday to Friday: 9am – 5pm
  • Sat/Sun & public holidays: closed

join the mailing list

© 2022 Melonhead Games