I'm extremely inexperienced with tiles.
A couple weeks ago I thought I'd give it a shot.

Something I noticed is going up a half step gives more visual difference in height, because of overlap, than going up a full step:


I was curious what FFTactics does, and they also use a half step:


Thanks again Cyangmou!
Awesome Posts!

At this size its not too much work to double the number of frames and animate the other step.
It will also give you more time to play around with other parts of the animation.

A small follow through prop could give him some more change.
It's up to you what that might be.
An antenna on a robot is "generic", but I tend to like that sort of thing.



Try wrapping a double loop inside of a single loop (or stick a single loop onto a double loop if you want to think of it the other way around).
His feet take 2 steps. (double loop, sort of)
His body goes up and down twice. (double loop)
But the antenna only sways back and forth once. (single loop)

The eye glow could be more exaggerated.
Probly even more so than I've done here.


Here the eye glow is a double loop.
But it could also be a single.

Try stuff and make it fun!

The purpose of a Pixel Shader is to control the color of a rendered pixel.
Read this if you are unfamiliar with the topic.

I've taken interest in writing a 2D lighting Shader.

Lighting depends on many variables.
But as a massive simplification it depends on 2.
Surface direction (normal) and light source position:


In 3D art getting a normal is easy.
The data is already there as it is essential to how it is rendered.
But 2D art is different.
Altho we can find the normal of certain pixels, like the outer edges, there is no "physical" axis.
Surface normals are created by the artist and kept consistent only by choice.
It's exactly this sort of constructed fakeness that keeps me interested in art.
My purpose is not to replace per pixel artistic decisions of color.
It is to add another layer of control to a sprite that is interactive in a game engine.

We can represent direction as a color.
This is commonly thought of as Normal Mapping.
We can use an extra map to light a 2D image.

So first I had to figure out what kind of axis to pull data from.
I started with a 2-axis format:

This had some appealing results (which are lost, forgot to take screenshots), but I felt the control was a little off.

Then I tried using a quadrant method using the Blue channel to determine quadrant.

The idea was to make it easier to find direction.
But I found the setup annoying to work with and abandoned it pretty quickly.

Having a third access could remove the need for quadrants.
My first thought was to use this 3-axis setup:

It reminds me of Barycentric Coordinates and therefore has some interesting properties.
It could have worked but I tried to look for other answers.

Then I came to this 3-axis setup:

It has direction and matches how we traditionally think of a 3D axis making it easier to think about and use.
This is what I'm using now, and it works well.

So here's the progression of getting the base code to work.
I'm writing this from scratch and tweaking it to my needs.
The light source was from the mouse position so I could move it around and see changes quickly.
Old stuff and mistakes towards the top, new stuff and properly working towards the bottom.


The idea is to draw a normal map by hand.
Reducing the number of colors makes surface direction more apparent.
It's easier to grab from and stay consistent.


Manually drawing the normal map, such as the "brick" pattern on the sphere, in theory seems crazy.
But it ends up having really interesting and appealing results despite the fact that its a normal map defined with solid color lines.


Here's some more test results using a sprite and 3 different types of normal map:


Using multiple spheres for normals creates a crapload of distortion, but it's quick and easy to setup.
The last row is starting to actually look decent, even though it uses the multi-sphere normal map.
It's a bit too subtle but its also much more noticeable and cool when it happens in realtime and changes based on position.

Manually painting the normals has much more potential (and is my original goal of coding this) but I have not yet taken the time to make a really nice map.
That'll be my next test, probably on something static.
Obviously it's less expensive to use on static assets but is still doable for animations.

There's still a lot of work to do.
Even if you're not a programmer feel free to comment.
It could lead to a much better shader or other features.

Okay, I'm jumping on the edit train too. Choo choo!

Thanks!
You've made a lot of good points and changes.
Unfortunately I worked on my edit before you posted.
The directional outline is cool.
But I'm considering popping them all off and just adding lines with Shaders so they can be colorized, thickened, stippled and react to lights and such.
The bounce light will actually act as a color property for a shader and can be shown in any color or removed completely.
I need to make it a unique color value tho as I've used it in other places.
Or I may bump it to a new layer.
Not sure yet.
Other cool effects can be done like color interpolation, glowing stuff, and palette indexing.
Getting stuff like that working is actually not too much code using basic HLSL and some helper functions.

