Role(s): Lead Designer & Lead Artist

Get your revenge on the enemy cyborg roller derby gang! Roll and fight through a beautiful neon cityscape as CB, a genetically modified cyborg, bent on getting revenge for her past...  

Roller Riot is a mobile brawler game I worked as part of MassDiGI's Summer Innovation Program over the summer of 2019. I worked with a team of 6, composed of 3 artists and 3 programmers. This was my first project working outside of pixel art, so it was a bit of trial by fire, learning and refining my process as I went. Initially my process was kind of all over the place, but I leveraged my knowledge of different software and found something that worked for me.

I started with some sketches, practically anything that I can think of and just get it on the canvas. From there I'd pick my favorite variations, and get the opinion of the team if had trouble deciding. Then I'd import it into Illustrator on a 1920x1080 canvas, create the silhouette, and then repeat the process with the next UI element. I'd typically work on one menu at a time, that way I could make sure everything fit correctly and is consistent when implemented into Unity. Once all the shapes have been made, I'd resize and reposition them into their (mostly) final layout. This document served as my mastersheet, so if any asset needed to be revised/redone, I easily had access to a nice vectorized starting point. From here, everything gets exported out at 4x its original size, then imported into Photoshop where I used the shape as a mask and painted right over it. Before I started painting, I'd make sure that I set my canvas resolution to a multiple of 8, ideally on a square canvas if possible. My Photoshop process was pretty standard, its just; Base Colors -> Shading -> Polish (if needed). When I was making it, I tried my best to make sure my layers were all neatly organized and named, although this didn't always happen. Once finished, I'd export it out to our target resolution (in our case it was 1080p), which is a fourth of its current size. As to why I exported everything at 4k and then shrunk it back down, when we were developing Roller Riot, we didn't know if we were eventually going to target 4k or port to PC. I figured it made more sense to overshoot our resolution and then compress it back down than to do everything right at our target resolution. This way if we did end up supporting 4k/PC (which we did), the assets would already be in 4k and all I'd have to do is reexport everything out of Photoshop.

I also gave most of the UI a subtle flickering animation, which you can see in the game play video I linked above.

You can play Roller Riot for FREE on iOS, Android, and Steam here!

Android: https://play.google.com/store/apps/details?id=com.MassDiGI.Banoffee&hl=en_US&gl=US

iOS: https://apps.apple.com/us/app/roller-riot/id1468113228

Steam: https://store.steampowered.com/app/1255380/Roller_Riot/