Pixelblog - 31 - Shmup Design Part 1 / December 17, 2020 by Raymond Schlitter

Intro

Short for ‘shoot em’ up,’ ‘shmup’ seems to be today’s most common term for this classic video game genre. When I was a kid we just called them shooters, but that term is now associated with the first person variety of shooting stuff. So what’s a shmup all about? Gameplay and visual style varies upon design, but generally I think of a shmup as game where you control a small sprite in a conventional 2D space where you must shoot up hordes of enemies while dodging a multitude of attacks. This simple concept provides a welcome entry point for inexperienced game developers, and a wellspring of potential to the creative mind; the perfect playground for kenetic game design.

As I said, shmups come in many flavors, but in this lesson I focus my designs within a consistent style in order to create a feasible well developed game concept. Drawing from my experience developing Thyrian Defenders, I present a vertical scrolling arrangement with a space themed aesthetic. However, the fundamental ideas presented here translates across a wide variety of shmups.

As I have much experience in the shmup department, this will likely span into a multi part series. For this first lesson I’m focusing on sprite design, projectiles, and some basic enemy behaviors.

Support

Before we get started, I’d like to ask for your support. If you think I do a good job and enjoy my content, please consider becoming a patron, or making a donation. Not only does your support help me continue creating content, but it also grants you access to a treasure trove of exclusive materials!

Resolution

If you are intending to create a game with your designs, it’s important to have a resolution/screen size in mind from the outset. Resolution not only effects the aesthetic, but also the gameplay. As far as visuals, the smaller the resolution the blockier the graphics will be, as the pixels will be more noticeable. Nothing wrong with that if you are a pixel lover, what’s more, it takes less time to create small assets. On the other hand, increasing resolution exponentially increases the amount of time it takes to create assets. The pixel art aesthetic is all about reading the intention within the clusters. If the resolution is so high I can’t recognize the pixels, I don’t really see the point of it being pixel art. In regards to the common 16:9 screen ratio, I think the golden range is from 320x180px to 640x360px. For this tutorial, my designs are based on a target screen size of 480x270px.

When it comes to gameplay, the size of the player’s sprite in comparison to the overall screen size is the critical factor. A small character on a large screen will accommodate fast paced gameplay and lots of elements on screen, while a character that fills a large portion of the screen will permit fewer sprites on screen, and less time to anticipate attacks due to the tight space.

Player Ships

With all that considered let’s get started with the player sprite. Depending on the theme of your shmup the player might be a helicopter, a flying robot, or a witch on a broom. I’m keeping things pretty traditional and using space planes, which can operate in space or atmosphere.

As I mentioned before, the size of the player’s sprite in relation to the screen is key. If too large it will make you an easy target, but if too small it will be hard to keep track of, and may lack character. Choose what you think will best accommodate the style of gameplay you have in mind.

To bring alive the feeling of flight it’s essential to show some degree of roll when moving side to side. At minimum, one left and right frame in addition to the center frame can get the job done, but I like to have two frames for each side of increasing degree of roll. This makes the animation appear smoother, and allows two different degrees of roll determined by the speed of lateral movement, which is particularly nice if the game supports analog input.

As in my example, a directional light source coming from the side requires unique frames for each side. This gives a realistic feeling of depth, but all sprites and environments in the game must have the same lighting treatment in order to preserve the illusion.

Try to make a distinct, yet simple ship design. The more complex and detailed it is the harder it will be to animate. I like to put some kind of striping on the wings to give it more character, and it helps emphasize the depth of the roll if animated well. Also, thruster animation is a must!

Enemy Units

Now we need some things to shoot. Enemy units make up a large portion of the game design and should be crafted with care. Every unit should bring something new to the experience both in visuals and behavior.

I’ve designed a batch of units that have overall visual consistency to imply they are all part of the same faction, yet they are distinguished in shape and color. These are not intended to be a complete set for a specific level, just some general types that fit the space them and could be plugged in anywhere. If I have a specific environment concept, I would introduce unique units that better fit the theme of the specific stage. In the end, I would also like to have greater variation in size by including several larger units and an occasional miniboss. Furthermore, I consider these as familiar types that can be used throughout the game, which could evolve with subtle iterations to keep things fresh. Such designs make for a good starting point, allowing you to quickly scrap together a variety of sequences and groupings to get a feel for the action.

In terms of behavior, each unit should bring new meaning to the experience by encouraging different strategies from the player. The following are several characteristics to consider with unit design.

Speed - The speed at which the unit itself moves and the speed of its projectiles, if it has them. Fast moving units are often counter balanced with lower HP and meek projectiles, while slow units typically have high HP and greater firepower.

Hit Points - Higher HP enemies are usually isolated instances and will need to stay on screen longer for the player to be able to destroy them, while low HP enemies can make brief appearances and often come in groups. Units that take a single shot to kill I refer to as popcorn. These rarely present much challenge, but bring a greater sense of action to the overall experience.

Size - A wide spectrum of size across the enemy roster keeps things interesting. The bigger it is the more fun it is to kill. However, small enemies are also satisfying to kill when you are greatly outnumbered. Large enemies tend to have high HP and firepower, but slow movement, while small enemies typically have low HP and fast movement.

