Pixelblog - 41 - Isometric Pixel art / November 30, 2022 by Raymond Schlitter

Intro

Isometric pixel art is based on the isometric projection, which is a method for accurately ‘projecting’ 3D objects into fancy 2D. Unlike perspective drawing, there is no vanishing point in isometric projection. Furthermore, the 3 coordinate axis have equal foreshortening, eliminating the need to alter lengths based on the perceived distance from the viewer. This allows one to create 3D objects that accurately describe the complete form and all dimensions with efficiency. Traditionally, Isometric projection is used for technical drawings in engineering, architecture, and the assembly guide to your Lego set. However, these characteristics also make it a perfect style for game graphics. Marry it with pixel art, and something truly special happens. Let’s make some magic.

The Basics

The ground planes of true isometric projection are laid out at 30º angles. Since a true 30º degree line in pixel art results in a jaggy rhythm, isometric pixel art compromises by using the 2:1 line pattern, which is closer to 26.5º. The 2:1 line pattern, or what I casually refer to as 2-step lines, make up the foundational ground planes of isometric pixel art. As long as you grasp how everything comes from a grid of 2-step lines, you can forget all the rest of the technical jargon and start banging out technically sound isometric pixel art.

The side ways circles can be especially difficult to try and eyeball. Start by making a grid from a skewed square, and cross. The circle makes contact with the square at the 4 end points of the cross. Pay attention to the shape of the cut out corners and how they reflect each other. Even with the grid it can be hard to eyeball the curves. As a Photoshop user, I draw a regular circle then skew it in free transform mode by holding option+command before pulling on a side node. Usually requires a little clean up after the transform.

Cube styles comes down to personal preference, but it should be noted some styles tile better than others. I personally prefer the look of the wide corners, as in A1. However, they require a bit of clever overlapping to tile well. D1, for example adheres more to the 2:1 grid and tiles perfectly, but those sharp corners are unnerving to me.

For more guidance on the basics, review Pixelblog 4.

Isometric Tiles

There’s a lot of variation possible with iso tiles, but it basically come down to picking out a cube style and texturing them to represent the desired environment. While it’s possible to create a complex set of iso tiles that includes slopes, I’m going to stick to cuboids, which can still make surprisingly varied and interesting environments. I use the word cuboid, as the tiles don’t need to be perfect cubes. So long as the top surface is uniform the height of the tiles can vary. You can even have tiles with no sides, but these can only go flat on the ground with no elevation. The cube is quite versatile, however, as it can be slid up and down in relation to other tiles to adjust the height as desired.

Note, the texture should be able to loop seamlessly along all 4 sides of each surface. Apply the same principles of creating a plain square tile to each of the 3 surfaces. For more tips on applying texture to tiles, check out Pixelblog 20.

The size also comes down to the look you’re going for. The bigger the more detail is possible, but the amount of work dramatically increases as well. Whatever size you go with, even dimensions are your friend. I arbitrarily ended up with 36x36 pixels based on the relationship with the sprite designs.

The tutorial depicts various styles of tiles from flat color, to more detailed texture (not a step by step progression). I think the flat color, and simple texture versions could be combined for a nice look, but stylistically don’t match well with the high detail versions. My example terrain is composed of only the max detail versions.

Even with organic objects like trees, I find it helpful to start with basic geometric shapes, then sculpt out the details. This is much easier than trying to freeform the whole object, and the foundational shapes help maintain a consistent iso look.

Isometric Mech

Your final test of this iso lesson, it’s a mech! At first look, the final sprite may appear like an advanced challenge, but when you break everything into separate pieces, you find fairly simple geometry that never strays too far from the foundational cube. Even though some information will be hidden in the final composition, it’s well worth visualizing all parts. The piece by piece layered approach also helps ensure a more sound final design, by offering the flexibility to easily move things around and swap out parts. I fidgeted a lot with the placement of all the parts, and it would have been very painful to render those edits on a single layer. Furthermore, it’s really satisfying to feel like you’re actually building something, and if you are so bold to attempt animating this beast, layers is the way to go.

As for drawing character sprites, I find it helpful to make a wireframe iso cuboid to help you keep things in line with the 2:1 pattern. Once you get the hang of it, you can simply imagine the shape without the need to draw a guide. As a general tip when making iso stuff, I always have a single 2:1 line in my composition as a separate layer that I use as a ruler to make sure things line up

FINAL THOUGHTS

Isometric pixel art can be a bit tedious to get into, but once you develop proficiency in drawing 2-step lines it becomes second nature. It’s well worth the effort, as iso pixel art is always a crowd pleaser, and opens up a lot of possibilities in games. However, the rotated viewpoint makes direct input gameplay a bit tricky, as the simulated perspective can make it difficult to gauge distances. Not the best choice for a platforming game, but great for turn based strategy games.

I got into iso art early on in my pixel art career. After a few studies I went for broke on very large detailed scenes. I developed a great deal of proficiency from the experience, but it was all built on the accessible fundamentals. If you can draw a cube, it’s possible to make a whole city!

All words aside, I feel iso pixel art is best understood simply by observing examples, and then mastered by actually doing. The basics can be picked up relatively quickly, and the challenge picks up once you attempt composing complete scenes. The key is accuracy, making sure things are properly spaced in relation to each other and everything lines up along 2-step lines. Don’t always trust your eyes. Count pixels and use a 2:1 ruler to make sure things are lined up that are supposed to. Start small, then go big!

RESOURCES

Please consider supporting my work by becoming a Patron. Among many other rewards, Patrons can access resources to compliment my tutorials. But most importantly, you allow me to continue making new content!

Alternatively, you can support me by making a one-time donation directly on my homepage, and receive exclusive art and resources.

