Pixelblog - 49 - Realistic Human Anatomy

intro

The ability to accurately depict humans is a high effort, high value skill. Although we all inhabit a body, and are capable of instantly recognizing people from the most subtle features, accurately conjuring our likeness on a canvas does not come easy. Even amongst skilled artists, very few can naturally depict the human form without extensive practice, and use of references. At least that’s what I tell myself, as someone who perpetually struggles in the department. I find the main issue is consistency. No matter how strong of a foundation I build, it instantly begins to rust and crumble if I don’t keep regular practice. Well, I’m overdue for a polishing again, and the catalogue could definitely use more content on the topic. If you are new to anatomy, you can stay right here, as we are going to build our way up from basic proportions, before attempting a more expressive pose. Class starts now!

Front View

First, we start with an analysis of human proportions from a frontal view. Going for realism, I’m using the conventional 8 head model, which is based on the average size of adult human bodies. Note, that both male and female use the same 8 head model, however, the head unit is just slightly smaller for the female version, resulting in an overall slightly shorter figure.

Back in Pixelblog 17, I introduced the 6 head model, which results in relatively stocky, doll-like proportions. Although not completely realistic, this shortened model works well to capture all pertinent details within a small sprite.

In order to depict all the basic details of the human form within the 8 head model, the sprites need to be fairly large. My 8 head male is 29x96px, vs 29x78px for the 6 head model. In both examples, sizing down much at all would require more abstraction, and omission of facial features. I suppose that’s why you rarely see realistically proportioned characters in 8-bit games, as devs more often opted for expressive chibi style characters that are all eyes and head, with itty bitty legs. Moreover, the super deformed characters also economize animation. However, smaller is not always easier. With few pixels to work with, a keen sense of abstraction is needed to capture the essence of a thing with clarity. On the other hand, a large canvas permits more details, but requires more labor to flesh out. I lean towards the smaller, abstract side of things, as that’s where the magic of pixel art occurs.

Side View

I find the side view a bit easier than the front, as there is only one arm and leg to deal with. In both versions, I start with the head and work my way down the chart with the aid of references. Of course, I use many references with much of my art, especially anatomy. Sometimes I start with a simple skeletal wireframe to capture the overall form and gesture of the figure, which you can see in practice in Pixelblog 17. However, after developing more competence with the subject I feel comfortable jumping right into solid forms at this scale. If the sprites where any larger, I think I might want to wireframe first.

Before developing details, the goal is to perfect the proportions with a sort of crash test dummy that has color coded body parts. Take it one segment at a time, one body part at time, while making many checks in relation to other body parts. Visualize imaginary lines running through the various parts, and you will notice many consistent spacial relationships. For example, elbows and belly button meeting on same level, wrists meet with the groin.

Once the dummy is complete, you can have fun playing with fashion and hairstyles, while converting the dummy to consistent flesh tones. I stuck with fairly tight, form fitting outfits to not overshadow the fundamental anatomy. Also, loose fitting fabrics, and folding dynamics present a whole new lesson for another blog. For now, you can begin to glean the tendencies of the fabric by observing and attempting to recreate these characters.

Action Pose

Now that we have our 8 head model established from multiple viewpoints, it’s time try out a more expressive pose. Easier said than done. One must consider how perspective, posture, and clothing items can distort proportions. Even with the long build up of establishing proportions, I feel blind without tons of references. Use references! No shame in straight up copying until you develop a more natural sense for things. It’s a staple of my blog to provide valuable pixel art specific references. I’m dazzled to see people grasp the fundamentals of my tutorials while creating a unique interpretation, however, much can be gained from 1 to 1 recreation.

Final Thoughts

This was a good exercise to reestablish anatomy skills with a realistic model, but I have much more ambitious goals. Truth is, I wanted to create tutorials that would be helpful for creating assets for a beat em’ up, but I found it overwhelming to jump right into animating large realistic sprites without laying some ground work first. So, now that we’ve established a good feel for the 8 head model, and have some basic characters designs, I think we’re prime to start tackling animations in a follow up feature. Eventually, we’ll have all the elements of a full blown beat em’ up on our hands. Better stay loose, and keep up the practice, or the rust will set in again.

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 directly on my homepage, and receive exclusive art and resources.

This month I’m sharing Realistic Human Anatomy Assets Pack, which includes all the assets featured in the tutorials of this lesson.

My top patrons can also download Realistic Anatomy Source Files. This includes Tutorials 137 - 139 psd 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 - 48 - Military Shmup

Intro

Throughout all of history, man has inevitably engaged in war, over and over again. With little signs the plot will ever change, we find ways to cope with our intrinsic darkness. One silver lining I can find is the inventiveness bore from conflict. While evil in purpose, the drive of battle has resulted in many technological marvels. Like most boys, I found great appeal in machines of warfare. Guns, tanks, jets, and the glory of victory, how could I resist? As an adult, I acknowledge the grim reality behind the tools of war, but I can still admire the ingenuity and design aspects involved. Thankfully, through the magic of video games, we can celebrate weapons of war guilt free. Furthermore, war themed games are disturbingly popular, and come in many genres. When it comes to the aesthetics and logistics of pixel art, my mind goes to the shmup as a natural fit to showcase implements of war in exciting action. However, the following top down assets could just as easily find a home in a strategy, or role playing game. So, strap in for an epic campaign that will provide a plethora of top down military sprites, and a detailed desert city environment.

Fighter Jets

