Designing Artwork For An Arduboy Game


July 28, 2017
Designing Artwork For An Arduboy Game

After featuring a couple of EVADE-related posts about handling user input and text, we thought it would be good to sit down with Drew Griffith, JD Jones, and Jon Van Dalen to learn about inspirations, limitations, and process when it came to creating art for the game.

Q: What games or other works inspired you when you created the artwork for Evade?

Drew: The first thing I thought of when I started designing the ships was the original Starfox on the Super nintendo. Many of the graphics I created started with the same basic shape and I began to experiment with different pixels or patterns of black and white until I settled on something I liked. My Fiancee and I had just finished unlocked all of the levels of Sky Force Anniversary Edition on Xbox One a few nights prior to starting the designs too.

JD: I couldn’t help but think back to the games I used to play on my TI-83 calculator back in high school. There was one space shooter game in particular that everyone was obsessed with.

For the print design of the insert we included with the Arduboys, I actually drew inspiration from the opening sequence of Planet Earth.

Designing Artwork For An Arduboy Game



Jon: I grew up playing in arcades at the local pizza shops in the 80s and then played a lot of shooting games for the NES and SNES growing up, so those are probably my biggest source of nostalgic inspiration. The ones I thought about the most when doing this project were Asteroids, The Last Guardian, and R-type. These days I am also loving Japanese bullet-hell games such as those developed by CAVE. I like games with multiple ways to improve your score and that prove very difficult but are still rewarding.

designing_artwork_arduboy_game_evade_02


Designing Artwork For An Arduboy Game


Designing Artwork For An Arduboy Game


Q: What were some of the challenges when working with the Arduboy system?

Drew: The screen size was the hardest thing to design for on the Arduboy. It’s such a tiny screen, at just 128 x 64 pixels. I was constantly creating ships for detail, then realizing it took up half of the screen making it impossible to dodge enemy bullets, thus having to constrain the width and height quite a bit.

A big challenge was animating the ships when you press up and down on the D pad. After spending so much time reducing pixels to make sure the ships were symmetrical, yet still small enough to give some room to dodge the baddies, I had to visualize what these ships would look like if they were slightly rotating left or right. This proved to be harder than I imagined. I took the time blanking out some pixels on one side or the other giving the illusion that the ship was angled, creating an asymmetric look. I constantly second guessed myself until I finally animated the layers on and off in photoshop creating a tilting animated gif of the ship. This gave me an idea of what to refine on each layer.

Designing Artwork For An Arduboy Game


Designing Artwork For An Arduboy Game


I promise, it’s not an x-wing


JD: I had never worked with low-resolution art before, so that was a big adjustment. My first few attempts at making a spaceship were honestly dreadful. I found myself zooming in to create the ships, only to later zoom out and realize it looked nothing like I expected at true size. It was difficult to know how much empty space was needed between bits to make them distinguishable at small sizes. Making the ships symmetrical also sucked. Luckily, Drew made some awesome enemy ship designs that I studied and used for inspiration.

Jon: The arduboy has very limited memory and space, and that’s the biggest thing. Games must be flashed on to the device and run within its system entirely. This meant that large sprites, complicated animations and effects had to be carefully balanced with necessary game code and sounds to conserve space. I worked primarily on the game’s bosses and, of course, I wanted them to be dramatic so that was a constant issue. Arduboy games are monochrome and low-resolution. Pixels are on or off, no shades of gray. So, for example, where we wanted a bit of shading we had to use an alternating pattern of on and off pixels to simulate the appearance of gray.


Designing Artwork For An Arduboy Game


One of the game’s stage bosses



While the platform is incredibly simplistic, I think it’s creatively interesting to work within limitations and still come out with a good result. I think this is part of the reason that many artists are still making 8 and 16-bit style music and artwork today. I recently discovered that brand new games are still being developed for the NES via homebrew developers and flash cart loaders. You can play flappy bird on the NES! It’s an aesthetic that is still approachable and appealing even today.