This month I’m sharing Isometric Pixel Art Assets Pack, which includes all the assets I created for this lesson.

My top patrons can also download Isometric Pixel Art Resource Files. This includes Tutorial 113 - 115, original Photoshop work 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 - 40 - 3D Pixel Art Animation / September 28, 2022 by Raymond Schlitter

intro

Long before the polygon, game creators have sought to bring 3D worlds to life by whatever means necessary. When the only means is pixel art, one must rely upon the good ol’ art of illusion. I have always felt the illusion of 2D art, as in traditional painting, or pixel art, is more compelling than realized 3D in the form of sculpture, or modern 3D graphics. The lack of information in the 2D form kicks on the viewer’s imagination to fill in the gaps, while true 3D spoils this interaction by giving you the full 360 degree view. Furthermore, I present a lesson of 3D concepts achieved by hand pixelled frame animation. Sure, it may not seem like a practical approach in the modern setting, but the mental exercise is greatly satisfying, and the results are guaranteed to be unique.

3D Dungeon

Before Doom came along with its revolutionary 3D engine, the first person perspective was uncommon in games, generally reserved for dungeon crawlers, and archaic flight sims. In the case of the former, simple corridors are navigated within a tile based system, presented in slideshow fashion with little to no animation frames between tiles. This lack of animation could be disorientating and limits the immersion factor, However, a valiant effort can be seen in the example of Phantasy Star 1 for the Master System, which actually animated first person movement between steps and turns within simple 3D corridors. Taking inspiration from this prime example, I’ve created a first person dungeon concept with basic forward, backward movement, and turning.

I recommend using a low resolution to economically practice the concept. However, keep in mind the less pixels to go around, the less nuanced movement can be, as even a single pixel movement can appear dramatic on a small scale. My example is 96x58px, landscape format to capture a natural wide gaze.

Make a simple corridor with one point perspective, and the vanishing point at the center of the canvas. Use only lines and solid color to make the walls. Divide the wall into panels with vertical lines. The gaps between lines should grow larger as they extend out from the vanishing point. Make it so the nearest panel is uncropped and flush to the canvas edges. Apply a dithered texture with darker color to the far end of the walls at the center of the canvas to create a subtle atmospheric depth effect. Also, apply dithered gradient to the background with darker color in the center to enhance the sense of depth.

To create a straight movement loop only the vertical lines on the walls need to move until reaching the next line, or edge of canvas. My example only uses 4 frames for this core loop. Make sure the dithered depth texture is applied consistently to all frames.

To make perpendicular corridors, simply remove the perspective lines from one wall panel and replace them with horizontal lines. Start from the most distant panel and do this for each frame until the side corridor has passed the field of vision, back to the first default frame from the core walk loop. My example is 16 frames for the full pass. I duplicated the 4 frame walk loop 4 times and modified each frame to have the side corridors.

To make dead ends, again duplicate the walk loop 4 times to make 16 frames. Starting from the first frame, make a wall at the far end of the corridor. Then make it one step closer each frame until the wall completely frames the canvas.

There are 7 frames of animation in between end points of a 90 degree turn. First, establish the middle frame of the turn as a key frame. This is the frame where you are turned 45 degrees exactly facing a corner. Depending on if you are turning into a corridor, or turning from a dead end, the middle turn frame will respectively be a convex, or concave corner. Once you’ve established the middle key frame, you just need to come up with 3 frames between it and the start point, which can be duplicated and reflected to complete the second half of the turn. This step requires keen vision to imagine how the environment rotates. I referenced the animation from Phantasy Star 1 to help see how the angles trend from frame to frame.

Once you’ve mastered the simple vector style dungeon, try including brick texture, and environment variations, like windows, cobwebs, and bones. Just remember every detail needs to be hand drawn into dozens of frames. Yikes!

3D Hyperspace

I’ll permit a break from the lesson if you’re stopping off for a little game of Hyper Echelon

How does one travel the big wide universe? Hyperspace, of course. Essentially the interstellar highway, this sci-fi concept is commonly used as a mechanic to feasibly link many worlds in one epic story. Sure, we know it from Star Wars, but did y’all catch Hyper Echelon?

Yup, I have some experience with this kind of animation from multiple scenes created for Hyper Echelon. Here, I’ve refined the core elements into a sample animation while breaking down the process from start to finish.

First, make a one point perspective guide of many equally space lines from a center vanishing point (10 degrees in my example). Use this guide to create multiple layers of streaks with varying thickness and color to indicate depth of field. Thin dark streaks appear farther away while thick bright streaks appear closer.

Once the composition is filled with full length streaks, break them down into segments. To capture depth, the segments should start small near the center and grow longer each step outward. Avoid cropping and always make the nearest segment the longest segment of the streak.

Animate the segments into a looping animation (24 frames in my example). Coordinate position and timing of streaks to create constant balanced rhythm that feels organic, opposed to obvious intervals of waves of stars. Streaks can be repeated multiple times through the loop to achieve this constant flow. Segments can be connected to make streaks longer. In my example, far layer streaks are only one segment long, 2 segments long in the middle layer, and 3 segments long for the nearest layer streaks.

For an enhanced hyperspace, go for higher resolution, more frames, more depth layers, width variation within layers, and perhaps even a spaceship cockpit in the foreground. Have fun!

Rotating Cube

Next up, we have sort of a faux 3D effect, famously used as a level design mechanic in the game Fez, where the vanishing lines always remain perfectly horizontal. This abstracted projection is a cornerstone present in most of my work, but this strangely convincing animation is a bit of an oddity. I first conceived it way back around 2016 when working on a platformer prototype. Driven by curiosity, I tried to hand animate the rotation of my beloved ‘Fez’ cube. Surprisingly satisfied with the results, I applied the effect to some funky lamps that could be found in the home’s of NPCs.

