Pixelblog - 56 - Top Down Character Attack Animation / June 2, 2025 by Raymond Schlitter

Intro

In the last Pixelblog, we established a template for an 8-direction top down character with idle, and run animations. With a solid foundation set, our character takes the stage once more to showcase weapon based attacks in all 8 directions. Honoring asymmetric details, all 8 positions offer a unique view of the action as the weapon always remains in the same hand. Wether you prefer to slice, stab or bash your enemies, our versatile character model can handle various offensive equips.

Motion Breakdown

No matter the direction, the action is performed in 6 frames. Depending on the weapon type, the motion spans 4, or 5 phases with varying frame timing.

Anticipation- This phase expresses the wind up of the strike, drawing back the weapon to a point where it can naturally strike with powerful momentum. This model uses 1 frame, at various delay durations. The longer and more dramatic the wind up, the more impactful a strike can feel, but results in more input delay in the context of gameplay.

Smear- This phase captures the greatest leap in motion, conveying movement from the wind up all the way to nearly the extent of the strike. Spanning multiple frames of brief duration, the weapon leaves a smeared trailed to emphasize the speed, and define the path of travel.

Rebound- This phase is only seen in the hammer example, and could be applicable in other weapons, or attack styles that have the weapon make contact with the ground. It captures a subtle bounce after the weapon hits the ground in 1 brief frame.

Follow Through- Shown with 1 frame, this phase marks the full extension of the attack, moving into the target 1 more pixel without any smear effects. The frame duration holds longer to emphasize the commitment of the attack, and weight of the weapon.

Recover- This phase shows the weapon being drawn back to the default idle position. The movement is captured in 1 frame, positioned somewhere between the follow through, and first idle frame. The frame duration can be slightly delayed to emphasize a heavy weapon, but is relatively fast.

No matter how great the jump in movement appears in the anticipation, and recover frames, refrain from using smear effects, as it noisily distracts from the forwards striking movement.

As described, the frame timing strongly plays into the the physical characteristics of each weapon. Specific timing for each frame is provided for each weapon type.

Sword

Of course, we start with the most popular choice of cold steel in hand- the trusty ol’ sword. More specifically, a medium weight short sword, which offers a neutral weight to length balance. While somewhat lacking range, the sweeping motion across the body provides a relatively wide area of attack. Furthermore, the slashing action is quick with minimal delay on the anticipation, follow through, and recover frames. The angular shapes of the smears captures strong motion while providing a solid feel to the weapon. The motion and angle of the swipe are fairly consistent, but there are deliberate variations made to keep the hitbox of the attack relatively balanced across all directions.

Frame timing in milliseconds- 100, 50, 50, 50, 100, 50
Total cycle- 400

Spear

Keep your distance and poke em’ to death. The spear offers greater range than the sword, but holds longer on the anticipation and follow through, as slightly more commitment is needed to get the full power of this long weapon. Otherwise, the distribution of frames across the phases of motion are the same as the sword. Note, the underhand grip of the spear in the idle position, and how that transfers into the attack animation, in contrast to the upheld sword.

Frame timing in milliseconds- 200, 50, 50, 50, 150, 50
Total cycle- 550

Hammer

A true chad weapon. The weighty hammer offers a hefty strike, that is countered by the longest anticipation, follow through, and recover frames of the bunch. Along with the longer frame duration, the screen shake effect, and subsequent rebound frame help sell the powerful weight behind the strike. While the strike comes from overhead like the sword, the forward trajectory creates a slimmer hitbox, compensated by greater attack strength. Again, the sharp geometry of the smears evokes a greater feeling of impact than a curvy style.

Frame timing in milliseconds- 250, 50, 50, 50, 300, 100
Total cycle- 800

FINAL THOUGHTS

True talent for animating characters is a rare thing, and I’m no exception. Only through numerous attempts and failures have I made gains. At this point, I’ve built enough confidence to trust the process, but it never comes easy. At first, approaching an 8 direction character felt overwhelming, but my doubts eased as I settled into the process. After all, animation happens one frame at a time. Through careful organization and steady pacing, I was able to produce satisfying results, and dare I say, I even had a little fun. I’m sure there is still much that could be improved. I tried to keep the poses of every frame consistent across all angles, but I took some liberties to bring out the romance of each view point, and balance the hitboxes for potential gameplay. If you rotated the sprite on every step of the animation I’m sure you could spot some jankyness, but I don’t think such detail would be noticed in a practical context.

I was going to flesh out the run animation, and an attack animation with the complete character design from last lesson, but I figured it’s more useful to make more weapon variants with the dummy character. Ultimately, I hope my journey into the frontier of 8 direction animation provides solid footing to make your venture as smooth as possible.

RESOURCES

Please consider supporting my work by becoming a Patron. Among many other rewards, Patrons can download the assets featured in my tutorials. But, most importantly, you allow me to continue making new content!

Many of my popular assets are also available to purchase from my digital shop

Alternatively, you can support me by making a one-time donation

Assets featured in this Pixelblog are available in Top Down Character Attack Animation Asset Pack

Source files used in the making of this Pixelblog are available in Top Down Character Attack Animation Source Files

Get caught up on all my downloads

You made it to the end of the article. Thank you for reading!

-By Raymond Schlitter

Pixel Diary - Sky Pit / April 29, 2025 by Raymond Schlitter

Intro

Guided by an innate desire to create, humans make things. As such a matter of course, I find it hard to put words to the why and how without attempting to unravel the meaning of existence. Humbly, I cannot declare a clean escape from this quintessential philosophical bog, but a cursory look at civilization through time indicates our role as makers keeps us afloat. From a ham sandwich, to life itself, we all play our part as makers.

Pictures made with deliberate arrangements of tiny squares, that’s my mark in this business of world making. A humble craft, yet venerable enough to justly earn the term pixel ‘art.’ The ‘pixels’ provide the flavor I so adore, while the ‘art’ holds the purpose. Ultimately, my drive is fueled by love- to know, and be known among the multitudes in a servitude that can be deemed good. Now that I’ve sufficiently justified my existence as a pixel pusher, allow me to demonstrate the deed.

Concept

Staring at a blank canvas leads nowhere, but once I start sketching, the ideas pop off. I often make hand drawn thumbnail sketches to get a very general concept, then I move on to pixel sketching to form a better game plan for the composition, colors, and appropriate resolution. Sometimes I have a fairly clear vision in my head, but most often I start with a general vibe in mind. In this case, I was in the mood for a dreamy landscape that somehow featured flying machines.

The above image shows my thumbnails sketches before I went to the digital canvas. The idea started as a cliff landscape from a high vantage point that focused on dramatic geology and structures. The composition is strong, but I wanted more sky, while maintaining a wide canvas format. So, I tilted the view to more of a sideview, and included an airship for more of my trademark flavor. Lastly, I scribbled out more detailed concepts for possible ship designs.