Q: What sort of tools did you all use?

Drew: Photoshop was my tool of choice for this project. I started with Sketch 3 but found it to be a hassle due to everything being vector based. Open up Photoshop, Set your art board to the screen size, and start drawing with the Pencil tool. I used the Pencil tool because the brush tool seems to create a raster effect around the pixel you’re painting, even when it’s set to 1px.

Jon: I did everything in photoshop, just simply painting one pixel at a time. The newer versions have the ability to show a pixel grid view when zoomed in, so that was helpful. It’s also handy to have a small view visible on the right pane while working in the large view on specific pixels. Some of the bosses have animation, and I had never done that in photoshop before so that was an interesting process to figure out.

JD: I also used photoshop, given that we were working with pixel based artwork. Reading through Jon and Drew’s responses, it’s clear that I’m a photoshop n00b, because I was individually filling pixels with the selection tool, and constantly zooming in and out. Sketch has spoiled me.

Q: What was it like to work with the rest of the team? How did you all connect on ideas and implementation?

Drew: I feel like, even though everyone at Modus loves working on client work during regular business hours, Evade really gave us all a chance to kick back and design something really unique and out of our normal daily routines. As designers we’re about making pixel perfect designs for our clients, but it’s a totally different experience when you only have 16 x 24 pixels to perfect. We spent countless hours refining each individual pixel, researching the perfect ways to convert Bitmaps into C, and then passing the codes off to our developers to implement. It was really cool to create my first player ship, only to be inspired by a few unused bosses created by Jon to completely start from scratch on my ship to improve the ship design. We had a huge backlog of things we wanted to see implemented in the game, based in trello. We used this as a way to collaborate on features and designs, giving us a channel to get our ideas out without being shot down by the Arduboy’s limited memory size.

JD: Working with the team was great. Everyone seemed internally driven to work on this project, which made it enjoyable. As a team, aligning on our must haves for V1 early was crucial, because we had a lot of great ideas that could have drastically increased scope. We were also able to divvy up the work in a way that made sense and allowed each designer to influence the game.

Jon: We communicated through slack for ideas and questions, and a trello board to manage tasks. Because everyone on the project was self-motivated, things went surprisingly smoothly. The biggest challenges were just figuring out what features could make it in, and what couldn’t make it given the space limitations. Another common discussion point was around the scoring and life system and how it should work. One thing that came up early was the format for the graphics had to be exported in a special way for the developers. That took some working through but we eventually landed on a process to deliver the sprites and screens in a way the developers could easily implement without needing to convert them each time.

Q: Were you able to participate in gameplay decisions or did you purely focus on the art?

Drew: We all ideated early on the gameplay mechanisms and features we wanted to see, but then I quickly focuses on cranking out as many pixel designs as possible for the remainder of the project. We were all looking for ways to reduce the size of graphics and increase gameplay features to create the most complete release we could, given the storage constraints.

JD: On this project, everyone was a designer (like most projects). Everyone on the team had an opportunity to voice ideas. The design team worked closely with engineers to understand the Arduboy platforms constraints. We had some ambitious gameplay ideas that ended up being downgraded – a decision we made as a team. We stayed disciplined about deciding what should be built first, and what could be a stretch goal.

Jon: I think everyone on the project had a voice. We didn’t have a formal system, really. If someone had a good idea and got a quick consensus, we implemented it! Having a small team and good communication helped.

Q: Any ideas or assets that didn’t make the cut?

Drew: Too many to count… We had Asteroids, and better starfields, a few more enemy ship designs, multiple bullet & missile types. Jon had created powerups that would float towards you from downed enemies, and one of the coolest Space Skull bosses i’d seen in awhile. We were all so excited to implement that boss, only to realize the perspective was different from our ships. We all groaned at having to punt that boss asset. Some of us even threw our keyboards, to this day I still can’t find my escape key…