Geometry - Perhaps the most impactful characteristic is the movement paths of the units and projectiles. Break things down into geometric concepts such as straight lines, zig-zags, loopty loops, s-shapes, spirals, and so on.

Color - Depending on specific game mechanics color can be more or less meaningful. Furthermore, certain colors might signify certain attributes. Special mechanics aside, a wide array of colors keeps things interesting. I stuck to a gray base for my generic examples, but I would probably splash more paint on them depending on how they contrast with a specific environment.

Projectiles

You can’t call it a shoot em’ up if it doesn’t involve a great many projectiles.

Reading projectiles and making precise evasive maneuvers is the heart of a shmup’s challenge. Therefore, the most important aspect of projectile design is visibility. While it can be fun to befuddle the player within chaos, the projectiles should always be readable across all backgrounds.

To keep things visually stimulating, projectiles should come in a wide variety of shapes, sizes and colors. The following are keys to creating fun and highly visible projectiles.

Color - Usually projectiles are the most vivid objects on the screen. Use bright saturated colors to set them apart from the background. Same as with enemy units, color might signify meaning depending on special mechanics. Regardless, I like to match the projectile color with the unit color.

Size - The bigger it is the easier it is to see, but the more space it takes up on screen. At a certain point large projectiles look goofy and ruin the overall aesthetic. On the other hand, super small projectiles tend to get lost in the action are less impressive. Include a wide variety of sizes for interest. Generally, the bigger it is the more damage it causes.

Shape - Unique shapes can help projectiles stand out, and provide more visual interest than simple balls.

Outlines - In order to keep projectiles readable on top of all backgrounds, outlines are almost certainly necessary. For insurance, I sometimes use a double outline made of a bright and dark color. Since I don’t intend to have swathes of white or super bright areas in the background, I often use white outlines. This also, sets them apart from all other sprites, which use dark outlines.

Flashing Effect - This not only improves visibility, but also make the projectile feel alive and dangerous. Simply alternating between two frames gets the job done. The more the frames contrast the more intense the effect. However, too much contrast can make it harder to track when it’s moving quickly. Experiment with many colors and sequences.

Rotation/Motion - Subtle expansion and contraction can be applied to any shape for a pulsing effect. Rotation can be applied to shapes like stars, squares, and oblong ovals. You can also try to make them appear to spin on the z axis for a 3D effect.

Explosions

With all this shooting things are bound to go kaboom!

This explosion is designed for a top down projection, but can also work in the side view. Its symmetrical expansion is best suited for aerial units, but doesn’t look too shabby on the ground units either.

I like to start with circles that expand into thin rings, which allows me to easily establish the overall size and expansion rate. I also like to incorporate the dominant colors in this first step. Once I have my circle guide I convert it into organic fiery blobs. Some trial and error will be required for polished motion within the clusters, but as long as you adhere to the circle guide the overall expression will be preserved. The following are some key tips.

Start by making circles that become thinner rings as they expand.

Hot air expands quickly and slows as it cools. Therefore, the explosion expands rapidly at first, and slows significantly before it dissipates.

The color starts white hot and fades to warm hues, then to gray as it dissipates into smoke.

The blobs start as consistent shapes and become more numerous and complex with expansion, as the darker areas encroach into them.

Once the blobs reach max expansion they slowly rise and dissipate into smoke.

The rings from the guide can be converted into a shockwave effect with minor modification.

Final Thoughts

I’ve learned a great deal from developing Hyper Echelon over the past several years, and I’m excited to pass on the knowledge in the hope to inspire many more awesome shmups. The concepts described in this tutorial should provide a solid base to begin designing a shmup on, but there’s a lot more I’d love to cover. Bosses, environments, and power ups are just a few more huge aspects to the game design. I feel a sequel coming!

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.

Assets featured in this Pixelblog are available in Space Shooter Assets Pack

Source file used in the making of this Pixelblog is available in Tutorial 83 Source File

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 - 30 - Food / October 6, 2020 by Raymond Schlitter

Intro

Burgers, tacos, sushi, pasta - we’ve got it all in the pixel cafeteria! Welcome to another exciting edition of the Pixelblog. In this scrumptious episode I present a wide variety of popular foods and even show a step by step process for creating an original restaurant design. Can’t say I’ve illustrated much food in my days, and even less in the pixel form. Well, I’ve been missing out. Capturing just the right colors and forms not only stimulates the eyes, it incites hunger. You know you got it nailed when you start salivating. Bon appetit!

Food Sprites

To start things off I created a variety of food sprites. As an American, I focused mostly on western food styles, although many dishes originate from countries around the world. In the end, I chose foods that are easily recognizable and I personally enjoy. However, many of these choices do not reflect my typical diet, as I strive to remain thin and healthy.

