AuthorTopic: Platformer Sprites (WIP)  (Read 26180 times)

Offline ericbloom

  • 0001
  • *
  • Posts: 21
  • Karma: +0/-0
    • View Profile

Platformer Sprites (WIP)

on: September 20, 2012, 04:56:15 pm
I'm new to this, and am having a lot of fun. I could use some feedback on a couple of walk cycles :

This guy is still rough. I really want this enemy to feel *heavy* when walking, and it's not quite there yet. His attack will be a smash attack:



I'm much happier with this enemy walk, though it's more of a traditional walk and easier to plan out. (Really huge shout out to Tsugumo's Mage Knight thread for giving me the smoke and spark idea:http://wayofthepixel.net/index.php?topic=3421.0)



And here he is shooting and resting:



I'd show them at the original sizes too, but I'm at work. I'll update with the main character's run when I get a chance.

Offline Grimsane

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

Re: Platformer Sprites (WIP)

Reply #1 on: September 22, 2012, 08:41:08 am
great weight with the little guys, and nice movement and the particles and auxiliary animation works well

the way you posted made it hard to do this edit because it wouldn't scale back very friendly, but here's an attempt, get in the habit of animating with timing (xxxms) most game engines can load the timing from gifs if you load it like that, constant frame rate animations is quite a hindrance when you try doing subtle and even snappy motions


took a frame out and added a bounce divided into two half speed frames

Offline wurfle

  • 0001
  • *
  • Posts: 15
  • Karma: +0/-0
    • View Profile

Re: Platformer Sprites (WIP)

Reply #2 on: September 22, 2012, 07:03:41 pm
The body of the first one looks very soft to me, not like metal at all. Stiffening up that big middle section should help a lot.

Offline Tourist

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

Re: Platformer Sprites (WIP)

Reply #3 on: September 22, 2012, 08:03:36 pm
Here's a pretty good tutorial on making characters seem more massive:

http://brendanbody.blogspot.com/2010/04/weight-problem.html

The short version is that:
  • All things fall at the same rate
  • Not all things are the same size.
  • You can indicate how large or massive something is by changing the rate at which it falls relative to it's visual size.
  • The same applies to horizontal motion.
Hope this helps,
Tourist

Offline buddy90

  • 0001
  • *
  • Posts: 95
  • Karma: +0/-0
    • View Profile

Re: Platformer Sprites (WIP)

Reply #4 on: September 23, 2012, 04:00:43 am
Well, I noticed your big dude walks a lot like a gorilla. Maybe you can use that as reference :)

Offline ericbloom

  • 0001
  • *
  • Posts: 21
  • Karma: +0/-0
    • View Profile

Re: Platformer Sprites (WIP)

Reply #5 on: September 23, 2012, 06:41:21 pm
Grimsane, yes! That small change really added an oomph that I was trying to get.

Tourist: Thanks for the link, I'll keep this in mind on my next revision, since Wurfle is right about the bendyness.

Here are original sizes as well as the main character himself:





Edit Updated Smasher:





« Last Edit: September 23, 2012, 10:30:43 pm by ericbloom »

Offline ericbloom

  • 0001
  • *
  • Posts: 21
  • Karma: +0/-0
    • View Profile

Re: Platformer Sprites (WIP)

Reply #6 on: September 25, 2012, 12:30:15 am
A rough of the attack. I'm learning the importance of the roughs and playing with the blur frame.





Updated. Anyone have any tricks for the blur effect?
« Last Edit: September 25, 2012, 02:59:50 am by ericbloom »

Offline Lazycow

  • 0010
  • *
  • Posts: 146
  • Karma: +0/-0
  • Do androids dream of electric sheep?
    • flurrycow
    • flurrycow
    • http://pixeljoint.com/p/15168.htm
    • View Profile
    • homepage

Re: Platformer Sprites (WIP)

Reply #7 on: September 25, 2012, 06:15:58 pm
Yeah, great!

-
old - new

What about not using one continuous motion blur, but fragment it a bit. This could simulate individual animation frames, merged into one.

Other than that: Although all the moves of the robot are superb, I think motion blur and "heavy-movement" are mutual exclusive. Would you expect fast movement from a massive house-hight unit? Hm... I don't know. Maybe not.