I have fond memories rolling around in the mud and pretending to fight Soviets with plastic guns. It was the cold war era after all. While I would eventually grow out of my days of pretend combat, my interest in the paraphernalia that surrounds it would endure. Particularly, military aircraft and their role in the evolution of aviation perpetually fascinates me. From the fabric covered bi-planes of the early 20th century, to the faster than sound jets of modern day, I find it hard to pick a favorite era.

Ultimately, I decided to focus on 4th gen fighter jets. Popularized through film and video games, this era includes some of the most famous designs. Personally, my love for these birds has mostly been fostered from playing the Ace Combat series over the years. However, we aren’t making a 3D flight sim here.

Sticking with low res, the largest sprite is only 25x36px The angular shapes and sleek lines translate nicely into pixel art with little compromise in accuracy with the irl counterparts. I also considered proportions, and the relative sizes of the sprites are informed by actual specs. All sprites only use 6 to 7 colors. The Thrust animation is only 2 frames playing at 0.05 seconds per frame. The drop shadows are made by copying the sprite, reducing scale by 50% and making it solid color. Surprisingly, even at this reduced size each ship has a distinguished silhouette.

In terms of shmup design, these jets are intended to be the player character and are oriented upwards for the vertical scrolling gameplay. You could flip them so they are pointing downward and use them as enemy units, however, the subtly skewed 3/4 top down projection will look odd when reflected. Modify as needed. Which bird you taking up?

Tanks and Helicopters

Choose your death box.

Formidable in their own right, but mere cannon fodder in the face of a fighter jet, these tanks and choppers are intended to be enemy sprites coming down the screen. Again, you could reflect them to point upward, but they will need to be modified to look right.

The largest helicopter sprite is 29x31px including blades. Each sprite only contains 5 to 6 colors. The blade animation contains 4 frames playing at 0.05 seconds per frame. After making the first blade, duplicate, and rotate in 22.5 degree increments for rough versions of the next 3 frames, then polish. Alternatively, you could make the base frame’s contour a perfect symmetrical circle, and rotate duplicates before squishing y plane down a bit on all frames to suit the 3/4 projection. This economic, yet lively motion allows choppers to fly around in all directions with convincing grace.

If I were making a game, I would take the tanks a step further and make the turret a separate layer with at least 8 directions to swivel. Also, it seems a trope to be able to blow off the turret first, before destroying the disabled tank husk.

Desert City

Top down sand dunes make a pleasing texture, and the vastness of the desert captures an appropriately epic stage for the action.

I’ve constructed a desert city environment using 16x16px tiles and only 13 colors. By layering the building tiles, countless formations of vary height and density can be made, Note, the dark bars on the bottom left are drop shadows to place around the buildings. I was able to construct the example environment with only 3 layers.
1. Buildings_2
2. Buildings_1
3. Sand

If you are new to tiles, start here Pixelblog 20

Final Thoughts

We’ve got ourselves a handful of sprites and a basic environment. It’s a good start to many game ideas, but if I were to make the shmup in my head there’s so much to expand on. I already mentioned how I would like to make the tank turrets swivel. The tanks could also have different directions so they can turn and move in all directions. Another essential component is adding roll animation to the jets so they actually tilt when you move left and right across the screen. And we haven’t even got to projectiles and explosion effects. With that said, we may have to pull for a sequel. In the meantime, please check out Pixelblog 31-32 for more on shmup design, and universal assets that could easily be adapted into the military theme.

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 Military Shmup Assets Pack, which includes all the assets featured in the tutorials of this lesson.

My top patrons can also download Military Shmup Source Files. This includes Tutorial 134 - 136 psd files, and Desert City Pyxel Edit file with the tileset and palette loaded in.

Get caught up on all my downloads

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

-By Raymond Schlitter

Pixelblog - 47 - Tiny Pixels

Intro

In the beginning, pixel art was a practical choice necessitated by technical limitations. Color count, sprite size, animation frames, and layers were all severely limited, if possible at all. Thus, the aesthetic would be defined by economic characteristics. Nowadays, with relatively unlimited computing power, how could it be that pixel art not only lives on, but thrives? Part of the appeal stems from the economy of production, however, I would argue the limitations create design barriers that can require arduous solutions to overcome. In other words, pixel art is not the easy choice. Therefore, it mostly boils down to an aesthetic choice. Sure, nostalgia plays a role for some, but the perpetual love for pixel art has more to do with its intrinsic properties as a visual medium. At its heart, and what I’ve made core to my philosophy on the medium is- the beauty of pixel art comes from the lack of information. The missing details forces the audience to engage their imagination to fill in the gaps, making the experience more personal, and authentic. It’s the same reason why the movie never lives up to the book. Without engagement, it’s just pixels on a screen, or words on a page, but when the human imagination lights up, perfection!

As one becomes more proficient in pixel art, the tendency is to do too much for the viewer, ever pushing for greater details. Continuous improvement through increasing challenge is vital to any artist’s journey, however, to preserve the interactive magic of pixel art, one must strike a balance between necessary information and implied details. As the level of resolution and detail increases, the agency of the audience decreases. At a certain point, it becomes digital illustration when the pixels become irrelevant, and we are all unmistakably seeing the same image. While I greatly admire digital illustration, it seems a waste to achieve it through a pixel art process. The struggle to keep pixel art looking like pixel art is real.

Once in a while, we all need to get back to basics to restore clarity. To stay true to the medium, I’ve cranked down the res for a fun romp in the blocks. Based on an 8x8px tile map, I present a variety of tiny assets that welcome beginners, and remind the pros the joys of simplicity.

Environment