Jon: I’d still love to make a true bullet-hell style game with curtains of bullets and a smaller ship for the Arduboy. It would be a huge challenge and for this game and time frame it just wasn’t feasible. As for EVADE, I had created a few assets for objects that the player ship could collide with – things like asteroids and wreckage. Those didn’t make the cut due to extra code and space needed. I also created, early on, a giant skull boss that was intended for level 1 which shot laser beams out of its eyes.


Designing Artwork For An Arduboy Game


Asteroids – affectionately known to the dev team as “meatballs”




Designing Artwork For An Arduboy Game


Giant skull boss with frikkin’ laser beams


JD: We initially had a longer narrative that we wanted to print in the insert that accompanied the game. It gave a more dramatic (perhaps too dramatic?) background story. It’s somewhat cringe worthy reading it now :)

“They came in the night. They descended from the dark skies and struck hard, without warning. It was chaos — we fought as well as we could, but there were just too many of them. But you. Somehow, you survived. The radio is silent. You think you’re the only one left.

“What are they?” you ask yourself.

But there’s no time to think; your ship rumbles as it nears escape velocity, and survival is the only thing on your mind. The fate of humanity rests on your shoulders. God speed.“

Also, the game was originally pegged to be called “Escape Velocity,” as referenced in the narrative. We then changed it to just “Escape.” And finally we settled on “EVADE” for a few reasons. One, the “V” and the “A” look like two opposing spaceships, and allowed us to animate the A in on the title screen as the ship. Two, you can never actually escape in the game, because it’s never ending. So it’s really more like evade the enemies until you meet your inevitable doom.

Q: What lessons were learned for next time?

Drew: Hand animating pixel graphics requires a ton of thought! I wish I had grid paper to experiment with the ship designs prior to hitting photoshop. The screen size was small enough that it wasn’t a huge let down, but given a higher pixel density or even more than just a monochromatic screen, animating would have been a huge challenge. It takes a lot to visualize stepped frame-by-frame graphics. I would have loved to spend more time on animating more of the ships. Next time I’d love to create something closer to 8 or 16-bit.

Jon: The big one for me was managing the screen space. With such a small screen, I think having smaller assets next time might allow for more freedom of movement and a greater sense of scale. Also, I would like to do a lot more with animations now that I have learned more about how they can be made efficiently. I have seen some developers start to experiment with simulating a gray shade by flickering a white pixel on and off rapidly, which is interesting and could open doors to more interesting art assets.

JD: Working on Evade reinforced the fact that constraints drive creativity. When I do vector illustrations, I have so much flexibility to resize and tweak lines to my liking. With pixels, the process was much different and difficult in a different way. At first, my pixel art was straight rubbish, but the constraints forced me to be more creative and my pixel art eventually became okay (still not great).


Screen Shot 2016-07-27 at 4.22.16 PM
Jon Van Dalen is a User Experience Designer at Modus Create. He has over 10 years of experience designing web and mobile applications. He enjoys solving business problems efficiently through meaningful, user-centered product design. Jon studied interactive design at Bowling Green State University and Savannah College of Art and Design.

Jones_JD square
JD Jones is a Senior User Experience Designer at Modus. He is an avid believer in user-centered design, cross functional teams, and designing to deliver business outcomes, not outputs. JD works with the Modus UX team to create awesome experiences for products that matter. He graduated with a masters degree in human-computer interaction from the University of Maryland. Away from work, JD enjoys playing flag football, reading plot driven novels, and being a cheese head. Go Packers.

Griffith_Drew square
Drew Griffith is a Lead User Experience Designer at Modus Create. He is passionate about the relationship that design and engineering can bring to a product. Stemming from a background in robotics and design, he holds a Masters degree in Design Media from Full Sail University in Orlando Florida. Drew has been diving into the world of VR and beer drinking, and has become quite the beer snob.


What We Do

We’ll work closely with your team to instill Lean practices for ideation, strategy, design and delivery — practices that are adaptable to every part of your business.

See what Modus can do for you.

LET'S GET STARTED

We're Hiring!

Join our awesome team of dedicated engineers.

Loading...

APPLY NOW