Metal Slug Sprite Planes

YouTube video

Sprite Dimensions

Inspired by Metal Slug artwork.

Avg height human head: 12 pixels
Avg height human torso: 9 pixels
Avg height human legs: 14 pixels

Avg total human height: 35 pixels
Avg total human width: 43 pixels

Creature / boss monster varies greatly.  As large as 200 pixels in height.

Pixel Art Styles

Outstanding thread on the subject:

http://www.wayofthepixel.net/index.php?topic=15554.0

GameBoy Bear Test

I copied the outline from a GameBoy Color sprite, changed the colors, changed the lighting (top down as opposed to face on), and added the animation.

Original size:

Great Pixel Art Summary

I posted my first example on Reddit today, and in the process stumbled upon this tutorial:

Pixel Joint Forum: Creating Pixel Art

Preliminary Observations on Pixel Art I Like

Just some notes for future reference:

Metal Slug

• Heavy use of black outlines
• Subdued color palette
• 12 to 15 colors per sprite typically
• All lit from directly overhead and slightly to the left
• Man sized sprites ~ 40 Pixels height
• Giant monsters 100 - 200 pixels height or more
• Little to no anti-aliasing on outlines
• 12 pixels head, 10 pixels torso, 10 pixels legs for standard character

Street Fighter III

• 100 pixels in height
• ~40+ colors per sprite
• Anti-aliasing "lite"?

Secret of Mana 3

• 45 - 75 pixels in height
• 4x of every pixel color
• Bright lighting, saturated colors
• No real anti-aliasing to speak of

Some Fantastic Pixel Art Tutorials From Kiwinuptuo on DeviantArt

Placing these here for future reference.  Some of the best tutorials I've found.

Basics
Color
Human
Textures
Tree
Shading
Animation

Basic Training

Pre-Production was about setting up my machine, installing the appropriate software, and choosing the various training programs I think I need to get started.

Basic Training, my current phase, is about gaining a foundational level of experience in Unity, JavaScript, and pixel art.  I'm simply following tutorials and creating throwaway code and art to get my bearings.

Once I feel comfortable enough (weeks or months from now) I will begin creating the actual game.  There will be as many if not more learnings during that phase for sure.

Codecademy JavaScript

Unity offers three options for scripting.  C#, Boo, and JavaScript.

While C# is likely more powerful and flexible than JavaScript, it's also more challenging to learn.  Given that I've already fallen off the programming wagon early along the trail many times (C++, Java, Python...) I have opted to go with JavaScript for my game.  Also I felt that since I'm learning pixel art and the Unity engine at the same time, anytime I can reduce complexity I should.

There are a number of seemingly great JavaScript tutorials online.  I'm starting with Codecademy because my brief experience with Python on their site tells me that it's frictionless and easy to get started.

I've now knocked out the "Introduction to JavaScript" which consists of two parts.  28 "Getting Started With Programming" exercises and a 7 exercise "Choose Your Own Adventure" project.

I have very little experience programming as I mentioned above, really just 3 or 4 false starts in the past that I dropped after a few weeks.  This intro was not difficult at all and mildly entertaining.

Mr. Drippy

Here's an image I made after reading through two batches of tutorials.  This is Mr. Drippy, from the game Ni No Kuni.

I found an image on the web, imported it into Pixen, and made layers for line art / basic color / shading / selective outlining.

Among other things, my shading is clearly hideous.  But hey - a new sprite from start to finish.  I call that progress. :)

2D Will Never Die Tutorials - Photoshop Required?

After reading through the 2D Will Never Die tutorials I'm reconsidering whether or not I will need Photoshop when it comes time to actually produce sprites for my game.  Almost all of these tutorials include Photoshop tips and tricks for improving both the quality and output of your sprite work.

For now, as I'm literally learning from absolute zero, Pixen should do just fine.  But when it's time to start cranking out creatures and levels for my game I may need to revisit these tutorials and pick up Photoshop.  Better start saving my $ now...

Key tips that apply regardless of software package from the 2D Will Never Die tutorial series includes:

• Step 1, line work.  Step 2, basic flat coloring.  Step 3, shading.

Hmm, well most everything else seems to be Photoshop specific.  I know there are some great tips in there about using grayscale to evaluate lighting, but I can't seem to find a non-Photoshop specific instance of it.

Sub-Pixel Animation

The art of making sprites move through color manipulation without changing their silhouette.

Anti-Aliasing Pixel Art