But, let’s not get ahead of ourselves. First, we must learn how to create the illusion of rotation.

The overall motion plays a factor, but it’s mostly the color that sells the illusion. Therefore, the first step is to prepare a color ramp from the darkest hue to the lightest hue, with plenty swatches to fill out the gradient.

Next, make the key frames. One with the cube turned 45 degrees, and the other with the face of the cube flush to the viewer. Now, the tricky part is making the in between frames. Personally, I like to work in solid color from the get go, so I go one step at a time, considering shape, and color based on light source. However, if you’re a fan of outlines you could try nailing the shape and motion down before messing with color.

If you break down the motion of the shape itself, you can see even expansion and contraction with consistent 1 pixel movements. However, the movement of the perceived corner of the cube makes small movements at the sides of the mass, which become larger as the corner reaches the center of the mass. This should create a nice ease in, ease out motion of the corner sweeping across the cube, and create a sense of depth from the varied speed.

Try using less frames and removing the bevel from the cube for an easier version.

FINAL THOUGHTS

I needed to do something a little more unique after all the game studies lately, and this proved to be even more fun than I expected. Basing an entire game on a 3D pixel art concept may not be practical, but there are many instances in games where a little clever 3D can bring a splash of life to a 2D world. Some relevant examples are rotating sprites, a brief first person section, and or cinematic cutscenes that present a dynamic viewpoint. Pixel art may not be the first choice for 3D graphics. However, by keeping things fairly low res, the pixels have proven to be an economic way to practice 3D concepts. What’s more, I find these visual practices tickle my brain in a satisfying way, keeping the art muscles in shape, and boosting mental health. Give it a try!

RESOURCES

This month I’m sharing 3D Animation Assets Pack, which includes all the assets I created for this lesson.

My top patrons can also download 3D Animation Source Files. This includes Tutorial 110 - 112, and a couple supplemental animation projects. All files are .psd.

Get caught up on all my downloads

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

-By Raymond Schlitter

Pixelblog - 39 - Sci-Fi RPG / July 27, 2022 by Raymond Schlitter

Intro

Prepare to go back to the future, into a retro space age inspired by Sega’s venerable Phantasy Star franchise. It’s the early 1990’s, and every time I venture into the local rental store, the beautiful box art for Phantasy Star 2 captures my imagination. Alas, my family’s allegiance is with Nintendo, and my little child brain has yet to develop the patience for rpgs. Thus, the box went back onto the shelf, and the dream of an epic space themed adventure receded into distant memory. Fast forward to nearly a decade later- I’m at the height of a personal golden age of gaming during the all too short lifespan of the Dreamcast and its revolutionary SegaNet. Caught up in the 3D trend, I had yet to play any pixel art iterations of Phantasy Star. But, lo and behold, that captivating universe I gleaned from box art years ago, was finally making a return in online multiplayer form.

Phantasy Star Online would be my first foray into the PS universe, and man, was it a doozy. Upon popping in the disc, I played 13 hours straight until sunrise, when shamefully ordered to bed by my mom. I’ve never quite had a gaming binge like that since. Needless to say, it left an extraordinary impression. The gameplay was so simple, but the perfect synthesis of sound and visuals was, and still is hypnotic.

Phantasy Star Online, Sega Dreamcast (2000)

Surely my experience was not unique, as PSO and it’s various ports gave many gamers their first taste of Phantasy. Soon after its release, renewed interest in the 8 and 16-bit titles finally lead me to experience PS2 and 4, on authentic Genesis hardware, while years later I eventually sampled 1, and 3 through emulation. Even with the technical limitations, I was surprised to see consistent aesthetics throughout, each title being equally, if not more immersive than the modern 3D version I was accustomed to, albeit 3 slightly falls under par. Ultimately, PS4 is my favorite, and has the most refined graphics of the pixel art titles. Returning to the older generation gave me newfound appreciation and respect for pixel art. I was still caught up in the trends of the day, but I could sense an undeniable charm in these older games that my modern gaming diet was lacking. Roots were taking hold.

While my love for PSO is apparent, I’ve longed to see the franchise go back to the traditional turn-based random battle jrpg formula. After the greatness of PS4, there was so much potential for more main games within the genre. Unfortunately, the franchise was absent for 7 years until PSO, and has never returned to the traditional formula. But that can’t stop me from phantasizing about a return to retro form.

So with that long winded background story out of the way, I present a pixel art study heavily modeled after the stylings of PS4, and further informed by my experience with the series as a whole. While still exercising creative liberty, the following assets loosely adhere to Sega hardware somewhere between Master System and Genesis limitations, and are closely informed by the source material. Everything uses 6-bit RGB palette, and conforms to 16x16px tiles.

Character Sprites

With the sci-fi setting, alien and robot characters are common place, but it all starts with the base model humans. Once a few male and female variations are established it should be much easier to iterate for more diverse characters. Analyzing an existing sprite and stripping them down to their birthday suit is a great practice, and makes it much easier to iterate and visualize your own designs.

I’m always impressed with the 3-frame walk/run cycles of these old games. In this case, shading is essential for convincing effect. Idle is static, but you really don’t need motion with characters this vibrant! All 64 colors of the main palette can be see at the top of the tutorial.

For more tips on how to approach recreating retro inspired sprites, please review Pixelblog 37 Castlevania Study.

Character Profiles

Similar to the process with the character sprites, I referenced models from PS4, boiled them down to the basic head shape, then recreated them with my own styling. Shapes and placement of features are always important with anatomy, but simple shading and highlights are the key to creating depth.

