Help with sub pixel animation

[fighter_fish]

Ah, hello all.
I was experimenting  with sub-pixel animation and decide to start with this.


Then I decided to start changing the background and then realized it seemed to pop more with white. It seems to have a much more jerkier (and livelier?) animation.


This kinda blows my mind.

How do I make it smoother with a white background? When doing it with a black background I found I could just focus on the inside color of the balloon and the border. That's how I came up with the in-between color.

I feel like that's the issue, the in-between color. But what do I change it to? In my mind the inside balloon color is pressing into the border (this is represented by the in-between color), then the balloon expands. Do I make the in-between color lighter?

[fskn]

Postimg seems to be down. Could you please upload it to Imgur?

EDIT: nm, it went back up.

Yes, you'd have to make the in between color lighter. Either by averaging between the yellow and the white, or by having a brighter brown to do the transition.

Or at least that's what I think you should do...

But the problem is that yellow and white are very close in terms of value. So it won't read as well if you have a brighter outline.

---

If you invert every frame of the first animation, you'll see how it *should* look like with a white background (but now with a blue balloon).

[fighter_fish]

But the problem is that yellow and white are very close in terms of value. So it won't read as well if you have a brighter outline.

You're absolutely right, I totally forgot how similar yellow was to white (traditional painters use yellow sometimes to produce lightness or whiteness).

If you invert every frame of the first animation, you'll see how it *should* look like with a white background (but now with a blue balloon).

Damn it works like rain.

----------------

In summary:
1. If the background is black (or dark):
The border color should be close in value to the background, so dark values. While the inside color is lighter than the border. (values: inside color < in-between value < border value)


2. If the background is white (or light):
Vice-versa of 1. Border color is a light value while the inside color is darker.
I applied that knowledge to the shadow too. (values: inside color > in-between value > border value)



3. Dark border on light background (and vice-versa)
Download the images and study the 2nd frame.
You'll notice that in the original, the in-between color is used on the first silhouette. However, in this modified image, I used the in-between color for the second silhouette. You'll have to see it for yourself.
It's more like the balloon is expanding and shrinking in the opposite direction of the original, but it gets the job done.

[cels]

Terribly sorry to spam this thread without anything constructive to say but do you have a good tutorial for sub pixel animation?

[SeinRuhe]

Well, simply put, it's impossible to make it look smooth on a white background without changing the sprite. (From my perspective. I may be wrong, if I am pretty please let me know why my reasoning is flawed)

But why?



Color is composed of Hue, Saturation and Value.

Mainly, our color value is what makes the sub pixel interpolation works. In the case of the black background, interpolation is seen as the following sequence:

Value   0, Value   0, Value 54, Value  0.
Value 54, Value 68, Value 95, Value 68.

In the case of the white background it looks like this:

Value 100, Value 100, Value 54, Value 100.
Value   54, Value   68, Value 95, Value  68.

In a graphic manner:



Why does this crap matter at all? You already discovered it but I'd rather explain it in case anyone would like to read about this since is a not-so-easy subject. Sub pixel needs two lines of pixels to work, pretty much like in the example image I posted. And to look smooth both lines have to follow the same sequence pattern, in this case: Dark - To - Light - To (Rinse and repeat)

What happens when changing the background to a white color is that both lines no longer follow the same sequence, one keeps following the Dark - To - Light - To but the other line start working as a Light - To - Dark - To sequence what makes the sub pixel animation to stop working at all, hence the pop.

If you pay close attention to your last edit you did (Dark Border on Light Background), it kinda pops less than the first attempt but it won't look as fluid as the other two attempts (That you totally nailed), and for what I know this have no workaround at all.

You already figured out how to use subpixel animation on a white background modifying the colors of the sprite wich for me is the only way possible. Again if I'm wrong about this please let me know!

EDIT: *Creepy, deep voice* Come to Papa @Cels, Papa can help you.

[fighter_fish]

Terribly sorry to spam this thread without anything constructive to say but do you have a good tutorial for sub pixel animation?

Google helps usually.
Here's what I've looked at:
https://youtu.be/Wqd6epIWo6E (fun video)
https://2dwillneverdie.com/tutorial/give-your-sprites-depth-with-sub-pixel-animation/ (I actually found this kinda helpful)

[cels]

Google helps usually.
Here's what I've looked at:
https://youtu.be/Wqd6epIWo6E (fun video)
https://2dwillneverdie.com/tutorial/give-your-sprites-depth-with-sub-pixel-animation/ (I actually found this kinda helpful)

Google doesn't always bring back the best results so I appreciate the specific recommendations.

EDIT: *Creepy, deep voice* Come to Papa @Cels, Papa can help you.

Come to think of it, I really need to focus on one thing at a time. I guess I'll keep working on my characters for now. 

[fighter_fish]

But why?



Color is composed of Hue, Saturation and Value.

Mainly, our color value is what makes the sub pixel interpolation works. In the case of the black background, interpolation is seen as the following sequence:

Value   0, Value   0, Value 54, Value  0.
Value 54, Value 68, Value 95, Value 68.

In the case of the white background it looks like this:

Value 100, Value 100, Value 54, Value 100.
Value   54, Value   68, Value 95, Value  68.

In a graphic manner:



Why does this crap matter at all? You already discovered it but I'd rather explain it in case anyone would like to read about this since is a not-so-easy subject. Sub pixel needs two lines of pixels to work, pretty much like in the example image I posted. And to look smooth both lines have to follow the same sequence pattern, in this case: Dark - To - Light - To (Rinse and repeat)

What happens when changing the background to a white color is that both lines no longer follow the same sequence, one keeps following the Dark - To - Light - To but the other line start working as a Light - To - Dark - To sequence what makes the sub pixel animation to stop working at all, hence the pop.

Thank you, you explained it much better than I could.

If you pay close attention to your last edit you did (Dark Border on Light Background), it kinda pops less than the first attempt but it won't look as fluid as the other two attempts (That you totally nailed), and for what I know this have no workaround at all.

You already figured out how to use subpixel animation on a white background modifying the colors of the sprite wich for me is the only way possible. Again if I'm wrong about this please let me know!

No, I think you're right, I just wanted to see if it was possible.

You know, the sprites look really weird when I see them in 100% zoom.
I guess sub-pixel animation is mostly for low-res art.

[fskn]

@SeinRuhe posts like that need to be saved for future generations.

[SeinRuhe]

@fskn I really blew my last neuron on that so I hope future pixel artists see that

[autotrader]

Terribly sorry to spam this thread without anything constructive to say but do you have a good tutorial for sub pixel animation?