All sprites are roughly within 32x32px. I’ve always admired the exquisite life-like food illustrations in Japanese anime. Furthermore, I tried to channel some of that vibrant realism into my sprites. I used photo references and sampled colors directly from the photos. However, I maintained limited colors and tried to reuse many of the same colors across all items for a consistent pixel art aesthetic. Also, I decided to go with outlines to keep them relatively cartoony and pop off the screen. I’m afraid excessive colors and no outlines would result in them simply looking like down scaled photos.

Ramen

For a step by step tutorial I chose Japanese style ramen, as it’s a fun process to fill up the bowl with ingredients, and the many variations of the dish promote creative exploration. My final sprite is roughly 48x48px.

For this version I kept it pretty simple with a spicy miso broth, topped with seaweed, bamboo shoots, egg, pork cutlet, bean sprouts, and green onion. Ramen sometimes, includes corn, wakame, kim-chi, narutomaki, and many other ingredients are possible. Have fun creating your favorite recipe!

Restaurant

It’s hard to find a healthy meal when eating out in the United States, especially when it comes to fast food. However, I’ve always enjoyed the dining experience and appreciate the design of restaurants, from the architecture to interior decor. American fast food restaurants in particular have charming designs that are actually very well thought out to be instantly recognizable, maximize appeal, and communicate the style of food. Is there a more iconic symbol than the golden arches? It’s like a beacon to your stomach that says, fat, salt, sodium.

I felt it was time to return to my classic design approach using simple geometry for this tutorial. I borrowed colors from my food sprites with a few additions and tweaks for the color palette. My fictional fast food restaurant is appropriately called FAT’S. Maybe not the place you want to be seen eating often, but they have a fine selection of burgers and sandwiches. Kind of like Arby’s but with killer burgers instead of the roast beef sandwiches. If you’re ashamed to dine in we also have a drive through.

I stuck to a simple building here, but it would be a lot of fun to flesh out the concept with a more detailed logo/sign, interior design, staff uniforms, and menu items. Hopefully, I inspire some to take their design further.

FINAL THOUGHTS

Drawing food is very relaxing and just what I needed at this time. The only problem is you literally get hungry staring at virtual food for hours. If you’re not getting hungry your illustration must not be effective. It’s not all fun and games though. Food is fuel for life, and a major part of all cultures. Food has appeared in art throughout the ages, bringing greater context, and a human quality we can all relate to. In the context of video games, food has a prominent place, often used as a mechanic to recharge the player’s health. Many games solely focus on preparing and serving food, establishing an entire genre in itself. Therefore, it is well worth learning how to illustrate.

RESOURCES

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

Assets featured in this Pixelblog are available in Items Assets Pack.

Source file used in the making of this Pixelblog is available in Tutorial 79 Source File

Get caught up on all my downloads

Pixelblog - 29 - Anime Faces and Hair / July 29, 2020 by Raymond Schlitter

Intro

With Japan’s prolific export of creative media over the decades, anime aesthetics have become commonplace all around the world. Considering the seminal contributions made by Japan in the gaming industry, it should be no surprise to find anime influence especially prevalent within video games. Needless to say, these charming doll faces with sparkling eyes are no stranger to the pixel form. Despite this prevalence, pixel art is not very conducive to capturing the fine line work of hand drawn anime. Like any pixel art translation, It requires careful analysis, simplification through abstraction, and precise pixel placement. But no worries, in this lesson I clearly break down each facial feature one at a time with guidelines for placement and proportions. Further allowing one to ease into the subject, this lesson focuses only on faces and hair, presented with neutral expressions and mechanical viewpoints.

“Like any pixel art translation, It requires careful analysis, simplification through abstraction, and precise pixel placement.”

While there are a diverse range of styles within the anime aesthetic, they are all unified by some common characteristics. I would say the most notable feature is big brilliant eyes, followed closely by the wild shiny hairdos that can be any color. Anime characters can appear quite outlandish, but it’s all inspired by real life. Ultimately, the aesthetic is an idealization of reality to effectively illicit emotion from pure form. What I present here is a general form based upon my studies and personal pixel inclinations.

“Ultimately, the aesthetic is an idealization of reality to effectively illicit emotion from pure form.”

Front View

First, let’s start with the straight on front view to get a clear sense of the proportioning and placement of the features.

Think of seeing a face through a subtle fisheye lens. Big eyes, little pouty lips, and an almost non existent nose mark the common traits here. Some features are exaggerated and some are subdued, but positioning of features follows accurate anatomy.

“Think of seeing a face through a subtle fisheye lens.”

Side View

Now let’s round the corner and look at that profile.

The nose is much more prominent from the side view, but the high and long types are less traditional, than the little swooped button noses which is natural considering the origins of anime. The features presented in the chart are supposed to mirror the features from the front view tutorial, however, there combination examples vary.

Hair

Bout time we get some lettuce on those shiners.

As I mentioned in the intro, hair is one of the top defining characteristics to an anime personality. This is a trade off for downplaying the mouth and facial movement, but it’s also just a clever way to easily distinguish characters. I like to imagine flow lines of the main locks, which usually stem from a cowlick towards the back of the head. Then I blob in the hair with a single color. Next I refine the shape as I work in shadows, and highlights to finish.

“hair is one of the top defining characteristics to an anime personality”