Anatomy is like foreign language to me, if I don’t keep regular practice I quickly lose proficiency. The keys are to always use references, and with anything, persistence pays off. Try to see your efforts through to completion, as things looks out of sort until all features are well placed and proportioned. But don’t rush any steps! The basic head shape provides the foundation that will largely dictate the final outcome. If things look off in step 1, they will likely be off in the final step. Yet, there’s always room for adjustments along the way. Insight is best gained by going through the motions. In other words, practice! For more tips and tutorials on anime styled portraits, check out Pixelblog 29 Anime Faces and Hair.

Dungeon Tiles

Ah, this cybernetic aesthetic suites the pixels well. Each individual tile is quite simple, but everything comes together in striking fashion. Again, I studied references from PS4 dungeons to inspire the design. The few extra tiles for the baked in shadows is well worth the added depth. The combination of large 32x32px panels along with the standard 16x16px blocks helps break the monotony of the grid. Also the color contrast and different floor textures keeps things interesting. But, the coolest aspect is the parallax background. All done with minimal assets!

Made with Pyxel Edit. If you’re new to making top-down tiles, I suggest reviewing the fundamentals in Pixelblog 20 Top Down Tiles.

Let the monster blood splash across those shiny tiles.

FINAL THOUGHTS

This study hit a personal sweet spot. Listening to the PSO soundtrack as I developed these tutorials had me gushing with nostalgia and kept the inspiration on high. The 6-bit RGB palette was surprisingly fun the work with and feels slightly more versatile than the NES palette. While I’m grateful for the games we got from the era, I can’t help feeling bittersweet that we didn’t get more pixel art space themed rpgs. Maybe these tutorials will inspire someone to make one! How about a part 2 follow up, focusing on the battle system? Always more to come!

RESOURCES

This month I’m sharing Sci-fi RPG Assets Pack, which includes all the assets I created for this lesson.

My top patrons can also download Sci-fi RPG Source Files. This includes Tutorial 107 source file(Photoshop). And Sci-fi Dungeon source file (Pyxel Edit), which has the tile set and 6-bit palette preloaded.

Download the 6-bit RGB palette from lospec.com

Get caught up on all my downloads

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

-By Raymond Schlitter

Pixelblog - 38 - Metroid Study / May 30, 2022 by Raymond Schlitter

Intro

Roll into the alien underground with a familiar orange suited bounty hunter. In this 8-bit inspired study, I present some fresh riffs off the 1986 NES original, Metroid. Featuring non-linear gameplay, and a memorable lead character, this genre defining game still informs the design of explorative platforming games today. Hence the term ‘Metroidvania.’ As for the pixel art graphics, the use of a dark minimalistic aesthetic effectively captures a moody alien atmosphere. While I appreciate the sense of isolation, the sparse visuals are a bit lacking, even by 8-bit standards. Furthermore, I was inspired to rework elements from this classic cart, while challenging myself to maintain 8-bit restrictions. Go on this 8-bit plunge with me, as I delve into character animation, enemy design, and tiled environments.

Bounty Hunter

Nintendo struck gold when they decided to make the person behind the suit a woman. This was unexpected and intriguing to the gaming audience in 1986, but ultimately her appeal comes from the cool suit designs over the years.

As cool as the design was for Samus Aran, I feel the flat sprite didn’t do the character justice. But, I can’t fault the creators. Capturing the cybernetic details of the character concept within a 3 color 16x32px sprite is no short order, as I found out.

NES Restrictions
I have attempted to maintain the NES limitations with these designs. I’m not well versed on the technical side of things, but an authentic look can be achieved by the following general rules.
• Use the authentic NES 56 color palette
• 3 colors max per sprite plus one shared color across all sprites (black in my example)
• 3 colors max per tile plus one shared color across all sprites
• 12 colors max plus one shared color for any complete scene
• Design tiles and sprites within 8x8px and 16x16px tile map.
• NES resolution is 256x224 pixels (NTSC) and 256x240 pixels (PAL).

For my bounty hunter sprite I vibe off the Samus concept to create a familiar orange suited design, which could work for a male or female character. Or, an alien, or android for that matter. I really wanted a bright yellow green visor, but I ran out of colors. Indeed, compromises were made for the authentic NES look.

While Metroid mirrors the same frames for left and right directions, I decided to make unique frames where applicable for distinct left and right facing versions. All frames have unique left and right versions except the somersault frames are mirrored. It’s a neat detail to see the gun arm realistically change orientation, but it’s hardly worth the effort to manage the extra frames.

The frames off to the the sides of the guide lines are the jump poses. These frames are used for a straight vertical jump, and when you shoot during a jump. The somersault frames are used when jumping left and right. If you shoot while somersaulting it changes to the appropriate jump/shoot frame, if after reaching the apex of the jump. Before reaching the apex, shots spawn from the somersaulting form. Unfortunately, I couldn’t practically illustrate the jump mechanics with the space and frames allotted in this tutorial format. I recommend you to pick up a rom of Metroid and study the implementation for yourself.

The run animation consists of only 3 frames. I wouldn’t have thought this sequence of poses could result in a serviceable run animation, however, when played at an appropriately quick speed, the illusion of a complete run cycle is surprisingly convincing. I’m always surprised by how effective these minimal run cycles are. When working with so few frames it’s a matter of capturing the best key poses, and a helluva lot of trial and error to find the right animation combo, and playback speed.

The animation appears simple, but there’s much nuance in the position of the sprite and placement of each pixel when details and frames are sparse. It’s important to find an anchor point in the character’s center of gravity that has little to no movement from frame to frame. In this case, I made sure the but cheek stays in the same column of pixels in each frame. You really have to go through the motions and create your own sprite to understand the quirks of pixel animation.

Alien Beasts

Taking place on an alien planet, the enemy designs of Metroid are obviously not of this world. Displaying bright colors, armored bodies, and spiky forms, their expression of aggression is universal.