From here on out, the learning comes through visual exploration, and going through the motions presented in the tutorials. For the last several Pixelblogs I’ve designed my tutorials with minimal text baked in the design. Firstly, the pixel font does not read well in text blocks, but most importantly, I want them to be universal by showing without telling. While here in the blog I supplement the gab to provide greater clarity and insight.

All of my previous tile design content is made with 16x16px tiles. 8x8px tiles always seemed too small for the vision I had in mind, but I never gave it a fair shot. Upon this exercise, I’m surprised at how much can be conveyed in such a small space. I can pretty much translate my 16x16px designs with little compromise. Of course, everything becomes quite chonky, especially if made into a full widescreen mock-up. If I were to create a game in this style I would probably go with a classic 4:3 ratio windowed play area, and build a creative UI around the margins. Perhaps a mock-up is due for a future update.

Similar to some of my previous tile concepts, I’ve implemented a layered approach where drop shadows are applied separately, and several tiles can be combined for variation. In some instances I bake the shadow into the asset where the space within the tile permits. The following is the layer order in the above example.

7. Cliffs 2
6. Shadows 2
5. Cliffs 1
4. Trees & Rocks
3. Shadows 1
2. Grass
1. Dirt

Hero

Again, with character sprites, smaller doesn’t necessarily mean less. While many details must be compromised in contrast to my typical 16x32px sprites, everything is there for basic readability. What’s more, the sense of wonder is peaked by the lack detail. It’s clearly a human figure with shoulder pads and flaming red hair, but who this character really is comes from your imagination. In this sense, I find it more novel and compelling than a hyper realistic 3D model rendered in the most advanced game engine.

Much of the expression comes through in the animation. Furthermore, The efficiency of production permits for greater exploration with relatively little effort. Although it’s easy to make many animation frames, the main drawback is there just isn’t many pixels to show the movement. With the minimum of one pixel of movement per frame, just a few frames encompasses a full stride. Fortunately, it’s all you really need. Shift one or two pixels and boom, a turn of the head, or change of posture.

Enemies

Now for the baddies. Not much to add here in regards to the tiny sprites. For larger characters, both the design and animation can be simplified by breaking it into pieces that can be layered and moved individually. Give it a try!

Final Thoughts

Have you ever felt unsatisfied with the outcome of an artwork, compared to the sketch? Whenever I experience this, it’s usually the fault of overthinking, and overdoing the details. Somewhere, several hours ago I should have put on the brakes, but I just kept massaging the clusters until the magic of the unknown was no more. Whenever I start to veer off the less is more path, of which I believe makes pixel art so endearing, I actually look back at my earlier works to find inspiration. I think, wow, I had the formula figured out and I wasn’t even aware. In my opinion, much of the best art comes from a place of naivety, which intrinsically carries authenticity with it. So how can we maintain that authenticity as our skill grows? Well, it’s a struggle that often gets confounded with comparison. I harken back to the early days, and the simple creations made without any social pressure. To reset my current habits I reconnect to those times with self imposed limitations. For example, keep it tiny.

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 Tiny Pixel Assets Pack, which includes all the assets featured in the tutorials of this lesson.

My top patrons can also download Tiny Pixels Source Files. This includes Tutorial 131 - 133 psd files, and Rocky Prairie Pyxel Edit file with the tileset loaded in.

Get caught up on all my downloads

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

-By Raymond Schlitter

Pixelblog - 46 - Anti-Gravity Racers

intro

Our story starts in 1991. Out of nowhere, my two older brothers come home with the newly released Super Nintendo. When I first saw the box, my excitement dampened nearly to anger. Like any healthy 8 year old boy, I was ready to move on from the the kiddy Mario brand, to the blood and guts offered by Sega. However, I was quickly convinced they made the right decision when I discovered F-Zero, which was also brought home that day, along with U.N. Squadron, and the pack-in Super Mario World. You’d never believe it, but the console came with 2 controllers and a game. And that was expected back then. Of all that goodness, F-Zero made the biggest impression with its striking mode 7 graphics, and astounding music. Ultimately, this day would go down as one of my best gaming memories.

Jump to 1995. My friends’ interests are moving on to sports and girls, but I’m committed to this gaming stuff. I’m saving my own allowance, so I can get the new Sony Playstation on day 1. The launch would not disappoint. Toshinden was fun, but the pack-in demo disc had me in awe of the potential of the console. Of those demos, Wipeout was most impressive. Again, another anti-gravity racer pushing the envelope on the stage of new tech. When I finally got the full game, I was in ag racing heaven. The music sounded too cool to be coming out of a video game. One of the most remarkable aspects of the game was the graphic design created by the British studio Designers Republic. It was so fresh, and immersed me in the world with no need for in game narrative.

Jump to today. Looking at my occupation and interests, I realize how great the influence of these games has been on me. My love for Wipeout runs especially deep, and I have enjoyed the series over the years. Recently obsessed with the psx era titles, my inspiration has been renewed. As much as I’d love to make an ag racing game, pixel art doesn’t lend itself well to the genre. But that can’t stop me from making a pure art expression for my love of ag racing. Take a lap with me. By the end of the course you’ll have all the tools to create your own ag racing scene with parallax animation.

Hovercrafts

First things first, show me the hovercrafts. Not veering too far from my points of inspiration, these crafts may appear vaguely familiar. It’s fun to think about the manufacturer’s philosophy, performance aspects, and how they might inform the design. Keeping things basic, Delta is the all-rounder. Omni has good acceleration and handling but low top speed, while Mega is the inverse. Well, that’s how I imagine it, but love to see someone come up with more extreme designs.