FINAL THOUGHTS

Anime was just starting to boom in the west when I was a young boy. I spent many allowance bucks on VHS tapes at the music shop in the mall. When I first got into it there was only a single row of tapes on a shelf to choose from, but only a few years later anime had its own dedicated aisle. I’d like to think me and my brother’s avid patronage was the main stimulus for the boom. Obviously, I grew up with the stuff and once even dreamed of creating my own anime. I’m excited to bring this style into my pixel toolbelt and intend to expand on the topic in upcoming features.

RESOURCES

Assets featured in this Pixelblog are available in Anime Faces and Hair Asset Pack

Source files used in the making of this Pixelblog are available in Anime Faces and Hair Source Files

Get caught up on all my downloads

Pixelblog - 28 - Side View Tiles / May 26, 2020 by Raymond Schlitter

Intro

Even with the unlimited potential of technology these days, tile based graphics remain a powerful and efficient way to create game worlds. If you are new to making tiles I suggest reviewing Pixelblog 20, in which I introduced the fundamentals of tile making with top down tiles, and how to best make them with specific software. In this lesson I will guide you through tile creation in the most common projection used in 2D games - the side view.

From the foreground to multiple background layers, in the following tutorials I present a variety of tiles for creating a complete environment.

SLY16

Due to the limitations of consoles like the Megadrive, 16 color palettes really hit a sweat spot with pixel art aesthetics. While I’ve made several specific palettes within this range, Sly16 checks all corners of the color wheel. The mindset was to create a retro-inspired limited palette you can create entire game worlds with. To put it to the test, I created everything in this feature with it. To my surprise I never really felt a need for more colors, and the limitation actually frees me from excessive deliberation with color choice.

I started by plucking colors from my Mondo palette then refined with testing, and the inspiration of other palettes. I’m always open to future revisions, but I’m quite happy with the current state of the palette. Patrons can download Sly16.

Basic Ground Set

As with my previous tile lesson, I’m using 16x16px tiles. This is one of the most common tile sizes for pixel art games, as it is small enough to work efficiently with but still packs enough pixels for a surprising amount of detail. Also, it’s always a safe bet to work with a size that is a power of 2, as these values have the most consistent multiples, making it easier to create balanced textures. Ultimately, you can make tiles any size you want. They don’t even have to be square, but why complicate things? The basic guidelines I suggest are that your tiles are an even number and square. It all depends on the look you are going for.

I start with very basic color blocking to capture the most prominent fields of color and define the orientation of the tiles. It is in this first step where I establish a region on the outer face of the tile that appears to tilt towards the background. For example, on the ground tiles with grass, it appears you are seeing part of the grass from the top, like a 3/4 tilt. Furthermore, the corner tiles tilt on the two outer sides, appearing like a cabinet projection. Creating tilted edges like this is critical to achieving depth.

In the rough clustering phase I blend the clusters into the color fields to imply the general textures and begin to smooth out the color transitions.

In the fine details phase I add highlights, push the shading, and refine the clusters to be more descriptive. However, I still like there to be some good chunky clusters in there. Too much detail can end up looking blurry, or noisy.

You can see the grass would have an abrupt flat top if not for the extra grass and plant tiles. The player would walk on top the ground tile and overlap the grass tiles, making it appear like he’s really a part of the environment. This shows how you can add varied edging to your tiles while preserving clean collision bounds.

Platforms and support tiles

level design possibilities are greatly opened with the ability to place a stand alone platform anywhere on screen. However, my rational nature makes it hard to accept floating platforms without some kind of logical explanation, like it’s imbued with magic or hover technology. These explanations are acceptable to me for moving platforms, but for static platforms I usually go out of my way to visualize a logical support structure for platforms.

The support tiles are designed to look like they are in the immediate background so it’s obvious you can pass in front of them but close enough they appear to be connected to the platforms. Besides providing a logical support structure to platforms, these tiles also add an interesting background layer, which can also be used purely for visual interest without platforms attached.

Background Tiles

Of course, the goal with the background is to create depth, but also to further contextualize the environment without compromising the readability of the foreground. Moreover, I like to make several simple background layers, and let the sum of the parts create visual richness, rather than having only one or two very detailed background layers. The more layers you have the more depth you can achieve from parallax scrolling, but just a few is usually enough for convincing depth.

Overlap and the use of subtle outlines allow me to get a lot out of my 16 color limit. Had I used I larger palette I could push for more detail and even more layers in the BG to capture a more realistic sense of atmospheric perspective. However, I’m pleased with the depth I’ve achieved with limited colors, and quite like to colorful retro look. Put it in motion with parallax scrolling and you’ll really sink into the image.

You can see my clouds bleed into the background in places but there is always enough information to imply the shape of the clouds. I would definitely avoid color bleed on sprites and things you interact with, but it is acceptable with passive background elements so long as the object remains readable.

KEY POINTS

These are mostly the same points I describe in my top down tiles lesson with a few new tips relevant to side view tiles.

