Environment Iteration

The city environment was a key part of the project, and the part that went through the most revisions. This is likely because, going in, it was the part of the project that was the least fleshed out.

The vast majority of my experience with pixel art has come from making sprites, working at low resolutions. Building backgrounds was unfamiliar territory and I wanted to make sure I kept the same level of quality throughout. 

I started by mapping out the elements that I knew I wanted. I wanted a side profile of a street with scaffolding to the left and a small awning to the right. Here’s my earliest example of literally an MS paint mockup of what I wanted.

I did some research into how other people approached pixel art scenes. Notably, they blocked out areas into smaller parts to attack one at a time which was super helpful.

I chose Prince St. as a reference as I had walked it often the year before and I really liked the atmosphere and the vibe of the place. Also it featured a lot of densely packed shops that just screamed New York. I used Google Maps to scout out the area while working, not copying a particular intersection, but getting inspiration for the types of buildings and materials in the area.

I recorded my first version in a time-lapse here:

I started by marking out the areas for buildings and built some props as a test. They were a good test of the style and worked as rulers of sorts, helping to measure out how big or small other aspects had to be.

I did base the buildings on specific styles I found, but messed around with the proportions a bit to get them to work. I did take a few more creative liberties, for example, the scaffolding is shorter than it should be, but I needed it to fit in the frame without making the frame that much larger, and the end result is a lot closer to how it feels as a pedestrian.

This was the most polished part of the project up to that point because I expected it to last to the end, but little did I know that revisions would need to be made.

The biggest reason was because of the resolution. The original was 160x90 which felt right at the time but proved to be just too restrictive. I took a field trip around the actual street, gathering references, and I realized there was so much more I wanted to pack in. More street elements, more height, and more light sources, primarily an active stoplight.

The real nail in the coffin was when I added puddle reflections. The original only dedicated around six pixels of space to them, making them barely visible. That sealed the deal for me to bump the resolution to 192x108. The time-lapse of the process is here:

I worked more with elements like the street and background layers, which did mess with perspective a bit, but felt better overall than the technically correct solution. 

The stoplight was an excellent addition, adding an extra layer of dynamics and really justifying my inclusion of cars for me. There were more elements I wanted to add. For example, I got the suggestion to make the scaffolding sign sway in heavy wind, but the end result looked too weird and unreadable. Likewise, I wanted the puddles to form more naturally in stages rather than as a solid layer, but the transitions were just too jarring.

Overall, I really like the result. I think it realistically sells the vibe of an NYC street, without taking too much away from the real stars of the show.

Previous
Previous

Particle Systems

Next
Next

2D Lighting and Normal Maps