Here are a few enemy designs inspired by some of the first baddies you will encounter in Metroid. I respectively refer to them as diver, crawler, and charger. The diver and crawler are obvious recreations of familiar foes, while the charger is my original concept, which I imagine would blend right in with the cast.

Enemies should be designed around the mobility and capabilities of the player. In Metroid, your character has a high floaty jump and the ability to shoot in four directions. Therefore, threat comes from all directions with many flying and wall climbing enemies in combination with common ground walkers.

When enemies take damage the colors of the enemy sprite swap to the colors of your character. This is a clever trick that requires no extra colors or frames to show a flash effect that indicates the enemy has taken damage. It works all the better since the predominant red and orange colors signify pain.

When the enemy is destroyed a simple singe frame 32x32px explosion is show for a few frames. This also borrows the palette from the main character sprite.

Alien Underground

Are you prepared to enter the alien underground?

For this tile set I analyzed the first area in Metroid to create a similar combination of variants, but with a reimagined look. Leaning into the alien aesthetic, I went for a more organic vascular texture in combination with ornate synthetic designs. You can almost feel the damp alien atmosphere.

I find the static black backgrounds in the original game quickly grow tiresome, so I created subtle textured variants that can be used anywhere in the background to create interest. The only catch is making sure the tiles with collision are clearly defined from the background. But then again, it’s kind of a neat explorative element to have to investigate what parts of the environment are interactive.

There are only 4 colors plus black used across the whole set, while any individual tile maintains the 4 color max limitation. It’s amazing how detailed and rich a scene can be with so few colors. Makes me think many NES games could have looked even better than they did without the need for more graphical power, simply better handling of the pixel art. But to be fair, the games at the time were designed for CRT displays, which softened cluster work that may appear harsh in high definition. Nevertheless, the aesthetics of NES games still looks great, and always will.

Final Thoughts

I vaguely remember Metroid back in the day, as I doubt the kid me had the patience to ever get very far into it. With vastly improved iterations, like Super Metroid in 1994, it’s a bit hard to go back to the original with its archaic password system. However, many of the elements of explorative platformers that you know and love today can be found in this brilliant classic. Unfortunately, the visuals of Metroid have aged worse than other classics, such as Castlevania. If any title was begging for a rework it was this one. It was my goal to make more pleasing color combinations, and bring in more informative details to otherwise flat ambiguous designs. I hope my revisions are not blasphemous to the fans, and furthermore, showcase how graphics can be improved through art direction, while maintaining the technical limitations.

Resources

This month I’m sharing Metroid Study Assets Pack, which includes all the assets presented in this lesson.

My top patrons can also download Metroid Study Source Files. This includes Tutorial 104 source file(Photoshop). And Alien Underground source file (Pyxel Edit), which has the tile set and NES palette preloaded.

Download the official NES palette from lospec.com

Get caught up on all my downloads

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

-By Raymond Schlitter

Pixelblog - 37 - Castlevania Study / March 29, 2022 by Raymond Schlitter

Intro

Continuing my exploration of 8-bit aesthetics, I present a new vision of one of the most iconic franchises on NES. Released in North America way back in 1987, Castlevania immersed me in a way that shouldn’t have been possible with such limited hardware. The castle setting, epic music, and unforgettable character designs all came together to form a unique gothic aesthetic that perfectly suited the whip slashing gameplay. Today, these games look just as good as they did back then, if even better. Castlevania is a shining example of how less can be more, how technical limitations can result in genius. Analysis of art made within the strict restrictions of old hardware provides highly valuable insight to the pixel artist. For this study, I focused mainly on Castlevania 3, which I think has the most refined graphic presentation of the 8-bit trilogy. To keep the aesthetic in line with the originals, I used the official NES palette for all graphics in this lesson, but I don’t strictly adhere to the true technical limitations. To round out the vision, I cover player sprites, enemies sprites, and tiled environments.

Vampire Hunter

Pardon the nudity, but the goal here is to provide a base model one can build their own design upon. For the creation process I referenced the actual Trevor Belmont sprite from Castlevania 3, reworked all the frames, and included some extras. After stripping down Trevor, I found the base anatomy was done quite well, but I was still able to make improvements to the positioning, and bring out my own expression within the clusters and colors.

As for my own extras, I added the ability to move while crouching, and I gave the attack a bit of flair. Instead of just one frame with the whip extended, I broke it into a smear and overshoot, respectively seen in the 3rd and 4th frames of the attack.

The crouch frame is reused for the jump animation. If you attack while jumping it uses the regular attack frames. I played around with making unique jump frames, but the repurposed crouch frame still looked better. No need to add extra frames.

Take note of how the actions fit precisely in a 16x16px tile map. The jump height is 2 tiles. When you get hit you get knocked back 2 tiles. Stair movement goes in half tile whole step increments, as it would look really odd if you could stop the player in mid step.

To make your own kick ass vampire hunter, try recreating these frames with stylings and gear of your choice. Technically, moving sprites on the NES are limited to 3 colors, plus one shared color across all sprites. Admittedly, I’m adding some extra colors here and there to add graphical interest, while cautiously maintaining a seemingly authentic retro aesthetic.

Monsters

One of the most memorable aspects of Castlevania is the diverse cast of enemy characters. All manner of undead, possessed, and blood sucking creatures make an appearance in the harrowing halls of Dracula’s castle. I took a stab at creating some fiends that would be right at home in Transylvania. When creating these sprites I made sure to use multiple references, not just the relevant game sprites.

BLOOD BAT
Of course, we have the necessary bat enemy for a vampire story. I referenced ultra slow motion video of bats in flight, and used this knowledge to revamp the standard bat enemy from the games. This also lead me to add one extra mid-wing frame for more natural flight motion, whereas the original reuses one generic mid-wing position.

