AuthorTopic: new 16px knight hero dude  (Read 9833 times)

Offline Decroded

  • 0100
  • ***
  • Posts: 1285
  • Karma: +3/-0
  • Oh hai
    • View Profile

new 16px knight hero dude

on: June 08, 2015, 02:37:23 pm
so this is to replace the knight i was working on previously which means i have to redo all animations but ah well  :lol:


shield equipped:


attempted a basic breathing animation with a bit of sub pixel:

any comments on the motion before i move onto animating the plume?

Offline Kellawgs

  • 0010
  • *
  • Posts: 104
  • Karma: +0/-0
    • View Profile

Re: new 16px knight hero dude

Reply #1 on: June 08, 2015, 02:51:53 pm
Where can I learn about "sub pixel" ?

He looks really neat, I think I even prefer the original.

Offline yaomon17

  • 0011
  • **
  • Posts: 660
  • Karma: +0/-0
    • YaomonKS
    • taiya.sun
    • http://pixeljoint.com/p/28472.htm
    • yaomon17
    • valedev
    • playvale
    • View Profile
    • portfolio

Re: new 16px knight hero dude

Reply #2 on: June 08, 2015, 04:54:44 pm
Where can I learn about "sub pixel" ?

He looks really neat, I think I even prefer the original.
http://2dwillneverdie.com/tutorial/give-your-sprites-depth-with-sub-pixel-animation
I do like the new one more, especially the more blue hues in the armor. The large helmet fluff thing will also be great for readability for the player to easily spot the knight, though I guess it does seem a bit defiant to gravity.

Offline PsylentKnight

  • 0010
  • *
  • Posts: 270
  • Karma: +0/-0
    • View Profile

Re: new 16px knight hero dude

Reply #3 on: June 08, 2015, 07:10:56 pm
Personally, I prefer the original. Its much more unique than the new version. Though it may be a bit more cutesy than what you're going for.
Mommy's Boy: Development Blog  Youtube  Contact: MommysBoyGame or Psylent-Knight@hotmail
View all my game assets at 300% zoom (click twice)

Offline hapiel

  • 0010
  • *
  • Posts: 144
  • Karma: +0/-0
  • PJ mod
    • hapiel
    • http://pixeljoint.com/p/9092.htm
    • View Profile

Re: new 16px knight hero dude

Reply #4 on: June 08, 2015, 10:50:18 pm
If you want to smooth it out even more, try to alternate the movements! Like, double the amount of frames, and then: have one frame to move the arm, the next frame move the head, and so forth. I think that could really help this tiny sprite :)

Offline Ryumaru

  • Moderator
  • 0100
  • *
  • Posts: 1683
  • Karma: +0/-0
  • to be animated soonly
    • ChrisPariano
    • View Profile

Re: new 16px knight hero dude

Reply #5 on: June 09, 2015, 01:35:06 am
What were your reasons for wanting to make a new sprite? I too prefer the original, but the new one would be cool as an armor upgrade or something. Both of course are nice sprites, and the animation is super cute.

Offline pistachio

  • 0011
  • **
  • Posts: 639
  • Karma: +4/-0
  • Mostly lurking
    • http://pixeljoint.com/p/125138.htm
    • View Profile

Re: new 16px knight hero dude

Reply #6 on: June 09, 2015, 02:57:39 am
Hey Decroded.
This is a cool little versatile sprite, so I did a quick edit.