I break down the main components of the craft in outline form. This can help simplify the design, and get something going fast without worrying about color palette. However, I typically have a palette in mind and jump straight to solid forms, as I find the outlines can complicate the coloring process. I feel I’m in the minority on this, so don’t let me dissuade you from outline sketching if it works for you.

For size reference of each craft, not including thrust trail.
Delta 46x25px
Omni 33x24px
Mega 59x21px

Marble Architecture

Equally important to the hovercrafts, any good ag racing fiction should be rich in world building, largely established by the race-side scenery. Some circuits feature outlandish sci-fi backdrops, while others represent a more believable vision of the future. Much like old school Wipeout, I tend to favor the latter vision with grounded elements that show a world not so distant from our own history. Furthermore, I went with the timeless aesthetic of Greek/Roman marble architecture. Combined with subtle hints of advanced technology, the style continues the spirit of olympic level competition into the future. I suppose you call this aesthetic marble punk. I love the atmosphere of this style and will definitely want to develop the vision more.

Note the building and temple are intended to be on the same plane, however the the darkest color and pink highlights are omitted from the tower to appear more distant.

Building 50x52px
Temple 75x72px
Tower 30x64px

Natural Scenery

Well, we need a base environment to place things. Further driving the retro future Roman theme, I stuck with a simple natural landscape with proper italian cypress trees.

Understanding of atmospheric perspective is crucial to selecting the best colors to achieve depth in your landscapes. If you are not familiar with the concept you might want to take a detour to Pixelblog 11, for a jump start on landscape painting.

The approach for both the clouds and tree is the same. Rough shape, refine shape, shade with rough clustering, refine clusters. Admittingly, that last step is somewhat “draw the rest of the fucking owl”, but there’s no way around it. Get in there!

Small cloud 96x26px
Large cloud 144x37px

Parallax layers

With all assets complete we can create a parallax animation using my perfect loop technique detailed in Pixelblog 23. Understanding of that particular method will help make sense of the following breakdown.

View fullsize

In a nutshell, the parallax scrolling effect is created by making objects that appear closer to the viewer move faster, while the distant objects move slower. In order to do this, I make several layers of various length and drag them across the scene within a set number of frames. To make it loop perfectly the movement rate per frame must evenly divide with the canvas dimension along the axis of movement. Furthermore, the possible smooth movement rates are determined by the canvas. Choose dimensions wisely.

Here’s the breakdown of the above scene.
Canvas - 192x96px
Frames - 192 frames played at 0.05 per frame
Layers - 9 layers of different movement speed.

The following layers are listed from nearest/fastest to most distant/slowest.
1. racetrack foreground - 32 (pixels moved per frame)
2. racetrack - 24
3. Trees - 16
4. ground + buildings - 6
5. highway - 4
6. ground + buildings - 3
7. ground - 2
8. clouds - 1
9. clouds - 0.5 (moves 1px every 2 frames)

Final Thoughts

You’ve reached the finish line. I hope you enjoyed that as much as I did. While this installment doesn’t introduce any concepts I haven’t touched on before, the amalgamation expands on the possibilities with a showcase of earnest art.

As much as I enjoy designing pixel art in the context of practical game application, nothing is quite as satisfying as making unfettered pure art. But I still can’t help fantasying about the possibility of games. I’m not really into the manager genre, but ag racing would be the best theme to adapt, just for all the rad graphic design potential. No matter, useful assets in here for all types of applications.

While pixel art is often thought of as a medium restricted to low budget video games, it has the power to transcend to the sublime just as well as any respected medium. Nearing a decade of pixel art experience, it’s been exciting to see the evolution of the medium and rise in popularity. Now, more than ever, I’m inspired by what I’m seeing in the pixel art community. I can only hope to contribute to the momentum.

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 Anti-Gravity Racers Assets Pack, which includes all the assets featured in the tutorials of this lesson.

My top patrons can also download Anti-Gravity Racers Source Files. This includes Tutorial 128 - 130, and the parallax animation file. 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 - 45 - Bricks, Walls, Doors, and More

Intro

A title like that might be the opposite of click bait, but for a pixel head like me, it sounds like a party. While some brick and stone assets have appeared in past lessons, they lack in comparison to my explorations with natural textures. After my umpteenth iteration of grass tiles, the prospect of focusing an entire lesson around brickwork actually sounded refreshing. Spoiler: I had fun! What started as simple patterns quickly became so much more in another display of the magical efficiency of pixel art. Follow me down the pixeled brick road, on a journey that promises to yield great fruits with minimal toil.

Brick Patterns

Creating with gamedev in mind, I stuck to a consistent 8-bit style with assets designed for a 16x16px tilemap. Also, the designs were created to be utilized in my familiar top down projection, however, many patterns can just as well be used in a side view projection. Working within 16x16px tiles the number of even patterns is fairly limited. Accounting for a 1 pixel stroke, which represents the grout in this case, brick dimensions that can divide into 16px are 15, 7, 3, and 1. Furthermore, the height and width of all bricks must adhere to one of these four dimensions in order to pattern evenly without any irregular sized bricks. This same rule also applies to the patterns tilted 45 degrees. Note, the graphic in the bottom left corner represents all brick sizes utilized. Typically, patterns use a uniform brick size, but they can also combine bricks of different sizes.

The process is as straight forward as real life brick laying. First, put down some grout: establish the pattern with outlines. Next, lay the bricks: color in the bricks. Then you just have to let it set, and age over time: add discoloration and damage to bricks and grout. Color choice and texture details can greatly change the feel of tiles with the same pattern. Simply changing the grout from light to dark makes a dramatic difference.

Walls and Doors