POSSESSED PINCHER
The Possessed Pincher was inspired by the cat enemies in the first level of Castlevania 1. I wanted to try something a little different, and I think dobermans can look viscous. However, by using photo references, my initial design looked like a normal dog. Possessed eyes and evil colors tell you he is no longer man’s best friend.

FISHMAN
The Fishman always makes an appearance somewhere in the bowels of the castle. In order to understand all the details they were trying to depict in the 8-bit sprites, I took a look at several iterations of this creature, including concept art, and modern iterations. Considering all these designs, I made my own version based on the Castelvania 1 original. I really wanted to bring out his fishiness, so I made him green and emphasized the gills and fins.

FUNNY BONES
Lastly, I figured I must include a skeleton to round out the examples, as so many iterations have appeared throughout the series. I referenced photos of skeleton models alongside various game sprites to snap up this old clacker. At first, I was only going to make a simple two frame walk, but after iterating several poses I noticed some stances seemed to be in a taunting position ripe for laughter.

Tiles

Arguably the most significant and memorable character in the entire Castlevania series is the castle setting. Including ivy covered courtyards, dank dungeons, and steam filled clock towers; every scene in the game oozes atmosphere and personality. Albeit, somewhat flat in presentation, even the 8-bit versions encapsulated all this gothic glory with simple variations of tiles. Well, it all seems simple in the end, but designing with lo spec restrictions requires a surprising amount of thought, as every pixel and color choice can effect dramatic change.

KEY POINTS

The following are some general tips for making retro inspired sprites based on actual games.

Bend the rules - Unless you’re an ardent purist, don’t worry so much about adhering exactly to the technical limitations of the past. However, if you intend to preserve the ‘look’ of your retro inspiration don’t push it too far. I’m just talking about a few extra frames or colors here and there.

Use multiple references - Use multiple references, including real world examples when applicable. If your only reference is a sprite from another game, it’s hard to imagine your own iterations.

Break down the sprite into sections - It’s good to quickly capture the overall rough form of a sprite, but as for the details, I find it helpful to focus on one section at a time. Especially larger humanoid sprites can feel overwhelming at first, but once you have a nice head, the torso comes easier, and so on.

Don’t trace over sprites - Observe and recreate in your vision on a blank canvas, otherwise it will just come out pretty much the same as the inspiration. If you’re completely lost and don’t know where to start, tracing can still be a good learning practice, but I would not recommend it if you want any originality.

Consider the display - Console games used to be designed to be displayed on CRT monitors, which gave the pixels a softer look. Due to this, some pixel clusters found in old sprites may appear harsh in hi definition. Don’t be afraid to clean things up and make what looks right to your eye on a sharp display.

Final Thoughts

The one thing I kept thinking as I made this lesson is how it looks much easier than it actually is. I first thought this 8-bit exploration would be a fun diversion from my typical style, but it’s actually quite advanced. Finding the perfect combination of colors and clustering with such limited options, it’s like solving a puzzle. After close inspection, I’m even more impressed with the quality of Castlevania’s design. In some cases, I found it difficult to make meaningful changes that feel like they actually improve upon the original. Some of the questionable cluster work found in originals was likely due to the fact these games where designed to be displayed on a CRT.

It’s a bit off brand for me to do an overt clone of a specific game, however, I’ve found it very enjoyable and insightful to study. Moving forward, I’m definitely interested in analyzing more masterworks from the past. What games would you like to see my take on?

RESOURCES

This month I’m sharing, Castlevania Study Assets Pack, which includes all the assets presented in this lesson.

My top patrons can also download the Castlevania Study Source Files. This includes Tutorial 101 source file(Photoshop). And Castle Town source file (Pyxel Edit), which has the tile set and NES palette preloaded.

Download the official NES palette from lospec.com

Get caught up on all my downloads

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

-By Raymond Schlitter

Pixelblog - 36 - 8-bit Adventure / January 28, 2022 by Raymond Schlitter

intro

Once upon a time, bits where all the fuss when measuring the prowess of your favorite console. Most didn’t understand how it worked, we just knew more was better, as we happily moved on from 8-bit computers to greener blast processed pastures. However, I soon realized the mighty bit doesn’t equate to better games without good art. Turns out, the most beautiful expression comes in limited forms, namely pixel art. Moreover, as computer processing continues to advance, the term ‘8-bit’ remains relevant in modern discussion. In today’s context, ‘8-bit’ is generally used to refer to low-res pixel art and chiptune music that captures the aesthetic of the 8-bit era. A time which was dominated and defined by the NES. Carrying this modern sense of the term, I present a top-down world inspired by the technical restrictions of the NES, but not 100% restricted to. Including characters, animations, and environment design, the following lessons are the making for a great 8-bit adventure!

All the colors used in this feature are derived from my original palette, Bright Future.

Player Sprites

A natural place to start our adventure is with the hero, or at least one of them.

To keep a consistent retro look I used the general size of 16x16px, and limited the palette to 3 colors in addition to the outline per character. I chose this size to mesh well with environments made out of 16x16px tiles, which was very common for games of the era. I referenced a handful of games including Zelda and Pokemon, but drew the most influence from Final Fantasy 1 for the design. If you like this sprite style, I definitely recommend you study the FF1 sprites.

When it comes to the animation, I limited the frames as much as possible to capture a retro look, while remaining effective and satisfying. Surprisingly, you only need two frames to capture most actions, and it looks pretty darn good if you get the poses just right.

The timing of frames and delay between strikes is up to how you want the gameplay to flow. In this example, strike, follow through, and overshoot frames play at 0.08 seconds, with a 0.32 second delay on the Idle frame before it’s possible to attack again.

