[ CW: I end this post with a gif which flickers rapidly through some sprites — just mentioning in case you have a sensitivity to that kind of effect.
Also, any art, gifs, sprite sheets etc. in this post are property of the artist (me, Diego Garcia) or the developer, Wyatt Yeong, and may not be used or reproduced without permission.
This is re-posted from my original post on Medium. ]
Hi there! I’m Diego Garcia, an indie game developer and freelance game artist living in Brooklyn, NY. I also teach 2D Animation for Games at the NYU Game Center. I’ve just released a new game, Damaged in Transit, with the developer/designer Wyatt Yeong (@kroftee) and the sound designer Greg Heffernan (@cosmoddd). We’ve been working on this game for about a year and a half, and I’d like to go back and take a look at the way it’s grown over that time. I’ll only be talking about the in-game art here — I won’t be mentioning menu screens, story art, or marketing.
If you’re not familiar with the game, Damaged In Transit is a split-attention action puzzler. The player has to simultaneously manage two drones as they barrel through a series of dangerous landscapes making deliveries.
A lot of these are pretty close to final as well, but a lot of the specifics got tweaked. It took us many tries to nail down the colors on the oasis, the textures on the outer walls of the various worlds, and those kinds of details. But I had spent enough time noodling over the style with world 1 that I had a pretty good starting point, and getting to final world designs mostly wasn’t too bad.
Around this point we finalized a lot more of the obstacle and element pieces. We created the button wall for world 2, which has one of my favorite visual gags in the game:
This is an early test -- the button was too small and easy to miss, so it ended up much larger.
We also needed an element that could bounce you from three sides, and kill you on one. This was my favorite design/animation that we cut from the game:
We also wanted to have this element rotate to match the player’s input, so this design just didn’t fit. Oversight on my part. We re-designed a few times and ended up with the standing rotary saw from world 3 — seen in the center of the map here:
You get it. At this point I was just designing obstacle after obstacle. Once I had done that, the game was fully playable. But in the above screenshot you can also see the decoration elements in each stage.
Part 4: Filling it Out
Making the deco elements was the last touch to make the art really come together. The backgrounds in our levels otherwise are just these huge stretches of empty water / oil / lava, so the space can feel pretty dead. I decided we would add some nice touches to do a few things:
- Break up those huge swaths of single colors
- Add some variation to the repeated tiles, for overall visual interest and to eliminate a feeling of “cheapness”
- Make the universe feel a bit larger / like the space really exists and is interacted with
- It’s fun as heck to draw birds and trash and stuff
I won’t go through my process on all of these, but I really love what it does to the world. I made a few gifs to show the early worlds in the days leading up to release:
World 1 Decoration
Each world has a lot of variations on a few main ideas. In world one you’ll see a few things: Waves to emphasize the feeling of the background being liquid, Floating elements to break up the monotony of the water color (the box, the buoy), tile decorations to break up the repetition of the ground tiles (missing bricks, decorative whale tile, bird poop), and wall decorations (drain, moss, barnacles) for the same reason. The bird is there because I like animating birds, and it’s fun to scare things.
World 2 Decoration
In World 2 you see most of the same themes! The wave becomes a bubble because the liquid is thicker, and the drain looks super goopy and takes forever to figure out how to animate!
World 3 Decoration
We felt like the decorations really made the game come together. Wyatt even went so far as to write a simple custom shader for me when I wanted the robots to be able to pass behind a lava-fall.
Part 5: The End
That brings us to late last year, and the game is just about done. Of course, I still had to design the title, system & menu screens, finalize the font, make the button prompt icons across all platforms and controller types, write and draw the narrative comic interstitials that sandwich each world, create all of the marketing assets, create all of the various e-store assets, cut a trailer, and write this blog post. But hopefully this gives you a little bit of a look into the process of designing a 3/4 top down action puzzle game!
Thanks so much for reading! Get in touch with me here or on twitter if you want to talk about the game (or whatever else). And play the game!
Get Damaged In Transit on Steam: https://store.steampowered.com/app/1063120/Damaged_In_Transit/
Get Damaged In Transit on Itch.io: https://kroftee.itch.io/damagedintransit
I’ll leave you with one last little gif. I make all of my pixel art in photoshop (mostly because it’s familiar, I usually recommend aseprite to my students), and my files get really big and really messy. Here’s one (that I had already cleaned up and combined layers/removed a bunch of stuff from… !!) with the layers converted to frames and exported as a gif. Bye!