There is no difference between a ground and wall tile in the design itself, but it’s important to consider how they contrast in context to create the illusion of depth. Both brick size and color impact the implied perspective. Furthermore, the tiles that make up the top of the wall are much brighter than the sides. Bricks are typically laid with the broad side down, so when it come to walls, it’s the long narrow side that shows on the exterior. Therefore, the height of the bricks on a side wall tile should typically be shorter than on the top wall tile.

Columns, or some kind of universal corner pieces are an easy way to create corners with minimal assets. It possible to make brick corners in a similar fashion as the walls, but all four corners would require custom variants to represent the proper orientation on the top wall, and to define the edges of the side wall. The payoff hardly seems worth the added complexity, so I went with columns. Another advantage of columns is they can be used apart from walls to give environments more interest.

Speaking of adding interest. It’s always worth the time to make at least one variant of any texture that is used heavily. For example, a cracked, or discolored tile here and there will valiantly fight off visual fatigue. Additionally, drop shadows are a must for the added depth and clarity they provide. By using layers, a simple set of universal shadow tiles can easily be applied across all environments. I usually make my shadows predominantly cast to the left or right of objects, and slightly from the bottom. No matter how tall the object is perceived to be it’s best to keep the shadows fairly short, and no longer than can be contained in a single tile. This helps avoid layering conflicts where long shadows awkwardly overlap other parts of the environment, or make an object look out of place because the lighting doesn’t match when it’s placed over a shadow.

Dungeon Sprites

Now that we have a complete dungeon environment, let’s give it some life with some proper sprites. First, we have a brave pawn. Is he friend or foe? You make the call. Next up, a pesky overgrown rat I’m sure few would be upset to see slain. Four frames gets the job done for a serviceable walk/idle animation. Simply adjust playback speed to vary from idle, walk, and run. The above examples are playing at 0.2s per frame.

Lastly, is a raised fire pit to give our dungeon a little light, and a surprising amount of ambience. Fire is a such a dynamic phenomenon it allows for a broad range of abstract visual interpretations. I generally stick to an S shaped overall flame that whips into smaller S particles. The main flame shape is approached similar to a flag animation, but flowing upwards, tapering. and breaking into particles. Anyway, I feel any written explanation pales in comparison to analyzing and actually doing. Give it a try! The fire in the above example is animated with 6 frames each played at 0.1s, while the flickering highlights play at 0.05s.

FINAL THOUGHTS

Well, I think everything has been laid out and set in stone. I suspected this would be a fun subject, but I didn’t expect a study of simple brick patterns to quickly become a full fledged dungeon environment with several variations. Now I understand why so many classic pixel art games use a lot of brick. You only need a handful of tiles to make a whole level. What I’ve presented here lays the foundation for many plausible game concepts. A procedural bump combat RPG? An action based loot driven dungeon crawler? Hopefully, I’ve inspired and given some seeds to grow your next great idea from. Like with all art, doing is so much more powerful than being told. Try as I might, some insights just can’t come through words. Best I can do is show you pretty pictures and motivate you to go for it. Go through the tutorials, and try to create your own designs to discover the joy of brickwork.

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 Brick Dungeon Asset Pack, which includes all the assets featured in the tutorials of this lesson.

My top patrons can also download Brick Dungeon Source Files. This includes Tutorial 125 - 127 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 - 44 - Top Down Trees

Intro

Stoic sentinels of the field plant their roots where they stand to hold vigil between sun and earth for generations. These mighty servants of nature generously provide both shelter and sustenance to all manner of crawling, flying, and slithering forms of life. Beautiful in its breadth of greenery, for both form and goodness of provision. Wether standing among like kind in a sea of green, or a singular keeper of a field, reverence should be held for these wooden guardians. From tiny seed of life to towering giant, all miracles of nature are symbolized in this great gift from god we call tree.

As I write this in late May I’m inspired by the rebirth of green life surrounding me. Celebrating the season of photosynthesis, I present a completely tree themed Pixelblog. Particularly, this lesson focuses on top down designs using a highly efficient modular method I first explored way back in Pixelblog 2. In this update I refine and expand on the technique with a variety of leaf styles, and the introduction of the conifer tree.

Deciduous Tree

It all starts with a bundle o’ leaves.

The goal here is to create a single textural unit that comprises all the foliage. Seems easy enough, but great care should be taken with the design of this bundle of leaves. Leaf shapes should be varied but consistent in form. The best way for me to stay consistent is to base the leaves around a basic geometric shape. In the above example, the base form is a trapezoid, specifically a rhombus. Subtle modifications give a touch of waviness for a more natural feel.

The repetition of similar forms is key to maximize the clarity of the texture, while even balance among the distribution of shapes helps hide the pattern that may result from repeating the bundle. That is to say, any uniquely shaped, or sized clusters will draw the eye, making the repetition of the bundles more apparent. Clusters consistent in shape, size and spacial distribution are key to achieving a pleasing overall foliage texture when the bundles are combined. Also, avoid making the bundle itself an awkward shape. Even ball shapes work great for me.

I start by making one bundle of leaves with medium color values. Construction of the bundle can be done with a variety of leaf shapes on separate layers. This allows flexibility to move things around and reorder layers until satisfied. Once I’m happy with the design, I make one darker variant and one lighter variant by shifting all hues up or down a notch on a shared color ramp. With these 3 color variants, I can layer the bundles in a natural fashion according to an implied light source, resulting in a mass of foliage with convincing 3D shape and depth. Take care of unsightly clusters and stray pixels as a result from overlapping the bundles. Placement and layer order of the bundles requires a fair amount of experimentation to find the perfect arrangement with minimal noise. Ultimately, the core bundle is fundamental to the appearance of the final tree. If you are unable to find a pleasing arrangement, it’s likely an issue with the design of the bundle. If the bundles are well designed it should be possible to create a perfect mass of foliage with no extra touch ups needed.