My first pixel sketch followed my hand sketches pretty closely. I liked the colors, but the composition wasn’t quite there yet. It could probably use more cliff elements in the background, and foreground, and some resizing of elements. A vertical format might suite the subject better, but I was dead set on a wide format, as my last couple Pixelcast videos feature vertical compositions. Proper execution was looking to exceed my time budget for these videos. I like to keep the process recording under 5 hours, so the final time-lapse can reasonably be condensed into about 5 minutes. Not to mention the painfully tedious days of editing, and production to put the whole video together. Ultimately, my interest for tackling the technical issues in capturing an atmospheric landscape wained in favor of focusing on the design of airships.

Therefore, we move on to the final rough concept. I ditched the cliffs and buildings for an airship as the focal point. A docking area at the edge of the canvas adds interest to the composition, and a sense of wonder to the context of the scenario. More ships in the distance imply an area of heavy traffic.

Not a far cry from the final version, I like to develop the concept sketch well enough to establish colors, proportions, and even some areas of high detail to help crystalize the complete vision in my head. This makes the recording process go much smoother by cutting out confusing trial and error as I problem solve, furthermore, reducing the load of video editing. I’m sure some would be interested in seeing my raw process from the first pixel of the concept, but I think that would be better suited for a livestream, or long format style video.

Process

Documented for posterity, and proof of human intent, I’ve crammed 4 hours of problem solving into 5 minutes. Don’t blink, or you’ll miss the action. Try setting a slower playback speed to make it easier to follow along.

Aseprite with a wacom tablet connected to a desktop computer are my hardwares of choice. Pencil, marquee, and the eyedropper are my most frequently used tools, along with economic use of layers. There’s not much more I can add here that’s not better shown in the video.

Final Thoughts

I stuck with a familiar formula to create another solid entry in the aircraft section of my portfolio. Of course, it would not be complete without a lovely mound of puffy clouds. It’s actually been a while since I’ve made a detailed design of this particular style of side-view airship. Sometimes we have to indulge in our comfort foods to stay connected to a core inspiration, and refresh the spirit. Maintaining an original sense of style, while contending with the pressure to keep pushing into new boundaries is always a dilemma. The potential of the my initial clifftops scene still beckons me. Perhaps, I will better formulate the vision without the burden of capturing the screen recording. There are always more problems to solve, and I’m grateful for that.

Support

I have so much more to give. If you appreciate my work, please considering giving back by supporting me.
Patreon
Donate
Shop

Thank you!
-Raymond Schlitter

Pixelblog - 55 - Top Down Character Animation / March 31, 2025 by Raymond Schlitter

Intro

Offering the perfect combination of function and aesthetic, the top down perspective is one of the most popular vantage points to employ in pixel art games. Specifically, I refer to the 3/4 top down projection, which shows a large portion of the front, as well as the top of objects, commonly used in RPGs, a la Chrono Trigger. As a personal favorite style to work in, top down assets have graced the Pixelblog many times, yet there are still many beasts to slay, especially in the realm of animation. Equip your weapon of choice, and join the quest, as we take on the dreaded 8-direction top down character.

Dummy Sprite

I presented my first top down character model way back in Pixelblog 22. While I still think the basic sprite design is high quality, the walk/run animation is merely serviceable, and a bit on the stiff side. Furthermore, I only designed frames to support 4 directions of movement. Bang for buck, 4 directions is still a worthy design approach, as you can have 8 directional movement, but limited character orientation. This limitation actually makes for interesting design solutions, exemplified in Zelda: Link to the Past. Link is able to walk in angles, but he can only face up, down, left, right. To compensate, he has a wide slash arc, can strafe when charging the sword, and can access angled attacks with secondary weapons like the boomerang. This limited move set allows the designers to create interesting gameplay challenges without overly complicated dungeon layouts, and enemy behaviors. On the hand, if the player can attack in 8 directions, it demands much more from the level, and enemy design to provide meaningful challenge that utilizes the increased attack geometry. A problem worth overcoming to meet the sensibilities of modern gamers, and keep pixel art a relevant medium for game design - not just for nostalgia.

Designing with a particular balance of form, function, and economy, I didn’t use any particular reference for this model. Keeping things on the small side, the dimensions of the neutral front facing figure is 26x32px. Same as my aforementioned character model, this roughly conforms to 1x2 16x16px tiles. Even if you are not using actual tiles for the environment, it brings cohesion to the level design, and aesthetic, to conform the sizing of assets to a consistent tile grid.

While still a bit on the chibi side, this model has slimmed down, and proportionally longer appendages than my old model. This allows for a nice range of clear movement without having to stretch and squish things much. More realistic than your traditional chibi, but deformed enough to express personality.

I started with the front facing figure, then made the up, and side facing versions. Finally, I saved those pesky angles for last. Fortunately, since the figure is symmetrical, the side and angle versions can be flipped, making only five orientations necessary to complete the circle.

As far as work flow, I first made a rough version of each orientation in one scene, making comparative measurements to decide the size and positions of the anatomy. Once I had all the angles covered, I put them into a uniform position on the canvas, and sequenced them into a rotation animation. This revealed many errors and issues I could not see by looking at them next to each other. With the animation set up, I could go through the frames and make fine adjustments until the rotation wasn’t jank, which improved the form and consistency among all orientations. The trick is keeping the thickness and length of appendages consistent. At such a small size, one pixel can make a huge difference.

Once the base figure of all the orientations was settled, I created the idle animation - again, starting from the front and eventually working to the angles. I can’t explain the idle animation better than the pictures tell. The frame timing/playback speed strongly effects the expression, and comes down to taste. Uniform playback speed at any rate felt a bit robotic to me, so I went with an offset timing that holds the frames at the extremities of the motion longer than the in between frames to give a more life-like feel.

For the run animation I started by completing the whole 6 frame cycle of the front facing version. Then, I translated the movement into the side version, followed by the up facing version. Once again, I left the angles for last. The side, and angles are flipped to cover all directions, reducing the workload to 5 different animations.

After I had rough animation for all directions, I arranged them in a circle and synced the motion. This allowed me to study the motion and efficiently compare related frames. From here, I could make many improvements to the overall quality and consistency of the animation. Frame by frame, one piece of anatomy at a time, I would make sure it logically follows the same cycle of motion, and maintains consistent proportions across all positions. For example, the bob of the head, the motion of the shoulder pivot, and the max swing of appendages are critical areas to observe.

For a small sprite with condensed anatomy, as such, the perfect balance of economy and smoothness can be captured in 6 frames. The core expression of the motion comes from the bob of the head. The key to capturing a natural flow is variable motion that bounces, rather than constant sine wave motion, which looks a bit robotic. For example, one stride of this 6 frame cycle, in relation to the previous frame, goes down 1px, down 1px, and up 2px. This flow repeats for the opposite stride, completing the 6 frame cycle. Furthermore, the up movement is faster than the down movement, expressed in the ‘pass’ frame where the legs come together under the torso. Of course, everybody has a unique nuance to their gate. Try experimenting with the size of movements, and how they are distributed across the frames. For a more detailed breakdown of the fundamentals of run cycles, I refer you to Pixelblog 8.