The idle and walk/run animations all use the same 2 frames, but with different timing. While the idle animation of marching in place can seem a bit silly, it adds life to stationary characters in a non distracting way, and the economy of the design is truly clever.

Enemy Sprites

If you wanna collect those sweet experience points you gotta have some baddies to slay!

SLIME
Ever since the first Dragon Quest, slimes have become a trope in a many RPG and adventure games. However, I get the sense the prominence of slime enemies has little to do with a love for sticky blobs, and is much more about their objective simplicity. Anyone can draw a blob, and the damn thing will be charming. From the top down projection, you only need the down facing orientation and movement works in all directions! In order to bring a little more interest and get even more milage from your slime designs, experiment with different colors and behaviors. Color swapping the same sprite is an easy trick to get more enemy variations with little resources.

SAND ROLY
Familiar designs like slimes are a fun place to start, but you should focus more on original designs that mesh with theme. As an example, I have created the sand roly. The first thing I consider when designing a creature is that it fits the environment, which in this case is a sandy beach. Furthermore, one need only look at the wonders of nature to find inspiration for creature design. Monster design is often a matter of exaggerating and combining real life creatures into new fantastic life. In the case of sand roly, the anatomy is inspired by mole crabs, and the balling trick comes from roly polys. The color is mostly a cosmetic choice that contrasts nicely on the sand background, but it also seemed appropriate it be seared pink out in the sun. Next time you visit the beach, beware of sand rolies!

EFFECTS
As for the special effects, a little goes a long way. In my example, there are two hit frames that momentarily flash when the enemy receives damage. First, I create the damage pose with the bugged out eyes, flailing limbs, etc. Then, I convert the colors to red hues by adjusting the channel mixer and color balance settings (Photoshop). After that, I make an inverse color version. By flashing these two frames it ensures great readability, and gives a strong impression of pain.

The X shaped strike frames appear over the point of collision with an empty frame between them for a flash effect, indicating a successful strike.

The 3 frame circular explosion is what I call vaporize effects, which can be used to show the destruction of enemies. Simply flash away the enemy into oblivion while the vaporize effect plays over it. To sufficiently cover the enemy, spread out the placement and repeat the effects for longer, larger explosions.

The large two frame explosion is intended to harm the player if too close. Alternate frames at high speed for desired duration of effect. Simple as sin, but it works so long as the animation doesn’t hang on screen too long.

Seaside Environment

Bright green grass and soft sand beaches surrounded by calm blue water… What better place to grind away on the easy fodder?

I approached the design of this environment as if it’s the first stage, or starting area of the game. Generally, games start in a welcoming environment with very passive enemies. This creates a relaxing atmosphere where you can come to grips with the game before venturing to more treacherous terrain. I certainly appreciate this approach, and again want to emphasize the importance of theme. Mesh the enemies and mechanics with the environment, so each area stands out, and the introduction of each new enemy is memorable.

Again, I’m drawing inspiration from 8-bit iterations of Zelda, Pokemon, and Final Fantasy for parts of the tile design. As for tips on making beautiful top down tiles, please review Pixelblog 20 for the fundamentals.

Final Thoughts

With technology today, you can use countless colors, make huge sprites, and include as many frames of animation as you like. While I appreciate the artisanship in hard labor, and the spectacles brought by advancements in computing, the old school graphics just keep looking better and better. So, why overcomplicate things? Seriously though, I would love to be making this game for real. Maybe someday… or, you could make it for me, Haha! Join my Patreon and download all the assets to use for yourself!

RESOURCES

This month I’m sharing, 8-bit Adventure Assets Pack, which includes all the assets presented in this lesson.

My top patrons can also download the 8-bit Adventure Source Files. This includes Tutorial 98 source file(Photoshop). And Seaside Environment source file (Pyxel Edit), which has the tile set and Bright Future palette preloaded.

Download the palette used to create this tutorial, Bright Future.

Get caught up on all my downloads

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

-By Raymond Schlitter

Pixelblog - 35 - Top Down Interiors / December 2, 2021 by Raymond Schlitter

Intro

Pixel art is often described as cozy, and while much of this sentiment comes from gaming nostalgia, I believe there is an inherent quality in the art form that evokes the fuzzies, evidenced by its popularity among all ages. Young people who never had to blow in a cartridge can be enchanted by the warm vibes of pixel art just as easily as the graying retro gamer. Furthermore, the pixel artist should be in tune with this cozy feeling and learn how to exploit it. In this lesson, we step into one of the coziest of pixel subjects, house interiors.

Presented in a 3/4 top down projection, this lesson builds from the materials in Pixelblogs 20, 21, and 22. Please review these lessons for greater context on the top down world presented here, and the basics of making tiles. All the colors used in this series come from the Mondo palette.

No time for breakfast, gotta go adventure!

Interior Tiles

Built of wood and stone, the homes of this small village have a simple rustic quality. However, the proud owners find a slice of heaven in humble, yet comfortable dwellings.

The tiles are 16x16px. I find this to be the most balanced size to work with, providing plenty pixels for detail, but small enough for efficient production. As a conventional tile size throughout the 8 and 16 bit era, 16x16 tiles also produce an authentic retro aesthetic.

Designing visually pleasing tiles can be deceptively difficult. Refer to the Key Points section of PB 20 for the fundamentals. It can feel tedious to design within a tile map, but the utility it provides the game design is well worth the effort. Once you have a functioning tile set made, it’s an absolute blast to design environments. A good variety of boxy shaped rooms can be made with the above wall frame tiles, but you will find some minor limitations.

Continuing with the same interior set, we now introduce stairways and rugs. Often stairways are simplified to a single tile in top down games of this style. This is for the flexibility of level design at the sacrifice of visual accuracy. For my stairs I take a fairly realistic approach, creating stairways in proportion to the character sprites and wall height. While it looks cool, they take up quite a bit of space and are limited in orientation.