After that, the final step is adding the trunk and a drop shadow. The trunk is pretty straight forward, but if you have trouble visualizing it, start with a basic cylinder and add striping for the bark. The striping should be widest in the center and narrow towards the sides of the trunk. Break up the lines here and there, add a knot or an errant root for organic details. Size and orientation of the drop shadow is determined by the light source. It’s most practical for game design to center the shadow directly under the tree, so that it doesn’t run into other assets, but I like to cast it off to one side for a more dynamic look. Any issues this causes can easily be addressed with layer ordering.

Leaf Styles

Now, let’s take the principles of the modular method and see how it holds up with different leaf styles.

The first example above utilizes a small 2x2px square as its base geometric unit. I allow the squares to touch in places but avoid overlapping, so that the square unit prevails even when new clusters are formed. Although there is little variation from this base square, the small size and simplicity of the shape prevents the texture from feeling tiresome. This texture works great to represent any vegetation with small leaves, or can appear as flowers determining on color.

The middle example is a more pure version using trapezoids like in Tutorial 123, however subtle wavy modifications are not applied here, resulting in a sharper, geometric texture. The sharp shapes clearly describe the leaf orientation and should be positioned in a natural manner, so they are pointing upwards at the top of the bundle and rotate downward towards the bottom of the bundle.

The last example above represents round shaped leaves by using circles as the base geometric unit. Orientation is slightly less critical here than with the trapezoid leafs. However, it’s a bit tricky to preserve nice circle shapes and still keep the bundle looking properly spherical. Coloring is critical to bring out the depth in all cases, but especially so when orientation is not strongly suggested from the clusters alone.

As for the coloring, I approach it in the same way I would shade a circle to look like a sphere. In all above examples, I start with making a crescent shaped selection along the bottom left of the bundle and use non contiguous paint fills one shade darker on each color. Then I make a smaller circle shaped selection on the upper right side of the bundle and fill with lighter colors. After these color fills some cleanup and hand placed highlights may be necessary to better define the leaves and reduce noise. 4 or 5 colors per bundle is plenty.

Conifer Tree

Now things are going to get a bit more prickly.

Technically, I can also call this a modular method, but it differs greatly from previous examples in that each module is unique and has specific placement. Furthermore, I cannot tout this as a shorthand for creating conifer trees, but it’s a great way to break down the subject if you have trouble visualizing the entire tree in a single layer from scratch. Personally, I’m not the best natural drawer, and it’s often easiest for me to understand a subject by breaking it down in a way that allows me to construct the image using layers. While somewhat tedious in execution, the realization of each visible branch ensures a convincing result.

Start by making a simple stick tree guide, then start making branches from top to bottom, as parts of the lower branches will be overlapped by higher branches. In my actual process of making this I started with the low branches and many of my details were covered up in the end. Work smarter not harder.

Orientation of the branches is critical to achieving a naturally shaped tree. First, make all the branches with the one fill color, and one outline color. The branches around the center are unique, but all the side branches can be reflected to fill out the opposite side at this point before shading. Once all the simple flat branches are placed, the shading can be rendered according to desired light source. Start the shading process by defining light, medium, and dark branches. The final shading details are a bit more complex than with a leaf bundle, as some branches should cast drop shadows on lower adjacent branches. Ultimately, observation and practice are the best ways to learn, so I’ll just shut up and let you look at the pictures.

More examples of the modular method being utilized in my game project, Beast Planet.

Final Thoughts

Based on that intro, it’s clear I have a passion for trees. Part of it’s DNA, as humans have shared a beneficial relationship with trees from ancient times. However, much of my appreciation comes from growing up in a place where trees are sparse. Needless to say, it was a joy to put this blog together, but it’s not about self indulgence. We all love trees, and they are commonly featured in games and art. Furthermore, I’ve recently been designing top down trees for my game Beast Planet, and I wanted to share the evolution of the modular method, and other insights I’ve gained from practical application. While the fundamental method is much the same, compared to my first exploration in Pixelblog 2, the results looks much better this time around. This proves the importance of core pixel art skills, which I think is mostly about color choice and clustering. I hate to say it, but no matter how accessible I make my tutorials, heightened sensibility in these core skills can only be acquired through consistent practice. Maybe it’s time for a trip back to basics for a future Pixelblog.

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! 

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 with my Patrons Top Down Trees Assets Pack, which includes all the assets featured in the tutorials of this lesson.
Also, available to purchase from my digital shop.

My top patrons can also download Top Down Trees Source Files. This includes Tutorial 122 - 124 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 - 43 - Top Down Tiles Part 2

Intro

We’ve been down this road before, on our way to the green pastures of quaint pixel art worlds. Of course, I’m talking about the joys of tile design. Originally, tiles were used to save vital memory on the wimpy computers of the 20th century. Without such limitations in the modern era, some may question the use of tiles at all. Sure, it’s technically possibly to create massive custom assets, but how feasible is that from a production standpoint? The larger the asset, the more time it takes to make. Also, consider the difficulty of modifying the layout of large images that are already baked together. What’s more, designing with tiles lends itself to that retro aesthetic we love so much about pixel art games. Love it, or hate, there is no denying the economy of using tiles to create environments. While it’s a breeze to layout environments with tiles, the challenge is actually designing a beautiful user friendly tileset. In this lesson, we’ll take on this challenge by incorporating a variety of environmental textures into one cohesive set of top-down tiles.