Character Design

We can’t go questing with a dummy - time to make a real character.

This image shows the main iterations of my character design process. Note, that some changes are informed by testing out the other positions of the 8 directions, and attempting to animate the idle. What looks best in one static position might become undefined noise in other frames of the animation. In other words, the design philosophy for a static image, vs a character that will be animated differs, as compromises and simplification should be favored for clarity of motion.

1. I got the hair shape and equipment set figured out. Colors need work and lack cohesive relationships. Odd balance of lights and darks with all the contrast noisily bundled in the center, while the mid values of the extremities obscure the definition of the overall figure. All a bit generic.

2. Better balance of lights and darks, but some areas still lack definition. Bright hair gives personality and distinction, but soaks up too much focus. Cape cowl adds character and coheres the shield to the character. Nice unity and composition among colors of hair, cowl, shield and sword.

3. Removal of armor skirt reduces noise. Light dark balance is more even, while still providing good contrast that better defines the figure. Brown leather boots and armbands are interesting, but create some noisy areas where too many similar colors come together.

4. I like the blazing blonde hair, but considering the character in action I’m afraid it may bleed into the sword in some situations and take focus away from the slash effects when attacking. The dark blue hair creates more cohesion to the character, and overall better balance of values, along with chopping down the boots. The foot gear change also improves definition of the figure, and adds verticality that makes him feel taller. Revision to the hand and forearm colors keeps them well defined through all positions.

The character design accounts for a lot of the leg work, and should not be short handed. A complicated design may become a real headache to animate. A lame design will still be lame in motion. I suggest starting simple and working in details along the way. A layered approach allows flexible experimentation. For example, I made the cape and gear on a separate layer that can overlay the basic costume. This approach can also accommodate various equipment and costume options if that’s a feature you want in your game. In that case, I could go even more granular, separating the armor and boots as well.

Once the character design is settled, the real fun begins. Translating the design to all frames involves a lot of observation and comparison to keep things consistent. Along the process you may discover issues with the design that require modification to maintain clarity of the anatomy.

Same as the dummy, I first created all orientations in one scene. Due to asymmetry of the hair, and equipment, unique frames had to be created for all eight orientations. In the context of gameplay, you could probably get away with flipping things, so the sword and shield switch hands depending on what way you are facing, but it would certainly be odd to show the standing in place rotation.

The bounce in the hair adds extra liveliness with little effort. The hair shifts in frames 2 and 4, while all the rest are the same. The hair highlight looks odd if it stays in the same place in every orientation, but it’s distractingly noisy if it jumps around too much. I found it works best to make it shift around a small amount in a consistent rhythm.

Final Thoughts

After working with relatively large sprites in my realistic anatomy series, it’s refreshing to animate a more economical model. Not to say it’s easy, as every pixel can make a dramatic change, but I greatly enjoy the challenge of dealing with the abstraction of small sprites. I plan to expand on this model with more useful animations. It’s a good start, but there’s a lot left in the tank. I definitely want to complete the run cycles for character design. Attack, block, and dodge animations would surely have value as well. Beyond that, I could see enemy designs, and possibly new environment concepts. Think I’ve got myself into another multipart blog series. See you next time!

Resources

Assets featured in this Pixelblog are available in Top Down Character Animation Asset Pack

Source files used in the making of this Pixelblog are available in Top Down Character Animation Source Files

Get caught up on all my downloads

You made it to the end of the article. Thank you for reading!

-By Raymond Schlitter

Pixelblog - 54 - More Isometric Pixels / January 28, 2025 by Raymond Schlitter

Intro

The consistent angles of isometric projection are a perfect match with the low res abstraction of pixel art. Together, they form an eternally cozy style that deserves regular visitation. While the convincing illusion of 3D may appear challenging at a glance, patience, and consistency can overcome lack of graphic skills. Furthermore, I take a constructive approach that can be easily understood by beginners, while also providing a foundation to solve advanced graphic problems.

As the title implies, this is not the first Pixelblog to feature this lovely skew. If you are new to isometric pixel art, more of the fundamentals are covered in Pixelblog 41. and Pixelblog 4. However, if you are inclined to learn through action, much can be discovered by pixeling along with the following exercises. Similar to assembling a set of Legos, the picture on the box can be achieved by carefully following the directions, one pixel at a time.

CAR

1-2. The process starts with basic outlines of the main shapes of the overall object. While I’ve exploded the view for easy visual separation, it’s helpful to create each piece on separate layers, which allows the flexibility to move things around, and make edits with minimum consequence.

3-4. Colors and values are established across the various planes of the shapes. Bevels slice the edges with varying thickness to provide a smoother, more aerodynamic look. Further details are added, including windows, fenders, rims, lights and intakes.

5. Anti-aliasing is applied to smooth harsh edges, and subtle outlining is applied to make the sprite pop. Note the rhythmic dots added to the angled edges. Also, a bit more shine is added to the rims.

6. Racing stripes, and rear view windows are added. Lastly, a reflective sheen is given to the windows.

Ready to race!

Tree

Due to the round shapes, isometric trees are almost indistinguishable from a 3/4 top down projection. Obviously, a perfect sphere appears the same from any perspective. In this case, which uses simple oval shaped foliage bundles, it could pass for either projection. However, if the tree was more complex, and exhibited individual limbs, the subtle differences may become more apparent.

For example, this fantastic tree in the above image definitely fits in an isometric landscape, but may appear out of place in a top down setting. Ultimately, it’s best practice to stick to the foundational guide lines of the desired projection when making assets.

Furthermore, the trunk of my isometric tree starts with creating a tapered cylinder that strictly conforms to the 2:1 line pattern of the isometric grid. One flat oval at the base, and another slightly smaller one placed above, then connect them at the sides along the Y axis. Roots at the base of the trunk also roughly flow along 2:1 paths to emphasize the isometric quality.

The shape of the foliage units are more about the style and species than a specific isometric ratio. Perfect spheres, vertically long ovals, or even rectangular shapes could be used for certain types of trees. In this case, I just eyeballed ovals that are roughly 3:2 ratio, which feels pretty natural for a bundle of leaves for any projection, and the overall shape lends itself well to the implied perspective of the isometric environment. Moreover, the somewhat cartoonish, large oval tree actually looks quite nice in an isometric setting.

For the multi-bundle version of the tree, I maintain a similar 3:2 ratio for the overall grouping. After layering the bundles together, some touch up is needed to smooth out the shading, and to remove unsightly clusters that result from the overlapping. Lastly, the tree is nestled in some grass and given a cast shadow. Yes, a happy tree indeed.

