Aesprite-ing my Doge

Hello hello hello, I am back from another six month writing hiatus. Since I last submitted a blog post into the void I’ve been managing to get at least two to three hours a week to throw at my extra-curricular dog game. In that time span I’ve explained the idea to friends no less than thirty times and have gotten some great comparisons to Untitled Goose Game, Goat Simulator, and other animal shenanigan games which are not far off. I am going for more of a Zombies Ate My Neighbors gameplay and stylization meets speed-running/bullet hell type vibes, but I will take any comparison to some games based in shit-disturbing animal antagonism.

For those who know, putting a few hours into game development a week doesn’t allow for massive leaps and bounds in progress, but hey I am treating this more like a game dev college project than a goal to get something released on Steam, so it works for me. Though I am planning on making a separate post soon with some samples of my code and progress, I’ll state here that I’ve been able to get some rudimentary “stuff” going such as rendering, a system for JSON map specification, event handling, and a lot of TODOs for better implementations in the future.

Exhibit A: Admire the deep gameplay, ray-tracing, and superb art direction

As the title of the post suggests, I also got to spend some time in the winter playing around in Aesprite! Though I have zero experience in pixel art, it has been really fun to get a chance to be more directly creative again as I used to draw and paint a lot when I was younger. It’s also been a helpful exercise in doing-it-all-myself so that I don’t have to lean on services like Fiverr to out source some of the fun. Or ya know, pay for it.

Like anything I’ve been learning lately, I find that a healthy dose of YouTube learning and trying it myself has been the best route towards success. Before getting into some of my poor-tfolio and progress, I wanted to shout out Adam Younis and Reece Geofroy as being particularly helpful. Seeing their process and the things they do has been a boon. Given that a lot of my roots in games came from learning by watching my older brothers play games, it always helps me to see more experienced folks do what they do.

My first goal with Aesprite was to just draw things with as many limitations as possible so I wouldn’t get carried away. I started with 16×16 pixel frames and started drawing faces of people I knew and dogs as both seemed fun and relevant to the content I would need for my game. This was also great for my friends’ discord channel as I was able to get a pixel art emoji of everyone’s face. Some examples of these are below.

Though these pieces were far from perfect, they served the purpose of helping me get a rudimentary grasp on Aesprite and pixel art as a whole. I absolutely loved how important each pixel was on a 16×16 canvas. Any single pixel misplaced or incorrectly colored/shaded could give an entirely different representation of whatever I was working on. This taught me a lot about the finite space I had to work with and the glories and tragedies of only being able to paint things with squares.

Maybe obvious to those viewing my samples who are pixel artistés, I was not originally working with a fixed color palette and instead attempted to do my own shading and blending with one of the built-in palettes. Though there is nothing wrong with this, it is common in pixel art to work with a given palette so as to emulate the limitations of original pixel art, where systems could only represent a finite number of colors. On top of this, using a fixed palette can be important for conveying a consistent art style and color set to the user. Given that I needed more limitations not less, and because I wanted to emulate favorite Sega Genesis games of yore, I sought out a palette of my own that I could learn within and ultimately use for my game.

With a little digging, I was able to find Lospec, a website where pixel artists share their own custom palettes. Once there, it didn’t take me long to fall on the Endsega 64 Palette. Unlike an actual Sega/Zombies Ate My Neighbors palette that would have 512 colors I wouldn’t know what to do with, this palette has 64 colors that I can struggle through. On top of that the palette gives off very bright and fun vibes that will match my idea of how Untitled Doge Game should look.

Using the Endsega palette I was able to revisit some of the 16×16 portraits I did and improve them substantially. This time around I was more familiar with the tool and had a palette that gave me more of a “style” than the prior shading techniques. I was able to get creative and learn how to use similar colors for shading when a variant may not exist (EG: Variants of blue and purple can often be used in tandem with black and darker shades).

As can be seen the color palette is quite bright and gave a little bit more life to the portrait faces whereas the previous default palette I worked with and manually shaded ended up a little greyer and muted in tone.

At this point I graduated myself to 32×32 pixel frames. I was pleasantly surprised with the level of detail I could communicate in this frame. After a few passes I was able to draw Kona in a way that made me happy with how accurate the image was, but also with the level of depth I would ultimately desire for my game.

32×32 Kona

We can see that I chose to use a black outlining scheme for Kona and at this point in time I am preferential to outlining in pixel art, at least in the case of dynamic entities. Such outlining will make dynamic objects easier to differentiate in game and help me avoid any blending problems where dynamic assets may blend into their surroundings due to the lack of a hard line.

My next big leap was to animate Kona walking as this would be one of the most visible and obvious animations to someone playing the game. Animation was uncommon ground for me as I have drawn at many points in my life, but never with the intent to animate. So I watched some YouTube videos and took my first crack at it. The results weren’t awful, but they were definitely lackluster and took far too long to get.

If you squint she’s walking, if you actually look she’s doing a jig in place

If it’s not obvious at first glance, you can see that Kona appears to be moving but that some fundamental things are missing that would otherwise make this look realistic:

  1. Kona’s legs never appear to cross over one another in three frames
  2. Her legs never really leave the ground
  3. She bounces in a cute fashion, but her upper body animation isn’t really accurate

To the first point, I did actually have her legs cross in the four frames I animated, but it happens so quickly and is shaded so poorly that this isn’t clear. To points two and three, I never did animate her legs leaving the ground and minimized how much I altered her upper body movements to keep things simple.

Keeping things simple I was able to see what I did right and wrong, but it wasn’t going to be enough for what I ultimately wanted. I found that the primary problems in animating Kona’s movements were:

  • I didn’t really know how four-legged animals move
  • It was a huge pain in the ass to update the shading in each animation frame as I went along
  • I seriously have no idea how four-legged animals do that magic thing with their cute lil legs to cover ground

To take another stab at this I pulled up a great reference for the frames of animation required to make a dog move by an actual, professional animator. I restarted with this reference and still kept running into the wall that the process was too time consuming if I attempted to update Kona’s shading with each frame as I went along.

I then watched more YouTubes and saw an animator break down the movement of their character into body part components. Instead of animating the whole character all at once, they instead animated the movement of the character using solid colors to differentiate the appendages. Only after the animation was as desired did they go back and add the necessary color and shading to the frames. This was immensely helpful to me as I was able to then break down Kona into the segments of her head, ears, front and back torso halves, tail, and each individual leg. I came out with something like this.

floppy_dog.gif

Though it’s nowhere near perfect, I was proud in that I finally had what looked like the full range of motion a dog goes through when walking, broke into its component parts. There was no poor shading to detract from this floppy dog as its grounded paws slide smoothly backwards while the torso and front legs lean forward to propel the dog into new butts to sniff. Additionally, I loved breaking things up this way as it will make it easier in the future when I animate different dog breeds who will themselves have different gaits and body shapes. When that time comes I will be able to manipulate this image, agnostic to shading, with less effort to get my desired results.

Once I had this animation to my liking, I simply used my original 32×32 of Kona as a reference and applied the necessary shading over it. I was able to achieve something like so:

You bet your ass I watched this loop hundreds of times to absorb how good it felt to do something passable and represent by fur amigo properly

And there ya have it. Over the course of a month or so this winter I was able to get some good practice in with Aesprite and pixel art. My abilities are far from good and there is theoretically still so much art and animation to be done for the project, but I was incredibly happy to get a first past at the main character and to feel like the task of animation was somewhat within my grasp.

In my next post I will go over my progress on other parts of the game, particularly the game code, and show how I ended up with the hilarious gaff that caused Kona to spin like a tornado as she ran through the pixel fields.