Grass and Dirt

Coming back down to earth, this is not my first grass and dirt tile lesson. However, in this iteration I present a layered approach with more tile variants than my previous effort in Pixelblog 20. By removing the background from some textures that don’t fill the entire tile space, as seen in the grass and rocky dirt examples, it’s possible to layer certain tiles for different texture combos. This removes the need to have to bake together textures into their own tile variants. I think the compromise of having a few extra layers to manage is worth the trade off.

Step one with any tileset is the base repeating texture, which must loop well on all four sides. After that, all side and corner variants can be made by shaving off portions of the base texture. When creating the base repeating texture tiles, much care should be given to the visual balance. The goal is to create a convincing texture while hiding the tile pattern as much as possible. Even visual balance, and consistency in cluster work are some of the top design keys. Additionally, software effects the degree of difficulty in design. It’s critical to use a program that allows you to see tile connections in real-time as you are working, such as Pyxel Edit, or the tile mode in Aseprite. For more fundamental tile design tips, I recommend reviewing the Key Points in Pixelblog 20.

Rock Wall

I like to start a wall set with the front facing wall texture. As with a ground texture, the goal is to make it loop well on all four sides. Taking it a step further, the wall texture must also link to adjacent angled sides, wall top, and the ground.

Once the front facing texture is established, it’s not a far stretch to reimagine that texture at a 45 degree angle. Portions of the angled texture tile can then be repeated with minor modifications to create the linking bottom tile, and part of the linking wall top tile. Furthermore, the angled texture can be reflected and color swapped to create the other side of the wall. Take note of these easy recycling hacks in the highlights above.

When adding a terrace to a cliff, as in the above layer 4, the front facing angled sections lose the perfect connection with the wall texture it overlaps, Therefore, this overlapped wall texture should be changed to the proper triangle shaped tile that is designed to meet with the ground, on layer 3.

Drop shadows add essential depth, but they must be conservative in design to limit conflict with sprites and other tiles. Moreover, it’s best to limit them to one or two wall faces, minding light source, and they should not exceed a tile in length. No matter how tall the rock wall all shadows are the same length. While this is unrealistic, the effect is convincing enough to only be noticed if one really analyzes the scene. The impact of the shadows is apparent when you see an environment with, and without them. Definitely worth the effort.

Sand and Water

Finally, some environment features outside of the common dirt, grass, and rock varieties. I promise more unique textures in upcoming features, but I felt a refresh from the basics was in order. As for the sand texture, I like to use long angled calligraphic ‘S’ shaped clusters to create a pleasing wavy pattern. To keep things from looking too artificial, add a bit of irregularity to break up the wave shapes. If too many wiggly lines connect it starts to look like ramen noodles.

On the other hand, the water is made with wavy interconnected blob shapes that are formed by single pixel wide lines. I like to start by making one blob then draw branching lines from it that eventually connect and form a network of blobs. From here It’s good to break up the lines in places to keep a flowing motion through the pattern. Lastly, add a few highlights for some sparkle, and shadows for depth. For shadow placement, make a crude drop shadow a couple pixels down from the bright lines.

To create the water animation, make another water texture tile in the same method but with a different pattern. You can then transition between these 2 frames to create a simple, yet strangely pleasing water animation. Some texture pairings work better than others. Try rotating, and reflecting the textures to see what combos best flow together.

One animation style is a hard cut back and forth from water A to water B. This may seem abrupt, but it works if the game has an overall retro aesthetic, as seen in Pixelblog 36. However, in this iteration, I add in a frame where the tile layers blend together by reducing opacity of the top water layer to 50%. I got this idea from techniques I’ve seen in old school anime. Almost laughably simple, but when used with a translucent texture it seems suitable. Note, frame timing also strongly influences the expression. Too fast, it feels like noise. Too slow, it becomes choppy. But with just the right speed, only 2 frames can be convincing.

The above scene incorporates all the terrain concepts, and various texture combos into one seamless landscape. Notice how the drop shadows help integrate the rock wall into the ground, allowing a smooth connection on dirt, grass, and sand.

FINAL THOUGHTS

Tile design always starts simple but can quickly become a tedious affair. My first draft of this set was done in little more than a day, but then it took over a week to balance and smooth out all the connections. There’s a lot of trial, and constant error fixing involved when tiles have multiple connections. For example, corner tiles need to connect to side tiles, but should also connect to the other corner tiles. As with any pixel art, It’s also important to consider color and contrast for the sake of readability. To try and avoid snags, it’s smart to start with a crude template of all tiles and connection possibilities visible. Then you can monitor all connections in real time as you add details, so long as it’s done in a tile friendly application as I mentioned earlier. No matter, one is sure stumble along the way, and make beautiful discoveries just as well. I’m sure there are still imperfections in this set, and I’m aware of more orientation variants, but I try to maintain a minimalist philosophy by avoiding rare usage cases, and squeezing as much function out of a single tile as possible.

My love for creating top down worlds is apparent with several Pixelblogs on the subject now, and the intention of doing more in the future. As I mentioned earlier, I strive to bring you more unique environment studies, such as snow, ice, lava, slime, and the list goes on. Tell me, what’s in demand?

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.

Purchase Top Down Nature Assets Pack. Have fun using these in your pixel art studies or commercial game dev projects.

My top patrons can also download Top Down Tiles Part 2 Source Files. This includes Tutorial 119 - 121 Photoshop work files, and Top Down Tiles Part 2 Pyxel Edit file.