Fore more examples of layering foliage modules, check out Pixelblog 44.

House

Again, the process starts with simple outlines, defining the main shapes, and basic features of the house. Mapping out the entire shape, including the lines that won’t be seen when filled with color, will ensure accurate sizing and alignment. I suggest creating each component on a separate layer, as designated by the unique colors, which allows for easy control to find the perfect size, and positioning. Just always make sure you have the proper layer selected before you start making edits! I’ve only made that mistake a few thousand times.

Setting the outlines takes care of most of the spatial calculations. From there, the fun of coloring and decorating your house can begin. When converting the outline areas into solid color fields, consider the light source, and luminous quality of the building materials to dictate the values. My light source is coming from the top right, providing warm glow to the brick walls, and a touch of shine to the freshly painted wooden roof. The strong directional light creates considerable contrast from the right facing side, to the left facing side of the house.

After the basic colors are established, drop shadows and highlighted edges are defined by the light source. Finally, subtle outlining and minor dithering smooths harsh cluster connections and gives the whole house a bit more pop. Ah, nothing like a cozy cottage in the isometric projection.

Final Thoughts

It always takes me a while to settle into the methods of making isometric pixel art when I haven’t done it in a while. Take your time, stay organized, stick with the process, and it will come together in joyous fashion. Some people find it helpful to work from a grid of isometric lines in the background. I made a custom grid once, but I find it sufficient to just have a single 2:1 guide line on a layer that I can use as a ruler to check alignments when needed.

While this is the 3rd Pixelblog to focus specifically on isometric pixel art, it’s my first one since I switched from Photoshop to Aseprite. I have to say, it’s much easier to drop those 2:1 lines in Aseprite with the live preview of the pencil tool when holding shift. The thought of animating isometric art still kind of terrifies me, but with Aseprite’s awesome animation tools, perhaps our next venture will come with motion!

Resources

Assets featured in this Pixelblog are available in More Isometric Pixels Asset Pack

Source files used in the making of this Pixelblog are available in More Isometric Pixels Source Files

Get caught up on all my downloads

You made it to the end of the article. Thank you for reading!

-By Raymond Schlitter

Pixelblog - 53 - Punches and Kicks / December 3, 2024 by Raymond Schlitter

Intro

From first establishing basic proportions, It’s been a long journey to get these characters into fighting shape. We’ve put our patience and focus to the test, but now, we’re ready to step into some real action with flying fists and feet. Don’t let the excitement catch you off guard, we must maintain a disciplined approach to face this challenge straight.

Before getting into the nitty gritty, I must reiterate a disclaimer about the art direction of this anatomy series. While the underlying purpose is to gain proficiency in human anatomy, the animation style is dictated within the context of a hypothetical arcade action/beat em’ up game. Moreover, I’m building from real life references and combat sports principals, but filtering through an arcade game design lens in concern for gameplay and economy. I describe the style as hyper realism, which is much more akin to a Streets of Rage, than a Prince of Persia.

You have to learn to walk before you come out swinging. All of the following attacks flow out of the idle fighting stances established in the previous lesson. If you are new to this series, I recommend brushing up with the previous installments.

Human Anatomy
Walk Cycles
Idle Fighting Stance

Male Dummy Punches

JAB
Described as the most basic, yet most useful punch in the sport of boxing, the jab is the ultimate ice breaker when talking with fists. Based on the fighting stance, the lead hand fires straight forward from chin level, driving to the full extent of the arm with minor lean in and hip twist. This punch should strike quick without any wind up that can easily be telegraphed, and it should minimally compromise the fighting stance, so guard can instantly be recovered. A low risk/reward attack, good for leading combos, and creating openings for stronger strikes. With minimal input delay, it’s your safe button masher attack.

Smear: The first frame is the ‘smear’, which captures the velocity with abstract traces at the strongest point of motion. Keep colors simple in the smear for better legibility. The main key position of the striking pose is essentially achieved in the smear, less the actual smear. The front fist drives straight out from the shoulder, while the head drops 1 pixel. The front knee bends down 1 pixel and the back foot pivots out from the body. The torso leans forward 2 pixels at the groin, and more dramatically by 3 pixels at the chest level.

Hit: Further leans the entire body forward a few more pixels, subtly bending the front knee, and lifting the heel. Note the frame timing, displayed in milliseconds next to each frame. The hit frame is slightly longer to enhance the sense of impact.

Follow Through: The ‘follow through’ is almost the same as hit, but it extents the arm forward 1 more pixel from the shoulder pivot.

Recover: Shifts the legs nearly back to idle position with the punching arm bending back about half way to the idle position.

Overshoot: The overshoot frame is identical to the first frame of the idle, but shifted back 1 pixel to create an energetic snap back effect after every punch.

CROSS
The cross, or straight punch, drives out from the dominant hand for a more powerful attack. To garner more power, this punch includes a brief wind up relayed through the initial ‘pull’ and ‘load’ frames. While this creates a slight delay from input to impact, the risk is compensated with greater damage potential. I’d probably make it a combo finisher that automatically triggers after a couple jabs, rather than a stand alone input.

Load: Rolling out of the idle position, the animation starts with the ‘load’ frame, which raises both fists, and swings out the elbows like chicken wings, with a sharper degree on the punching arm. The knees slightly straighten to raise the entire figure from the knees up. The back heel subtly rotates the foot out from the body, foreshortening the foot with a 1 pixel shift in of the toes.

Pull: Nearly identical to load, except the punching forearm (defined by the bright green color) is pulled back 1 pixel.

Smear: The hips twist bringing the entire figure into a side profile view. The front knee bends and moves forward 4 pixels, while the back knee travels forward 9 pixels and down 6 pixels. The back heel dramatically lifts off the ground, place the foot at a 67.5 degree angle. The punching arm drives straight out to near full extend, while the head drops by 2 pixels. The back arm swings back, so the elbow can be seen jutting behind the torso.

Hit: The whole torso and front arm leans forward 1 more pixel while the back arm moves back 1 more pixels. The back knee and heel shift back 1 pixel, yet the ball of the foot stays planted.

Follow Through: Nearly identical to the hit frame, but the punching arm drives forward 1 more pixel from the shoulder pivot. The chest also rotates forward 1 pixel with sub pixel movement.

Recover: The back heel plants down on the ground, bringing the front knee back 3 pixels, and the back knee moves back 3 pixels and up 2 pixels. The torso shifts back and the hips rotate back about halfway to the idle stance. The punching arm pulls back in toward the body while the back arm moves forward, both about halfway to the idle position.

Overshoot: Very similar to the first frame of the idle, but the knees are shifted back 1 pixel, and the entire sprite is shifted back 1 pixel from the idle foot placement.

Female Dummy Kicks

