When the Oklahoma Urban center Thunder approached us to create a retro video game, we were more than thrilled. It's not every day you lot go to work with an NBA team. We decided to build a runner game, much like Super Mario Run. Players could pick ane of 5 current players and run from the team's broken down bus to the arena just in time for the game, dodging enemies that resemble other NBA foes' mascots.

One of our team members, Ethan Muller, spearheaded game design and development, and he wrote an awesome custom soundtrack for the game too. I was tasked with creating artwork for the game. We wanted the graphics to have a xvi-bit feel, so the question became which application to utilize. My mind immediately went to Photoshop. But given the popularity of retro games, it seemed similar there should be something out there built especially for this purpose. It turned out at that place was. At Ethan's suggestion, I looked into Aseprite, which was a joy to use. Aseprite is described every bit an "Animated sprite editor & pixel art tool," which fit our output needs hands.

The first thing you find about Aseprite, besides it's affordable $19.99 price, is that the entire application UI is in a pixelated style. At first I thought this would get abrasive and distracting, just I was pleasantly surprised when I started using it. I establish information technology to be a fun touch on, and information technology wasn't intrusive at all.

The interface was intuitive and easy to navigate using shortcuts. Many of the shortcuts and conventions of Photoshop are used in the app, some of which I found by accident.

Permit'southward await a little closer at the procedure of creating the player portraits and running animations.

Player Portraits

I was excited to encounter each player'due south features and personality translated to a retro style. I chose to start at 70px by 70px. One of Aseprite's benefits is that it allows you lot to very easily export 2x, 3x, 4x, and up. Unsurprisingly, the first portrait was the hardest as I figured out a good process. By the stop of the project, I could create a portrait in about 45 minutes.

I started by grabbing the player'due south official portrait off NBA.com and creating a reference layer for that original image. I then created a few more layers: a background layer that merely independent a solid colour, a compatible layer that was the same on every portrait, a base of operations layer that roughed out a thespian'southward basic head shape, and a detail layer where I drew the player's features, pilus, and shading.

Asesprite has all the tools you'd expect: pencil, fill, selection, eraser, shape, line, etc. Simply I also discovered the vertical symmetry tool. When I positioned a vertical line in the center of a player's face, this tool would describe in the exact aforementioned position on the other side of the player's face, which sped up my cartoon fourth dimension.

Running Animations

The running animations for each thespian were definitely the most fourth dimension-consuming part of creating the game fine art. I started by researching running animation and animating pixel fine art. I of my biggest sources of inspiration was the art of Pedro Medieiros. He has tons of educational artwork describing tricks and tips for creating motion with pixel art. Then I started out trying to create a skeleton model for the running blitheness. While doing this, I was besides trying to figure out the level of detail we wanted for the players. Initially, I created something too detailed and likewise high resolution. We also played with how many frames the animation should be. We started with half-dozen frames but found nosotros wanted the animation to be less choppy. We ended upwardly creating a 12-frame running blitheness. After a few iterations, nosotros arrived at something we liked.

Setting upwards the frames in Aseprite was surprisingly intuitive and immune a lot of copy/pasting from frame to frame. Nosotros likewise needed falling, jumping, and standing positions for the players. Aseprite made it really easy to create all of the needed frames for a role player in a single file, so allowed u.s.a. to group those together and loop them independently.

Once nosotros had the bones movements and positions down in the file, I needed to create each grapheme. Since our players ranged from six feet tall (Chris Paul) to vii feet tall (Steven Adams), I didn't desire each graphic symbol to be the exact aforementioned meridian in the game. Even though you'd never see them side by side, I created 3 variations, a small, medium, and large. I picked a size for each of the players and began to add personal details, like shooting sleeves, tights, hair, etc. Stephen Adams' flowing locks were probably the nearly fun to create.

After all of the players were created, I could easily consign a sprite canvass for each player from the file I created. It contained all of the frames needed for that player, which we were able to play back from inside the game.

Building a Retro-style Game?

All in all, I was super happy with Aseprite and would use information technology once again. Check out Aseprite's website for a more all-encompassing overview of its features. And if you're in need of a retro-fashion video game for your visitor or sports team, give us a shout!