Get caught up on all my downloads

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

-By Raymond Schlitter

Pixelblog - 42 - Cyberpunk Pixel Art

Intro

Coming into prominence in the 1980’s, the cyberpunk aesthetic has established itself in the visual arts over decades. With the mere mention of the word ‘cyberpunk’, one is prone to envision neon laden futuristic cities inhabited by robots, humans, and everything in between. Indeed, the aesthetic heavily focuses on city life and the cultural impact of advanced technologies. While these visions may appear optimistic on the neon lit surface, a closer look often reveals the oppression of the people by the societal structure and the very tech they are dependent on, giving rise to the famous catch phrase that best describes the cyberpunk aesthetic, ‘high tech, low life’. Furthermore, cyberpunk explores a broad range of themes, including artificial intelligence, robotics, class struggle, organizational corruption, consumer culture, existentialism, and loneliness. As an aesthetic that tries to predict the future, current expressions of cyberpunk evolve along the lines of real life tech. Frighteningly, dystopian elements from cyberpunk visions of the past have crept into our lives irl. How do you envision the next generation of cyberpunk?

Characters

It’s people and their technology that brings color and richness to an otherwise dark world composed of grimy colors.

Cyberpunk characters represent a great melting pot of body types, skin tones, and cybernetic enhancements. Likewise, their fashions broadly range from baggy, identity concealing garbs, to skin tight numbers that show it all. Think of a future Tokyo, Paris, or some new imaginary city, but on steroids. In a universe that emphasizes our wanton desires and faulty egos, where does the fashion go in combination with the tech? Are people proud to show off their prosthetic body parts? Will skin ever go out of fashion?

To truly realize a character I found it best to start raw and simple, with a frontal nude. Next, you can play with different poses and perfect anatomy before finally clothing them. Working at an average sprite size of 16x32px, I was able to blob out the body proportions by eyeball. Posing takes some trial and error, but perfect placement of the pixels is never far off when working with so few.

For a more technical approach to anatomy, check out Pixelblog 17

Miscellaneous

Cyberpunk signatures that fill the streets of 20XX.

Despite the self induced environmental hazard of the city, we can only continue to live along the standards we’re accustomed to, and always consume more. The constant drone of thousands of AC units heard across the city only adds to the oppressive nature of the musky air. Flying cars add a romance to the city, but in reality they multiply existing problems with traffic, and create a whole new set of problems. The increasing need to build vertically leads to social stratification based on elevation. Down on the bottom it’s dark, filthy, and void of nature. The only color a bottom dweller sees is from a hologram plastered across the facade of stacked living cubicles, trying to sell the pill of the day, because that’s another way to see color. Up top, the aristocrats still pretend everything is fine, basked in luxurious amenities, but even they cannot escape the oppressive air of the city. The untenable nature of it all is felt among the few remaining individuals, yet the soulless collective grows everyday.

Crazy kids these days don’t even know what a tire is, let alone how to change one.

Buildings

At first, we celebrated our modern monuments. But over time, they blotted out the sun and became a prison. Eventually, the past was forgotten, and the people took comfort in their own cancer.

While there is much room for architectural innovation in cyberpunk, I chose to keep the basic structure of my building simple to clearly illustrate the lighting effects. Convincing night lighting, and plastering everything in neon are the main ingredients to capturing the cyberpunk feel. The base cyberpunk environment is usually made up of drab browns and grays while the color infusion comes from lighting, and neon signage. I chose more distinctive colors for my buildings while incorporating atmospheric lighting to get a little realistic grit. The main light source comes from the street level, provided by street lights and the general glow of shops and neon. Note how the surfaces facing downward on the lower portion of the building use warm desaturated hues. This is to pick up some of the ambient color coming from the dull dirty streets. Naturally, the street level light source loses its luminosity with distance, which is represented by vertical color gradation on the sides of the building. Since the street light is warm, while the cool night sky rests above, the color gradates from warm at the bottom, to cooler with elevation.

Save time by designing the building with a modular approach. Like a real building, I design with single story block units that can be duplicated to expand the building to any size. After realizing a whole building with logical layout and proportions, I can then go back and add variation to the overall structure. This results in unique, yet physically believable buildings.

The real fun comes with the neon veneer. Considering holograms, and the advancement of projection/display technology, anything is possible. Also the symbolism of a deactivated hologram exposing nothing but lifeless concrete and glass definitely says cyberpunk. However, there’s something about the weight and physical clutter of neon signage that’s essential to the urban jungle habitat.

Once you’ve mastered the basic buildings, you can use the same approach to lighting with more complex designs.

Final Thoughts

If you’ve stuck around this long you should have a pretty good idea what cyberpunk is all about. If you’re still not sure, go watch Akira, Blade Runner, Ghost in the Shell, and treat yourself to the fantastic illustrations of Syd Mead. These are some of the important founding visual works of the aesthetic, however, taking into mind the social commentary element, the vision of cyberpunk continues to evolve as culture and technology shift in the real world.

The emphasis on gloomy city life has long kept this country boy away from dabbling much in the aesthetic with my pixel art. But after a deeper study I think I’ve misunderstood cyberpunk. It’s not a celebration of nihilism, consumerism, transhumanism, and so on. It’s a commentary that heeds the warning of a grim future based on the technological and sociological implications of today. In this sense, it offers a beautiful playground to explore what it really means to be human. Yes, I must explore this more.

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 Cyberpunk Assets Pack, which includes all the assets I created for this lesson.

My top patrons can also download Cyberpunk Source 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