PixelShader
// Current pixel is color to shade?
if(IsColor(color, PrincessPink()))                             
{
 // Shade pixel
  return float4(Green().rgb + (wave *0.5), 1);
}

HelperFunctions
// checks if colors match
bool IsColor(float4 color1, float4 color2)
{
   float3 c1 = float3(color1.rgb);
   float3 c2 = float3(color2.rgb);
   
   if(FloatEquals(c1, c2))
      return true;   

   return false;
}

// checks if float3s are equal
bool FloatEquals(float3 n1, float3 n2)
{
   if(n1.r == n2.r)
      if(n1.g == n2.g)
         if(n1.b == n2.b)   
            return true;
         
   return false;
}

// special color for shader I can call by name
float4 PrincessPink(void)
{
   return ColorFromRGB(242, 154, 222);   
}

// color[0-1] from color[0-255]
float4 ColorFromRGB(float r, float g, float b)
{
   return float4(r/255, g/255, b/255, 0);
}

Having done this, I agree the sprites are too large to animate. Something more Capcom proportioned seems feasable.

I definitely agree with sprites being too large tough idk if these are for just animation or for game oriented

Also I'm sure it's a matter of finish level but I enjoy your pixel clusters more in the smaller size.

Agreed the sprites are large and a lot more work to deal with.
However they are more to my liking and feel more like how I draw on paper.
There are different processes for animation.
They balance quality, speed, feeling, order of steps etc.
My animation training is actually in film style which is drawn extremely large.
In the film environment it is acceptable to take 2+ weeks on a single animation for a character saying a sentence or two.
It's made me very patient but also realize how wasteful old style animation techniques are.
I don't want to spend so long on a single animation or use so many steps to the final render.
It's surprising how much motion you can pull out of a single key, and how messy fast inbetweens can be.
Many parts of an animation can remain rigid and reused, while only the main areas of focus, or effect, change.
This let's you get away with less unique drawings and more time spent polishing motion, which will sell the animation better than really nice drawings with bad motion.
Of course this has its own result and feel.
Traditional process and techniques have a great feel, but are much more expensive.

Well, about the new version of BB... she might be a bit over stylized, I liked the previous version more, it was simpler, but still carried some character.

I think both have and interesting personality.
The 1st design is more like someone you would add to your party after meeting her twice in a cave and she unlocked some doors for you.
The 2nd design was intended to make her more brutal, like a caveman almost, someone you wouldn't want to bump into.
The 3rd  design pushes more towards the 1st while still twisting it a little.
If this were 3D I'd just ship all 3 as costumes.
Much easier to change props and details.

your newest renditions seem to be more traditional character design ex: giving bootie bandit a prop to go with her name, which on a fundamental level is good, but your earlier designs seemed to break some rules and I liked them for it.

Its true that giving them props that fit their name or class very closely make them more archetypal and generic.
The trade off is basically Visual Recognition vs Original Concept.

The game idea is based on 3 items like Rock-Paper-Scissors:

This can be thought of as Actions instead of items.
Attack-Defend-Shoot.

Even the defense item should be unique in some way.
In Booties case I want her to be able to steal/grab stuff with her shield.
A bag seemed like a classic choice.
But a summon shield is a little more interesting to me.
And magic boots!
But of course!

The design reminds me of something from Cosmic Soldier, Psychic War.
http://hardcoregaming101.net/psychicwar/psychicwar.htm
Also relevant: http://www.youtube.com/watch?v=IuS1ngU9jlc#t=2m16s

Thanks for these great links arne!
I love this sort of old style.
Slamming a brain into the ground is highly entertaining.
It's exactly the kind of stuff I want to animate.
Over the top violence with unrealistic characters.
And lots of particle effects!

I feel PP herself is quite lacking in comparison.

Thanks for pointing this out so directly.
I totally agree.
Decided to play with her design a bit.
Bootie Bandit could use a 2nd draft as well.