FRONT KICK
The female fighter takes advantage of a lower center of gravity than her male counterpart, and comparative leg strength by utilizing fast ranged kicks. The front kick can easily be sprung from either leg, yet packs surprising power depending on execution. It’s performed by first raising the knee straight up - the higher the better. Many kicks in martial arts are prepared, or ‘chambered’ in this manner, as it puts the leg in position for a variety of strikes while maintaining centered balance. Once the knee reaches the apex, the foot is snapped straight out to the front.

Smear: To provide a quick basic attack with minimal delay, the animation snaps right into the leg snapped out in front, with the chambering only implied in the smear. From the idle stance, the hips twist, so the figure is seen from a side profile. The back leg is straightened and brought forward, raising the overall height 5 pixels from the first frame of the idle sequence. The arms are raised up, so the fist of the front arm goes the top of the head level, and the fist of the back arm is about shoulder level.

Hit: Very similar to the smear, but the smear effect is removed, the entire kicking leg moves forward 1 pixel from the hip pivot, and further straightens in form, raising the foot by 1 pixel. The back knee and hip slightly shifts forward by 1 pixel but the height doesn’t change. The momentum shifts the breast forward 1 pixel.

Follow Through: The front leg ripples back to the position of the smear frame, minus the smear. The back leg remains the same, but there is a slight depression in the buttocks. The front elbow is lowered 1 pixel, while the back arm is moved backward 1 pixel. The breast moves backward 1 pixel.

Overshoot: The overshoot frame is identical to the first frame of the idle, but shifted back 1 pixel.

ROUND KICK
The round kick garners more power than the front kick by utilizing more hip movement, and allows a higher strike point to knock foes right in the noggin. Paralleling the male’s cross punch, the round kick includes 2 prep frames to imply greater power. Also, it uses delay, screen shake, and a heavier hit effect to emphasize the thunder in those thighs.

Load: The first frame of chambering the kick moves the kicking leg and forward arm far from the idle position, warranting smears. Since the motion flows into the direction the kick will snap towards, the smear works well. However, if it were counter to the motion, as in the case of the load frame of the cross punch, the smear would detract from the motion. The knee moves straight up while the the foot curls in toward the body to increase the motion for it to spring out when the kick is delivered. The back leg is partially straightened, but still has a slight bend while the foot slightly rotates away from the body. The top of the head is raised 1 pixel from the first frame of the idle sequence.

Spring: The knee of the kicking leg is further raised, as the foot swings down in line with the knee. The supporting leg further straightens and rotates out from the body, raising everything from the hips up 2 pixels. The front arm raises up and begins to straight out while the back forearm slightly rotates up.

Smear: The kicking leg snaps out and upward, and the supporting leg pivots forward to a straight up position while rotating outward from the body, further foreshortening the foot. The hips twist into the kick, revealing most of the back and buttocks, while the whole torso pivots back about 45 degrees. The front arm straightens and extend outs parallel to the kicking leg. The back forearm maintains relative position while rotating back with the torso.

Hit: Very similar to the smear frame, but the whole body except the back forearm, leans forward 1 pixel from the pivot of the knee of the supporting leg. The hit effect starts on this frame.

Follow Through: The kicking leg bends inward and down 1 pixel from the pivot of the knee, while the foot slightly rotates downward. The back forearm moves back and down 1 pixel.

Recover: The hips twist back, bringing the whole figure into a side profile, while the torso rotates straight up. The front forearm rotates back, as the elbow remains raised up. The back arm swings up in a similar position, so both fist are about eye level. The kicking leg swings back down, and the knee lowers. The back leg bends backwards, and the foot rotates forward, bringing the back butt cheek back 6 pixels.

Overshoot: The overshoot frame is identical to the first frame of the idle, but shifted back 1 pixel.

Male Clothed Punches

Following the dummy animation, we suit up the figure with our good ol’ fisticuffs seeking salaryman. Much more than a palette swap, the physics applied to the details of the fabric and hair must be carefully considered. There’s not much more I can say than the tips I’ve given in previous lessons. Use references, go through the motions in front of a mirror and analyze the direction of the folds in the fabric. Try to add lively motion to the hair, and where the fabric hangs loosest. Keep details simple and focus on one area at a time, one frame at a time. Start with solid color and and motion of the main forms before the sub pixel animation. It’s better to preserve the legibility of the movement with minimal colors and details, than create complex details that cause jumbled noise when in motion. It will require trail and error to get satisfying results.

Pretty much the same story here. The suit is form fitting and doesn’t add much extra motion to the overall forms, but the sub pixel details greatly enhance the depth, and visualize movement that could only be implied in the dummy version. For example, the seams down the legs help illustrate the hip twist and rotation of the body into the punch. The hair flop adds character while increasing the sense of speed and impact.

Rapid combo with no inbetween idle frames

Female Clothed Kicks

The skimpy form fitting dress of our femme fatale doesn’t require much detail in the way of folding fabric dynamics. However, special attention is given to the hair and skirt of the dress, which adds a surprising amount of expression over the dummy counter part. Also note how the high heels increase height and distort the shape of the feet.

Trial and error with a basic vision for the physics at hand is the primary method. I kinda just played around with the hair until it felt right. The way it flops down at the end of the kick, then flips back up in the recover is the key to the sell. Furthermore, It wasn’t until I made this version I realized how a little ass jiggle adds to the momentum. Pulling off these moves in high heels might be a bit fantastical, but surely a heel to the face could do some damage.

Final Thoughts

Raw talent for character animation is rare, and I'm no exception. If you’re struggling with the subject, I want you to know I am too. However, the wisdom gained from struggle provides the most enduring lessons. Looking back, I must acknowledge how far I’ve come, but not become overly proud in the competency I’ve developed, and continue pressing for improvement. Basically, I’m saying we all suck before we git gud. I hope my thorough approach provides some insight, and inspires you to take on the challenge of character animation. Afterall, you can’t learn this stuff through osmosis. Shall we continue the series? Jumping, aerial attacks, damage, death… so much is still on the table.

Resources

Assets featured in this Pixelblog are available in Punches and Kicks Asset Pack

Source files used in the making of this Pixelblog are available in Punches and Kicks Source Files

Get caught up on all my downloads

You made it to the end of the article. Thank you for reading!

-By Raymond Schlitter

Pixel Diary - Golden Romance / November 5, 2024 by Raymond Schlitter

Intro

I arrange tiny squares on a digital canvas to make images called pixel art. Mechanically simple, but infinitely deep in intent, the human element is what legitimizes the pixels as art. I, a human being, thrust my intention with every choice made on the canvas, in an attempt to ascend myself and any willing viewers above the mundane, into the realm of sublime. However, intention alone won’t raise us from the mire of our sufferings, as beauty must propel the transcendence. While beauty is arguably subjective, I believe it has a fundamental quality, which directs us toward the divine, serving the ultimate truth and goodness. Indeed, a staircase to heaven, made out of pixels.