PS: the forum has an included zoom function, just click on the image.
A man touched down on the moon, a wall came down in Berlin, a world was connected by our own science and imagination. Yes we can!

Offline ericbloom

  • 0001
  • *
  • Posts: 21
  • Karma: +0/-0
    • View Profile

Re: Platformer Sprites (WIP)

Reply #8 on: September 26, 2012, 08:08:50 pm
That's a really good point, and I think I was too interested in making a smashing blur attack that I hadn't considered if it felt right. While it isn't meant to be house-high, I do want it heavy. I think a slow wind-up attack would make a lot of sense.

I'm gonna keep working on this. Thanks for the tip on the blur as well.

The one problem with the zoom (on chrome at least) is that it anti-aliases the image. Can that be shut off?

Offline Lachie Dazdarian

  • 0010
  • *
  • Posts: 141
  • Karma: +0/-0
    • View Profile
    • The Maker Of Stuff

Re: Platformer Sprites (WIP)

Reply #9 on: September 26, 2012, 09:17:00 pm
Not sure about the color depth you are using, but for these sort of blur animations what works the best (IMO) are sections that start with 0 opacity and go to full opacity as the object/limb moves in a certain direction. Or maybe it can be done with dithering instead manipulating transparency.  Full color sections just feel a bit too solid to me to illustrate swooping movement effectively.

Offline ericbloom

  • 0001
  • *
  • Posts: 21
  • Karma: +0/-0
    • View Profile

Re: Platformer Sprites (WIP)

Reply #10 on: September 27, 2012, 01:37:19 am
Just because I like filling this thread with updates:





Still missing a lot of the details and effects, but I like the slow wind-up fast movement idea. Not sure if what I did with the raising of his arms is gimicky or actually makes it smoother, but it feels smoother than simply doing the frames in sequence. The blurs are not quite there yet, but might be adequate once the smoke and dust is added to obscure it a bit.
« Last Edit: September 27, 2012, 01:39:12 am by ericbloom »

Offline PypeBros

  • 0100
  • ***
  • Posts: 1220
  • Karma: +2/-0
  • Pixel Padawan
    • PypeBros
    • View Profile
    • Bilou Homebrew's Blog.

Re: Platformer Sprites (WIP)

Reply #11 on: September 28, 2012, 07:29:13 am
I'm a bit perplexed by the framerate you picked (5 second for the last giant both attack and recover, at least)... as if it was voluntarily slowed down.
Imho, it makes judging of the animation smoothness impossible, but that could just be me ...

Offline ericbloom

  • 0001
  • *
  • Posts: 21
  • Karma: +0/-0
    • View Profile

Re: Platformer Sprites (WIP)

Reply #12 on: September 28, 2012, 03:07:50 pm
Can you explain what you mean by that? I'm just doing these by the seat of my pants.

Offline TheMonsterAtlas

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

Re: Platformer Sprites (WIP)

Reply #13 on: September 28, 2012, 03:12:29 pm
He's saying the animation seems very slow, like each frame takes a while before it goes into the next. I think it's alright when we are viewing the frames and making sure each animation flows into the next with accuracy.

Offline ericbloom

  • 0001
  • *
  • Posts: 21
  • Karma: +0/-0
    • View Profile

Re: Platformer Sprites (WIP)

Reply #14 on: September 28, 2012, 03:55:37 pm
Ah thanks. Yeah, I'm putting these together in Photoshop and kinda arbitrarily made the frames speed in the timeline what it is. To implement them I use a sprite sheet and import them to Stencyl.

Offline ericbloom

  • 0001
  • *
  • Posts: 21
  • Karma: +0/-0
    • View Profile

Re: Platformer Sprites (WIP)

Reply #15 on: January 20, 2013, 11:03:38 pm
And here the Smasher is in his current state.



Offline PypeBros

  • 0100
  • ***
  • Posts: 1220
  • Karma: +2/-0
  • Pixel Padawan
    • PypeBros
    • View Profile
    • Bilou Homebrew's Blog.

Re: Platformer Sprites (WIP)