Here is a good page on AA for pixel art:  http://2dwillneverdie.com/tutorial/spriting-basics-anti-aliasing/

NES Color Pallet for Pixen

Here's a color pallet for the exact colors available on the NES for Pixen.

So You Want to be a Pixel Artist: Part II

I've finished reading this tutorial, though I will admit I started to rush through the last few pages.  In this post I'm going to attempt to capture the highlights and key nuggets of info found in this tutorial.

• NES sprites are 16x16, the nice Street Fighter spriters are 100h with no standard width.
• If you want something to look new and shiny, use a perfect gradient.  Most things you will want to look worn however so you will need to work pixel by pixel as illustrated.
• Lighting is incredibly important, even for pixel art.  When working with sprites it's quite common to flip horizontally to save time.  A trick to avoid having to "re-light" every frame is to use a light source that is directly above your character.  This way, even when bits are flipped, the lighting still makes sense.
• The Secret of Mana 3 has some fantastic environments to study.
• In a 16x16 sprite, the bottom three pixels are for the waist down, the three pixels above that are for the torso, and the remaining 10 pixels at top are all for the head.
• Ideally you want to sketch your character first and then overlay your sprite work on top of it.  This is not an absolute requirement but it is how the best artwork is made.
• Selective outlining, or "selout", is a style of outlining with shades rather than black that helps make your work look more professional.
• 6 frames is generally the magic number for running animations, though you may want more for super large sprites like The Hulk.

So You Want to be a Pixel Artist

I'm working my way through this tutorial which was clearly written over a decade ago.  It seems like a less than ideal place to start learning to make pixel art.  While there is a lot of great information here you have to work very hard to find it as the writing is a bit all over the place, and the basics that you would expect to start with (like what software to use, how to make a sprite sheet, etc.) aren't covered at all.

The tutorial starts with terrain tiles and illustrates good art vs. bad with suggestions on how to avoid tiling and break up the repetition.  There is some interesting analysis on some of the greatest looking pixel art games and how they work their magic.  Then we get into sprite characters.

So I made this little guy.  He's a 16x16 animated sprite.  I followed the tutorial but got a little lazy when it came to his standing pose.  Unfortunately this blog allow me to load him as tiny or "small" like this:

 I have a lot of work to do. :)

GoTask Scrum Software

After a number of false starts I decided this time will be different.  I'm going all out with a development plan and weekly or bi-weekly sprints.  I'm using GoTask - agile software of the iOS that allows you to create backlogs, develop sprints, and review progress.

For my first sprint I selected 10 story points of work and completed 18 in a week.  Specifically I elected the following tasks:

• Install Unity
• Research Unity training courses
• Install Pixen
• Research Pixel Art training courses
• Research JavaScript training courses
• Link Macbook to Dropbox so that I can save files remotely

Unfortunately GoTask does not seem to let you create Epics and it's causing trouble with much larger tasks like JavaScript training.

I'll work it out.  For now, I've completed Sprint 1 and am now all set up to get started.

I have a tendency to get bored quickly, so my plan is to bounce between Pixel Art, Unity and JavaScript as needed to keep things interesting.

First up, I'll be starting with "So you want to be a Pixel Artist."

The Plan

The plan: to make a game (design, code, art, audio) in the Unity engine completely by myself.  I'll be learning three involved skills in order to accomplish this:

• Pixel Art (creation and animation)
• JavaScript
• Unity Engine development

For audio I will likely use existing tracks from the web or contract the audio work out once everything else is 100% complete.

The game I have decided to make what I am calling an Ended Runner.  Inspired by endless runners, this is a game where your character is forced to run while avoiding obstacles for as long as possible.  In this case, rather than having an infinite world there will actually be an end for each character to strive to reach.

Here's the design highlights:

• 2D Sprite character and world.
• Runs from left to right on the screen at an increasingly faster pace.
• The character, background, and obstacles are all heavily inspired by my memories growing up.
• The character has three actions that he or she can take:
• Jump (spacebar)
• Action (A key, repeatable)
• Special (S key, limited amount)
• The player can collect power ups used to increase the power of A and S abilities.
• Completing the world with one character unlocks a new character and new world.  Total worlds and characters TBD based on the artistic requirements of completing one effectively.

I suspect that this will take over a year or two to complete given my limited amount of time per week to dedicate to it.  I will be blogging my notes and progress here as both a way to track progress as well as an added incentive to keep me going when things get tough.

Wish me luck!