Pardon my pretentious philosophizing to justify my simple act in this world, but it’s important to contemplate the purpose of art, and man’s essential role as creators. Especially in the face of surging A.I. technologies, I’m disheartened to realize how few people appreciate, or even know what art is, as the masses gleefully amuse themselves with machine generated slop. How far are we willing to go for the sake of convenience? I concede, I’m reliant on the computer to facilitate the creation of my pixel art, yet there is still a considerable degree of labor required to transform a blank canvas into a coherent image, and mental anguish with every countless step along the way. I believe toil serves the art, and justifies the intention.

If a machine could instantly pull an image from my head, in spite of my intention, much of the art would be lost. Like taking a facsimile of a frame from the mind’s eye of a dream, I suspect the image would exhibit a predominance of vague distortions with peculiar areas of uncanny detail. Curious fascinations, but likely lacking in my definition of beauty. Automatically beautifying the image would grant the machine liberty to fill in any gaps that would be patched along the creative journey of human handy work. Therefore, diminishing human intention, and artfulness, no matter how pretty the result may be in objective design.

I wasn’t sure where this was going when I started writing this intro. Apparently, I’m not a fan of A.I., particularly in the world of art. I’ve done my best to ignore it’s presence, as I have no interest in its use, or products. However, it’s rapid permeation in all aspects of life have put weight on my heart. While it’s hard for me to see outside net negative, dystopian implications, I hold hope that its disruptive force can serve to awaken people to desire truth. It’s not a destination, but a quest we must endeavor through with the constant aim of achieving a higher good. As a lowly man with great propensity to sin, I humbly serve the quest through my authentic art. Now that I got that out of my system, how about some tangible goods to back up the word salad.

Inspiration

While I’m inclined to imaginary subjects and game inspired styles, a growing portion of my portfolio exhibits realistic landscape studies. I’ve done a fair bit of traveling in my past, witnessing the crystal blue waters of the Caribbean, mist filled verdant valleys of the Indian countryside, and the perfect chaos of far eastern metropolises, among many other highlights. However, nothing stirs my soul quite like my ol’ muse; the spirit hovering above the Kansas prairie. Modest, and seemingly unremarkable to the passerby, she requires you to slow down, and commit to her modest vistas before revealing her true grandeur. If you wait for the golden hour, that’s when she dances and dazzles with her crowning spectacle across the entire sky. Sure, the sun rises and falls across the world, but I’ve observed every place has unique characteristics in the nuance of color, texture, shape, and scope. Maybe it’s just because I can actually see the sky on the sparse, flat landscape, but I find nothing as epically inspiring, yet spiritually calming, as the Kansas sky.

Process

The process starts with finding the right scene to motivate me. Lately, the beautiful fall evening dog walks have been urging me to return to the subject. After a couple weeks of the daily routine, and snapping many photos, I sorted out the best shots. Funny enough, I ended up most drawn to a sunset from late July. I never seem to be timely with seasonal events. Maybe I’ll make a fall scene by next spring.

While I draw inspiration from several photos, and my feelings from the moment, I ultimately choose one image to reenvision in my pixel style. My goal is to marry realism with a human painterly quality, to form an image that speaks beyond the photographic source.

The main key to maintain a painterly quality is to observe the reference off to the side of the canvas to simulate the open air scenario of transferring observation into mark making. I advise to not directly paint over the reference, as it tends to result in a paint by number process that ends up looking more like a poorly down scaled photo than handmade pixel art. In contrast, separating the reference from the canvas engages the minds eye in order to make the jump. The idea is to capture the essence of the photo, but not every little detail. I’m still learning to trust my vision, and embellish more abstractions rather than obsess over precision.

This is my first realism piece since I switched from Photoshop to Aseprite. The setup is familiar, with my work window on the left hand, and my reference to the right. However, I do miss the ability to float out multiple file tabs. This allowed me to keep my reference visible in PS, so I could easily eye drop colors on the fly. Aseprite allows multiple file tabs, but as far as I know, only one can be viewed at once. Therefore, when I want to sample a new color, I have to click on the tab with my reference, sample the color, then click back into my work tab, while I use a separate image viewing app for the reference off to the side.

Canvas size significantly impacts the level of abstraction. Naturally, the smaller the canvas, the more abstraction, while the bigger the canvas, the more accurate the details can be made. Subject matter and desired detail should be considered when choosing a size. I like to work on a relatively small size, as obvious chonky pixels lend themselves to an abstract painterly look. On the other hand, a large canvas can obscure the pixels, diminishing the aesthetic of the medium.

For this piece, I went with a 320x180px canvas, which is on the large end of my scale. This size allows me capture the intricate textures in the clouds, and convincing leafy quality in the trees, yet the pixel clusters are still apparent.

EDITING

I edit the reference photo before I start pixeling. Usually, I up the saturation and vibrancy a bit to juice up the color. Nothing too extreme, just enough to give the pixels some life without pushing into the surreal. A color boost will also help prevent the low res photo look. Color correction is also preemptively done to my reference, as I color sample directly from the photo to form the palette.

Another edit I typically do is cropping, and sometimes distorting the image for my desired composition. In this case, I only cropped a portion of the photo to achieve a 16:9 ratio. The original composition was quite nice, but I wanted a wider format, and the crop eliminated labour without losing the most interesting clouds. However, I do miss the radiant light shooting above the clouds. I played with squishing the image, but any amount of uneven scaling appeared unsightly. An interesting vertical format was also possible, but I had my heart set on a wide format.

The last edit I do is scale down the entire image to closer match the size of the canvas I’ll be working on. This pixelates the image, giving me a better view of how to translate things into my own clusters, and saves me from stressing over unnecessary details. I only do this to a certain extent, as its good to scale some details with the imagination for the sake of unique clustering. In this case, I matched the 320x180px size of my canvas, as it still retained ample detail for the imagination to further simplify in my clusters.

BLOBBING

The first phase of pixeling I call blobbing. In this phase, I use the pencil tool with large round settings to blob out all the main shapes of the composition. I capture a rough overview of the entire composition before refining any small details. Unless the canvas is tiny, I rarely use the single pixel pencil setting in this phase.

I also establish the color palette in this phase. I’ll grab a color from the area of the reference that I intend to paint, then I blob with that color as far as I can until it feels like I need a new color. I repeat this pattern, scanning across the canvas until the entire area is filled, and all the basic shapes are established.

CLEANING

Once the basic composition is established with blobbing, I take a much more thorough pass over everything, cleaning up stray pixels, and better defining the rough shapes. I still make many checks with the reference to inform my shape making decisions, but I focus more on the quality of the clusters on my canvas. Many clusters will arrive at there final form in this phase.

POLISHING

The final hyper focused pass over, where I analyze every pixel to make sure the colors and cluster relationships are optimally defined. I check for consistency of details, so the image feels wholistic without any areas that feel unfinished, or areas that are overworked with unnecessary, or out of place details. I also check for any unsightly jagged connections, or pillowed shading. I want to achieve an overall consistent style in my cluster use, and detail level.