Reply #16 on: February 05, 2013, 09:48:18 am
It works much better at this speed. The only part where it seems that some more intermediate frame could help is when he recovers his arms before standing up.

A second item that looks curious is the smoke during the "walk" cycle. There's a first puff (greyish - dust? ) when landing and a second one (blue-ish -- steam ?) when lifting. My concern is that the two puffs seem to come from the same place and behave the same, as if produced by the same cause, while the cause obviously can't be the same.



I note these frame have 170ms delay (opposed to 30ms for other part of the animation that are equally dynamic).
(Btw, it looks like you could easily opt for vector animation of that bot's arms with no loss of detail).
« Last Edit: February 05, 2013, 12:55:55 pm by PypeBros »

Offline ericbloom

  • 0001
  • *
  • Posts: 21
  • Karma: +0/-0
    • View Profile

Re: Platformer Sprites (WIP)

Reply #17 on: February 08, 2013, 02:23:31 pm
It works much better at this speed. The only part where it seems that some more intermediate frame could help is when he recovers his arms before standing up.

A second item that looks curious is the smoke during the "walk" cycle. There's a first puff (greyish - dust? ) when landing and a second one (blue-ish -- steam ?) when lifting. My concern is that the two puffs seem to come from the same place and behave the same, as if produced by the same cause, while the cause obviously can't be the same.



I note these frame have 170ms delay (opposed to 30ms for other part of the animation that are equally dynamic).
(Btw, it looks like you could easily opt for vector animation of that bot's arms with no loss of detail).

Thanks for the input. The first puff is meant to be dust, the second steam. Maybe a more extreme color shift could keep these separate.

How would I go about adding vector animation?

Offline PypeBros

  • 0100
  • ***
  • Posts: 1220
  • Karma: +2/-0
  • Pixel Padawan
    • PypeBros
    • View Profile
    • Bilou Homebrew's Blog.

Re: Platformer Sprites (WIP)

Reply #18 on: February 08, 2013, 05:35:32 pm
Thanks for the input. The first puff is meant to be dust, the second steam. Maybe a more extreme color shift could keep these separate.
I think the color shift is sufficient the way it is. I'd rather work on the steam's source point and whirls.


Quote
How would I go about adding vector animation?
That's something to sort out with your programmer/game engine, I'm afraid. "Another World" and "Prince of Persia" (Apple II) illustrate what I had in mind. On a NDS, I'd simply turn on 3D layer and instruct one polygon to be drawn where the robot's arm should be, and update the coordinates of the corners accordingly. (Maybe some rotated sprite overlaid could do the trick too).

Offline ericbloom

  • 0001
  • *
  • Posts: 21
  • Karma: +0/-0
    • View Profile

Re: Platformer Sprites (WIP)

Reply #19 on: March 24, 2013, 11:09:39 pm
You're right, the shapes of the dust  / steam would help differentiate them.

Here's an update to the runner. These animations are just stringed together in Photoshop, so the timing and spacing might look a little funky.





We also opened up a website, so check it out if you'd like some overall progress on the game! http://www.saturdaygames.net/

Offline PypeBros

  • 0100
  • ***
  • Posts: 1220
  • Karma: +2/-0
  • Pixel Padawan
    • PypeBros
    • View Profile
    • Bilou Homebrew's Blog.

Re: Platformer Sprites (WIP)

Reply #20 on: March 25, 2013, 11:56:11 am
I love most of those animations. There are two points that looks a bit odd,
- arms are curiously arked in the "idle" and the "falling" animations, with no obvious relationship between the rest of the animations (e.g. holding helmet while running).
- the jump and the slide static frames introduce a significant shift against the other animations. Granted, your body doesn't move that much during those phases, but not having the slightest detail that moves makes it a bit odd. I'd suggest that either some part of the clothes flap with the wind or that the helmet moves a little bit to keep some movement and say "no, this is no mistake, this is no ATARI 2600 sprite used where some other sprite should have been".

Offline snake85027

  • 0001
  • *
  • Posts: 11
  • Karma: +0/-0
    • View Profile

Re: Platformer Sprites (WIP)

Reply #21 on: March 26, 2013, 01:25:22 am
just wanted to say really awesome animation, I can feel the physical force in it.

Offline ||||

  • 0010
  • *
  • Posts: 341
  • Karma: +0/-0
  • The brand with four stripes
    • llll_lijj
    • http://pixeljoint.com/pixels/new_icons.asp?owner=30996&ob=search&dosearch=1
    • Lijj
    • View Profile
    • rawbetty.com

Re: Platformer Sprites (WIP)

Reply #22 on: April 03, 2013, 08:49:01 pm
just wanted to say really awesome animation, I can feel the physical force in it.
Just wanting to 2nd that. I like the little explorer sprite too. The jump is simple yet effective.

Offline ericbloom

  • 0001
  • *
  • Posts: 21
  • Karma: +0/-0
    • View Profile

Re: Platformer Sprites (WIP)

Reply #23 on: April 04, 2013, 12:18:00 am
@snake85027 & |||| : Thanks! That means a lot. Animation has always been really interesting to me, and it's a lot of fun to have a project to get into.

@PypeBros : I'm not sure what happened, I typed up a response a week or so ago and it seems to have been lost. Basically: Thanks. That was really helpful feedback.

I've gone into all the sprites and made the arms with continuity in mind. The earliest sprites had the more stylized arms. I did so thinking it would create a nice silhouette. In practice I found giving the arms more substance (on a sprite this size that means another pixel in width) made for better animations. Here are a few cleaned up versions:



Note: The army crawl is unchanged. I'm posting it to show all his movement states. The sprints are pushed a little more to add some oomph. I added a more detailed idle too. Idles are a lot of fun, and I might pack more into it.

I'm still scratching my head as to what I can add to the single frame slide and hurdles since there's minimal amount of shading to add subpixel animation, and they're really small sprites to jitter an entire pixel. I might add dust effects to the slide?

Offline Mr. Fahrenheit

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

Re: Platformer Sprites (WIP)

Reply #24 on: April 04, 2013, 12:41:53 am
I'd add some more contrast to all of your sprites, some details are hard to see even at the upscaled resolution. I, like most everyone else, love the trench guy! Keep up the good work!  ;D

Offline ericbloom

  • 0001
  • *
  • Posts: 21
  • Karma: +0/-0
    • View Profile

Re: Platformer Sprites (WIP)

Reply #25 on: April 29, 2013, 05:31:21 pm
Not an animation yet, but check out the tank I'm working on.



Well, not a tank, per se, but a robot with treads. This fella' will act as out moving platform. On top we can add different environmental objects like pillars, barbed wire, or enemies. That's the plan, at least.

It's pretty close to animation time, every relevant piece is layered (the wheels and cogs are actually fully rendered separately under the treads, the treads are several layers for easy animation and texturing, etc).

The hangup I'm having now is rethinking my palette.

On the right I've used the greyscale range I've used on the other robots. It's very soft. On the right is a quickly adjusted fix with deep shadows and highlights. What do you all think? Can this be added with extremes in shadow and reflection and still fit in the 'world'?

Offline Mr. Fahrenheit

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

Re: Platformer Sprites (WIP)

Reply #26 on: April 29, 2013, 08:53:30 pm
Its really nice but the style seems quite different then the rest of the enemies.

Offline yaomon17

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

Re: Platformer Sprites (WIP)

Reply #27 on: April 30, 2013, 01:27:09 am
I agree. The dithering, sharp highlights and reflected light makes the style very different. I think it would be more consistent if the robot were to look something like this:

I wouldn't suggest changing the robot though since you have already animated it. I simply edited it instead of the tank since it would be faster in showing the point of the style inconsistency.

Offline ericbloom

  • 0001
  • *
  • Posts: 21
  • Karma: +0/-0
    • View Profile

Re: Platformer Sprites (WIP)

Reply #28 on: April 30, 2013, 02:33:03 pm
Good point. I got pretty carried away. The larger size gave me more room to play, plus I'm getting more comfortable making these and I think detail is a natural feature creep.

Edit:

Here is a current WIP of the background by another artist. We still need to tweak colors to get characters working with the background. The idea behind the additional detail on the tread creature was to make it more of a background element having the same level of detail.

Any advice on keeping the character visible on the background?



The background artist, Harry, also has a webcomic worth checking out! http://demonsmirror.com/
« Last Edit: April 30, 2013, 04:36:35 pm by ericbloom »

Offline yaomon17

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

Re: Platformer Sprites (WIP)

Reply #29 on: April 30, 2013, 09:47:33 pm
Increase the character's saturation and maybe up the contrast a bit.

Offline Mr. Fahrenheit

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

Re: Platformer Sprites (WIP)

Reply #30 on: May 01, 2013, 12:12:03 am
The detailed and busy background will definitely draw attention away from the sprites. If you need to keep the detailed background clean up the lines and desaturate it.

Offline PypeBros

  • 0100
  • ***
  • Posts: 1220
  • Karma: +2/-0
  • Pixel Padawan
    • PypeBros
    • View Profile
    • Bilou Homebrew's Blog.

Re: Platformer Sprites (WIP)

Reply #31 on: May 02, 2013, 08:08:19 am
?

Yet, imho, your darkest BG layer is still too dark and might have to be linked to the level design so that it never clutters the playable area


(I assume that resolution mix is not intended and results from the quick-mockup nature of the posted picture)

Offline Mr. Fahrenheit

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

Re: Platformer Sprites (WIP)

Reply #32 on: May 02, 2013, 10:43:21 am
Sorry, by background I meant the playing area tiles and stuff like that  :(

Offline Decroded

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

Re: Platformer Sprites (WIP)

Reply #33 on: May 02, 2013, 01:02:47 pm
...
(I assume that resolution mix is not intended and results from the quick-mockup nature of the posted picture)
As in this case, I find it hard to even look straight at something with mixed resolution.

Offline ericbloom

  • 0001
  • *
  • Posts: 21
  • Karma: +0/-0
    • View Profile

Re: Platformer Sprites (WIP)

Reply #34 on: May 02, 2013, 07:34:55 pm
Oh wow, that makes a world of difference, PypeBros. Thanks for illustrating Mr. Fahrenheit's suggestion.

The different resolutions are actually intentional. The intent is to create a more detailed background with simplified characters on top, kind of like an animated cartoon. Doubling the resolution for the background gave this effect. By the reception it sounds like this is a big no no.

---

Going to edit this in as to not bump the post. Here's the now nicknamed "Treads" as he might exist in the game. The plan is to use him for any moment we might want a horizontal moving platform / wall of death / what have you.

« Last Edit: May 06, 2013, 01:30:03 am by ericbloom »

Offline ericbloom

  • 0001
  • *
  • Posts: 21
  • Karma: +0/-0
    • View Profile

Re: Platformer Sprites (WIP)

Reply #35 on: June 17, 2013, 03:36:03 am
A little hiatus, but here's some fun with subpixel animation. Learning pixel animation has a definite feature-creep to it:



One trick was to keep the central portion from moving at all, yet still conveying movement. This will let us use it as a moving platform on the central portion without worrying about pixel jitter.

Offline PypeBros

  • 0100
  • ***
  • Posts: 1220
  • Karma: +2/-0
  • Pixel Padawan
    • PypeBros
    • View Profile
    • Bilou Homebrew's Blog.

Re: Platformer Sprites (WIP)

Reply #36 on: June 17, 2013, 06:35:42 am
Quote
One trick was to keep the central portion from moving at all, yet still conveying movement. This will let us use it as a moving platform on the central portion
dampers at work ?

Pixel-wise, it's a bit weird not to see those treads moving. This one is perfect for idle, but imho wouldn't work for moving platform.

Another thing about the two balancing cogs/wheels on the top. I'd rather see them balance (i.e. one's movement is countered by the other's) rather than move up/down syncrhonously

Offline ericbloom

  • 0001
  • *
  • Posts: 21
  • Karma: +0/-0
    • View Profile

Re: Platformer Sprites (WIP)

Reply #37 on: June 18, 2013, 04:13:30 pm
Yeah, currently it's just idling. Movement will have treads animating fully + smoke from the stacks.

Good idea about the support cogs. That's a missed opportunity to break up the uniformity.