The biggest issue here: this sprite puts too much priority on the outlines.
It looks/reads better to focus on the shading. (I.E. the helmet feather here)
Took some colors out (extra grey hanging around some parts of the sprite's outline? took this out) and redid the values, then messed with the hues.
When shading the metal, I was thinking in planes instead of spheres, keeping the highlights small, so it looks a bit less pillowshaded.

Moved the arm up to an active stance, which usually works for player sprites in action platformers like I see this being used in.

Added more contrast to the proportions.
Newer version has more contrast than the older version, which is better IMO, but it's still pretty even.
Try making parts a different size/shape from eachother.

Look out, editing this post soon to put out an edit of the anim.
Busier nowadays w/ work etc. but I'll be coming back to this place.

EDIT: Here it is, watch those subpixels go.


Still rough, not really exaggerated, but implements some crucial stuff like follow-thru.

Bonus thing:


Hope that gives you ideas.
« Last Edit: June 09, 2015, 05:35:31 am by pistachio »

Offline wolfenoctis

  • 0100
  • ***
  • Posts: 1072
  • Karma: +2/-0
    • View Profile

Re: new 16px knight hero dude

Reply #7 on: June 09, 2015, 05:48:29 am
Added some subpixel frames as inbetweens to your original animation:

Its a little rough but with some more time I'm sure it could work

Offline Decroded

  • 0100
  • ***
  • Posts: 1285
  • Karma: +3/-0
  • Oh hai
    • View Profile

Re: new 16px knight hero dude

Reply #8 on: June 09, 2015, 08:48:05 am
Thanks pistachio I'll have to study what you've done here  :mean:

Added some subpixel frames as inbetweens to your original animation:

Its a little rough but with some more time I'm sure it could work
Holy shit that looks sick  :o

I was trying to avoid any "flickery" bits like u got on the sword hand but maybe it doesn't matter in the scheme of things.
Overall that is VERY impressive.

I really need to re-learn Gale because Photoshop is a pain beyond a certain point.

Offline Kellawgs

  • 0010
  • *
  • Posts: 104
  • Karma: +0/-0
    • View Profile

Re: new 16px knight hero dude

Reply #9 on: June 09, 2015, 09:51:13 am
Added some subpixel frames as inbetweens to your original animation:

Its a little rough but with some more time I'm sure it could work

What the...this is incredible.

Other than the article on subpixelling linked earlier, is there any way I can learn the method to produce this effect? It's hard to understand the magic.

Offline Decroded

  • 0100
  • ***
  • Posts: 1285
  • Karma: +3/-0
  • Oh hai
    • View Profile

Re: new 16px knight hero dude

Reply #10 on: June 09, 2015, 10:42:03 am
its some BS-good subpixel isn't it hehe  :y:

i havent read that article but the basic concept as i understand it is...say a black square is moving around in a white space at sub-pixel speeds, then various shades of grey are used to indicate how far the object is into the next set of pixels.
so if it moves up a little bit say 25% of a pixel then pixel/s above box get 25% darkness added and the bottom would lose 25% brightness.
it would be very easy to create an example to illustrate but im sure there is one around somewhere.


@Ryu im glad u like the original sprite i just thought it looked a bit bland and wanted to push myself further and appeal to more than just other pixel artists.
i also wanted more blue as i always wanted to make blue knight guy.
armour upgrades great idea id love to do it if i can

Offline Kellawgs

  • 0010
  • *
  • Posts: 104
  • Karma: +0/-0
    • View Profile

Re: new 16px knight hero dude

Reply #11 on: June 09, 2015, 10:58:31 am
So let me get this straight- subpixelling is like a mix between squash/stretch and motion blur?

Offline Decroded

  • 0100
  • ***
  • Posts: 1285
  • Karma: +3/-0
  • Oh hai
    • View Profile

Re: new 16px knight hero dude

Reply #12 on: June 09, 2015, 11:01:23 am
no. in my mind its more like an animated version of anti-aliasing.

Offline Probo

  • 0010
  • *
  • Posts: 317
  • Karma: +1/-0
    • View Profile

Re: new 16px knight hero dude

Reply #13 on: June 09, 2015, 11:08:23 am
yeah thats what ive always thought of it as, anti-aliasing frames together. blur is kinda similar though, sometimes blurring between frames can achieve a similar effect without proper AA

Offline hapiel

  • 0010
  • *
  • Posts: 144
  • Karma: +0/-0
  • PJ mod
    • hapiel
    • http://pixeljoint.com/p/9092.htm
    • View Profile

Re: new 16px knight hero dude

Reply #14 on: June 09, 2015, 11:13:39 am
The name has always confused me. I think of a sub-pixel as a component of a pixel, so the red, the green or the blue diode.. But subpixel animation has nothing to do with that!

Why don't we call it 'wave animation', since one color flows from one pixel to the next one  ::)

Offline Probo

  • 0010
  • *
  • Posts: 317
  • Karma: +1/-0
    • View Profile

Re: new 16px knight hero dude

Reply #15 on: June 09, 2015, 11:20:23 am
the sub-pixel name refers to movement, youre making the thing look like its moving less than a pixel through clever use of colour. say you have a solid colour 16x16 red square on a white background. think how would a computer would redraw this square if it was moved .5 pixels to the right from its current position. it would use lighter colours to blend the edge of the square with the white bg. only using the solid red and white colour only gives you full pixel movement

Offline Decroded

  • 0100
  • ***
  • Posts: 1285
  • Karma: +3/-0
  • Oh hai
    • View Profile

Re: new 16px knight hero dude

Reply #16 on: June 09, 2015, 11:22:27 am
The name has always confused me. I think of a sub-pixel as a component of a pixel, so the red, the green or the blue diode.. But subpixel animation has nothing to do with that!

Why don't we call it 'wave animation', since one color flows from one pixel to the next one  ::)

that just a coincidence that isn't very relevant to animation or pixel art unless ur specifically trying to illustrate the components of a pixel or something.
in reference to coding i talk about objects moving at sub-pixel speeds (e.g. 1.7 pixels per frame) so its more related to that kind of meaning.

plus it already has a name so deal with it   :P  :lol:

Offline Probo

  • 0010
  • *
  • Posts: 317
  • Karma: +1/-0
    • View Profile

Re: new 16px knight hero dude

Reply #17 on: June 09, 2015, 11:41:01 am
forgot to also say, nice sprite decroded :D i prefer the newest one myself, but the original is not without its charms either!

Offline Decroded

  • 0100
  • ***
  • Posts: 1285
  • Karma: +3/-0
  • Oh hai
    • View Profile

Re: new 16px knight hero dude

Reply #18 on: June 09, 2015, 10:24:20 pm
Question for wolfie...based on how u did this pass over the animation, do u think about the following process is efficient?

1. draw key frames of most exaggerated frames ie start of sword swing, end of sword swing.
2. add basic tweens, blurs etc and tweak timing until it feels right
3. do another pass to add subpixel tween frames and edit original frames to blend in with this.

I'm just thinking it will take forever to sub pixel all the animations at least until I get better at it so it would be nice if I could separate the steps without creating lots of extra work.
Doing it in passes might also help with the skill gulf pistachio raised recently (I like that name for it  :y:).

Offline Cyangmou

  • 0011
  • **
  • Posts: 929
  • Karma: +3/-0
    • cyangmou
    • http://pixeljoint.com/p/32234.htm
    • cyangmou
    • View Profile
    • Pixwerk Homepage

Re: new 16px knight hero dude

Reply #19 on: June 09, 2015, 11:39:24 pm
Added some subpixel frames as inbetweens to your original animation:

Its a little rough but with some more time I'm sure it could work

Take a cookie!




I'm just thinking it will take forever to sub pixel all the animations at least until I get better at it so it would be nice if I could separate the steps without creating lots of extra work.
Doing it in passes might also help with the skill gulf pistachio raised recently (I like that name for it  :y:).

The process sounds right. Subpixels can be added as third step to smoothen the whole animation even more out.
You even want to have polished frames to add them, to exactly interpolate the medium steps. If it's a circle animation you just add between all frames a subpixel frame (if you have a 5 frame loop you will then have a 10 frame loop with subpixels, if you have an 8 frame loop you will have an 16 frame loop with subpixels)

An interesting thing to mention is that those kind of animations just work, if the speed between the frames is high enough, that you rather see the flow of the pixels and not the individual pixels of the frames (so it is mandatory that you don't move below twos / 80ms/frame.
The faster the movement and the better the interpolation the smoother it will look.
Another thing is that for outlined sprites you don't want to destroy the outline color with your subpixels, so rather use 2 very close colors if you need to suggest subtle movement there

Another thing is that subpixel movement tends just to work great for idling or other really subtle movements.
It works just to an certain extend for really fast movements which aren't a nearly linearly timed circle, since those animation usually have different distances distances between the frames.
For really fast animations like swordswings etc. you usually just smoothen the slow in and slow out and don't add any new frames or inbetweens in the main part of the animation to keep the snappiness.

So if you want to add subpixelling to a swordstrike, which is made out of 5 frames ( 1entry 2rewind 3tension 4atk swoosh 5 stop frame) you would modify it to something like 1 s1 2 s2 3 4 5 s5 but you won't add an inbetween everywhere, because otherwise it will look to smooth and it will loose a lot of power.
« Last Edit: June 09, 2015, 11:42:30 pm by Cyangmou »
"Because the beauty of the human body is that it hasn't a single muscle which doesn't serve its purpose; that there's not a line wasted; that every detail of it fits one idea, the idea of a man and the life of a man."

Dev-Art
Twitter

Offline Decroded

  • 0100
  • ***
  • Posts: 1285
  • Karma: +3/-0
  • Oh hai
    • View Profile

Re: new 16px knight hero dude

Reply #20 on: June 10, 2015, 12:35:33 am
fantastic advice thanks matey  :y:

Offline wolfenoctis

  • 0100
  • ***
  • Posts: 1072
  • Karma: +2/-0
    • View Profile

Re: new 16px knight hero dude

Reply #21 on: June 10, 2015, 04:17:25 am
Question for wolfie...based on how u did this pass over the animation, do u think about the following process is efficient?

1. draw key frames of most exaggerated frames ie start of sword swing, end of sword swing.
2. add basic tweens, blurs etc and tweak timing until it feels right
3. do another pass to add subpixel tween frames and edit original frames to blend in with this.

I would say do the animation as you did originally, with no subpixelling, get the timing of the actions right, then add subpixel inbetweens(doubling the frame count) and half all frame durations. Subpixels are only useful for subtle movements, broader movements like a sword swing probably doesn't need them so don't use them if you don't have to.  :)

Take a cookie!


NOMNOMNOMNOM!

Offline Decroded

  • 0100
  • ***
  • Posts: 1285
  • Karma: +3/-0
  • Oh hai
    • View Profile

Re: new 16px knight hero dude

Reply #22 on: June 10, 2015, 10:54:11 am
SSsssoooo Gil...when u gonna write us a sub-pixel smoothing script?  :D

Offline Gil

  • 0100
  • ***
  • Posts: 1543
  • Karma: +1/-0
  • Too square to be hip
    • http://pixeljoint.com/p/475.htm
    • View Profile
    • My Portfolio

Re: new 16px knight hero dude

Reply #23 on: June 10, 2015, 11:24:40 am
SSsssoooo Gil...when u gonna write us a sub-pixel smoothing script?  :D
What, like auto-tweening with subpixels or auto-AA? Sounds interesting. Not sure how hard that'd be.

We'd need to do one manually first of course, to prove the concept.

Offline Decroded

  • 0100
  • ***
  • Posts: 1285
  • Karma: +3/-0
  • Oh hai
    • View Profile

Re: new 16px knight hero dude

Reply #24 on: June 10, 2015, 02:41:24 pm
my friend said maybe its like morph from deluxe paint but he's more a coder than an artist.

so concept is it compares frame 1 and 2 for colour changes in each pixel, adds a smoothing frame which finds the nearest in-between colour (from the restricted palette importantly) and applies the colour accordingly.
if the idea works i could probably code it in GM but it would take me longer than someone who's good at coding  :lol:

from what ive seen i cant think why the results wouldn't be awesome and time saving.

Offline Gil

  • 0100
  • ***
  • Posts: 1543
  • Karma: +1/-0
  • Too square to be hip
    • http://pixeljoint.com/p/475.htm
    • View Profile
    • My Portfolio

Re: new 16px knight hero dude

Reply #25 on: June 11, 2015, 05:41:20 pm
my friend said maybe its like morph from deluxe paint but he's more a coder than an artist.

so concept is it compares frame 1 and 2 for colour changes in each pixel, adds a smoothing frame which finds the nearest in-between colour (from the restricted palette importantly) and applies the colour accordingly.
if the idea works i could probably code it in GM but it would take me longer than someone who's good at coding  :lol:

from what ive seen i cant think why the results wouldn't be awesome and time saving.

gotcha, might give it a try if I have some spare time

Offline Decroded

  • 0100
  • ***
  • Posts: 1285
  • Karma: +3/-0
  • Oh hai
    • View Profile

Re: new 16px knight hero dude

Reply #26 on: June 11, 2015, 09:18:26 pm
my friend said maybe its like morph from deluxe paint but he's more a coder than an artist.

so concept is it compares frame 1 and 2 for colour changes in each pixel, adds a smoothing frame which finds the nearest in-between colour (from the restricted palette importantly) and applies the colour accordingly.
if the idea works i could probably code it in GM but it would take me longer than someone who's good at coding  :lol:

from what ive seen i cant think why the results wouldn't be awesome and time saving.

gotcha, might give it a try if I have some spare time

  :y: :D