Cyberpunk advertising creation

Hey cyberpunk builders! Here's another update about the upcoming complete art overhaul! I hope you will like it.

Another part of the complete art overhaul also involves the re-creation of the advertising and propaganda screen videos.

The world of Skid Cities has a lot of huge video screens scattered across high-level skyscrapers. They are used for advertising purposes.

The problem with these is that - as with anything before the art overhaul - I was using the colors that I felt looked good for that particular element (in this case, the advertising art). Problem is, once you put everything together, the result is a bunch of colors that do not look good next to each other Also - for some reason - if I proceed in that way, I tend to over-saturate all of the colors of the game. The way to solve this problem is to define a set of colors - a palette - and work out from that.

This issue affected also the advertising art that I created. So I spent some time this weekend re-working the advertising art. So I went from this for example:

To this:

The way that I create the advertising art may be interesting for other developers so I thought I'd share it.

First step: The shader

One of the problems when creating a city builder game is that buildings tend not to move. This is an issue because a static image of a city may get un-interesting very fast. So, from an art perspective, you need to always look for ways to put movement into the city. One way is, of course, adding cars and traffic. But I'm not satisfied with it, because traffic does not look good from afar. And since this is a cyberpunk city builder, giant advertising video screens are needed. When I approached this topic, I wrote down how I wanted the screens to be:
- Big and visible
- Very frequent - which means, lightweight from a performance standpoint
- Detailed if the user zoomed in
The lightweight requirement meant that I could not use video files. I started to think: What if I used one big image and looped through it? The framerate would suffer, and it would mean that each advertising needs to be a short loop, but keeping an image on memory is way better than keeping video files. So I went ahead and wrote a shader that takes the texture image, splits it up into rectangles, and loops through the rectangles. I then figured that a screen also needs an emission map - as in, parts of the screen that emit more light than others. So I added that too. This is how the shader looks in the inspector:

It allows me to add the main texture and an emission texture. I can then define the number of rows and columns that compose the texture. So, for example, I can create one image of 3x4, with each square representing a frame of the animation would look like this:

The shape of each square needs to match the UV map of the screen. In this case, since the advertising screens are mostly vertical, you will see a lot of vertical screen advertisings.

Second step: The art

Ok so now I just need to produce these image maps. At first, I tried to create them manually using Figma. But that was very painful and the final result was very lame. The animations were too simple and did not feel like cyberpunk advertising. So I had to bite the bullet and open up After Effects. I'm usually not a big fan of Adobe products, but After Effects is great to create animations like the ones I wanted. I would create animation elements - like logos, or faces - on Photopea and Figma, then export them in PNG and import them back in After Effects. There, I can have them disappear, move around, and so forth.

After Effects also allows me to add a filter on top of the animation to add effects like distortion, a glow, and things like that. That final touch gives the animation a more professional, cyberpunk feeling that makes the advertising believable. This is the final result for the propaganda screens that keep your citizens happy:

Ok so now I have the animation in After Effects! Let's export it

Putting things together

In order to bring the animation into the game, I proceed to:
- Export it as PNG sequence from After Effects, using the built-in Adobe Media Encoder
- Upload the PNGs created in that way into Figma
- In Figma, create a rectangle of all of the frames, which I then export from Figma into Unity

For example, this is how the frame looks in Figma for the propaganda screen:

And this is how it looks in-game once everything is put together:

What is next?

What I plan to do in the near future is add a script to some advertising screens to randomize the advertising video shown, so that the same building can have a random advertising playing. That will add a lot more variety! The script itself will be kind of simple, but I want to create a certain number of advertising videos before I pull the trigger. Another thing that I plan to do in the near future allows modders to easily add new advertising to the game!