Balance - Strive to achieve a homogenous distribution of visual weight within a tile. If any area of the tile has a visual dominance the pattern will become too obvious. Include clusters that overlap the edges and loop around the tile to help hide the seems.

Consistency - Define key clusters and shapes and repeat them in several cases to create a pleasing consistency. Avoid touching key clusters with other key clusters, as they clump into different irregular clusters and create noise. Touching corner to corner is okay.

Limit colors - You only need a few colors to make a rich texture. Too many colors and the texture will become blurry. Also, strong contrasting colors in the case of a texture pattern may result in displeasing noise.

Contrast - Consider contrast when combining different textures in the same environment. A busy texture next to another busy texture may exhaust the eyes with too much noise. Negative space is your friend.

Reflect - Often tiles can simply be mirrored to create tiles of different orientation. This saves time, and the symmetry creates a pleasing consistent look. However, this will only work if you have a symmetrical light source, or ambiguous omni lighting. In may example, light is always coming from directly above, making it possible to mirror right and left side tiles.

Resolution - You can make tiles any size you want, but the larger the more laborious. Anything over 32x32px seems like overkill for pixel art. 16x16px is probably the most common size and is sure to do your pixels justice.

Variants - Variant tiles of the same use add interest and reduce repetition. A well designed tile set shouldn’t need a lot of variants, but at least one variant of tiles that are often strung together in repetition will suffice. For example, my clouds have two different middle bottom tiles that I mix up to keep it looking organic.

FINAL THOUGHTS

Building off my experience from creating the top down tile series, I found the process to go quite smoothly. Also, I have worked with side view tiles in the past for a couple of game dev projects, and I’ve become more proficient with using Pyxel Edit, a pixel editor focused on tile creation. Check out Pixelblog 20 to learn more about it.

Making tiles can feel very tedious at the start, but once you have enough tiles to start making something they become a powerful and fast way to create large environments with relatively few assets. Once you feel that power it becomes addictive and you just want to keep building the world. I’d love to expand on this concept in following lessons much like the top-down series. Characters, animations, items, ui, different environments; let me know what subject you are most interested in learning.

RESOURCES

Assets featured in this Pixelblog are available in Side View Rocky Grass Tiles Pack

Get the original palette used in this lesson- Sly 16

Source files used in the making of this Pixelblog are available in Side View Tiles Source Files

Get caught up on all my downloads

Pixelblog - 27 - Under the Sea / March 26, 2020 by Raymond Schlitter

Intro

At a fundamental level, visual art is observation and interpretation of the natural world we live in. Therefore, in order to become a well rounded artist, it’s imperative to keenly study the many realms of nature and depict what you see. No matter how strong your sense of imagination is, frequent natural studies will prove to sharpen your vision. What’s more, you will develop a deeper understanding of the objects you depict. After all, anything imagined must have a source of inspiration in the real world.

In a constant quest to strengthen artistic vision and broaden visual vocabulary, I’ve covered several natural studies in previous lessons, such as plant life, and rock formations. In this lesson I dive into one of the most beautiful and mysterious environments on the planet - the ocean! Broad and diverse the world of the ocean is, for it can’t be covered in one lesson. Moreover, for this lesson, I focus on corals and algae. Also, as a bonus I included a submarine tutorial, so we have a watercraft to explore this wonderful world in.

Coral

One of the most unique lifeforms in the ocean, corals come in many forms. Sometimes appearing as rocks, or plants, corals are in fact animals. Actually, a single coral is made up of thousands of tiny animals called polyps. Wow!

As you can see there are two main kinds of corals, hard and soft. Hard corals are made of calcium carbonate, and the polyps create an exoskeleton, making them hard as rock. Hard corals grow in colonies, eventually forming coral reefs. Hard corals commonly come in yellows and rust colors.

Soft corals are also made of calcium carbonate, but with a blend of protein, which makes them less rigid. Although rooted, a lack of an exoskeleton allows soft corals to sway back and forth. Soft corals come in a wide range of vivid colors.

ALGAE

Commonly referred to as seaweeds, algae make up most of the plant life in the ocean. As a fan of Japanese cuisine I was already familiar with a few species, but I was surprised to discover there is an extensive list of known species, and they exhibit great diversity in appearance.

Although they may be called seaweeds, algae are not plants. Algae use chlorophyll for photosynthesis and have plant-like cell walls, however, they do not produce seeds or flowers like plants do.

At the basic level, algae are classified as 3 main types; brown, red, and green.

Brown algae is the most prevalent, and touts the largest species. Seaweeds known as kelp are brown algae.

Red algae get their red color from a pigment called phycoerythrin. The ability to absorb blue light allows red algae to live at greater depths than either brown or green algae. A sub group of red algae called Coralline algae contain calcareous deposits, which makes them hard like corals. Pink Plates is an example of Coralline algae.

Green algae is the least common but there are still more than 4000 species on the planet. These algae come in three forms: unicellular, colonial, or multicellular. However, the diversity among green algae is not as great as among red and brown algae, with most species appearing like some kind of sea lettuce.

Submarine