Cluster style is largely defined by the size, repetition, and common characteristics. For example, observe the relation of similar wavy/swirly shapes in the distance clouds, or the repeated small circles in the nearer dark clouds, which gives them a consistent puffy feel. Furthermore, I chose to use very little dithering, which is mostly in the trees to convey shape without using extra colors. This captures a leafy texture, and enhances depth by distinguishing them in the foreground. I also avoided anti-aliasing, and made sure to weed out anywhere I dabbled, opting for creative clustering and smooth color ramps.

Final Thoughts

With a roadmap supplied by nature, there isn’t much conceptual creativity involved beyond the initial photo taking and editing. However, there is a lot of potential for expressive creativity in the execution of the clustering, and handling of colors. The main challenge in a piece like this is patience, and persistence. Things happen quick in the blobbing phase, but the cleaning and polishing take exponentially more time. Unless you record the process, it starts to feel like you’ve been in the same state for hours. Before I had much experience with realistic pieces like this, I was easily discouraged, to the point of abandoning a few pieces. But these days, I find zen in the focus on pure technique. I estimate this one took around 25 hours. Some may say it just looks like a photo, and I may as well had a machine generate it. If no discernment for my handmade clusters, I rebuke with the journey of my process, and the intentions in my heart.

Thanks for coming by the studio!

-By Raymond Schlitter

Pixelblog - 52 - Idle Fighting Stance / September 30, 2024 by Raymond Schlitter

These characters aren’t just standing around to chew bubble gum, they are prepared to beat up hordes of scumbags.

Intro

Welcome back to another edition of my ongoing human anatomy series. In the pervious two entries (Pixelblogs 49, and 50), we covered basic male, female anatomy models, and walking animations. In this edition we take a detailed look at idle fighting stance animations. Calling them ‘idle’ animations makes it sound like there’s not much going on, however, a character’s idle loop is one of the most effective means of displaying personality, and bringing the sprite to life. Furthermore, minute changes from frame to frame amount to a surprisingly nuanced challenge. While small sprites can evoke expressive movement with few frames, larger sprites afford the pixels for smooth, hyper realistic motion, but require more frames to execute with satisfying results. In this lesson, I take my example sprites that encompass a size of 48x92px, and maximize fluidity of motion with a reasonably economic 8 frame idle loop.

While the main purpose of this series is to develop general proficiency with human anatomy, the underlying design perspective is driven by the concept of creating a 2D character action/beat em’ up game. Ultimately, I don’t know how far I’ll take this series, but it’s important to understand the foundation my design decisions come from, as we move more into the animation. Moreover, the goal is not rotoscoped realism, rather a stylized hyper realism within the context of action based gameplay.

Male Idle Fighting Stance

We start with the general pose of the color coded dummy based off the anatomy established in previous lessons. For the male character, I use a basic boxer’s stance to suit a character who will rely heavily on upper body strength with an arsenal of mostly punches. In this stance, the hands come up to protect the face while the neck scrunches down into the shoulders to further shield the vital head target. A soft bend in the knees keeps the fighter light on his feet, ready to quickly shift weight into a punch, or evade a strike.

Putting this pose in motion adds a gentle bounce to everything in a breath like up, down rhythm. Through the entire motion the initial pose is maintained while the force of gravity acts upon alert, yet relaxed pulsing muscles. Everything is anchored to the steady motion of the torso.

Frame 1 to 2: The Head and torso raise 1 pixel on account of the legs slightly straightening, which shifts the knees in 1 pixel. The shoulders, elbows, and outer fist raise by 2 pixels, while the inner fist raises by 4 pixels. Note the subtle shift in the forearm orientation, which is most apparent on the inner arm with the more pronounced fist movement.

Frame 2 to 3: The feet slightly bend raising the heels, which moves the entire body up 1 pixel, but nothing else changes in the pose. This is the greatest height the figure reaches through entire sequence.

Frame 3 to 4: The heels go back flat to the ground, dropping the torso, legs, and outer fist by 1 pixel, but the head stays at the same level. Shoulders, elbows, and the inner fist drop 2 pixels.

Frame 4 to 5: The knees bend, moving out 1 pixel, which moves the thighs, torso, head, shoulders, and elbows down by 1 pixel. The outer fist moves down 2 pixels, and the inner fist moves down 3 pixels. Note, the subtle change in the orientation of both forearms.

Frame 5 to 6: The knees continue to bend, moving out 1 more pixel, which moves the thighs, torso, head, shoulders, and elbows down by 1 pixel. Both fists move down by 2 pixels. Note, the subtle change to inner forearm orientation.

Frame 6 to 7: The bottom portion of the legs compress, dropping the knees, torso, head, shoulders, and elbows by 1 pixel. Both fists drop by 2 pixels. This is the lowest height the figures reaches through the entire sequence.

Frame 7 to 8: The bottom of the legs stretch back out, moving the entire body up 1 pixel, except the head remains at the same level.

Another detail to consider is the playback speed. Frames 1-4 play at 100 milliseconds/0.1 seconds, while frames 5-8 play faster at 50 milliseconds/0.05 seconds. This accentuates the force of gravity by speeding up the downward motion, and subtly slowing the motion at the max height of the bounce.

Adding clothes and design details to the dummy is more than just a color swap. While the suit is fairly form fitting, it hangs off the figure and slightly thickens the overall profile. You must consider the tension on the fabric imposed by the body position, and gravity in order to properly fit the clothing. Furthermore, the shoes thicken the feet, and raise the overall height by 1 pixel. The hair also slightly increases the overall height of the sprite.

When in motion, the fabric conforms to the figure, while making small sub movements in the wrinkles, and where it hangs loose. Additionally, the hair permits sub movements to further bring things to life. Capturing a natural feel to the flow of the fabric and hair definitely takes some trail and error. Part imagination, part reference study(mostly bouncing in front of a mirror), and a good dose of experimentation are required for satisfying results. I suggest starting with a form fitting design for the overall animation, then carefully work in the sub movements one area at a time.

Female Idle Fighting Stance

Moving on to the lady character, we take the same approach, starting with the pose of the dummy figure. For this character, I went with a karate stance to take advantage of the female’s lower center of gravity, and strong legs. From this posture she is poised to effectively strike with kicks, while defending attacks with clever spacing, and counter grapples.

The motion follows the same bouncing formula as the male, with subtle differences.

Frame 1 to 2: The outer knee shifts up and in 1 pixel, while the inner knee moves straight up one pixel. This moves the torso, breasts, and head up 1 pixel. Both arm units move up 2 pixels.

Frame 2 to 3: The feet bend, raising the heels off the ground, moving the entire body up 1 pixel.