The railing tiles will need to go on a separate layer above the stair tiles.

Making the rug was particularly fun. Referencing antique handmade rugs, I freely threw down shapes and colors until a meaningful pattern emerged. Keep it simple, or go crazy with colorful details. Either way, you had better work in a tile friendly app, such as Pyxel Edit, which allows you to see all the tile connections in realtime as you edit. Otherwise, it’s no fun at all.

Furniture

Now that we have a some fine interior spaces, it time to decorate! While these may not appear as tiles, they are designed within a 16x16px tile map, so they mesh with the environment and can efficiently be broken into tiles.

This first set of furnishings is oriented around the dining area, including a table, stool, countertop, and stove.

This furniture set focuses on living room and bedroom items. Not much else to say, as it’s all contained in the visuals. Try repeating my process and see where it takes you.

I feel I could go on and on making little furniture, but that covers most of the common objects needed to make a complete happy home. All we’re missing is a pet.

Final Thoughts

I’m happy to finally return to my top down series, last featured all the way back in PB 22. I was new to tiles then, and I was convinced I sucked at it. But, my experience over the years has made the process much smoother. Keep practicing, folks!

The 16-bit aesthetic this series is inspired by captures a sweet spot for me. Something about these rooms lifts away anxiety, and makes me want to live there forever. I hope you will take the time to make your own interior tiles, and experience the immense satisfaction of designing rooms. Don’t hold back. Let this lesson be a launchpad to creating an entire village.

RESOURCES

Was this article helpful? If you find value in my content please consider becoming a Patron. Among many other rewards, Patrons can access resources to compliment my tutorials. But most importantly, you allow me to continue making new content.

This month I’m sharing Top Down Interiors Assets Pack, which includes all the assets presented in this lesson, both as tiles, and complete objects.
These assets are also available at the Pixel Producer tier on my Patreon, along with dozens of other assets packs.

My top patrons can also download the Top Down Interiors Source FIles. Gain insight from this original psd files, which show how I organize and animate the tutorial. Additionally, I’m including Interior Template, which is a Pyxel Edit file with the tile set and mondo palette preloaded, all ready to start laying out rooms.

Get caught up on all my downloads

If you're not ready to commit to the subscription model of Patreon, make a one-time donation and receive exclusive art and resources. Help continue the content by providing me a living. Thank you!

-By Raymond Schlitter

Pixelblog - 34 - On The Farm / October 28, 2021 by Raymond Schlitter

Intro

Most people fly right by these parts, but we’re gonna take a cozy detour for a stay on the farm. As a country boy myself, the simple scenery of rural life captures an aesthetic precious to me. Far from the amenities of the city, life maintains a connection with nature that people long for in the modern world. It’s no wonder causal daily life themed video games with farming mechanics have become more numerous in recent years. Not surprisingly, pixel art captures the farm world with exceptional charm. In this super casual lesson I present a handful of subjects associated with farming. It’s all in a hard day’s work. Let’s get to it!

Barn

What’s a farm without a barn? You gotta have a place to store farm implement, but more importantly, a shelter for your animal peeps.

3/4 top down projection is a fave of mine. By maintaining clean lines while depicting a sense of depth, it’s especially conducive to architectural forms. Much in line with architectural themed tutorials of the past, you should be right at home with my approach to the barn. I always start by making the roof and the front face of the building with solid flat colors. This quickly captures the entire form and defines the lighting. From there, it’s just a matter of details. My example is modeled after a real barn in my area, which I used reference photos of to inform the details. No matter how simple or abstract the assignment, references are always helpful. After all, visual art begins with observation.

While structurally sound, my barn is considerably weathered, therefore exhibiting a strong textural element. Texture can add a lot to a piece, but it must be applied with care, as subtle edits can make huge changes when working with limited pixels. Texture elements should clearly inform about the materials without adding unnecessary noise. Keep it simple and repeat consistent clusters for the texture to read well. Refer to Pixelblog 2 for more tips on texture.

Tractor

The little engine that could. Every farm needs a tractor for pulling stuff.

Also in 3/4 top down projection, this tractor stylistically and proportionally meshes with the barn. However, it’s too large to store in said barn, it will require a large hangar to keep protected from the elements. Another win for references, I modeled this one after the Ford TW-35. By taking a constructive approach and breaking down the components step by step, you can realize an intricate machine with accuracy. If you can establish these 3 views, you are well on your way to creating a fully animated 8 directional sprite. Just need to solve those dang angles, yet.

Produce

At the end of the day, it’s all about enjoying the fruits of your labor. Sample some fresh produce while you’re on the farm.

Here are your common garden variety of veggies, and fruits if you’re going by the botanical classification. All sprites are within a 32x32px frame, and range from 5 to 9 colors. For most of the sprites I use a tilted style, while the cabbage sits more straight on. The cabbage simply reads better this way, and I think the combination works well here, thanks to the variety of organic shapes across all sprites. However, I would not recommend mixing styles among sprites with consistent geometry.

FINAL THOUGHTS

It’s not the most exciting subject, but there’s something very fundamental and pure about farm life that I find beautiful. Given the popularity of farming in games, I’m hopeful many of you do too. Although, I’m not particularly interested in games focused on farming, I think the backdrop of the farm can serve for a whole new kind of adventure. Games aside, the countryside provides great inspiration for fine art. I left a lot of ideas on the table for this series, and I would be happy to expand upon the theme in future blogs.

Resources

This month I’m sharing Farm Assets Pack 2, which includes all the assets presented in this lesson, including individual animation frames.

My top patrons can also download the Tutorial 91 Source File. Gain insight from this original psd files, which show how I organize and animate the tutorial.

Get caught up on all my downloads