While it’s not really in line with the topic of natural studies, it’s equally important to study man made objects. The value comes from observation. However, I find natural subjects to be more insightful and inspiring. Anyway, figured we needed a watercraft for this underwater adventure.

After studying several different subs, I came up with this general design, which exhibits the main parts needed for proper operation. The hull is a pressurized container that makes up the main interior space where the crew operates from. The conning tower is a raised platform on top the ship from which the ship can be operated when on the surface, and contains the periscope. The rudders control the direction of the ship. Vertical rudders control the yaw, or left and right movement, while the horizontal rudders allow the vessel to dive and ascend. Obviously, both are necessary. Finally, the propeller provides propulsion. As long as you have these basic components, it should be a convincing sub design. Play around with different shapes, dimensions, and colors!

FINAL THOUGHTS

Growing up as land locked as it gets in Kansas, I’ve always thought of the ocean as an exotic and majestic realm. The first time I went to a large aquarium in Tokyo I was blown away by the lifeforms on display, and infinitely inspired. Although I had been to the ocean before and had a basic education on marine life, it was like discovering a whole new world. With this lesson I decided to start with the basic life forms, but there is so much more to explore. I’m sure I will revisit underwater environments, and cover different kinds of sea life in the future.

RESOURCES

Was this article helpful? If you find value in my content please consider becoming a Patreon member. Among many other rewards, Pixel Insider members get extra resources to compliment my tutorials. But most importantly, you allow me to continue making new content.

Assets featured in this Pixelblog are available in Under the Sea Assets Pack

Source file used in the making of this Pixeblog is available in Tutorial 71 Source File

Get caught up on all my downloads

Pixelblog - 26 - UX/UI Design Basics / February 25, 2020 by Raymond Schlitter

Intro

Imagine a game with beautiful graphics and tight controls, but the text is barely readable, the icons don’t make sense, and many useful features are buried in clunky menus. Doesn’t sound so fun, does it? Obviously, the quality of the user interface can make or break a game. Therefore, If you want to make games, you will need to have UX/UI design skills. So what’s this jargon all about? In the first part of the lesson I explain the terms and what they focus on. After the basics we get into designing UI assets that commonly appear in games.

UX vs UI Design

UX refers to user experience and UI is the user interface. I’m sure most of you are familiar with these terms, but there seems to be a lot of confusion about the difference between the two. Well, here’s the way I see it.

UX - User experience involves the feel of the design determined by how the user interacts with the visuals. Furthermore, UX design focuses on the feel of the design and the user’s overall experience with it. For example, how easy is it to save your game, change your gear, disable audio, and accomplish various desired tasks? These are some of the concerns of UX design.

Design goals of UX design
• Intuitive and easy to use - The user can smoothly navigate the interface without thinking.
• Interaction feels satisfying - The experience gives you the right thing at the right time.
• Fast and responsive - Smooth, prompt functionality keeps the user from disengaging the habit.

UI - User interface is all the actual visual assets the user interacts with, for example, gauges, fonts, icons, and menus. UI design is the practice of creating these assets and incorporating them into the interface in a manner that is intuitive and smoothly guides the user through the experience.

Design goals of UI design
• Consistent visual language - Color, shape, size, fonts, and positioning of all UI elements should follow consistent rules to bring order and distinct character to your game.
• Aesthetics fit the game concept - Visual style matches the mood of game and the means of implementation intuitively informs gameplay.
•Highly readable, not distracting - Graphically reads well in all situations but does not hinder gameplay and engagement.

As you can see, these disciplines overlap and are both necessary for a successful design. Unreadable text and awkward button placement are examples of bad UI that consequently makes for a bad UX. Conversely, no matter how beautiful the UI looks, it won’t make up for bad UX, such as long loading times and overly complicated menu trees.

PLayer Health

Representation of the player’s health status is one of the most common ui assets. Here’s a look at some general styles and how to make them unique to your game.

Every style has pros and cons. Use a style that is most intuitive for the gameplay. Large unique shapes like hearts are graphically charming, but lack technical accuracy, and take up quite a bit of space on screen. On the other hand, numbers are very accurate, but hard to read in the heat of the moment.

Iterate the design to create something unique that visually and conceptually fits your game. This can be done by manipulating basic design elements such as color, shape, and orientation. Some games go beyond basic shapes and use more conceptual representations of player health. For example, in Doom you see the character’s face turn more bruised and bloody as the health percentage drops. In Aladdin for the Sega Mega Drive the player health is represented by the amount of smoke coming from a genie lamp. I always appreciate creative ideas like this, but you must be careful the gauge is still readable.

Player heath is usually the most important status to keep your eye on. Therefore, It should always be readable but never distracting to gameplay and the user’s engagement in the experience.

Common Resources

Beyond player health there are several resources you often see used in games. Let’s explore some common resources to help inspire your game UI!

However you choose to represent your mechanics in the UI, make sure to follow the aforementioned design goals and make sure everything is consistent. For example, it would be odd to mix different styles of gauges in the same UI, like vertical and horizontal styles. However, in the case of unique mechanics it can be intuitive to represent them in all in a unique manner.

