1Sold to iranmrr090379@gmail.com
@michafrar the Author About twitter.com/Michafrar instagram.com/michafrar/ pixiv.net/users/8167587 youtube.com/c/michafrar Michael Azzi, also known as Michafrar Michael has been making pixel art since his teens back in 2004. Pixel art is one of the several artistic activities he enjoys doing. He graduated as a foreign language teacher, took his pedagogical skills and applied them to his pixel hobby. He quit teaching and became a freelancer, working for friends, companies and clients. In 2019, he released Pixel Logic, a comprehensive book about pixel art. During its production, he created pixel art and animation for television productions like Voltron: Legendary Defender (2017) and video games such as Wargroove (2019), Super Meatboy Forever (2020), and Cassette Beasts (TBD)
Copyright © 2019 by Michael Azzi This book is a console-focused historical journey through classic and modern pixel art. All images used within this book are used for strictly educational purposes. The video games and computer graphics featured in this guide are copyright property of their respective licensees. The creator of this title claims no ownership or endorsement of any of the products, websites, softwares, services or people listed in this book. All rights reserved. No part of this book may be reproduced in any form without written permission from the author, except for excerpts intended for review. All other content is created by the author and in collaboration with the guest artists listed page 239. Written by Michael Azzi. www.michafrar.com Design by Jenna Brown. www.cyanatar.com Pixel Logic : Pixel Art Tutorials 2022 Edition www.pixellogicbook.comTHIS BOOK IS ONLY AVAILABLE ON gumroad.com If this PDF is published anywhere else, it's an ilicit copy. As a independant artist I'm counting on your support. Thank you for reading!
Chapter 1: Line art Make smooth line art and learn about shapes, lines and curves. Chapter 2: Anti-Aliasing Smooth out your outlines and make your shading and curves look softer. Chapter 3: Colour Create and adjust colour palettes suitable for sprites and backgrounds. Chapter 4: Readability Improving the clarity of the sprite, big or small. Chapter 5: Dithering Create different gradients primarily for backgrounds. Chapter 6: Game Perspectives Build isometric environments, characters and learn about other perspectives. Chapter 7: Clean Up Refine your pixel work and add final touches. Chapter 8: Sub-Pixeling Go beyond your single pixel and breathe life into your animation. Chapter 9: Animation The final step to bring your characters and environments to life. Introduction06 22 38 60 86 114 134 Conclusion 161 Contents 187 213 Everything you need to get started. 238
5 Getting started Introduction
6 What is pixel art? Advanced tools will not do the job and take control away from you. Of course, this will make your artwork look sharp because you don’t have the soft blur from paintbrushes. However pixel art is not just about the tools. Learning techniques is equally as important to get good results and work faster. Non-pixel art Oekaki or binary art Pixel art You have total control. You can manipulate every single pixel yourself. Why is it different from other pixelated art? Pixel art are computer graphics where placing each pixel is intentional. Historically, they were low in resolution and low in colour. Over time, the resolution and colour limitations loosened up, but one thing remains absolute :by Michafrar
7 Non-pixel art: Doesn’t require you to zoom much. Doesn’t require pixel-precision. Uses brush strokes and pen pressure. You control the pixels. The tools don’t control you. It doesn’t mean you have to place every single pixel like a brick. There are shortcuts. Don’t worry! Pixel art was born from limitations. That’s why many manual techniques are still used today. Technological progress gave new possibilities in 2D games: digitized pictures and photographs, pre-rendered 3D models, full motion video and much more. Once sprites stopped being edited on pixel level, they were not considered pixel art anymore. They are still sprite objects on screen, but not the traditional hand-made pixel-sprites we know of. Pixel art is often confused with other art such as Oekaki or Binary art. That’s because they often use aliased graphics: art made with non smoothing tools. Regular paintbrushes smooth your lines. Aliased art keeps everything pixely & sharp. Below is a short summary:by Michafrar
8 There are many ways to start! Let’s compare it to something more familiar: drawing & painting. The methods aren’t all that different from pixel art! If you already make illustrations, stick to your method of preference! If you're feeling adventurous, try something new. Just remember that pixel art is usually drawn on 1 layer. This brings it closer to traditional art. If you’re not comfortable working on a single layer, don’t fret. Make sure to combine the layers when you end up having too many. For animation in particular, layers are useful. Many overlapping parts can be separated this way. If you make scenes or mock game screenshots, layers will be necessary! Where to start?SketchLine artBlock shapesShadeClean up Pixel art is like 2D sculpting. You start with a base, then chisel and add pixels! Having trouble drawing on a tiny canvas? Don't worry. Start drawing in high resolution, then shrink your drawing. Once you've got the right dimensions, you can trace the sketch and continue as planned. Even veterans start with this method to get quick results. You'll learn more about this in Chapter 7.
9 Here are a few examples of the multiple ways to make your sprites/pixelart.by Anubis Jr.by Yaaby YAAby MichafrarBy SoapH
10 What software to use? Graphicsgale Speciality pixel-art programs Price: FREE This powerful pixel tool is suitable pixelart and animation. With gamedev friendly tools, such as tile sets, export options and palette editors; this program is quite popular with veteran pixel artists. The customizable layout and hotkeys make it very versatile software. Unfortunately, the timeline is a bit too basic to create complex scenes. It’s also great for binary artists with an extensive array of customizable brushes. This Japanese program is fully translated into English and completely free! Price: $20 Free version with limited features. Aseprite Aseprite excells at animation. Easily the best. It’s pretty cheap, has an intuitive animation timeline similar to programs from Adobe or Toonboom. This indie developed software is always full of surprises! With frequent updates, this is the most powerful pixel software yet. You can easily edit and load colours and even access palettes from retro hardware. If you dislike the low resolution user interface you can easily download different skins and layout options. graphicsgale.com/us/ www.aseprite.org These programs will help make the process easier so you can comfortably improve your skills. Each program listed below offers their own unique benefits and you may find one program that suits you more than others. It’s important to try them out for yourself and see what you enjoy! Keep using the software you already know or switch to a new one. Some programs do more than just pixel art. In the end, it doesn’t matter how advanced or fancy the technology is. Even something as simple as Microsoft Paint does the trick! Your tools will not define you as an artist. Fan-favourite! Fan-favourite!
11 MS Paint XP/Vista Price: Free This version is not pre-installed on Win. 7/8/10/11 The tool that many beginners and masters have used over the past decades. Make sure you use the Windows XP or Windows Vista version of Paint. Every version after Windows 7 features non-pixelart tools that don’t allow you to make clean pixelart. This software just has the bare minimum, but some- times, that’s all you need. Paint is great to start your pixel adventure! Price: $40 Free version available with limited features. This tool has grown in popularity after the success of the indie game “Shovel Knight” by Yacht Club Games. This software is a great way to animate sprites. It features an advanced onion skin tool and allows you to zoom in up to 5000%. It’s quite plug-in friend- ly and allows you to customize the layout! The price is slightly higher than the other cheap software, but look out for sales every now and then. Pro Motion by Cosmigoby MichafrarGraphics from "Shovel Knight" (PC) created within Promotion www.cosmigo.com Pixquare - for iPad and iPhone Pixel-art programs for mobile devices Price: ranging from $8 to $20 https://www.pixquare.art/ Fan-favourite! Pixquare has more than meets the eye. A seemingly simple interface with the intuitive control you'd want. The gesture pad is comparable to a desktop keypad. You have easy access to palettes, layers, timelines, an opacityslider and brushsizes with your non-dominant hand. With an Apple-pencil by your side, you can virtually do everything like on computer ... on the go! Pixquare updates regularly. One outstanding feature: export your creation as an ASEPRITE file and continue your projects on the computer.Made for pixquare by twitter.com/TonioPxl
12 GIMP Price: Free An open source software app GIMP is a free drawing software with, of course, the ability to make pixel art. This immediately makes it more accessible than the programs listed before, however, it doesn’t have an intuitive interface for pixel-art. The program includes a lot of useful tools, including customizable grids and transparency options. It also has a text tool. Having the option to have extensive configurations to suit your needs will either be convenient or overwhelming, depending on your preferences.by Michafrar www.gimp.org General art programs Paint tool SAI Price: 5,500 JPY ~ $50 31 day free trial available This software combines the ability to create both pixelated and non-pixelated images. Its key features include a colour shifting options which allows more colour control. It also features the ability to make smooth 1px lines with the legacy pen and stability options, along with an accurate wand tool. The program is also tablet user friendly.Guest artist: cyanatar Fan-favourite!www.systemax.jp/en/sai/ Clip Studio Paint Price: $50 31 day free trial available Clip Studio is easily the favourite software of many illustrators working in digital art. Pixel art is easily accessible with the "Dot Pen" brush in the subtools of your basic pen. This software goes on sale fairly often and it's always a good bang for your buck. The best part: it's a one time purchase! This product even includes basic animation tools for you to play with. It's easily the new standard for digital art. Fan-favourite!www.clipstudio.netby Michafrar Adobe Photoshop Price: Subscription Extremely expensive over time Photoshop is well known as the software standard for digital art, as well as being the most expensive! There are more wallet-friendly options thanks to adobe cloud subscriptions but if you’re tight on a budget it’s still quite expensive. If you can afford it, the program really does everything you could need including pixel work. It may lack the precision of dedicated software, so if you want to set up pixel art tools in the program you may need to read up on specific tutorials to get the most out of it.Guest artist: cyanatar www.adobe.com
13 What hardware to use? Both mouse and tablet are perfectly fine! OK! OK! A mouse is good with clicks. Harder to draw and paint with, but it offers clicking precision. Good for clean up and final touches. A tablet is good with strokes. Harder to click or tap constantly, but easier for intuitive control. Good for the sketch/beginnings. It doesn’t matter what you use. Remember the saying: “It’s not about the tools. It’s how you use them” Remember: your keyboard is a powerful tool for art too! You can use keyboard keys to map actions and shortcuts. Flip through animation frames with simple button presses. Your mouse or tablet may have additional buttons: try and make use of those too! Stick to the tools that let you work more efficiently and faster.
14 Retro hardware Here’s how sprites were made back in the 80’s and 90’s. The methods are not all that different from today, just more archaic! Early video game developers used special tech such as tablets attached to a mouse with a crosshair. The tablet's surface was calibrated to the monitor's screen, unlike a regular mouse. These devices were called digitizers and the mouse was called a digitizer puck. Sprites were first sketched on paper, then placed over the digitizer and traced with the puck. Capcom artists drew sprites on grid paper and pixeled them with digitizers. Felicia art by Akira “Akiman” Yasuda featured in Darkstalkerstm (Arcade) 1994). Images from the development of Golden Axetm on Mega Drive (1989) from the French Magazine “MegaForce #4” January-February 1992.
15 Another peripheral was a digitizer connected to a light pen: a stylus that can interact with the surface of a monitor. The pen's position matches the coordinates of the cursor on the screen. They can be considered the precursor of LCD drawing tablets of today, such as the Wacom Cintiqtm, letting you draw directly on screen. Other developers drew directly on computers with a regular mouse and keyboard. Some pixel artists today still use this setup. These pictures are from a documentary that features the game Comix Zone (1993-1995) with animator Dean Ruggles. Full video: youtu.be/-M8RIc6Ek0Q A dual monitor setup isn’t required since modern computers have high resolutions. Having a second monitor is extremely useful, though!
16 Screenshots from a 1995 Promotional commercial for Fatal Fury 3 Neo Geo CD (Japan). An artist’s workspace at SNK for Neo Geo hardware circa 1995 Notice the inclusion of a scanner and a mouse.From the “Neo-Geo Hardware Specification” booklet, page 93, issued by SNK Playmore Corporation
17 Software tools Regardless of the software, you will need at least these 4 tools. These are the minimum required to make pixelart. Pencil Most basic tool. Some software have a brush. It gives you a 1 px tool of crisp and clean pixels. Eyedropper Picks up a colour. Sometimes assigned to the right click. It allows you to pick up colours and make palettes. Eraser Erases your mistakes. Some software don’t include it because you can just erase with white or transparency. Bucket Makes your life easier. It fills an empty area with 1 solid colour. Watch out for gaps! Or it will fill the whole screen. Some programs don’t include an eraser, they combine the eyedropper with the pencil. The pencil is on the left click, the eyedropper is on the right
18 Other must-have tools: Selection tool Recolour tool Line tool Rotation tool Colour settings Circle tool Blur Brushes Blurred gradients Use & edit manually: Avoid: Why avoid automatic tools? Because the artist can’t predict how the result will turn out. Remember: Pixel art is about having 100% control over what you do.
19 Old computer graphics had low resolution, so pixel art is often small. When making pixel art, you will have to decide a canvas size from the very start. How small do I make my sprite? How large do I draw my pixel art? What size ? For more information on sprite sizes, read Chapter 4: Readability Draw however big or small you want your artwork to be. A good canvas tends to be the maximum screen resolution found in older videogames. For beginners, I suggest a canvas smaller than a GBA screen (240x160). “I want to display my art online.” Canvas size Tiles are also useful a size indicator for smaller pixel art, like sprites!““
20 Metroid II: Return of Samus (Gameboy) has a LARGE sprite to canvas ratio for a playable character. The sprite is 1:24, about 4% of the screen. It’s not very suitable for manoeuvring in level. Super Metroid (Super Nintendo) has a LOW sprite to canvas ratio for a playable character. The sprite is 1:38, about 2,5% of the screen. It allows for the player to see more of their environment. Cave Story /Doukutsu Monogatari (PC) has a TINY sprite to canvas ratio for a playable character. The sprite is 1:300, about 0.33% of the screen. Characters are still visible but minimalist due its tiny size. Check the ratio between your sprite and your canvas. “I want to make sprites for a video game.”
21 This may sound obvious to many artists, but when resizing ALWAYS stick to WHOLE NUMBERS. If you do decide to resize, check out "Scaling & Rotating" on page 177 in Chapter 7Visible mixels: face ≠ hammer ≠ wrench ≠ table ≠girlVisible mixels: background ≠ numbers ≠ characters ≠ grass Mixels Even more importantly, NEVER EVER mix different aspect ratios. These are called Mixels. Rotated mixels are often included. Never combine rotated or resized pixel art in a piece. Only include mixels for gameplay purposes. You can have turning arms, aiming guns or anything that needs smooth 360°motions. Gameplay takes center stage, Graphics can take a step back. 100% 150%125%50% original 200% 300%250% 1x 1,5x1,25x0.5x 2x 3x2,5x Rotated mixels Rotated mixels can really look out of place or not faithful to pixel art visuals.Owlboytm (Multiplatform)Duckgametm (Multiplatform)Super Mario tm Maker (Wii U)by StevenMby MichafrarAdventure Time: EtDBIDK!
22 Line art Chapter 1
23Earthbound tm (SNES)Tekkentm Card Challenge (WonderSwan) Line art is the base of your sprite regardless of whether you start with shapes, loose sketches or no line art at all! It will be applied at some point in the process. Consistency is essential. Natural brushstrokes don’t look great in pixels! IntroductionMother 3 (GBA)by guest artist AnubisJr.
24 Keep the same line width throughout the whole sprite! Sprites are often small graphics! As a result, you will notice that in games … Most pixel art has 1px line art.By Michafrar It makes sprites more readable and appealing. Prefer thicker lines? Make sure to keep the line art clean and easy to follow. Some lines however can be thinner than the rest of the drawing if the style requires it Thin lines are better for small areas.SNK vs Capcom: Card Fighters' Clash (Neo Geo)Tekkentm Card Challenge (WonderSwan)Mother 3 (GBA)Pokémon® Pinball: Ruby & Sapphire (GBA)
25 Lines and curves Drawing a line in a single stroke is harder than it looks. That is because of jaggies. These are jagged parts of a line or curve. Oh no! Much better! So how do you fix your lines with jaggies? Easy! There is a process that works for every type of line!
26 The key thing to remember with jaggies? Don’t surround a row of pixels with bigger ones. Keep in mindKeep in mind You do NOT need to draw curves pixel by pixel.That’s too much work! Draw the line first and thenDraw the line first and then chisel away parts youchisel away parts you don’t need.don’t need. While some programs offer better pixel brushes that can avoid thicker parts, but in the end : jaggies are UNAVOIDABLE. So fix them!UNAVOIDABLE. So fix them!This will happen ALL the time!
27 Pixel art loves lines that have the same “stairs”, staircases with the same number of pixels on each step. The steeper the line, the bigger the ‘step’! DON’T MIX STAIRCASES. If you have stairs of TWO-pixel steps, don’t include a ONE pixel step. Keep your staircase equal and avoid jaggies. By Steven M. There’s no need to redraw the lines or CTRL+Z for every mistake. Remember to use the selection tool. You can also chisel away pixels. Chip away or add pixels to get some nice lines!
28 As I’ve described, chiselling away at your lines is much more efficient than drawing the line. This works for every problem, and you can see below some examples to show it. A beginner's tip : imagine your pixelart like HD lines in order to spot jaggies Jagged... Fixed! So if you’re not sure, draw over it and you’ll see the mistakes. Fixed Originals Some programs help you make smoother lines with “pixel perfect” options. However the outcome isn’t perfect. Don’t rely on these options, pixel by pixel is still the way to go. Pro Motion Aseprite Pixel-Logic BonusPixel-Logic Bonus Still unsure how to clean up lines? No problem! Throughout the guide I’ll provide extra tips, starting here!
29 Lines are everywhere Even without lines, any shape within your pixel art has an edge.Guest artist: Anubisjr When 2 shapes touch each other, they forms a line. Shadows also create “lines”. This edge is just like all other pixel art lines. When you shade a smooth surface your shading shouldn’t have jaggies either!The Guided Fate Paradox (PS3) Graphics with no line art, such as Curses ‘N Chaos (PC/PS4), still have smooth-looking pixelart. Lineless pixel art is handy for backgrounds. For more examples, check pg 30.
30 Outlines The outline is a major attribute that defines a sprite’s style. You may have noticed that pixelart comes in many shapes and forms. Like any art! Here are the types of outlines I identify: Super Mario Brotherstm (NES), Metroidtm (NES), Sonic 3 and Knuckles (Mega Drive), Castlevania SotN (PS1), Streets of Rage (Mega Drive), Cave Story + (PC), Mario & Luigi: Dream Team (3DS), There is no outline to distinguish it from the background. The shapes are usually solid colours and occasionally have lines inside it. Don’t be fooled; even without lines, you still need to remove jaggies! No outline
31 This type of contour uses black outlines but also has black lines inside the sprite. This was very effective in the 8-bit era as a way to circumvent the limitations. Today,it makes sprites rather muddy. Well, not ALL sprites...! Shatterhand (NES), LoZ: Link to the Past (SNES) , Yoshi’s Island (SNES), Warioware Twisted (GBA), Shonen Jump: Jump Ultimate Stars (DS) , Mother 3 (GBA), Scott Pilgrim (Xbox 360) Shovel knight (Multiplatform) Black inline
32 It’s the style that is used commonly for moving sprites, and is very popular with modern handheld games. They feature black outlines around the game's characters, in order to make them easier to see on the device's smaller screen. Note: Your outline can be thick or thin, it is a stylistic choice! Softer outlines will require more Anti-AliasingAnti-Aliasing. WarioLand 4 (GBA), Kirby Superstar Ultra (DS), Mario & Luigi: Bowser’s Inside Story (DS), Magical Taruruuto-Kun (Mega Drive), Chrono Trigger (SNES), Kirby Squeek Squad (DS), Boktai 3 (GBA), Riviera: The Promised Land (GBA) Mario & Luigi: Bowser’s Inside Story (DS) Black contour With black contours, only the outer edge has a black outline, but the inside is completely coloured with little to no black. It helps your sprite stand out from backgrounds and look clean! by Michafrar
33 The outline is coloured according to the colour it surrounds. Every part of an object has its own coloured outline. The outline of a block will be the darkest shade of the inner block. Adventures of Batman and Robin (SNES), Enchanted (GBA), Congo’s Caper (SNES), Hamelin No Violin Damaki (SNES), DK King of Swing (GBA), Castlevania: AoS (GBA), Monster World IV (Genesis), Metroid Fusion (GBA) Slime Mori Mori DQ (GBA) Coloured outline by Michafrar Sam and Max Hit the Road (PC) Note: The outline is always a single, solid, colour.
34 Shaded outlines Shaded outlines are outlines with shading! It’s the most common type of outline in pixel art, and works great with backgrounds. It blends perfectly with the environment. Light or dark background, it doesn’t matter! Ristar (Genesis), Pulseman (Genesis), Alundra (PS1), Parodius Da (SNES), The Legend of Zeldatm: Minish Cap (GBA), Super Pocket Fighter (Saturn), Shantaetm: Risky’s Revenge (DSi) Metroid: Zero Mission (GBA)Metroid: Zero Mission (GBA)
35 Pokémon sprites from the Gameboy Advance up to the Nintendo DS feature shaded outlines. They’re timeless. The colourful outline makes them so great. Pokémon sprites are a great example for shaded outlines. Check them out. It may be hard to see the outline fully without zooming in or with inner colour. Let’s remove everything -but- the outline. It’s super effective! It’s now obvious that: 1) The line art is clearly shaded. 2) The light source is visible. Pokémontm Platinum s (NDS) Case example: Pokémon sprites Another type of shaded outlines are called Selective Outlines. On light backgrounds, these outlines look like broken lines, but on darker backgrounds that effect looks better. More on that in the chapter Subpixeling on page 197. by Michafrar
36 Namco x Capcom (PS2) Marvel vs Capcom 2 (Arcade, Dreamcast, PS2) Streetfighter III: 3rd Strike (Arcade, Dreamcast)
37 Here’s a summary of the different types of outlines, different outlines can completely change the style of a sprite! Regardless of what technique you use, line art will be applied at any stage of the process. Conclusion Introduction Lines & Curves Lines Are Everywhere Food for thought Types of Outlines No Outlines Black Inlines Black Contours Coloured Outlines Selective Outlines No outline Shaded outline Coloured Black contour Black inside
38 Anti-Aliasing Chapter 2
39 Introduction Anti-aliasing helps you smooth out edges by placing pixels in little corners. Pay attention to where these little blocks are: they usually blend dark areas with light areas. They’re sometimes found between 2 shades too, smoothing highlights from shadows!Starfox 2 (SNES Classic Edition) Anti-aliasing is abbreviated as “AA”. A picture is worth a thousand words. So for the next few pages… Zoom in! Anti aliasing bridges the gap between 2 colours.
40 Temmie’s work focuses on smooth and easy to read line work. Although there seems to be little anti-aliasing at first glance, she uses it quite strategically. Line weight Anti-aliasing is used to add or remove some line weight. By adding AA, you can make things look thicker or thinner. Clarity Characters, faces and eyes usually draw people’s attention. It’s best to make them clear, recognizable and easy to read. Detail This area contains a lot of small curves. Smaller curves are often more jagged. It requires more AA than bigger curves. High contrast If you have 2 highly contrasting colours, try blending them using some intermediary pixels. When is it necessary? Anti-Aliasing is used to smooth out those unavoidable jaggies.By guest artist Temmie Chang
41 AA or no AA? No matter the style, anti-aliasing is of utmost importance for pixelart. Should I use anti-aliasing or not? Is it worth my time? Let’s compare. no anti-aliasingoriginal graphics The sprite without AA feels blocky. The original graphics had an abundance of AA. In the game, the sprite was displayed on a white background. Since sprites could have a total of 4 colours, they maximized AA. The black sprite without AA feels harsh on a pure white background. Most of the graphics in this game are entirely aliased, sharp, and jagged. This was done to mimic Ko Takeuchi’s art style. However, by adding slight AA the sprites have a softer look. anti-aliasedoriginal graphics Removing the AA makes the portrait more readable, but at a cost: there’s less detail. This was originally displayed on a small gameboy screen. To get the most out of a gameboy palette, it’s best to add AA. no anti-aliasingoriginal graphics Blurry or sharp? no anti-aliasingoriginal graphics For letters, numbers and typography, AA is always the best solution. The Anti-aliasing also gives extra colour for flat colours.Rhythm Heaven/Paradise (NDS)Pokémon Crystal (GBC)Fatal Fury 2 (GameBoy)Mother 1+2 (GBA)
42 with anti-aliasing no anti-aliasing AA will bring out the colour in your piece, but heavy AA turns it blurry. Too much is too much! As a result, colours will pop more around the edges. This really changes the tone and feel of your art. The oranges,reds and blues are much more noticeable. Since AA is placed pixel by pixel, you have total control over its effects! no anti-aliasingheavy anti-aliasing Style & detailby StevenM no anti-aliasingoriginal graphics This is where the lack of anti-aliasing becomes painfully noticeable. This style is all about soft and smooth shapes. Without anti-aliasing, most detail is lost. The original piece had anti-aliasing. But with all the anti-aliasing gone, the picture didn’t lose much quality. It’s hard to tell the difference. AA is just icing on the cake here. With a solid drawing and solid shapes, your pixelart will look appealing, with or without AA. But AA offers more details that you can use to your advantage. The extra details make a big difference on faces or other intricate areas (but not much elsewhere).by Moawling Anti-aliasing no anti-aliasingKirby Super Star Ultra (NDS)character by Nintendo sprite by Michafrar
43 Here, the difference is only noticeable when zoomed in. When these portraits are displayed at a small resolution, you can barely tell the difference. The shapes are clean enough to have minimal anti-aliasing. R: Extra anti-aliasingL: Original graphics original graphics extra anti-aliasing The kangaroo in the original already had anti-aliasing. Can you tell the difference? It’s hardly noticeable. Simple styles don't need AA. no anti-aliasingoriginal graphics This art was down-scaled and touched up manually to fit its limitations. They used AA to preserve the detail of the original art. Without it, it’s looks quite flat. Oh no! The game’s art style was clearly going for a crayon look. This sprites therefore need to be crisp and sharp. Anti-aliasing isn't needed. with anti-aliasingoriginal graphicsScribblenauts (NDS)Advance Wars (GBA)SMW2: Yoshi’s island (SNES)Metal Gear: Ghost Babel (GBC)
44 Conclusion Anti-Aliased Aliased PROSPROS CONSCONS Smooths curves on small sprites Necessary for large sprites - Lots of work if overdone - Blurs tiny sprites Small sprites are more readable Limits your colours Faster - Creates jagged lineart - Sharp & blocky Sub-pixeling animation ++ ++ ++ ++ ++ ++ -- -- -- -- Remember that your base colours are more important when you have no AA. Sometimes it's just a matter of what you like the most. What do you prefer? no anti-aliasingoriginal graphics These sprites are scaled down drawings that have been touched up by pixel artists. Without AA, there is very little difference. Low contrast colours don’t need much AA.by Shawn Martins no anti-aliasingoriginal graphicsFuka Kazamatsuri from Disgaea 4 (PS3).Mario Party Advance (GBA)
45 How to apply? AA is simply putting pixels in little corners to make lines and shapes smoother. It’s kind of like cushions on a couch! These examples should help you identify good AA from bad AA. They range from simple to complex. How many blocks do I add? About half of the length of the line. Too little is better than too much. How many shades do I use? One to start practicing. Two for smoother results. Three if you have enough colours and feel confident. Too much AA blurs the line between pixel art and vector art! Which corners do I fill? Find out on the next couple of pages! I recommend a mix of 1 and 2 shades. Go look up some of your favourite sprites that have AA. Try and see how they do it. See what suits YOU. No AA AA incorrect
46 Flat curves These are flat curves. They’re rarely found in small sprites, but quite common in larger pixel art. If you’re not happy with the aliased look, you can still add AA. longer steps = longer AAVampire Savior 2/Darkstalkers 3 (Arcade/PS1) Remember You can have shorter blocks. It’s completely up to you! Always make sure to zoom out and judge for yourself. There are always exceptions. Longer AA isn’t always necessary. Focus on these areas.
47 Digital pictures are not pixel art, but they are technically made up of pixels on a screen. The technical term for this type is a raster image, or simply put: “images on a pixel grid”. But we can learn from raster graphics to understand Anti-aliasing better. Let’s zoom in on a very horizontal flat curve. We’ll then compare it to a curve that is more diagonal. Notice how the flatter the curve is, the more colours there are. Of course, pixel art would get too blurry with too many colours. It wouldn’t resemble traditional pixel art anymore, it would resemble a regular image instead. Summary longer steps = more shades of AA
48 45° lines Anti-aliasing on 45° lines is rare but there are exceptions! Here, NES limitations showcase the lack of AA nicely. With fewer colours, there is little to no need for AA.Kirby’s Adventure (NES) Sprites with more colours, offer more variety:Kirby’s Super Star Ultra (3DS)Mega Man Battle Chip Challenge (GBA) The centre of the curve can be either lighter or darker; it depends on the type of curve.
49 Convex curves The centre has light colours. The ends have dark colours. The centre has dark colours. The ends have light colours. Darker or lighter pixels change the thickness of the 45° part. Concave curves
50 8.8. Pixel-Logic BonusPixel-Logic Bonus Still unsure how to give a 45° line a slight curve? No problem! Here is an example of a curved outline. 1.1. Lineart 3.3. + anti-aliasing 2.2. colour the outline Let's zoom in on the 45° lines of this banana. a lighter pixel on one side ... and the other side With lighter pixels of AA, we rounded the edges. So we now have a nicer curve The lighter pixels curve the sides of the line The darker ones create the tip of the curve ATTENTION: This banana is on a dark background. On a light background, these pixels may stand out. It's best to keep the outline colour solid. More information on page 197. Look at the other side of the banana. What happens here? By colouring pixels darker or lighter, you create the illusion of rounder lines If the Banana has a black outline, this AA works too!by Michafrar
51 Jagged lines Wish to stop there? That's fine, the line is smooth enough. This technique also works for other types of jagged lines! What to do with a jagged line? They are uncommon, but they exist nonetheless. Try this trick. Fill in the biggest gaps Imagine a line Want to go even smoother? Try this. Smaller gaps? = Lighter colour! Remember it's only optional More? Sure, but don't overdo itby Michafrar AA looks good on the inside of the sprite. but it doesn't look good on the outside. OO ✓✓ ✓✓ fuller lines are better
52By AnubisJr.By Temmie ChangDarkstalkers 3/ Vampire Savior (Arcade/PS1) More examples
53 Line weight Manipulating colours helps you make lines look thicker or thinner, even at 1 px! Mouths usually tend to be just a simple line. So let’s take mouths as an example! You can even add lighter lines on the tip of a curve to recreate brushstrokes (see orange and cyan examples) Just play around, but don’t use too many shades!Breath of Fire IV (PS1) Dimples are lightlight, lips are dark. Dimples are dark and appear thicker. Look! What feels thicker or thinner? DARKDARK = THICKER LIGHTLIGHT = THINNER
54 Observe the lines on the following sprites. Focus on their faces. Darker pixels makes lines appear thicker. lighter pixels makes lines sharper and thinner.by AnubisJr.Disgaea 4 (PS3) Look how easily a line can become thicker or thinner. The colours and the pixel placements make all the difference! There’s no point overdoing AA. You can get the same result with less effort. In the example on the right, the blurred side is almost identical in all stages. So there’s no need to overdo AA. Just stick to 1 or 2 colours. Line weight is complex. It’s the basis of sub- pixel animation. Find out more in the chapter: “Sub-pixeling”. RememberDisgaea D:2 (PS3)
55 Banding Banding is BAD. This happens when two rows of pixels perfectly hug each other. Sounds cute, but it really isn’t! They are the same length and stick to each other.Noobow ぬ〜ぼ〜 (Game Boy) It can get worse:Ghostbusters (Genesis/Megadrive) The worst part is, the highlighted parts are just the tip of the iceberg. There’s so much banding to be found here.Mother 1 / Earthbound Beginnings (Famicom/WiiU)
56““ Some beginners might be thinking: “I don’t see a problem with it?” This is because you’re looking at it zoomed in. When viewed at 1x or 2x size, it really bleeds into the sprite, and that’s when you notice banding. Why is this so bad? It makes your curves look blocky. It makes lines appear thicker than you originally wanted them to be. It blurs your outline too much. It follows the outline perfectly, resulting in pillowshading.by Michafrar
57 How do I fix it?Basketball Nightmares (Master System) before Remove a pixel or two from the edge. Add a pixel or two to the edge. Use darker shades of Anti-aliasing. Check the colour coded areas to see these fixes! afterNoobow ぬ〜ぼ〜 (Game Boy) before after Even more banding?! Parallel banding is a rare problem. It's when several bands of pixels are stacked on top of each other in parallel rows. There are many ways to fix this issue, so just keep moving pixels around. 3 different solutions! Banding is bad, but don’t worry. Sometimes it’s unavoidable. When you see it … fix it! Just try to eliminate it as much as you can!by Michafrar
58 If banding were to occur in a regular drawing, it would look like this: Note that this is just cell shaded. It would far get worse if it were soft-shaded. Another way to prove banding is a pain in the neck is by blurring the image. Just...ew! Pixel-Logic BonusPixel-Logic Bonus Still don’t see what’s so wrong about banding? Let’s examine.
59 Introduction To AA or not to AA? When is it necessary? How to apply Flat curves 45 ° lines Jagged lines Line weight Banding Food for thought Techniques Avoid Anti-aliasing is a big subject. Don’t worry if you feel overwhelmed. Most of these techniques will become instinctive over time as you make more pixel art. Some people make pixel art without any AA and they do an incredibly beautiful job! Remember to look up videogames that inspire you and see how they use AA. Conclusionby Thernz
60 Colour Chapter 3
61 Introduction Colours are lots of fun but it can get tricky. They are the most subjective part of sprites as they build the atmosphere of a game /picture.Batman (1989 , NES)Shin Megami Tensei (1992 ,SNES)Mega man 6 (1994 , NES)Super Metroid (1994 ,SNES)Tales of Phantasia (1995, SNES)SMW2: Yoshi’s Island (1995, SNES)Red Earth (1996 , Arcade)Breath of Fire IV (2000 , PS1)
62Left : Drawn to Life (2007, NDS) Top right : Shovel Knight (2014, Various) Bottom right : Mighty Switch Force (2013, WiiU/3DS) Colour theory is a universal skill. It can be applied to all kinds of arts: from painting and photography to Interior design. We won’t delve into much detail here, because it’s something already taught in schools and tutorials regarding colour theory are widely spread across the internet. Colours can make or break an image, so make sure you know your basic colour theory skills. For Pixel-logic we will just focus on aspects specifically for pixel art and game design. SOME SECTIONS HAVE COLOURS WITH LOW BRIGHTNESS. Colours are not displayed the same way on all monitors. It’s a common issue with art. Please adjust your settings!
63 How to pick colours? Pixel art is a digital art. Unlike traditional media, making colours works with sliders. Here are the 3 factors that make up a colour for digital art. You can find them in all software. For this book, we will use Method 1 as the standard for future pages and explanations that refer to colour picking. Method 1 - The 3 Colour sliders Note: Some programs use Brightness instead of Value. It’s just a different name. When the third slider says Luminosity it goes towards white rather than the pure hue. Most, if not all programs should have extra colour pickers. These 3 factors are not displayed the same way in each program! Hue Saturation ValueHue + Saturation / ValueValue + Saturation / HueHue + Value / Saturation MSPaint, GraphicsGale Aseprite, Paint Tool SAI , Photoshop, Clip Studio Paint Pro Motion , Photoshop, Some programs use triangles or circles for picking colours instead of a square. Don’t worry: You’ll always have what you need.
64 Method 2 – Red, Green, Blue RGB, is an additive colouring method: To obtain lighter colours, you add more of each value. To obtain pure greys, give the same value to each slider. To obtain duller colours, move the sliders closer together. Some programs help you mix colours by showing a preview of what colours you can possibly make.
65 Why make palettes? Having a palette doesn’t necessarily mean literally having colours on the side. You can still eye-drop colours within your pixel art. Don’t worry. Saves you time Keeps you organized You save more time eye dropping the same colours, instead of recreating new ones or blending them. If you’re using loads of colours, you might get lost. It’s a hassle trying to find colours if you’re working with big art. The more shades you have, the harder it is to animate sprites. You don’t want colours to flash when your pixel art animates. Makes animation easier Here, a palette is not really needed here, just eye drop! However ,this definitely requires a palette Some programs will automatically generate a palette for you, so you don’t have to! Guest artist: Justin Cyr Guest artist: Ahruon
66 Colour ramps These are ramps. Simple! Pixel art and having a low amount of colours go hand in hand. A good way to do that, is by reusing the same colours across different shades. You’re not obliged to do this, but it can create some interesting harmonies. You might think: “This is confusing to me”. It doesn’t matter how you display your palette. As long as YOU know how to use it. See? You can still mix ramps! X = Shared colours Palette by Cocefi
67 Hue shifting Hue shifting, also known as “coloured shadows” can also be applied to any other visual art. It makes your art more colourful and appealing to look at. Method 1 - Regular hue shift Light brown, used for every shade. The shadow is boring black. With every shade, they become more red. The shadow is now warm red. You can give green different moods by giving highlights and shadows different colours. Do this by shifting the hue sliders. It’s up to you how much you shift hues. You can hue shift left or right on the colour slider. The A ramps hue shift towards yellow slightly, whereas the B ramps hue shift towards purple. The A ramps look a bit odd. The B ramps are probably what you’re familiar with. A AB B
68Seiken Densetsu 3 (1995 , SNES)Sonic Rush Adventure (2007 , N DS)Mighty Gunvolt (2014 , 3DS)Sonic 3 (1994 , Genesis)Coropata (2009 , N DS)Sonic Rush Adventure (2007 , N DS)
69 Yellow is the brightest colour of the rainbow. Purple is the darkest. This is why generally people often hue shift from yellow to purple. You can have subtle hue shift or drastic hue shift. It’s a matter of preference. Method 2 - Multiply layers Instead of manually hue shifting ever colour ramp, you can experiment with shadows by using multiply layers. You can find them in more complex software. Once you found some cool combinations just eye-drop away! The examples just show blue green and magenta, but you can use other colours! Palette by Cocefi Even in greyscale you can notice the principle in action!
70 Pixel-Logic Bonus Hue-shifting isn’t the only thing Playing with saturation is important too! Saturation shift isn’t just like hue shift. Hue is used to create an atmosphere or feeling. Saturation is used to highlight a particular area of your shading. Don’t think of colours like numbers. Just experiment, and see what suits you. All colours are the same saturation Mixed saturation Saturated shadows- Desaturated highlights Desaturated shadows - Saturated highlights 1 shade is heavily saturated The lighter shade is vibrant. The darker shade is dull. The lighter shade is dull. The darker shade is vibrant. Guest artist: Ahruon
71 Take a look at this crab, in all its versions. See the differences? Small colour choices can have big effects! These are just a few methods to alter colours. The key is to experiment and study other pictures you like. Hue and saturation are ESSENTIAL to shading and anti-aliasing. Conclusion by Michafrar no colour flat colours no hue shift + hue shift green tint blue tint magenta tint
72 Black tones You can do so much more to add style to your sprites! Quite a few artists and games add a colour tint to the black or choose a dark grey.Fire Emblem (GBA), Mega Man 7 (SNES), Breath of Fire IV (PS1) Mario Party Advance (GBA), Legend of Zeldatm: Link to the Past (SNES), Mario & Luigi: Dream Team (NDS), Earthbound (SNES), Chrono Trigger (SNES), Breath of Fire IV (PS1) There isn’t a technical reason why pixel artists or games choose to do this. It has got nothing to do with limitations. It’s purely aesthetic!Mario & Luigi: Partners in Time (NDS)Super Mario Kart (SNES)SMW2: Yoshi’s Island (SNES)Mario & Luigi: Superstar Saga (GBA)Mario Party Advance (GBA)SMW2: Yoshi’s Island (GBA)Yoshi’s Island DS (NDS)
73 Black tones are not limited by game or style. Even within the same game or within the same style, you can have subtle differences: Can’t see the subtle differences? Let’s brighten them up a little bit. Even though your monitor does not display these colours, remember that your pixel art is being shared online, on different platforms or different systems. Brightness will vary from each device. dull purple pure black dark brown dull cyanPokémon Black & White (2011, NDS)
74 Using greys Greys are like the "Ditto" of colours. They can easily camouflage their way into a sprite without you even realizing it. ... Especially with a limited palette. It works well with palettes that have special lightsources atmospheres: night time palettes, fiery red environments, toxic green glow and so much more! When you blend 2 complementary colours, you obtain almost a pure grey. It makes grey perfect for blending. Not pretty, but useful! This is a tree from Boktai: The Sun Is In Your Hand (2003, GBA). The overall mood and lighting of this scene is purple, and as such all the colours appear different than their usual hues. The tree trunk looks brown, but under a night-time light. It’s actually a grey with hints of purple. If you de-saturate colours, you can eas- ily fool people’s eyes and mimic colours under a different light! That’s why greys can easily blend in. Use greys to substitute colours. ! Greys cancels out colours. It makes them neutral. =The Chaos Engine (1993, Amiga CD32)
75 Picking colours I Guest writer: Cocefi Try avoiding pure blacks unless it’s truly necessary. You can use dark brown, deep purple, dark green or even dark grey instead! Give shadows a colour tint too. Whenever possible, compliment the shadow colour with the highlight. The soft pink roof has a dull purple shadow. Cocefi’s highlights tend to have bright saturated colours. His shadows are a little bit desaturated and hue shift. Don’t be afraid to try weird colour combinations. There’s a lot of Trial & Error involved. Make sure to fiddle around with the Hue/Saturation sliders, not just brightness for shading. Black tones Shadows Experimenting
76 Picking colours II Guest writer: Syosa (しょさ) My favourite colour is a dark purple (R,G,B)=(84,58,84). I can make so many colour ramps and gradients from one single colour. Reusing the same shadow colours makes pixel art looks more beautiful, I think. When making colour ramps by the colour system (red, yellow, green...). I put dark colours and light colours together as much as possible. This is because it is easier to get an overall harmonised hue. The amount of colours on your colour ramps depends on the size of your pixel art. For small sprites, one ramp of 2-3 colours is enough, even if you have lots of different colours. You can’t tell the difference between 2 similar colours at that size. It doesn’t have any impact.
77 I change colours constantly. Take some time to look back. Look at pixel art by others then look at your own picture again. If I still feel uneasy after looking back over the colours, I change them all one-by-one. This really depends on what the pixel art will be used for. For prints and crafts Colours can be severely restricted, so fix it accordingly. Syosa is referring here to the CYMK print limitation that comes with printing digital work. Colours will change in according to this palette, so be wary when using RGB for print. For web use I embed the image in a sRGB ICC profile which allows me to see and deal with the effects of colour-change within browser. For games Sometimes the colours do not match with those of other images, so even when the colouring of the image is fine in itself, I sometimes still end up adjusting it. Syosa’s advice was translated from his native language: Japanese. Translation: Alexander Hicks Changing colours during progress Colour correction
78 Picking colours III Guest writer: Jinn While body language and facial expression can set the mood, painting with warmer or colder colours can increase the mood! Greys tend to be neutral colours. Using blues, purples and teals can give you the impression of a colder/sadder emotion, while reds, oranges and yellows can give a warmer/happier emotion! Don’t be afraid to play with your colour ramps! Diversifying your colours will make your work more interesting to look at. It will break the monochromatic look. You can achieve this by using different hues in the same ramp. Just make sure the colours will still blend well together. Experimentation is the key! Colours and mood
79 Contrast Guest writer: Paul Veer Readability is the #1 priority when choosing colours. I like to choose colours that add a lot of contrast to sprites. I always try to have 1 main colour for each character I design. This colour either : makes up most of the character or highlights the most important features I then use a sub colour to add extra features; usually a colour that contrasts a lot with the main colour. Contrast can be used to make a character stand out from the background. This is specifically aimed towards games. This isn’t an issue with a static illustration, though. Fish is mostly green. I use a yellow to highlight his mouth and fins to emphasize his fish-like appearance. The brighter yellow contrasts well with the green. If a black outline defined those details, the sprite would be muddy and less readable. A precious waste of pixels and space! Paul introduced a very important concept: Readability, which will be the subject of Chapter 4.
80 Different limitations Pixel art is born from limitations and colours can be affected by these limits. Today, there are almost no restrictions, but artists still like to challenge themselves! Sometimes it can create beautiful effects. However, when the general public talks about "bit"-graphics, they confuse the console’s processing power with the colour display. Consoles with the same microprocessor power don’t have the same colour rules. This confusion lead popular culture to refer to graphics from consoles before 1990 as 8-bit, and 16-bit for graphics after 1990 . Most people see the lack of colours, but they aren’t aware of the exact rules and limitations. Even as of 2015, modern day .GIF image files still have a colour limitation of 256 colours. The format last updated in 1989 and is still 8 bits per pixel. 1 bit allows for 2 colours. In math, 256 = 2 to the power of 8 (=28). Look up the limitations of each console, or computer for more info. You’ll be surprised! NES Commodore64 Sega Master System ZX Spectrum Double Dragon looks different on each 8-bit console
81 Sprites with limited colours Note: You don’t have to limit your colours. It’s a personal choice. This section is for people who want to replicate old video games, hacking a 2D video game or like to have fun with limitations. 1 colour you should always include in the total colour count is transparency. For the sake of convenience, I will exclude transparency from the examples below. Reduced the colours from 24 to 20. • Replaced the greys with the skin tones. • The white shirt uses the skin tone. Not bad. • Removed the darkest teal. It was barely visible. My sprite originally had 25 colours (24 + transparency). There is 1 colour ramp for every main colour. Yellow – Skin tone – Brown – Teal – Green – Grey 15 colours. This is the final version I decided to use. 16 colours is usually the limit for most sprites. • Fused the skin tones with the brown hair. • Green and teal now share the same highlight. • Removed the orange AA: it was barely visible. 10 colours. The sprite is still intact. It doesn’t look weird ….yet. • Swapped the yellow out for a skin tone. • Recoloured the greens with the teal ramp. • Fused the darkest shades with each other
82 Beyond 10 colours this particular sprite loses its quality, colours and detail. However, each sprite is different. There is no “one rule fits all” with colours. Step by step summary
83 Scenes with limited colours Guest writer: Jinn Re-use your colours to keep your palette small. Colours can be re-used in the same piece without losing its value. You can place colours together that would otherwise belong to different ramps! The reds on the hair = the bed and the night stand. The dark skin tones = the bedsheets, the pillow and the wall. The light skin tones = the candle. The key is to diversify your colours as much as possible. Having different objects with the same colour touching directly will make them blend. The sheets and bed have different colours, so they don’t blend, while skin tone and sheets are the same colour, so they feel like a whole. The hair is purposefully red to separate the girl from the wall.
84 Extreme limitation Guest writer: Cocefi Sometimes for some extreme reason, we have to work with a severely limited ugly palette. EWWW! Luckily, we can make it more intuitive to use by rearranging the colours by how we perceive the colours in terms of luminosity. Some colours in the rainbow “feel” darker and lighter. Groovy~ Guess you could call it Xtreme Hue-shifting. You can extend the palette further with dithering too. But be warned: excessive dithering can make a surface look textured or rough.
85 Conclusion Colour is all about context. It doesn’t just create the mood or atmosphere of your pixel art, it also defines the style. Colours can easily fool the eye, and with some practice, you’ll be able to use them to your advantage.Pokémon Heart Gold/Soul Silver (2009, DS) Colouring doesn’t stop at this chapter. Many other aspects use colours to their advantage to get the most out of pixel art. Just make sure to refresh your colour theory and remember: Experiment! Introduction How to pick colours Why make palettes? Colour ramps Hue shifting Black tones Greys Choosing colours I-III Contrast Different limitations Sprites Scenes Extreme limitation Food for thought Practice Limitations (optional)
86 Readability Chapter 4
87 Introduction Ever looked at a sprite and wondered: It's easy to misinterpret small sprites because they lack detail. The Legend of Zelda: a Link to the Past had some muddy sprites. Agahnim's sprite is an infamous example of misinterpretation. So is he wearing a hat or is it a face? Readability means Clarity. How easy is it for the viewer to understand what you drew? How well does your pixel art convey what you’re TRYING to tell your audience? How well does your sprite read? “What is this supposed to be? “
88 Size matters... Is Mario smiling or shocked when you lose a life in Mario 3? At 16x16 pixels, it’s hard to tell he’s shocked with his moustache. It's easier to tell on a bigger canvas, though. SMALLER sprites make it HARDER to convey things.Super Mario Bros (NES)Super Mario Bros 3 (NES)Super Mario Bros 2 (NES)Super Mario World (SNES)Super Mario Land (GB) Big sprites need clean lines and solid drawings. Small sprites need recognizable features for readability. You can’t squeeze details into tiny sprites, so make sure to adapt character designs. The size of your sprite and canvas will determine what your focus should be.Guest artist: SyosaSuper Mario Land 2 (GB)
89 ...but pixels matter more! Bigger sprites have few readability issues. Smaller sprites tend to be a bit trickier to interpret. Makes sense right? But it’s not that simple. Super Mario Kart (SNES) had improved Yoshi sprites for the Japanese version. When he shrinks on screen, he gets less READABLE. Does he still look like Yoshi? Even within the same canvas, your sprites can ALWAYS be improved.Guest artist: Neorice/ Guido Bos (@Neoriceisgood)
90 Case Study: Cryamore One of the most important decisions in the pre-development of Cryamore was the sprite size. Original sprite model ~190px tall 70% of her original model ~130 px tall PROS: Clean and detailed at high res. More room to animate. CONS: Time and effort for animation. PROS: Moderate high res quality. Frames are finished sooner. Simplified facial expressions. CONS: More readability issues, less HD. Less detail for complex character design.
91““ We were kinda setting the bar extremely high when it comes to ultra-high res HD sprites. [...] Frankly, it would’ve made no difference to just hand draw it at that point. Of course, we could just keep the HD sprites and reduce the frame count, but that would make things look ten times cheaper, [...] So, we sat back and took a constructive approach at the way we were doing things, detached from the emotional appeal of how much we were in love with this look. Cryamore Dev-Blog (2015)Cryamore Dev-Blog (2015) The smaller the sprite animation, the smoother the illusion of movement is. Just by the size being cut down, animations will look even more fluid. Smaller sprites also allow you swap costumes more easily! The line between binary art and pixel art starts to blur when sprites get too big. Games like Persona 4 Arena (PS3) and Dengeki Bunko Fighting Climax (PS3) are borderline binary art.
92 This sprite from Pokémon Red/Blue (Game Boy) is meant to be a boy playing his Game Boy. The sprite is inside a 16x16 canvas. However many people see this as a boy holding a cup. Most of this object looks white. It has 2 black pixels and 2 grey ones to show the shadow of the rim. Let’s move the pixels around and see if we can fix it. If we change the sprite drastically, we risk creating new readability problems. Right now it looks like the Game boy became his shirt, and his torso. We can extend the cup and move it up covering the face even more, but this could easily look like a beard or a flute. It’s too muddy. We now have a flat grey shape with a white line of 4 px wide. The white high- light makes the object more 3D. But it still looks like a random box. By simply adding a 2px line to define the Game boy’s cartridge slot, it works! This looks more like a kid holding a Game boy! For small sprites, simplicity usually works. Don’t overdo details and stick to simple shapes. Pixel-Logic BonusPixel-Logic Bonus It's normal to edit a sprite over and over Make multiple versions and have people pick, if you can't make up your mind!
93 Very small resolutions can easily get problematic as every pixel, including its colour, makes a big difference in the whole piece. That's why pixel placement plays an important role so your viewers can understand your work. One pixel might just change how people interpret it!Chasm (Multi-platform) (2018) Changing just a few pixels can make this bat: Why every pixel matters I Guest writer: Glauber Kotaki
94 Why every pixel matters II Older video-game graphics may look small, but the placement of each pixel is not trivial! A tiny area like 6 by 6 pixels can offer you a large amount of variety!Characters from Technōs’ Crash ‘n’ the boys & River City Ransom (NES/Famicom) The Kunio-kun series made each character look different by slightly adjusting pixels of only their eyes and hairstyles! Those 2 elements were enough to show diversity. Even the smallest pixel can make a difference for low-res graphics. The buzzy beetles from SMB somewhat resembled shells with a big black pearl-like eye.Buzzy beetle from Super Mario Brothers (1985, NES) In the Super Mario All-Stars remake, Buzzy beetles look more like the official concept art.
95 Recognizable features Guest writer: Ellian So you need to create a new sprite. What size does it need to be? Ask yourself a few questions: Do I need to see their hands moving? Do their mouths need to be visible or animated? Must facial expression be readable? Do they wear or hold an item? Does the sword have a magical gem in it? etc. Try to figure out the smallest part that needs to be visible. Once you’ve got that down, it’s easy to figure out the minimal sprite size you can work with. Don’t focus on getting every detail into your sprite . Find out what makes the character unique and represent the concept the best. You’ll often hear “less is more”, and it tends to be true. If you have the slightest doubt about your sprite being readable or not, ask someone else, and don’t tell them what it’s supposed to be! Even better, ask someone with little to no pixel art knowledge. The smallest part I want here is facial expressions. I don’t care about hands or other body parts. No matter how big or small the item is, on a small pixel canvas it needs to be recognizable!
96 Easy to read symbols A few pixels in height can make a BIG difference. With less space, there is little room for many facial features or hands. You still can add them, but they will make your work busy and muddy.By Michafrar If you’re using concept art, photo references or any sort of guiding, be ready to sacrifice unimportant details if necessary. Working in bigger resolutions seems easier, but anything is possible in smaller resolutions. Choose what is essential, and don’t worry if you can't fit in the details.Original art by Monolith Softfanart by Michafrarfanart by guest artist Neorice
97 Symbols I - Hands They are the trickiest to pixel at this size. You won’t have enough space to pixel every finger! Start hands by painting shapes. Line art is too hard to draw. You have barely any space for line art! Drawing lines will confuse you even more. Use flat shapes, then detail. Easy! It will help you picture the hands in 3D in your head. Draw hands like mittens - then - add detail. There is no point highlighting every single finger. You won’t have the space to. Focus on basic shapes. Even when you have fingers spread out, start with mittens. The next few pages will discuss hands and eyes. We’ll tackle more in future chapters. Focus on the index finger and thumb. They define the hands. An opposable thumb and an index finger define the human hand. Those two fingers are enough to show gripping, pinching, pointing, and much more. 2.2. 1.1. 3.3.
98 Draw only 3 fingers and a thumb if needed. Cartoons sometimes draw 4 fingers to simplify animation. Pixel art too. Only draw 5 fingers if you have enough space. Use different colours to separate each finger. You won’t always have room to have all 5 fingers or draw an outline. Hands will stand out when you use different shades and colours. To tell where each finger is, you will have to play around with colour brightness. Highlights and shadows help bring volume to your otherwise flat hands! Draw the hand, shrink it and it use as reference. Working at small scale can be tricky because you can’t “draw” spontaneously. If you’re really having trouble or work under a deadline, draw the hand in your regular painting program and shrink it. Then use it as a reference. You can also study the anti-aliasing to help you out a bit. 4.4. 5.5. 6.6.
99 Symbols II - Eyes Eyes are the main focus on character sprites. Human beings are captivated by emotions and faces. For this reason alone, you should polish your character sprites, may it be animals or humanoids. People identify faces by looking for eyes. They are generally the first thing people notice.Guest artist: Temmie Chang Sometimes there is no space for eyes! Sprites that don’t have enough space for any facial features usually don’t include eyes, as those would be smaller than 1 px. If so, focus on the shadows cast on the face to create the eye area. If you are unsure, look up some references of games.Beyond Oasis (Genesis/Megadrive) Glasses: keep it simple! You might have to sacrifice detail depending on sprite size. You either focus on The glasses themselves and exclude the eyes. OR The top of the frame and exclude the bottom side of the frame.Ace Attorney Investigations: Miles Edgeworth (NDS) 1.1. 2.2. 3.3.Tales of the World: Narikiri Dungeon 3
100 A few pixels make a big difference when zoomed out. It’s hard to tell at first glance, but a few pixels difference can have many outcomes. When zoomed in, some pixel placement may not make ANY sense to you. It may feel unnatural if you’re used to brush strokes. When zoomed out, some pixel combinations may give eyes a completely different feel! A-A and sub-pixeling really come in handy here!Guest artist: Anubis Jr A white shine can also affect the outcome! Sometimes it’s a single pixel, sometimes it’s AA or sub-pixels. Eyes come in many styles, but don’t avoid pixel detail. Eyes usually define your style. With pixels you can do whatever you want in term of eyes. There are no limitations besides your canvas. You can further develop your style, but just like regular art, make sure to polish your technique.Shock Troopers: 2nd Squad (Arcade) Use subtle Anti-aliasing if needed. As seen in Chapter 2, AA can improve clarity. It has nice results!Guest artist: ThernzBy Michafrar 4.4. 5.5. 6.6.
101 Character design & Proportions Head vs. BodySuper Back to the Future 2 (SNES, 1993, Japan exclusive) Big heads have many advantages. They give room for emotions and expressions and clearly show who the character is. It’s a stylistic choice so it may not be suited for every situation. Heads are the main reference for human proportion and they easily vary!Castlevania: Aria of Sorrow (GBA), Castlevania: Dawn of Sorrow (NDS) You may depict characters with realistic proportions. These sprites focus on body language instead. As a result, you should pay attention to volume, shading and anatomy within these restricted areas. Make sure to use silhouettes. Your characters have personality and act differently. Give bodies personality by diversifying poses and body proportions.
102 Different proportions have different functions. The proportions you choose depend mostly on what your sprite is used for. General artwork, user interface, icons, overworld sprites, dialogue sprites, different perspectives: you name it!Lyn - Fire Emblem (GBA)Riou - Suikoden II (PS1) Pixelart finds a way to adapt all character designs to fit small areas.Mario & Luigi: Superstar Saga (GBA) world battle icons dialogue worldbattle A battle B portraitfield world battle cutscene
103 Silhouettes Additional writer: Glauber Kotaki A clear silhouette shows important features like head, limbs, cloth, etc. Anything that highlights the character’s actions or functions is a good start. This is also very useful if you’re going to further animate it. Streets of Rage 2 Streets of Rage 3 Streets of Rage - like most series do - would improve their sprites over time. The silhouette of the character Signal is better in the 3rd instalment as his stance, fist and hairstyle stand out. Drawing a rough silhouette and filling it up with details is a good practice. Try not to overlay things. If that happens, use colour contrast to tell features apart. The silhouette shows little information, but it became readable by using different colours in all sort of ways within the drawing.Chasm (PC, PS4)Duelyst (PC)
104 Colour design Additional writing: Paul Veer Giving your characters a main and secondary colour, gives you nice side effects. Their design becomes more recognizable and more readable. Don’t include unnecessary details on your sprites. Break them down to 2 or 3 main colours like other recognizable characters.Nuclear Throne (PC, Steam) Fish? That’s the green guy with the yellow lips and fins! Rebel? She wears a large blue scarf. Robot? He’s defined by his red scary and ominous eye, separating top and bottom. Well-known characters seen in many games have designs with vibrant colours. Super Mario Sonic the Hedgehog Pikachu Pick the right colours to represent your characters features. Wrong colours lead to confusion. Why were Yoshi’s arms orange?Nose or beak? Swoopers from Super Mario World (SNES) are bats. However their nose was coloured orange, which makes it look like a bird with a beak. Later games fixed this problem. This isn’t due graphical limitations. Probably so that the arms wouldn’t blend with the main body, but alas, they look like the stirrup of his saddle. Super Mario Maker (WiiU) fixed it. This issue is similar to Link’s infamous pink hair from Zelda: LTTP.
105 Light & Shadow Guest writer: Glauber Kotaki Drawing outlines can take a lot of precious space, so playing with dark and light tones instead might do the trick. Light is used to show important details, Dark pixels fill the silhouette or they outlines different features. Light and dark could change roles depending on your background colour or light source. Use both together to form shape, volume and depth.Chasm (PC & PS4) The darkest tones are used not only as shade, but to give depth and outline elements! The brightest tones highlight edges and crucial details. Using a different light source (e.g. in this example, from the bottom) to tell muscles and other body parts apart.Duelyst (PC)
106 Spacing Spacing refers to how far apart things are. If two areas of the pixel drawing touch, the viewer may have a hard time telling what’s going on. Spacing is using limited space to fit in as much information as possible. If you use up too much space in your sprite, give it more room to breathe! Think of it like letter-spacing with fonts! For example: a mouth needs space above and under it, so you can tell it’s a mouth. If the mouth were to touch the chin, or even the nose, it would be unclear what it’s meant to be. One way is to get rid of in-lines. They can hinder readability as seen in Chapter 1 (page 9) , Chapter 3 (page 79) and in this chapter on the previous page you just read! They’re not bad per say, but can be annoying.Nuclear Throne (PC, Steam)
107 In Super Mario Bros 3, the frog suit is meant to have eyes on top of Mario or Luigi’s head. The way pixels are spaced out makes it look like bunny ears instead! Except for one good frame: Mario kicking a shell is undoubtedly a frog head. Let’s use it as a reference to fix this. Not only did I remove the black inline, I simplified the design. The eyes are completely white with no eyelids. The pupils are now 2x2 pixels and don’t blend in with the outline! Here is how we interpret the frog eyes if they were in HD Another way is to re-arrange pixels.Original original editedEdited
108 Moving areas and adding more space Before the remakes of Pokémon Ruby/Sapphire/Emerald (GBA), the character "Brendan" created some confusion: Does he have white hair or a white hat? The back pose doesn’t help the problem:his hair is painted blue and blends with the headband! If we use the space between the eye and the sideburns, we create a tangent! We can create more space for the hair by selecting a part of the face and move it to the right. Now the hair has 2px of width, enough for it to stand out. Make sure to try multiple versions! The palette doesn’t allow for a dark brown. So to paint the hair we have to use the darkest skin tone and make the hair more noticeable. We have to think of a different solution: moving the ear to the left. This way the eyes stay the way they are. When we move the eyes, the face changes too much. None of these versions feel like the original.
109 Sprites on backgrounds Sprites should always stand out from backgrounds for game play purposes. What do you want your audience to focus on? If you are not making a game, you still want to distinguish backgrounds from objects. This happens in other mediums such as Photography. This is for Readability. Adding Outlines Correcting colours Focus (foreground is sharp/background is blurry)Tak: Mojo Mistake (NDS)
110 Case Study: Kirby and the Amazing Mirror Kirby and the Amazing Mirror (GBA) made the decision to include highly detailed paintings as backgrounds. It’s no surprise all 3 techniques were used: Objects and sprites have clear outlines to stand out. The colours of the background are softer to compliment the foreground. The background isn’t in focus and appears more painterly.
111 Anti-aliasing & Dithering Sometimes advanced techniques such as AA and dithering might not get used, as they take up valuable space. As seen in Chapter 2, AA can slightly improve readability when used moderately.From Kirby’s Dream Land 2 (GB) The original King Dedede sprite (left) has subtle AA to clean up the curves. The sprite on the right is just as good, but lacks colour and it’s easy to misinterpret blobs of pixels.From Jewel Master (Genesis) Left: Original. Right: Edited. Dithering (checkered shading) is pretty useless on small scale sprites. Dithering works well on larger pixel art or textured surfaces. It makes your sprite look rougher and less smooth. This will be detailed in the chapter titled: “Dithering". A less common technique nowadays, but useful for colour limitations.
112 How to spot readability issues Use preview thumbnails. When working on a picture, make sure to zoom out a lot. To prevent this you can also just have a permanent preview of what your work looks like at its true resolution. (1x- 100% size) This example is within Graphics Gale. Blurring the picture. Sprites will most likely look blurry on different devices, or even the human eye will blur pixels when viewed from far away. Blurring can also help you find banding. If it looks bad when blurred, you have to go back and fix it in the pixel version. Waifu2x Waifu2x allows you to upscale any picture, not just pixel art. It upscales your work, reduces the noise level and carefully optimizing your work for higher resolutions. When curves don’t look right, you might want to go back and fix those jaggies! It’s…also really cool.By MichafrarBy Michafrar
113 Conclusion Introduction Size matters… …but pixels matter more! Why every pixel matters I Why every pixel matters II Recognizable features Easy to read symbols Symbols I - Hands Symbols II - Eyes Spacing and tangents Anti-Aliasing & Dithering How to spot readability issues Ch. design & Proportion Silhouettes Colour design Light & Shadow Sprites and backgrounds Food for thought Tips and tricks Art design Big or small, pixel art can occasionally create confusion. With limited space we sometimes have to have to sacrifice detail to keep things clear and readable. Remember that every single pixel matters. If you’re unsure of how readable your sprite is, don’t be afraid to go back and fix things! Working small is a challenge, but it will make you realise how important every pixel is.Pokémon Red/Blue/Green/Yellow (GBA)
114 Dithering Chapter 5
115 Introduction Dithering is a technique where you make gradients using limited colours. With only a few colours you can create the illusion of 3 colours or more! Dithering is often associated with the early days of pixelart. Older computer graphics got the most out of their colour limits with dithering techniques. You use patterns to mix colours. ~ 56 unique colours. 7 unique colours. 4 unique colours. Pixel art? Pixel art? Pixel art? ✓✓✓✓OO
116 When to use dithering? Too much dithering causes your pixel art to look ROUGH and GRAINY. It gives pixel art an unnecessary gritty texture. BUT Large cel-shaded gradients without dithering result in FLAT and STRIPED areas. Over time, game graphics added more and more colours. Dithering is less common now. It requires a lot of space to be used properly, so that’s why it’s rarely found in sprites but occasionally in backgrounds. It also harms readability, as seen in Chapter 4, p.111 To understand how often and to what degree dithering is used, study game art and learn from your favourites. You’ll learn a lot from just observation. Try shading with clean shapes first, though.Street Fighter Alpha 2 (Arcade) • Gradients that would otherwise use too many colours to do manually. • Things that don’t animate. Seriously: do NOT animate dithering. • Textures (page 125). • Extreme colour limitations. • Backgrounds: skies, space, vast areas that may otherwise look empty or flat. When should I use dithering?
117 This is a sprite from Monster in My Pocket (NES). The fully dithered version on the top left is the original as it appears in the game within NES limitations. The others are modified versions. + Soft painted or cel-shaded feel DITHERING SMOOTH SHADING PROSPROS CONSCONS + Good for limited colours + Skies or vast backgrounds - Rough and gritty - Time-consuming - Unnecessary texture - Not suitable for sprites - Useless for high colours - Hinders animation - Wobbling frames + Small sprites and tilesets + Readable sprites + Better for animation - May look flat - Doesn’t do gradients well
118 Checkered dithering These are the most common patterns you will find as they offer the most variety. Below are all the levels of brightness made out of checker patterns. Should you get lost, remember each level has a pattern. Checkers, crosses, squares, diamonds, etc. You can choose how many levels of dithering you want between 2 shades. It all comes down to preference or the length of the gradient or how many shades you have. If you get to work on larger areas, you can freestyle the dithering a little bit, as long as you never have a wide pixel (2x1 or 2 pixels that touch each other).Mario Tennis (Game Boy Color)
119 Dithering for curves Curves can be trickier to dither, so make sure to fiddle around to see how it looks. Sometimes you may get double pixels and that looks bad. When this happens, you can select and slide the dithering you’ve already got, rather than redo it. 1 tile, duplicated and mirrored 2 tiles, one being slightly different If your dithering is part of a tile set, double pixels may be unavoidable. This is because tile sets are always an even number of pixels. If this happens, make sure to have 2 different tiles.Ecco the Dolphin (Genesis/Mega Drive)
120 Contrast When you have no colour limitations, you should use dithering with caution. It’s best to avoid it. Your goal is to have dithering seamlessly blend colours without noticing them. If the difference between 2 colours is too high (high contrast), you probably shouldn’t dither.Pokémon Mystery Dungeon 3: Explorers of the Sky (NDS) With low contrast, it feels softer.Earthworm Jim (Genesis/Mega Drive) with high contrast, it’s quite harsh! Checkered dithering is most useful for gradients covering large areas. Keep the contrast low, so the dithering will be smoother.Sonic Advance 2 (GBA)
121 More patterns Parallel lines A type of dithering found in Genesis/Mega Drive games, but can be used today for stylistic purposes. For CRT TV’s, they are more effective "50-50" type dithering than regular checker patterns.Donald Duck in Maui Mallard Lines can be used as smears or blur with limited palettes. Lines work better for blur than checkerboards do. This only works for limited animation, NOT smooth animations. Checkers are more suited for gradients. Parallel lines were suited for buffer-shades and opacity tricks on old CRT televisions. For more examples, check page 131.Pokémon Crystal (GBC)VectormanVectorman
122 Discontinued lines A variant of the parallel lines. The only difference is that this shows more values and levels of gradients. It also adds a neat effect.Beyond Oasis / The Story of Thor (Genesis/Mega Drive)Strip Poker: aSGoC (PC DOS)Pokémon Mystery Dungeon 3: EoS (NDS)Earthworm Jim (Genesis/Mega Drive)Ecco the Dolphin (Genesis/Mega Drive) Dents A variant of checkered dithering or parallel lines. It uses only 1 line of checkerboards. They resemble dents or teeth. This dithering is useful for textures if you have little space. This type isn’t suited for gradients, though!
123 Intertwined ditheringKolibri (Sega 32X) Intertwined dithering (woven, overlapped, etc.) has dithering patches entering other patches. The gradient sometimes overlaps with other gradients. Different patches of checkers are weaved together.Ecco the Dolphin (Genesis/Mega Drive) If you have trouble doing this manually, make 2 layers of dithering, and have them overlap! You can still do this manually, but having 2 layers makes it easier not to get lost!World of Illusion (Mega Drive)
124 Random dithering Randomized dithering doesn’t follow any patterns. You still need to make sure the gradient seamlessly flows from light to dark. Random dithering can be obtained by randomly placing pixels here and there. However, it’s usually the result of filters, photo-manipulation or spray-paint tools.Kirby’s Dreamland 3 (SNES) This isn’t really handcrafted pixelart, so it’s still advised to manually fix it. It can appear quite lazy, so use it in clever ways and on big canvases. This is a gradient reduced to 4 colours with automatic dithering. It still needs a lot of work and it looks like random noise. In most cases, random dithering isn’t recommended. Try to make patterns or tiles out of them (see page 125) Of course, random dithering can be done by hand. You can create this effect from scratch, if you wish. You start by painting several shades of colours and finish by blending the edges with random noise.By Guest artist YAA
125 Stylised dithering Now here’s where things get interesting! The previous forms of dithering were quite rough. With stylised dithering, you can apply your own textures to create gradients without that gritty feel! Remember, that you need space to use these. Get creative! Stylised dithering is a great way to get started and have fun with textures!By MichafrarKirby’s Adventure (NES)Shovel Knight (PC)Street Fighter Alpha: Warriors’ Dream (GBC)
126 You can even take random dithering (page 124) and turn them into repeating tile sets to avoid them looking chaotic. This randomness is controlled, rather than loose.Crash ‘n’ the boys: Street Challenge (NES)by StevenM Gradients are the transition from light to dark. Textures are the feel of the material. Stylised dithering can be a combination or both, or just regular gradients. Textures don’t always need a gradient (from light to dark)! Of course, dithering can show texture, but only for patches, not as gradients. Don’t confuse textures with gradients! These graphics below have textures, but no dithering nor gradients.Guest artist: NeoriceisgoodBy MichafrarGuest artist: Anubis Jr
127 Case Study: SMW2:Yoshi’s Island Yoshi’s Island is bursting with stylized dithering. On this screenshot alone, you can find many examples. Another thing to notice is that Yoshi’s Island chose to have smooth cel-shaded gradients for the sky. There is no dithering and it holds up well. The contrast is low, so the bands of colour feel soft.
128 More than just gradients Blending through cel-shading A modern way to dither is to blend cel-shading. Even with unlimited colours at your disposal, dithering can imitate soft shading. Think of this like small portions of soft shading in an otherwise cel-shaded drawing. The highlight of Gengar’s horn (on the left) blends into the darker main shade, rather than being cel-shaded. You can do the same technique, but just using a buffer-shade in your colour-ramps. This looks fine cel-shaded but dithering looks better here … Mixing colours Dithering can help you blend colours, especially on blurry displays. You’ll only use this technique if you’re working with limited colours, though.Pokémon Fire Red/ Leaf Green (GBA)
129 Let’s see this technique in use with some parallel dithering used in this Mega Drive sprite. The results don’t look pretty by modern standards, but it did look nice on CRT TV’s. Computer graphics after this point would have more colours and even transparent (alpha) layers, so this technique is extremely rare nowadays. However, older graphical displays such as the 4 colour CGA mode hugely benefited from having extra values by blending together cyan, magenta, black and white ! We briefly discussed this in chapter 3 (page 84) where with 4 colours you can easily obtain more values!Space Racer (PC DOS)Donald Duck in Maui Mallard
130 Brushes for dithering? When dithering is too time-consuming, there are ways to use dithering-brushes! Some of these programs use dither patterns or brushes that help you speed things up. No need to “copy-paste” all those checkers. Pro Motion GraphicsGale Aseprite Aseprite (input: CTRL+B) and other programs allow you to make brushes too. More interestingly, game artist and game developer Dan Fessler (@DanFessler) studies HD Index painting for Photoshop which makes dithering easier to manipulate. Article: danfessler.com/blog/hd-index-painting-in-photoshop Preview video: youtu.be/7Q36EyvaYG8 Support the indie game Chasm! www.chasmgame.com Remember pixel art is about control, so make sure to manually fix your results!screenshot by Wildewilco
131 Before transparent layers... The Sega Genesis (Mega Drive) heavily relied on lined dithering. It blends colours when playing the console on lower quality outputs (co-axial cables, RF outputs or composite cables )Comix Zone, Earthworm Jim and Donald Duck in Maui Mallard (Genesis/Megadrive) The Super Nintendo, had dithering in the earliest games, but later games used proper alpha layers.Super Mario World (SNES) Top to bottom:
132 Dithering isn’t new Dithering can be traced back to many older artistic methods. (Cross) hatching is the oldest form of using patterns to show tone and value by using just 1 colour. It can be found in pencil drawings, printmaking, etching, woodblock etc. Pointillism also requires small distinct dots to create an image. Traditional art isn’t limited to a grid, so this way of mixing colours is organic and free-form. Monochrome graphics, such as MacPaint can only show 2 colours: black and white. Many pixel dithering patterns were used to show greyscale.Paul Signac Entrée du port de Marseille (1911)Works by Susan Kare(1984)Megaman, character by Capcom
133 Conclusion Many pixel artists choose not to use dithering. It all comes down to preference. You probably won’t use it much. It can be quite time-consuming and tricky to get right. You can choose to avoid it and stick to clean, solid shapes. Remember: LESS is MORE. Dithering is a powerful tool nonetheless. There are some marvellous things to create with each pattern. If you do choose to have dithering, use it with moderation. It shouldn’t stand out or clash with other visuals in your project. Introduction When to use dithering Checkered dithering Other patterns Stylised dithering Brushes for dithering? Before transparent layers Dithering isn’t new Food for thought Techniques TriviaLord Monarch (MegaDrive)
134 Game Perspectives Chapter 6
135 Introduction Perspective is how the world looks, viewed by the human eye. The further an object is, the smaller it looks. The closer it is, the bigger it looks. It’s an integral part of art and illustration. When creating pixel art illustrations, perspective is a necessary skill. So when you’re creating video games, you need to consider the following: In most 2D games, there is no real perspective or vanishing points. As artists and designers, we need to think outside the box to create explorable worlds! Many of the game perspectives in this chapter are pseudo 3D projections, meaning that they imply 3 dimensions - length, width & depth - but are really just 2D fields. Use a perspective that benefits your game-play. Make sure the visuals of your world and characters work with your game design.
136 Perspective vocabulary Here’s a quick refresher on some perspective vocabulary that will be used frequently in this chapter. A 2D flat surface that shows length and width. It’s like an infinite wall, ceiling or floor. Plane A geometric line with a fixed direction. Y-axis is up and down, X-axis is left and right, and Z-axis goes back and forth. Axis Due to perspective, two parallel lines meet at a single point. Like a road that extends towards the horizon and disappears into a single dot. Vanishing point The way a 3D view is drawn in 2D. Think of it like how the world is shown on a map. Projection Flat views with no perspective. Size does change whether it's close or far away. Orthographic We’ll avoid math as much as we can, but we’ll refer to Width as X, Length as Y, and Depth as Z when talking about dimensions or axis.
137 Orthographic projections Side-scroller Top-Down Top 45° Dimetric° Dimetric Isometric Oblique
138 Multiview drawings These are flat views with no perspective. They’re quite common in most 2D games. Everything is perpendicular in a parallel 90° grid and the same scale. TOPTOP VIEWTOP DOWNTOP DOWN VIEWFRONT/SIDEFRONT/SIDE VIEW These views lack depth, so you can use parallax scrolling to add depth. Only 1 or 2 planes are visible with game-play being on a 2D plane. With only 2 planes visible, and no vanishing points, everything looks like a square grid. Vertical and horizontal lines all form 90° angles. The geometry is just a guideline though. You can draw things at any angle you want.
139 Side view This is the most common perspective for 2D games. It’s often associated with platformers and shoot’em ups as it focuses on vertical and horizontal movement on 1 single plane. 2D side-scrollers come in many genres but usually stick to similar views, not just one: Cross section Top-down view Oblique view (Camera right in front, the world is like a slice) (Camera is slightly above the ground) (Front side is flat, but the sides are slanted) No matter the view, the line the character travels along does not change. Even when it looks like you can go up or down, you’re always stuck to a single 2D path (exceptions exist). These views are ideal for corridor-type levels.
140Castlevania Chronicles (PS1)Shovel Knight (Multi-platformMegaman X2 (SNES)Frogatto & Friends (multi-platform)Ristar (MegaDrive)Donkey Kong Country 3 (SNES)
141 Top-down view The grid is made up of squares tiles which makes creating worlds and environments a breeze. It’s often associated with free-roaming overworld and it’s suitable for exploration. You can have different variations of top-down angles. It depends on how high, or low you want the camera to be. Front > TopFront > Top Front ≈ TopFront ≈ Top Front = TopFront = Top Top > FrontTop > Front for Beat em’ ups. Common view. Easy for tile sets. Good for altitude.Mercs (Arcade)Top: Mother 3 (GBA)Top: Pocky & rocky (SNES)Bottom: Advance wars (GBA)Bottom: The Story of Thor 2 (Saturn)
142 Top down games usually view the world from above, at 45°.Zombies Ate My Neighbors (SNES)Mario & Luigi: Superstar Saga (GBA) However some dungeon crawler games (like 2D Zelda titles) look into a room with a camera placed directly above. This top view isn’t orthographic anymore and resembles a 1-point perspective view. As a result, the room is correct while the objects are not. They appear in a top-down angle instead.LoZ: Link to the Past (SNES)Goof Troop (SNES)
143 The Zelda perspective problem Oddly enough, outside the dungeons, Zelda games adopt the traditional top-down view. This looks vastly different from the 1-point perspective used in dungeon rooms.OverworldDungeon All objects are viewed at a 45° tilted camera, yet the room is at 90°. Everything looks correct when sprites are near the north wall (A). When sprites are near the south wall (B), they don’t make sense. Technically the character should appear like (C) but you wouldn’t be able to see him very well. By flipping the screen upside down, we can see why the sprites in B look very wrong, yet the perspective stays the same. It’s as if Link is laying on the floor. If walls are blocking the view, you can easily remove them and create an invisible “4th wall”. Some games include walls; others remove them to show more of the floor.
144 Top view This is a sub category of top down views. This view is EXACTLY 90° (if you were looking straight downwards). This design choice is uncommon and only works for a particular set of game-play types. You can find real world examples of this style in geographic maps, blue prints and floor plans.Twin Cobra II (Arcade)Contra 3 (stage 2) (SNES)Hotline Miami (PC) A few Mode 7 games have maps in this view transformed in-game to simulate other views. This view is good for aerial views, but it lacks depth. If you want to focus on height, the following views are better options: Top down, dimetric and planometric oblique.
145 Paraline views These are views that give a three-dimensional quality on a 2D screen. This perspective shows 3 sides of an object, at all times. Everything is in true measurements and seen from a bird’s eye view. ISOMETRICISOMETRIC 45° DIMETRIC45° DIMETRIC OBLIQUEOBLIQUE Axonometric shapes* Focuses on all planes (TOP + SIDES). Isometric means that all axes are equal. Focuses on the horizontal (TOP) plane. Dimetric means only 2 axes are equal. Focuses on the vertical (FRONT) plane. Oblique means the front is flat, the rest is slanted.*There are more axonometric views, such as “trimetric” so if you’d like more in depth reading, look up books by Francis D.K. Ching.
146 Isometric view Isometric pixel art is often associated with diagonal movement, since the grid is diamond-shaped at multiples of 30° angles. However, you can’t have exact 30° lines in pixel art, so everyone uses stairs of 2 pixels. This is technically 26.5°, but it’s the closest thing to 30° lines. Constructing worlds is much easier with this “2 pixel” method.Top : Landstalker (Megadrive) Bottom : Harry Potter 1 (GBA) The unique aspect here is that the grid is made of diamond tiles, not squares. This makes it harder to fit into square grids and align them. These tiles don’t line up in square grids but they’re nice for free-form pixel art. The way the lines connect looks clean. These tiles align perfectly and suited for game development and tile sets. Unfortunately the areas where lines cross each other are chunky (double pixels)- so- not so nice to look at.Final Fantasy Tactics Advance (GBA)Top : Solstice (NES) Bottom : Kingdom Hearts: CoM (GBA)
147 Instead of lines, it’s easier to use lineless shapes to draw each diamond, like a checker board. Use this method to avoid chunky cross sections! One diamond is spread across 2 square tiles. Every other adjacent diamond goes across 4 tiles. Try making a checkerboard to practice! It doesn’t matter if you prefer tile sets or not. You will always need a grid to help guide you. If you use free-form backgrounds for games, you will have to turn them into a playable map. It can look more unique, but can be a nightmare to program if you have to turn it into a map. Make sure whatever you draw can have proper collision.A free-form isometric piece Guest artist: Temmie ChangThe tiled isometric backgrounds of Luminous Arc (NDS) Within an isometric grid, you can build all sorts of items. Not everything has to be necessarily blocky. Cubes and cylinders can have a load of personality and come in all shapes and sizes.Kingdom Hearts: Chain of Memories (GBA)
148 Making objects When making objects, you can approach them in two ways: You can eyeball them, or you can construct them. When you eyeball them, you: Visually estimate measurements. Can easily deconstruct objects into simple geometric shapes When you construct them, you: Will be slower but way more precise. Use guidelines and get the most accurate results.Sidenote: Eyeballing is only as good as the artist’s knowledge, it’s advised to construct first so you get a good grasp of how to eyeball. With just a simple cube, you build all sorts of objects! A cylinder can be turned into a tree stump or a barrel. A pyramid can be turned into a roof or a tent. A cone can be turned into a tree or a tower. A sphere can be turned into a mushroom or a bowl. Drawing a circle on a horizontal plane Draw the medians. Oval around the square. Draw the circle within. ... and voilà! 1.1. 2.2. 3.3. 4.4.
149 Drawing a circle on a vertical plane Finding the tip of a cone/pyramid 1.1. 2.2. 3.3. 4.4. 5.5. 6.6. 1.1. 2.2. 3.3. 4.4.
150 1.1. 2.2. 3.3. 4.4. 1.1. 2.2. 3.3. 4.4. Have your side scrolling sprite ready (use lines to guide you if needed). Skew it by 30° (0.5) Adjust the sprite by moving parts around to add more depth. Clean up and fill in the gaps. Fix any remaining mistakes. Important: Don’t skew the object the opposite way. Skew it in the direction the object (or character) is facing. Converting sprites to an isometric view If you simply skew your square, it won’t have equal sides! With the help of trigonometry, you can find out how to keep the diamond as it is. The length you need is cosine of 30°, because you’re skewing it upwards at 30°. Cos 30° = about 0.866/1 That’s roughly 87% of the original length, but once skewed it will be back to normal! Why 87% ?
151 Why 87% ?Terrain Most isometric fields have flat areas. You can have different altitudes, but you’ll often have cubical platforms, towers or plateaus. Flat terrains are the easiest to program and draw. Not many 2D videogames have slopes. This example below from Kirby’s Dream Course is a good reference for isometric slopes. In grid based RPGs like Final Fantasy Tactics Advance 2, these slopes will only appear in 4 directions since the game-play only has 4 directions.Captured using Kirby’s Dream Course Editor v. 1.13b by Devin Acker.
152 45° Dimetric This is a very uncommon view. It works well if a map has high structures that you don’t want your artwork to get in the way of gameplay. The same techniques of isometric art apply, but instead of 30°, only 2 sides are 45°, so essentially your guidelines are series of single 1x1 pixels. The vertical axis is 90° but the other two are 45°.Earthbound "Fourside" (SNES) This view is sometimes considered oblique, because the top plane is orthographic. It doesn’t look like an oblique view, until you rotate it! Other names include axonometric oblique, or plan oblique or even military oblique and commonly planometric oblique. A notable example is Sim City, on the SNES.Boktai 2: Solar Boy Django (GBA)Nox (PC)
153 Oblique The front planes are orthographic, so flat and without perspective. However, all other planes slant towards the side, and remain parallel. Usually, they are slanted 45° but occasionally it can be 2x1 lines. Think “side-scrollers + 2 more planes”. The front planes follow the orthographic rules of a 90° grid. The top and side follow 45° grid lines of 1x1 pixels (but sometimes you can have 2 x 2 lines or 3 x 3 lines). +Earthbound (SNES), Double Dragon II (NES), Pacmania (Arcade) If you’re struggling with this view, you can use the skewing technique (mentioned previously on p.150) to turn top down maps into oblique ones. Simply slope the map vertically by 45° (or 1 unit) instead of 30°.
154 True Perspective Pixel art not used for games generally follow the rules of regular art, perspective and painting. True perspective with vanishing point. An object seen from a top down angle will also obey the normal rules of perspectives and has its shape skewed towards a vanishing point. No matter what viewpoint, the lines will be skewed. Games that have 3D environments with sprite textures can be manipulated to look like a traditional top-down view. This example below is from Pokémon Black/White (NDS). Perspective Orthographic (by user GuyPerfect). True Perspective isn’t unique to 3D games. In game illustrations can easily imitate perspective.Cyberbots (Arcade)Real Bout: Fatal Fury 2 (Neo Geo/Arcade) No vanishing point, all equal size.
155 2D games can have a perspective view, but it requires sprites to grow bigger and smaller in size as a result. It usually takes too much time and energy to do this manually, so newer games use engines to resize sprites automatically.Indiana Jones and the Fate of Atlantis (MSDOS) Here are some games that feature scaled sprites, manual and/or automatic.Saga Frontier (PS 1)Star Ocean 2 (PS1)Contra - Level 2 (NES)The World Ends With You (NDS)
156 Pixel-Logic BonusPixel-Logic Bonus To further understand how 2D views trick your eye, here’s some behind the scenes of 3D games that imitate top-down views. During an Iwata Asks about The Legend of Zelda: A Link between Worlds (N3DS), the director Hiromasa Shikata and his team reported that they went through a lot of trial and error with the top- down view. With this perspective in 3D, you don’t actually see much of the character’s face, but just the top of their head. You would have trouble telling it was the playable character Link. It was later revealed by Eiji Aonuma (producer of the series) that many objects in the game were set at an angle to improve visibility.““ A true top-down view actually has lots of problems. If you make it truthfully, it doesn’t look interesting at all. So you have to fake it - but in a good way. Satoru IwataSatoru Iwata This technique isn’t something new to game developers. It’s been used in older games such as the Pokémon games on the Nintendo DS. This example shows that the fences and trees are made of sprites set at a 45° angle.
157 In Chrono Trigger on the SNES (and later on the PS1 and NDS), you travel the world in a top-down view. In the later portion of the game, a flying ship known as “The Black Omen” appears and floats over the land. The shape of this construction is quite peculiar. It’s easy to misinterpret. This is what the ship is meant to look like. The actual ship was never shown outside of the overworld and 1 battle screen on the deck. The ship is only visible from 1 angle (the front). The easiest way to avoid any confusion is by simply flipping the ship vertically. With simple adjustments, it can no longer be mistaken for a tower. Remember to ask for feedback from others to avoid readability issues! Clarity Issues
158 Using guidelines Guest writer: Cocefi When you build an isometric scene, use a grid and guide lines to aid you. You can sketch it out in a different program first, or simply go directly into pixel art. Even organic forms use geometric shapes as guides! 1.1. 2.2. 3.3. 4.4. 5.5. Build a rough shape with just a few ovals. These are like the skeleton of our object. Follow the outer shape of the ovals … and you can easily outline the row of leaves! If not, adjust the ovals a bit. Block shapes within the tree. Define details and shading. Add highlights and shadows. This isn’t just a tutorial on how to draw trees. The point here is to deconstruct shapes and help them guide you. You can use this for ANY PERSPECTIVE!
159 Showing scale Most projections show the game world from a bird’s eye view. 2D videogames usually have you look into a shoebox from the top, or from the side as they are the easiest camera angles to view. However to show a sense of scale requires thinking outside the box. Why are there no low-angle shots and only in cutscenes? In low-angle shots, it’s near impossible for the player to know where they are walking. It’s manageable in 3D since the player can easily move the camera back down. In 2D games you can only move left and right. In 3D games you see low angle shots in Shadow of the Colossus (PS2), as the game is setting the mood and showing a sense of scale. This technique is more of a You can distinguish views into 2 planes to give a sense of scale. You can use Mode 7 to scale up... ...or spread graphics across 2 screens.The Legend of Zelda : Minish Cap (GBA)Metroid Zero Mission (GBA)Super Metroid (SNES) story telling device, so in 2D pixel art games you’ll only see them in cutscenes.SMW2: Yoshi’s Island (SNES)Metroid Zero Mission (GBA)
160 Conclusion The way your audience experiences your world is a pretty big deal. With games, the projection you use will end up defining the player’s experience. Don’t feel limited by the 7 projections discussed in this chapter. Remember that the player will look at this view of the world throughout the whole game. With illustrations, feel free to draw in any perspective you want. You have more freedom but you still have to follow the basic rules of perspective! Introduction Orthographic projections Multiview drawings Paraline drawings True perspective Clarity issues Using guidelines Showing scale Quick info Types of views Extra info
161 Clean-up Chapter 7
162 ...But pixels matter more Silhouettes Light & Shadow Spacing Picking Colours I Picking Colours II AA or no AA? Jagged lines Banding Introduction Clean-up describes all the finishing touches and possible improvements. Even when you think you’re done, there are a few adjustments you could make before calling it a day.by guest artist: Yaa Roughs Clean-Up Complete If you are creating a video game, or simply making pixel art for leisure, you will most likely get feedback on your work. This may come in the form of tips or advice on how to fix certain things. It's important you also self-assess your work, in addition to others evaluating it. You will grow more as an artist as a result! If you’d like to catch up on clean-up tips, have a look back and check: IntroductionIntroduction Anti-AliasingAnti-Aliasing ColourColour ReadabilityReadability So to start? Retro Hardware More clean up tips will appear in the subsequent chapters!
163 From rough to clean Some video games leave unfinished graphics in their data to use as place-holders. This gives an insider’s look at each artist’s method. Try to recall the diagram back in the Introduction Chapter and let’s take a closer look at them. Shape • Refine • Finish In Pokémon Black2 & White2 (NDS), this robot has an early beta version. The method used here seems like a mix of line work and shapes. Body parts have been moved around and the head has been shrunk. In this example, the image has been redrawn once or twice at different sizes. The pixel art also underwent a few colour changes. The line-art here is sculpted and then refined at the end. Pokémon Black2 & White2 (NDS). These sprites were very rough in their early stages. They're in-between frames of a full animation. It’s easier to use blobs of colours for in-betweens. That way, you work more with light & shadow, and less with lines.by guest artist: Yaaby Michafrar
164 Lines • Colours • Finish Use a very rough sketch, and then finish it in pixel art.Dudley from Street Fighter III (Arcade, Dreamcast) In JoJo’s Bizarre Adventure (Arcade, DC, PS1), there is data of unfinished sprites. This game (like most other Capcom games) creates its graphics by digitizing paper drawings. The final version is simply shaded. There were quite some more changes made in the line-art stage. Some changes were subtle, others were completely different.Early versionFinal version The final result can look completely different from the first line-art. Don’t worry if your work changes from your original sketch.
165 These sprites of Petshop and Zangief have seen multiple changes. Both their heads have been greatly cleaned up during the shading phase. When the canvas is quite cramped, artists don’t rely heavily on line art. With pixel art, it’s common for the final version to look completely different from the sketch, as you can see with Zangief. If you have trouble getting detail in your line-art, try using shapes instead of lines Line-art is primarily useful when you are building a geometric structure.by guest artist CocefiJojo’s Bizzare Adventure (Arcade; DC, PS1) andStreet Fighter Alpha 2 (Arcade)
166 Adjusting your sprite You can always make improvements in the same art-style. In the Mega man X games on Super Nintendo, the protagonist has no changes made to his default sprite. However, the character Zero is given brighter colours, improved stance, silhouette and cleaner shapes. Art is subjective. Everyone has their own favourites. Not all changes are necessarily improvements to all of your audience. SilhouetteSilhouette DesignDesign ColoursColours Pixel ShapesPixel Shapes LightingLighting ReadabilityReadability Things to look out for when adjusting sprites: THESE ARE NOT A CHECKLIST. We’ll be using these examples for ease in the following pages. There are more than just these aspects beyond this book. As you probably know, design changes are also made to suit tastes. We won’t be discussing these however in this book.Magical Chase (TurboGrafx-16)Sonic 3(Beta) (Sega Megadrive)
167 Examples from Video Games Bonewalker from Fire Emblem: The Sacred Stones (GBA) The bigger skull size allows more space for details and subpixels for the eyes and mouth. The sword is more 3D and makes the silhouette more readable. Same goes for the cloth around his pelvis. The palette isn’t much different, but the high- lights and shadows are more pronounced. The stances of each pose are less stiff, more intimidating. They have more personality. The silhouette is easier to distinguish and much wider. Frostwind boss from Drawn to life (NDS) A new dark line outlines the dragon’s cheeks. They now stand out more. The old version had 1 big shape of indigo which isn’t a bad choice, though. A darker shadow outlines the mouth. It’s much sharper. There’s also some A-A to soften the line. With only 1 pixel difference the pupil looks smaller. That one white pixel is quite a change. AdjustmentsAdjustments AdjustmentsAdjustments The colours are more vibrant.
168 Barry from Pokémon Platinum (NDS) AdjustmentsAdjustments Diamond/Pearl (2006) Platinum (2008) The face got a complete re-do. The right eye is cleaner and the eye socket is now 90°.The smile is wider and is more distinguishable from the nose. The jaw now has anti-aliasing and a smoother outline. Barry’s new silhouette is closer to his model sheet. His legs and arms stand out more and his hair is spikier. The hands are smaller and more readable. The shapes of similarly coloured pixels are cleaner too. Much more simplified. The 2008 sprite includes details that are more accurate to his model-sheet. Not just the stance but also hair, and collar. Pokémon sprites in general are a great example of adjustments during development.
169 Knuckles the Echidna’s goal sign (Sega Mega Drive) AdjustmentsAdjustments Between these versions, the only big difference is seen in the right portrait. The left and middle ones only have differences in highlights and hair shape. The middle one (used in the final game) has a shiny reflection in its eye. The eye is much sharper too. Remember that 1 pixel can make a difference. For some reason, the Sonic 2 sprite of Knuckles has red dithering around his mouth. This doesn’t read well at all and looks like random noise (stray pixels). It looks fine without the red pixels, and doesn’t really need dithering.Sonic 3’s PrototypeSonic 3 & KnucklesSonic & Knuckles locked onto Sonic 2 Drill platform from Pulseman (Sega Mega Drive) AdjustmentsAdjustments Using different lighting makes the object appear more 3-D. The outline is shaded too. The edges are rounded as well. The shading in the old one didn’t respect the light source. In the new one, you can see the platform cast a shadow onto the red piece.
170 Cleaner Shapes At times, clean-up requires a little pixel precision. This is where shape language comes into place. Pixels of the same colour clump together into shapes. We will call them shapes. Others call them clusters, clumps,chunks, blocks, etc.Puyo-Puyo (Super Famicom) If you’re familiar with the Puyo-Puyo games, try to imagine pixels like puyos clumping together. This happens when puyos of the same colour are next to each other. Maybe try seeing them as Rock Climbing chunks. It’s a far-fetched comparison, but you'll find out why in a moment. Vector art is very similar in this regard to pixel art. Vector art is made of geometric shapes that can be scaled infinitely. The shapes have no blur and can all be edited freely. It’s as if every block of colour is 1 mosaic tile. When these shapes are clean and well crafted, they will make your sprite a bit more readable!MGS3 (PS2)Vectorized portrait from Metal Gear Solid 3: Subsistence (PS2)
171 Another art-form which is all about shape language, is Woodblock printing and Linocut printing. It focuses on juxtaposing silhouettes. Some elements of Notan imagery occur in woodblock prints. These prints use carved blocks of wood to copy silhouettes. These look a lot like stencils you would see in graffiti. When you layer several shapes over each-other, you obtain a fully coloured picture. This art-form is popular world wide, but is especially prolific in Japanese and Asian Arts. A final comparison we can make is based on notes from Walt Stanchfield’s Disney Drawing Classes. In these notes, he talks about the term “lazy lines”.““ While talking to Dan Jeup one day, he mentioned “lazy lines”. He was referring to lines that didn’t describe anything, Things like shape, texture, softness or hardness. It’s like what you get when you trace some-thing, an overall sameness of line. Walt StanchfieldWalt Stanchfield This may be about lines, but it’s relevant to shapes and shading too! The same idea can be applied to paintings and of course …pixel art!Seymour Road Studios, UK
172 Just like with high definition art or traditional art, it’s more akin to how well you apply brushstrokes and how it all pieces together in your final piece. It’s not necessarily about how clean every individual shape is.Castlevania: Symphony of the Night (PS1)Lemmings (PC, Amiga & more) Cleaner shapes convey the most information and will often look better. The graphics in Lemmings (left) are noisy and the graphics in Castlevania (right) are clean cut. When you make textures, cleaner shapes are more believable. The PlayStation may have more advanced graphics, but when reduced to 5 unique colours, these rocks will STILL look more convincing. This shape language doesn’t rule out Anti-Aliasing. In fact, A-A can help improve your shapes slightly! A-A will not be your saving grace, though. It’s only used to soften your lines and shapes, so ultimately it’s all about drawing skills.Shin Megami Tensei II (PS1)Castlevania X: Rondo of Blood (TurboGrafx-16) Dithered artwork is also made of shapes, with dithering blend- ing the cell shading.
173 Your shading also startsstarts off as shapes: areas ofoff as shapes: areas of light and shadowlight and shadow (even when the final piece is detailed!). ...just like traditional art!Odin’s Sphere fan art by guest artist: Yaa Clean shading is important for both simple and detailed works. You can’t place shapes of light and shadow without muchthought. The left tree trunk has a colour ramp of 4 shades and looks more like cell shading. The right tree trunk has up to 8 shades in its colour ramp and is highly detailed.Alundra (PS1) Getting the hang of this is just like regular drawing; it will happen over time. You’ll see how certain pixel placement can convey light and shadow better than lines can. Fixing the shapes of your pixel art is also subjective as each artist has their own preferences and hypotheses. It’s highly encouraged to learn from others. If you’re interested in the nitty-gritty, be sure to give the Pixelation.org community a look. If you’re really interested in the concept of defining shapes, check out this series by Marco Bucci. In episode 4, Bucci highlights this theory within painting, but it can also translate to pixel art! Title: Good Shapes - 10 Minutes To Better Painting - Episode 4 Preview video: youtu.be/-ZknWKTpc90Mother 3 (GBA)
174 Multiple versions Before you finish a sprite, you may not be entirely satisfied with the final look. The final step can sometimes feel like a roundabout. You might have to walk around in circles before finding the right exit. By making multiple versions of the same sprite, you can pick your favourite version. In Chapter 4, we discussed how a single pixel can make a difference. Changing some pixels won’t create a huge difference, but they can still have a subtle effect! When you aren’t sure what looks better, create multiple versions and have other people vote on their favourite. If you’re alone, take a break and compare them with fresh eyes to pick one yourself. With little space, it can be tricky to pixel exactly what you want. Keep trying until you get a decent result. If nothing works, try to think outside the box and start fresh.by MichafrarBy guest artist: Steven McCarthy It’s not always about the little differences. Not too sure about the entire sprite? Try doing multiple sketches so you can get a feel for the posture or the mood.By guest artist: Martins
175 The Selection tool Instead of redrawing pixels from scratch, you can select areas of your drawing and move them about. This can save you a lot of time. If you draw or animate digitally, you must be already familiar with this tool. The lasso tool can also be useful, but sometimes it’s too sensitive to control. Make sure the lasso tool is aliased! You can move parts around and modify your sprite. If your work isn’t on-model, you can make simple changes with the selection tool. This seems quite obvious, but don’t forget this tool exists. Remember to tweak and fix things as you go.by Michafrar, character by Nintendo You can easily fix things at any time, and move parts around:by Yaaby Michafrarby Michafrar
176 Here’s an example of a sprite that was improved by using the selection tool. Both these sprites were made by me, at different times. Before After So how does one make those subtle changes? Sub-pixeling has been brought up several times now. Even the tiniest changes can improve your sprites. Look forward to it in Chapter 8.by Michafrar
177 Scaling & Rotating When you’re tasked to shrink a sprite, you have to sacrifice details and pay more attention to readability. Have a look back at the chapter Readability and the pages “Size Matters…” When you simply resize the sprite, you’ll end up with a pixelated mosaic. Looks quite messy! It looks like a lot of work, but you can totally clean it up. Use the resized mosaic as a base, and redraw important features and lines. You’ll switch between the eyedropper and pencil tool a lot! So make good use of them. Modifying shrunken sprites will make you think twice about pixel placement. Try doing it yourself! It’s good practice :D This is one of the best exercises to intuitively learn pixel art.Pokémon Heart Gold & Soul Silver (NDS)by Michafrarby Michafrar
178 The same clean-up can be performed on enlarged sprites, but it will be more of a drawing task. It’s often better to start big and go smaller, than the other way around. However, clean-up is more often used for rotated sprites. You might rotate body parts or backgrounds more often than resizing them. The process is the same: chisel & add pixels as you eye-drop & redraw over the sprite.by MichafrarBy CocefiSprite by Guest artist Don.
179 Sharpness Gotta stay sharp when you’re a tiny sprite! Sharpness is more than just how fuzzy or clear an image is. Colour, contrast and shapes also play an important role. If you use a “sharpen” filter, you can see how the colours and shape of an image are affected. However, we’re here to do it manually. So ... no filters! Only apply the advice on this page if you feel like they’re necessary. Here are some methods to keep your sprites sharp and readable, even from a far distance. 1 Play with more light & shadows, don’t rely too much on line-art Hand 1 was drawn with line art, but it resulted in unreadable splotches of colour. It’s easier to tell objects apart using clean shapes on Hand 2. Higher contrast also makes it more readable! 2 Add more highlights 3 Add darker lines to make things popby CocefiBy YaaBy Yaa
180 Various possible tweaks ContrastJackie Chan’s Action Kung Fu (TurboGrafx-16) Without adjusting any pixels, you can change the contrast in colours. You simply do this by recolouring every ramp of a colour palette or by using colour sliders and then manually fixing them. Keep in mind: Contrast can be multiple things: mood, hue, saturation and values. Tangents This is the same principle seen in tutorials about comic books and storyboards. Tangent outlines can stand out. If you use this in animation, you can get away with this, so don’t worry about those instances! Light & Shadow Touching up colours is usually not enough, you must also consider the following: lightsources, highlights, shadows, and areas. You will have to play with shapes, light and shadows to make the necessary fixes.by Michafrar
181 Character modelling & detailsSprite by Michafrar, Character by Nintendo Changes can also involve referencing character model sheets or how designs are constructed. If you’re adding/reducing detail it’s always good to have source material to make judgement calls. Proportions With the selection tool (or lasso tool), you can easily move parts around. Pixel art is easy to edit, so the proportions of a drawing can be fixed even at the very end! Perspective When the perspective on your sprite doesn’t look right on your first try, you can always use the selection tool and edit parts. With this adjusted barrel sprite, you see more of the top lid, and less of the cylinder. To ensure the objects you draw are within the same perspective, simply place the sprites next to each other to spot any mistakes or differences.Sprite by Michafrar, Character by Nintendo
182 From start to finish I For this sprite, I had to be time-efficient and decided to start from a drawn sketch. From there, I shrunk it to pixel art size. One sketch to get the personality and feel right, then another one to create cleaner line-art. Instead of going straight to line-art, I will tackle this sprite area by area. Let’s begin with the coat. I didn’t outline the face, because the canvas size is so restrictive and there is little room for de- tail. So just in case I keep the sketch on a layer. The hands were big enough, so those were possible to outline properly. It’s not often you can pixel every single finger. Flat colours - Shading - Details No matter which method you use, the process is usually: I made the corner of the eye more defined. The face takes a few tweaks to get right, though.Character by RiddicTHpixel art by Michafrar
183 In these final stages I decided to tweak the colours within the line-art to give a better sense of contrast, while also adding detail to the bottom of the drawing. With lighter line art at the bottom, it implies a sense of line weight that can be hard to see with a pure black outline. We look at this style of outline in Chapter 1! To make the outline pop out, I added darker pixels to make it sharper. Remember the Sharpness page in this chapter? For this sprite I made multiple versions of her smile and decided to go with my favourite (which was mouth closed). Check back on the Multiple Versions section of this chapter!
184 From start to finish II Guest writer: Shawn Martins If you’re used to sketching on a small canvas, you can directly make a rough sketch with the pixel brush. Once the sketch is complete, the base colours are laid out over the sketch. They generally started by detailing one area, in order to establish the style, colours and lighting. Nothing is permanent, though. This is apparent when looking at the changes made during the process. The legs went through multiple changes. Many different versions were made to make the pose more dynamic. As we’ve seen previously, it’s quite common to try out different designs before settling for a final one. Once the legs were complete, more details were added to the rest of the sprite. Once in a while, the artist goes back to adjust previously completed parts. This involves moving parts around with the selection tool, and redrawing parts from scratch. The necessary changes are up to the artist’s judgement. Once they are satisfied with the final look, the sprite is complete!
185 From start to finish III Featured Artist: Yaa Yaa starts a scene with a very rough sketch directly in pixels. The light source is set from the start. That way it’s easier to find colours the characters and objects, instead of starting from white and doing the background last. Here are a few specific parts of the artwork, step by step.
186 Conclusion The process of “clean-up” may not strike you as an obvious task at first. It’s quite subtle in execution, but can make a huge difference. Clean-up in pixel art is similar to the clean-up in 2D Animation. They share same mind-set. You revise the original roughs and literally clean them up by going over them again with detail. All these adjustments and changes happen at any stage of your work. All the techniques from the previous chapter play a role in clean-up. Most changes occur at the very end: when you receive feedback or auto-critique your work. Don’t hesitate to improve your sprites, even when you think you’re done! Introduction From rough to clean Adjusting your sprite From start to finish I & II Cleaner shapes Multiple versions Selection tool Scaling & rotating Sharpen Various possible tweaks Food for thought Tips and tricksDrawn to Life (NDS)
187 Subpixeling Chapter 8
188 Introduction You’ve likely heard of subpixeling. It’s often seen in idle animations and very subtle movements. Many golden era games used this technique. These graphics have inspired the artists of today.Sprite by Michafrar, character by NintendoSuper Metroid (SNES)Metal Slug 3 (Neo Geo)Darkstalkers 3 (Arcade, PS1) This is 1 pixel. A subpixel, but impossible This is also impossible The pixel is the smallest unit of resolution. We can NOT go any smaller, nor split pixels between two squares. So we have to pretend and find a way to imitate it. Subpixeling is giving the illusion of something smaller than 1 pixel. Subpixel means “under a pixel” or “smaller than a pixel”. Subpixeling is an advanced and complex procedure. If you’re having trouble, do not worry. It’s not always necessary, but it’s a fun challenge to hone your animation skills. When you see this icon, it means the image has an animated version. You can open these animations and flip through the frames. They can be found in the digital folder that comes with this chapter.
189 When & How For non-moving images, subpixeling is a synonym to anti-aliasing and line weight. For animated sprites it is referred to as subpixeling animation. Both rely on the same technique to create illusions: anti-aliasing. In general, the term is used to talk exclusively about animation. Just so you know! Subpixeling can be found in Still images Animations Easing in and out In order to accelarate or decelerate animations, artists space out their drawings within each frame closer together or further apart. This can easily be adjusted. It’s difficult to draw in-betweens closely together without unwanted wobble effects; to prevent this from happening, you subpixel the inbetweens instead. Give life to still parts When you animate large movements, some parts may remain motionless. Giving those areas subpixels will help it stand out less. If you animate in high definition, you may be familiar with line boiling techniques to avoid having things stand still. Small resolutions When you have a canvas of 32x32 pixels or less, it’s harder to make readable sprites. Moreover, it’s much harder to create believable motions in such a tight space. It’s too tough to just move parts around. Wind effects, laughter, shaking, shivering, and staggering Movements where the characters or objects barely move can easily benefit from some subpixels. When characters are idle, you can either choose to create bouncy animations, subtle motions – or a bit of both. Subpixels will get you that extra bit of detail you can’t otherwise obtain by just free drawing or moving parts around. Idle animationsMetal slug attack (Mobile)LOZ: Minish cap (GBA)Sonic Mania (Various)Iconoclasts (PC,PS4,Switch)Iconoclasts (PC,PS4,Switch)
190 Shifting pixels Pixels are like cups of water. We can pour some of the water into the next cup. Now, it’s spread across 2 cups, but the total is still 1 cup of water. This is one of the principles of subpixeling. The amount of water in a cup = the brightness of the colour. Moving the pixel ½ px ahead, turns the next pixel darker or lighter. You’ll rarely have just a single pixel like in the example. Pixels are always surrounded by other shapes, outlines, or backgrounds. What you’ll get instead is this. Not every single pixel’s value needs to be shifted. Sometimes you can move over an entire pixel normally! You don’t have to necessarily move every pixel on the canvas as that could create banding. Some parts can remain still, without any changes. Animation and readability matter more than overdoing subpixeling.Sonic Mania (PS4, Switch, PC, XBO) When animating in subpixels, Value and Colour are carried over to the next pixel.
191 Pixel shifting is the basic principle of subpixeling. Here are a few more explanations to help you out. Pixel-Logic bonus If cups of water don’t cut it, try seeing subpixeling as cups of coloured liquids, like milk and coffee! 1 full cup can be poured differently, so you can have more liquid in 1 cup than in the other. Subpixels aren’t always ½ pixels. They don’t have to be shifted over exactly 50%. It’s strongly advised to re-use colours already found in your sprite for subpixels. Don’t bother using math to determine what you need. Just pick a colour that is sort of in between. Feel free to create new colours, but remember to not lose track of them! You can also call this technique swimming pixels, pixel transfer, or even pixel bleeding. Maybe try viewing subpixels like ghost trails, or smears that smudge pixels as they move around. When a line or shape moves away, it can leave some AA behind. Like a shell of its former-self. It sometimes looks like a row of ghost pixels from the previous frame! Remember NOT to leave any light-coloured AA on the outline. You’ll find more about this on the page “Motion”. starting frame ending frameinbetweens
192 Line weight We’ve briefly discussed line weight in chapter 2, so feel free to refresh your memory. Subpixels allow you to do what you usually do in HD artwork. This type of subpixeling really is just AA!Puyo-Puyo (Super Famicom) We can prove that lines turn lighter when they’re thinner, by shrinking these lines. Shape and edges become brighter in colour too. Line width Thin edges Thin center & more However, things only become brighter when shading in a dark zone. This means that the opposite happens when working within dark shapes. Conclusion Light backgrounds Dark backgrounds
193 These examples should be clear enough to easily study! They have varying line width. Pay attention to the brightness (value) of all the anti-aliasing pixels. Line weight within spritesMario & Luigi: Superstar Saga (GBA)By guest artist Anubis Jr. Character by NintendoBy guest Artist YAABy guest Artist YAAThe Legend of Zelda: Minish Cap (GBA)Metal Slug 6 (Arcade, PS2)
194The L egend of Z elda: Minish Cap (GBA) The thinner cracks in this rock end in lighter pixels. The deeper cracks use darker pixels. They may look like lighter shading or darker patches, and that’s fine! In the end, the same anti-aliasing can be used for multiple effects. It’s easy to mistake line weight for shading Adding and removing width In this zoom-in you can see how anti-aliasing acts like subpixels. Focus on the mask around the character’s eyes to see the difference. Version X has a larger eye mask than Version Y does. Top left eye has lighter AA in version Y, making the line thinner. Top right eye has a lighter row of AA subpixels in version Y. Bottom left eye has brighter AA in Version Y. No changed in brightness, but the dark AA is shorter. As we’ve seen many times before, every pixel can make a difference. Sometimes brightening or darkening the AA creates subpixeling and produces different results.Upscaled with waifu2x.udp.jp 1 2 3 4 1. 2. 3. 4.by Michafrar
195 When we shrink these images back to their original size (1x), the results are almost identical! This proves that subpixeling matters. Try using split pixels for better line weight! Split pixels Split pixels are pixels spread across 2 blocks. The complete pixel can’t exist like this, so its value is divided into 2 pixels that each are 50% of its brightness. the equivalent of drawing Let’s put these split pixels to some good use. If the lines were HD What you imagine What you pixelby Michafrar In some situations, you can slightly add more weight (brightness) onto 1 side of the split pixel. This is really just AA combined with split pixels. There are often areas where split pixels can come in handy. They’re not always necessary but can make for subtle changes. You can also see these split pixels recycles the colour grey which was already used in the palette.The Legend of Zelda: Minish Cap (GBA)Pokémon Black & White (NDS)
196 Tricking the eye Here’s some illussions to trick the eye. These are extremely subtle, mind you. On this green vine, the diagonal part has AA placed in different corners. These subpixels push a shape into a certain direction - all while the outline is identical! Every pixel matters here. The direction and placement of your AA can skew the shape in all kinds of ways. You are not likely to use this for still sprites, but it can offer extra subtleties within your animations. Bending shapes What your mind perceives : Skewing shapes Thinning out shapes Horizontal lines can appear thinner than vertical lines and vice versa. This effect is so subtle that it can easily be ignored.The Legend of Zelda: A Link to the Past (Super Nintendo)
197 Selective Outline If your object will ONLY appear on dark backgrounds, you can safely use selective outlines. In fact, it’s best that you do! Selective outlines get often mistaken for shaded outlines with AA around the edges. That’s sort of what they are, but they serve a different purpose. So why those gaps in the outline?Darkstalkers 3 (PS1/Arcade), Super Gem Fighter Mini Mix (Arcade, Saturn, PS1) These broken lines will most often look best on dark backgrounds. On a light background, they will often look jagged. Coloured outline Selective outline Shaded outline Selective outlines make foreground objects blend nicer with their surroundings. When 1 layer slides over another, this carefully placed AA will make transitions smoother. Artists commonly abbreviate “selective outline” as “sel-out”.Darkstalkers 3 (PS1/Arcade) Selective outline is only used on layers that have a transparent background. If objects overlap in neutral coloured environments, they will look smoother with a selective outline. It’s all about context.Klonoa: Empire of Dreams (GBA)
198 It gets tricky when backgrounds have both darker and lighter areas. This ball may look fine in front of the rock, as the selective outline blends well with it. These do not look particularly pretty in every situation. Overviewby Michafrar Lighter or darker sel-out lines depend on the background you use. When sprites will often be in dark environments, you might want to give them darker sel-out lines: shaded outlines with darker pixels of AA to blend the edges with the background colour. Heavier selective outline Lighter selective outline What you can do to avoid issues: Make selective outlines that are fuller and less segmented. Avoid selective outlines alltogether. Use other outlines. Use hints of AA and apply them to other outline types. So what does subpixeling have to do with any of this? It’s kind of like line weight in a way, but for outlines. It will prove to be quite useful animating these outlines with subpixeling.Bottom: Iconoclasts (PS4,Switch,PC)Top: LOZ: Minish Cap (GBA)
199 Animating subpixels Ever looked at 3D animations with anti-aliasing turned off? With 3D renders in raster graphics you can easily see how the curves have warping pixel lines. Notice how, frame by frame, the tip of the head shrinks, as the character moves downwards.Pikachu 3D model from Pokémon X & Y (Nintendo 3DS) So why does this happen? It’s because of how lines move around in mathematical graphs. Here is a close-up of a curve. In math: what’s happening here is f(x): x² + n As the curve moves down, the tip expands. Pixels on each row escape to the sides. At one point the curve crosses a new row and new pixels POP UP and the cycle continues. In animation, jaggies aren’t an issue because you only see them for a split second. However, when your curve pops a new row, or shrinks down to a lower row, avoid transitions to single pixels. Aim for at least 2 to 3 pixels when popping shapes and lines Subpixeling animation requires you to duplicate a frame and edit it slightly. Flip back and forth between frames to check how pixels shift!
200 This is the general rule for animating subpixels on lines, curves and shapes. If you get confused, remember this trick with your hands. The thumb is the main motion and it moves independently. The other 2 fingers usually point in the same direction. The direction of subpixeling follows the angle of the shape regardless of where the general animation is heading. eg. : if the angle is horizontal = subpixeling is horizontal if the angle is vertical = subpixeling is vertical You can see that this cape is curved horizontally, therefore it subpixels horizontally too. It moves up and down, but it subpixels left and right on occasions.Red Earth (Arcade) Pixels can go up or down but also left and right depending on the angle. This works for full pixels or subpixels. Always focus on the angle. In the digital animation files (included in this chapter), you can see a collection of different animated shapes. Look for the “shapes” folder.