Frame 3 to 4: The heels move back down flat on the ground. moving the torso and legs down 1 pixel. The head and breasts remain at the same level. The shoulders and elbows move down 2 pixels, but the hands only move down 1 pixel. Note the change in forearm orientation.

Frame 4 to 5: The outer knee moves out and down 1 pixel while the inner knee moves straight down 1 pixel. This moves the upper legs, torso, breasts, head, shoulders, and elbows down 1 pixel. The hands move down 2 pixels. Note the subtle shift of the forearms.

Frame 5 to 6: The outer knee moves out and down 1 more pixel. The inner knee moves down 1 pixel. Note, the compression movement in the legs. The lower legs, torso, head, shoulders, and elbows move down 1 pixel. The hands and breasts move down 2 pixels. Note the shift in orientation of the forearms.

Frames 6 to 7: A compression occurs in the lower legs moving the knees, legs, torso, head, shoulders, and elbows down 1 pixel. Note the subtle changes in the form of the legs. The hands and breasts move down 2 pixels. Note the shift in orientation of the forearms.

Frames 7 to 8: The lower legs decompress, moving the entire body up 1 pixel, except the head remains at the same level.

Same as the male, the frame timing plays at 100ms on frames 1 to 4, and 50ms on frames 5 to 8.

There is less fabric to go around on the female design, but there is a more dynamic contrast between the tight fit, and the loose portion at the bottom of the dress. Furthermore, there is obvious sub movement in the skirt area of the dress, and a subtle stretching of the outer shoulder strap, but everything else is skin tight. The high heels dramatically modify the feet shape and lift her height by 4 pixels. The hair jostles as she bounces to imply its relative lightness. Of course, jiggle physics are enabled.

Final Thoughts

I started this blog with the intention of including some simple melee animations as well. However, just breaking down the idle animation for for both models, along with the clothed designs, turned into a substantial amount of content. Moreover, it would be a waste to gloss over this crucial part of animated character design without a detailed explanation of the nuanced movement, as even a skilled visual learner may struggle to notice all the subtle changes between frames. I hope the information digests smoothly.

In the next edition, we’ll finally get to those melee animations. I’ve already started on multiple attacks for both characters. Stick with me, and do not fear the oncoming challenge. I’m on this journey with you, and we’ll be taking our time, so no one gets left behind.

Resources

Assets featured in this Pixelblog are available in Idle Fighting Stance Asset Pack

Source files used in the making of this Pixelblog are available in Idle FIghting Stance Resource Files

Get caught up on all my downloads

You made it to the end of the article. Thank you for reading!

-By Raymond Schlitter

Pixelblog - 51 - City Builder / July 29, 2024 by Raymond Schlitter

Intro

Made in the image of God, it’s in the nature of mankind to create, build, grow, and influence with the power of flesh, and the will of spirit. Within the digital realm, video games allow us to exercise these desires far beyond the limits of our earthly capacity. While all games contain some kind of god-like features, an entire genre emphasizes the overlord concept to such a degree, they’ve earned the moniker god-simulator. Among these games, I most enjoy the city builder type found in the early iterations of Sim-City. However, I never got deeply into the kind of games, for playing god is a stressful job. Nevertheless, I enjoy the creation aspect, and find great satisfaction witnessing a civilization flourish. You could describe much of my work as a practice in playing god, often featuring communal architecture from a top-down viewpoint. This has lead me to consider the compelling prospect of what a city builder game in my style might look like.

Top-Down Assets

Having spent most my life in Kansas, I approach the concept in terms of the typical mid-west city of the United States. Country style homes with lawns, wide roads, and a relatively flat, grid layout are key characteristics of these suburban getaways. From top to bottom, I present a couple houses, school, office building, and a church. The designs are classic idealizations for the sake of recognition and visual charm. More or less, they are colorful simplifications of real life counterparts in my neck of the woods. In reality, most roofing materials are dull browns, and grays. The modern school building is commonly a single story, tan brick prison, literally constructed by the same contractors who build the other kind of prison for convicted criminals. Multi-story office buildings are rare but do exist. The church is the most inspiring architecture, and probably the most accurate design, modeled after one of the many great limestone structures that grace these plains.

Moving on, I present more essential elements of any town of substance. From top to bottom, we have a post office, restaurant, courthouse, police station, and fire station. Again, they are somewhat cutified versions of irl counterparts, which check key characteristics to be easily recognizable.

As for the technical execution, I determine the size based on 16x16px grid units, which offers compatibility on a tile map with terrain tiles. The foundation of the area the structure will encompass adheres to 16x16px tiles, however I permit the height of the structure to slightly go beyond this foundation a few pixels at the top of the asset along the y-axis. This creates subtle overlap of other elements for a nice touch of depth. Note, that I do not break the foundation along the bottom or sides of the asset, as this will create conflicts with layering order.

The natural sequence of creation for me starts with the roof and works down, first establishing the basic structure. I then apply details like windows and doorways. Next, I apply drop shadows under eaves, in recessed areas, and anywhere that feels appropriate based on the light source. Then I add outlining to make the whole thing pop. Rather than use straight black outlines, I prefer subtle outlines that use a slightly darker color than the adjacent pixels. Finally, I flesh out the surrounding property and cast drop shadows on it. The size of the surrounding area is determined from the start based on a 16x16px grid.

Terrain Tiles

Before the city, there was frontier. Another aspect of city builders I find interesting is the prospecting, and razing of the land. Furthermore, I want to include that element in my concept, and provide a proper background around the boundaries of the city. Additionally, roads are necessary infrastructure to connect the city, and provide meaningful structure to the layout. Remember, this is modeled after an American city. Passenger trains are super rare, and god forbid someone walk or cycle to their destination, no matter how close it might be. Also, car pooling is for wussies.

Just covering some basic terrain here, but I can envision many variations for more dynamic environments. For example, mountains and water features could provide interesting challenges to build around. Seasonal changes and weather patterns could alter the appearance of the background, and practicality of building.

Notice there are several features presented in the city that are not broken down in tutorial format. The main principles are redundant, so If you can successfully create all the assets in the first two tutorials, I figure you should be on your way to creating whatever your city needs. Anyway, the additional assets are included in the asset pack linked at the end of the article.

Final Thoughts

After the technical subject of animating human figures in the past couple Pixelblogs, I needed to take a breather with my comfort food, which is low res top-down subjects. Especially architecture is cozy for me. But it’s not all fun and games. I did my research, considering essential features, and utilizing the most appropriate references. As usual, I made everything in context of practical game design, so the assets and concepts can be used to springboard a tangible game dev project. I hope you find the content useful, and enjoy the trip to Pixeltown, USA.

Resources

Assets featured in this Pixelblog are available in City Builder Asset Pack

Source files used in the making of this Pixelblog are available in City Builder Source Files

Get caught up on all my downloads

You made it to the end of the article. Thank you for reading!

-By Raymond Schlitter