As for animating your UI, remember function comes first. Although these animations look neat, they could be distracting. If you are directly controlling a character you can see on screen, strong feedback is usually displayed over the actual sprite, and a funky UI could actually distract from where you’re supposed to be focusing. But, you’d have to really push it, and any life you can give the UI with animation is generally welcome.

FINAL THOUGHTS

UX/UI design may not seem like the most exciting aspect of making a game but it’s surprisingly fun! While it can be tedious to create an effective and consistent UI, it’s extremely satisfying to see it functioning properly. Much of a game’s character and professional polish shines through in the UI. Therefore, it’s important to treat the UI with just as much passion as the gameplay, character animations, or any other aspect of the game.

There’s much more to be covered on UX and UI. I hope to continue this topic in an upcoming Pixelblog!

RESOURCES

Assets featured in this Pixelblog are available in UX/UI Assets Pack

Source file used in the making of this Pixelblog is available in Tutorial 68 Source File

Get caught up on all my downloads

Pixelblog - 25 - Motion Cycles / January 28, 2020 by Raymond Schlitter

Intro

Everyone and everything gets around in their own way; some on two, some on four, and some like to soar. In this lesson I present motion studies on 3 different subjects that are essential to hang on any animator’s tool belt. First, we’ll take a look at bipedal locomotion with a human walk cycle, then we step it up to four leg action with a dog walk cycle, and finally take to the skies with a study on the wing motion of birds.

Human Walk

A human walk cycle is always a good place to start your animation studies, or to polish your skills. In my opinion, the subtle movements of a walk make it a bit harder to animate than a run cycle. I cover run cycles in Pixelblog 8.

I present a standard walk cycle here with some exaggeration to help illustrate the subtle mechanics of the motion. Start by making a figure with the body parts clearly defined by color. It’s much easier if you animate one section at a time for all frames. Animate the legs first, then the arms, head, and overall body movement. Take careful note of the position of all the body parts in every frame.

Once the animation is satisfactory you can color and add details. The more detailed the design, the more difficult it will be to keep the movement clean. I recommend keeping your characters simple, especially if you are new to frame animation.

This is a standard walk cycle, but the motion can vary greatly depending on body type, age, and circumstances. To introduce more personality, observe real people and try incorporating their unique movements into the animation. For example, a carefree child marches with pride, the elderly shuffle slowly with hunched backs, the drunk sway and stumble, and so on.

Dog Walk

Quadrupeds are animals that walk on 4 legs. While they exhibit some of the same mechanics seen in bipedal locomotion, the additional set of legs further complicates things. You should have a firm grasp of 2 legged walk cycles before attempting to animate a 4 legged walk.

I chose Shiba Inu, to illustrate quadrupedal locomotion. I’ve never owned one, but surely they’re the cutest!

Same as the human, break the anatomy down into separate body parts defined by flat colors. Think of the legs as 2 sets of biped legs. The bone structure is different than a human but the principle stepping motion is very similar. Animate one set of legs at a time, then do the body, head, and tail.

Observe how the back leg follows one step behind the front leg of the opposite side. Make sure the distance traveled is the same for both the front and back legs, or the body will appear to stretch and contract like an accordion.

Pay close attention to every body part in every frame and make sure the energy of the motion is consistent throughout. The up down motion of the back pelvis and front shoulders undulate with opposite but equal motion, creating a balanced rhythm across the back.

When dogs and other quadrupeds begin to run they actually bound, with the right and left legs working more in parallel. I’ve done one personal study of a bounding dog before and hope to cover it in a later lesson.

Bird Flight

Now you’re probably tired of all those legs, so let’s lighten things up and take to the sky with some simple wing motion.

I modeled this example after medium sized sea birds, which can provide a template for many bird species and winged creatures.

As with the previous studies, establish the motion with simple shapes made of flat colors. From the front view my wings are simply a wireframe. Make sure to mark the joint placement on the wings. This helps prevent the wings from looking too rubbery by providing a clear folding point.

I went with 8 frames to stay consistent with the other studies and to clearly describe the full arch of motion, however, I think a convincing wing motion can be done with a few less frames. The extremes of motion are keyframes. so you should start with these. then do the smear and take it from there.

Start with the front view before attempting the side view. Animate only the wings first, then add the overall bobbing motion last.

Once the motion is satisfactory, you can color and add details. Notice how I thickened up parts of the wings and added visible tail feathers in my finished version of the front view.

FINAL THOUGHTS

I use a fairly realistic style with some degree of exaggeration for these studies in order to best illustrate the basics of the motion. If I were making sprites for a game I would go for more stylized designs with personality, and possibly with less frames.

In order to develop animation skills one must learn to keenly observe the world around them and the manner in which all things move. However, without tangible practice it’s hard to make those senses kick on. Once you actually go through the exercises you’ll suddenly start noticing all kinds of little nuances of movement in real life. But it won’t stick if you don’t keep practicing. Animation requires a lot of repetitive practice on a regular basis. At least it does for me. So I’ll try my best to keep on practicing and sharing the fruits of my studies with you. Much more to learn!

RESOURCES

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

Assets featured in this Pixelblog are available in Anatomy & Animation Assets Pack.

Source file used in the making of this Pixelblog is available in Tutorial 63 Source File

All contents of this lesson use my custom palette Mondo

Get caught up on all my downloads

Pixelblog - 24 - Items / December 24, 2019 by Raymond Schlitter

Intro

Items come in various forms and are used in almost every video game. Often they are found scattered throughout the game world and picked up by the player. Many games also feature inventory systems and the ability to purchase and sell items. Considering the prevalent use of items in video games, clearly depicting them with proficiency is surely a valuable skill for pixel artists. In this lesson I will cover some of the most common items that appear in video games and how to bring them to life with simple animations.

Common ITEMS

Hearts, gems, coins, fruit, and an assortment of common game goodies! Use this reference to help inspire your item creation.

For this reference I used a 16x16 pixel limitation, side-view projection, and every item has about 6 colors or less. The size of your items should be determined by what looks good in relation to your character and the environment. For example, If your environment is made out of 16x16px tiles, then 16x16px should be the perfect relative size of the items, as they will fit nicely into the level designs.

I kept the style fairly generic without an obvious theme to make the reference more universal, however, you should stylize your items to best fit your game. Whatever the style, make sure it’s consistent and the items feel like part of the same universe. For example, I probably wouldn’t have skeleton keys and key cards in the same game, but you never know. Also, make sure the projection is consistent. If your game is top-down these items would probably look out of place and need to be titled forward a bit.

I encourage you to make your own unique items, just be careful to make them understandable to the player. Gamers are accustomed to these common items and have a pretty good idea of what they might do, but unique items require more effort from the player to learn.

Idle Animations

Items that are picked up in the playing field sometimes need a little idle animation to stand out as an item, or just to give them some life.

Idle animations should be simple and non-distracting. Some idles suit certain items better than others. For example, shine animation might look odd on food items. Furthermore, rotation animation is overly complex to make for anything but the simplest items. Bounce animation makes sense for items setting on the ground, while bob works best for floating items. However you choose to animate your items, it should be consistent across the board. It might be okay to use different idles for different items in some cases, but it should be a consistent system. For example, currency items shine, while power ups bob. Some games use both floating items and items that sit on the ground. In that case there could be a general rule that floating items bob and ground items bounce. It’s also possible to combine animation concepts, like shine plus bob. Just be careful it doesn’t become too noisy and detract from the readability of the item.

FEEDBACK ANIMATION

Visual feedback from item collection makes picking up items more satisfying, but it also provides a function. The function is to inform the player of the effect of the item, and to emphasize when you’ve picked up an item with more clarity, which is especially important in visually busy games with lots of action.

This illustrates several examples of item feedback in the traditional arcade context, where the item takes effect by simply touching it with your character. In the case of currency, or non consumable items, the feedback animation plays in the spot of the item. On the other hand, items that do have an effect follow you and play on top the character sprite. This isn’t a rule, but it sure feels intuitive to me.

These are simple ideas that can be translated to all kinds of games. The sparkle animation works well as a generic effect for currency, or non consumable items. Since it’s likely you’ll see this effect a lot, I recommend making a few different small sparkle animations and combining them with some randomization.

The power up animation can be used for all kinds of items that increase your stats in some way. A simple color swap and the same animation could be reused for various items.

The HP up animation shows a bit more unique example of feedback animation. Furthermore, It’s possible to make all kinds of creative feedback, but foremost, make sure it helps inform the effect of the item without eccessive noise. As always, consistency is also important. Make sure all feedback has a similar balance and style. The more important or beneficial the item, the more special the feedback can be.

While I illustrate feedback in the context of a traditional side-scroller, it can and should be implemented in all kinds of games. Feedback on top the character is always good as you are sure to see it, but it could also be applied to UI elements, such as a life bar or profile pick. Some games where you don’t even see your character still have feedback by overlaying colors and effects on the screen. Needless to say, item feedback is important information.

Above is a montage of the various feedback animations featured in Hyper Echelon. Notice how they are all unique but have consistent style and the same radial flash appears in all of them.

FINAL THOUGHTS

Whenever beginner pixel artists ask me to assign them homework to help them get started, I usually suggest they draw small items with few colors. This allows them to practice the fundamentals without being overwhelmed. What’s more, they get the satisfaction of making a complete asset that could potentially be used in a game. Games aside, the ability to reduce objects into easily recognizable iconic images is a valuable skill for any artist, especially when working under the limitations of pixel art. So have fun making items until your heart’s content. Although small, the skills to make something epic can be achieved through humble item making.

Work through the backlog of Pixelblogs for more fundamentals on pixeling. In particular Pixelblog - 6 - Lighting, and Pixelblog - 21 - Top Down Objects contain relevant content. Also, if you want to make a simple animated character like in my example, check out Pixelblog - 8 - Intro to Animation.

RESOURCES

Assets featured in this Pixelblog are available in Items Assets Pack.

Source file used in the making of this Pixelblog is available in Tutorial 62 Source File

All contents of this lesson use my custom palette Mondo

Get caught up on all my downloads