AuthorTopic: [WIP] Action-platformer sprites from a complete beginner  (Read 15035 times)

Offline BowTieDaddy

  • 0001
  • *
  • Posts: 15
  • Karma: +0/-0
    • View Profile
Hey guys!  I'm completely new to spriting (save a little experience doing doofy recolors and stuff almost a decade ago) and I'm looking to improve.  I've read some tutorials and tried some stuff on, so I'd really like to hear any feedback you guys have!

I've been doing a lot of experimenting, and have two products in a state that I can even remotely show:


(goofed on the transparency here, but I'm having image uploading problems so I can't fix it at the moment)



Tell me what you think.  Thanks, everyone!

Offline rikfuzz

  • 0010
  • *
  • Posts: 427
  • Karma: +1/-0
    • View Profile
    • twitter @hot_pengu

Re: [WIP] Action-platformer sprites from a complete beginner

Reply #1 on: February 28, 2012, 07:53:30 am
They're pretty huge!  Would fill most of the entire screen of Ghouls and Ghosts/Goblins (whch may be of useful reference):

http://arcade.svatopluk.com/capcom/ghouls_n_ghosts/

If I were you, I'd cut them in half (at least). It's going to be pretty tough working at this size..

Offline BowTieDaddy

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

Re: [WIP] Action-platformer sprites from a complete beginner

Reply #2 on: February 28, 2012, 02:39:44 pm
That's actually a question/problem I had that I couldn't really find answers to anywhere - I'm honestly not completely solid on the relationship between character-size and screen size.  As this game would be running on a computer, wouldn't the resolution be a lot bigger, which in turn would mean that bigger sprites would be acceptable?  I don't mean to be contrary, I honestly don't know and I'm just trying to figure things out.

Offline Phlakes

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

Re: [WIP] Action-platformer sprites from a complete beginner

Reply #3 on: February 28, 2012, 03:13:15 pm
You don't want to fill the whole screen when you're doing pixel art. That would be either crazy or really, really time consuming.

Set the size you want it to be, 320x240 is one of the most manageable, and you can even scale it later if you want.

Offline BowTieDaddy

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

Re: [WIP] Action-platformer sprites from a complete beginner

Reply #4 on: February 28, 2012, 06:09:45 pm
Awesome, thanks for the advice guys.  I'll try and do some smaller redesigns and then post what I've got.

Offline BowTieDaddy

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

Re: [WIP] Action-platformer sprites from a complete beginner

Reply #5 on: March 02, 2012, 06:23:09 am
Hey guys, got some time to work on this today.  Did a redesign on that first character down to 32x32 (just below half the original dimensions), so tell me what you think:



And this is him blown up, so you can see it easier (the proportions might have been slightly goofed in the expansion process, not sure):



Thanks everybody!

Offline 9_6

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

Re: [WIP] Action-platformer sprites from a complete beginner

Reply #6 on: March 02, 2012, 02:12:44 pm
That looks pretty good.
You don't need to post resized pictures. Try clicking on images here and see what happens.



-Pay attention to your colors.
Somehow, you used about 40 colors in your sprite. Try recycling colors.

-Pay attention to lightning. My edit isn't really good but your sprite looks a bit flat due to iffy highlights.

-Outlines can be shaded too. They don't need to be black.
« Last Edit: March 02, 2012, 02:17:01 pm by 9_6 »
Does scaling an image blur it?
Opera fix Firefox fix

Offline BowTieDaddy

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

Re: [WIP] Action-platformer sprites from a complete beginner

Reply #7 on: March 05, 2012, 11:35:48 pm
Ah, that all makes sense.  Thank you.  I'm going to have to examine your edit closely to see what I can learn.

Just a question about the color count: a lot of those colors were a result of me trying to use colors that weren't black in the outlines.  In your edit I see that you partially got around that by making it a lot darker in general (so that you could do double-duty on shading and on outlines), but would these techniques work on a brighter, more cartoony style as well?  Because that's probably what I'd be more interested in.

Offline jams0988

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

Re: [WIP] Action-platformer sprites from a complete beginner

Reply #8 on: March 06, 2012, 12:21:31 am
Quote
Just a question about the color count: a lot of those colors were a result of me trying to use colors that weren't black in the outlines.  In your edit I see that you partially got around that by making it a lot darker in general (so that you could do double-duty on shading and on outlines), but would these techniques work on a brighter, more cartoony style as well?  Because that's probably what I'd be more interested in.


How does that look? All I did was bump up the contrast and brightness. What program are you using for pixel art? Pro Motion and Graphics Gale both make it very easy to tweak colors using the palettes. All you have to do is pick a color from the palette, and then change that color, and all the areas of your picture that share that color will also be updated. It makes trying out different color combinations very fast and easy. If you need a more in-depth explanation of how to use the palettes like that, just let me know.
« Last Edit: March 06, 2012, 12:24:25 am by jams0988 »

Offline ErekT

  • 0010
  • *
  • Posts: 330
  • Karma: +0/-0
  • fistful of pixels
    • View Profile

Re: [WIP] Action-platformer sprites from a complete beginner

Reply #9 on: March 06, 2012, 01:01:42 am
You rarely, if ever, need more than 16 colors for (pixelled) game sprites. And even that is pretty overkill for the size you have there. You can of course use as many colors as you like but the fewer the colors, the easier the sprite is to work with. Especially if you want to animate it. Looks better too, more crisp and clear.
« Last Edit: March 06, 2012, 01:03:35 am by ErekT »

Offline BowTieDaddy

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

Re: [WIP] Action-platformer sprites from a complete beginner

Reply #10 on: March 06, 2012, 06:14:00 pm
I'm using Graphics Gale, actually, but I had no idea about that functionality - or palette control in general, actually.  I'll have to look up how to do that, thanks.

Offline jams0988

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

Re: [WIP] Action-platformer sprites from a complete beginner

Reply #11 on: March 07, 2012, 04:35:39 am
I didn't know Graphics Gale did it until someone helpful on the forums mentioned it off hand a month or so ago, myself. =)
For Graphics Gale, it's easy. Just go All Frames > Color Depth, and then pick the number of colors you want and such, and hit okay. After you do that, your palette will be locked, and any color changes you make will be reflected everywhere in the drawing. You can also do All Frames > Adjust Color to adjust the balance of the whole picture at once, but you won't have as much control doing it that way.

Offline BowTieDaddy

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

Re: [WIP] Action-platformer sprites from a complete beginner

Reply #12 on: March 10, 2012, 05:02:10 am
Alright, so after tooling around with the palette size (thanks, jams!) I ended up with this.


(again, apologies for the transparency issues.)

Got everything down to ten colors, if I'm reading this correctly.  This still isn't addressing the shading criticism I've been given, particularly on the armor, but while I go read a guide or two on shading tips I'm wondering if this is on the right track, or if I've misunderstood something somewhere.  I tried not to copy the examples I'd been provided exactly so that I could hopefully goof up and learn something, haha.

Thanks! 

Offline Facet

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

Re: [WIP] Action-platformer sprites from a complete beginner

Reply #13 on: March 13, 2012, 10:01:48 pm
Hi there, cute sprite, awesome progress so far :)

I made a little redux edit to demonstrate just how simple you could go when aiming for a bright, cartoony look; just two colours for any material (light/shade) can be enough and might also be easier to read and animate. Shaded outlines can look nice but I think it's overcomplicating the sprite here. I took a couple of liberties; I was having trouble figuring out his arm from his chest so I just moved it (I do actually like the original pose) and I also shrunk his lower body for reasons of cuteness.



Quote
I'm honestly not completely solid on the relationship between character-size and screen size.  As this game would be running on a computer, wouldn't the resolution be a lot bigger, which in turn would mean that bigger sprites would be acceptable?  I don't mean to be contrary, I honestly don't know and I'm just trying to figure things out.

Bigger sprites are perfectly acceptable but don't really play to the strengths of pixel art. Big sprites are much harder to polish up nicely, are an enormous pain to animate and mostly don't look as good anyway (I learned the hard way :lol:). A lot of modern pixel art games are meant to be viewed at several times their original resolution.

Offline BowTieDaddy

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

Re: [WIP] Action-platformer sprites from a complete beginner

Reply #14 on: March 14, 2012, 01:47:06 am
Ah, thank you!  I really like the suggestions, and they're making me think quite a bit - I don't mind doing as many redesigns as possible to learn the ropes, so maybe I'll try a brighter and simpler look soon.

In my original designs his legs were actually quite a bit smaller - I was thinking that he would be roughly the size of the smallest, most basic enemies, but most enemies would be taller, and bosses taller than that.  Kind of a mix of the Mega Man and Castlevania size-ratios.  Unfortunately, in sketches I've done on his animation it's very difficult for his run to look active and dynamic with such short legs.  We'll see as I keep experimenting, anyway.

Thanks!

Offline Facet

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

Re: [WIP] Action-platformer sprites from a complete beginner

Reply #15 on: March 15, 2012, 01:28:27 am
Great, concentrating on finding nice, simple shapes should be a priority, even when you're aiming for a high level of detail (as part of the process). Just make sure you aren't losing structure (things like the demarcation of limbs and such) when/if you shade and add detail.

I happened to shorten the legs in my edit for a lack of space as much as anything; just see what works for you. Animation might be tough if you're trying to keep the torso orientated square towards the viewer; he'd have to do a crab shuffle :).
 

Offline BowTieDaddy

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

Re: [WIP] Action-platformer sprites from a complete beginner

Reply #16 on: March 16, 2012, 03:47:11 am
Did some experimentation on the King, but it didn't work out so well.  So I decided that maybe it was time to spread out to other characters and practice different styles.

On the more detailed side, I decided it was probably best to practice shading with something simple:


To practice something more cartoony, I tried a slightly larger character so that I could pay more attention to the shapes:


I'm really attached to having outlines on my sprites - when I draw/sketch designs I like to use really thick outlines, so dropping them entirely makes the characters look to foreign to me - and I'm wondering if the current strategy I'm using is working.  I feel like there are a couple points in each where it falls apart, but I'll see what you guys have to say about it.

Thanks!

Offline jams0988

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

Re: [WIP] Action-platformer sprites from a complete beginner

Reply #17 on: March 16, 2012, 05:38:50 am
Cool new sprites. You should use more vibrant colors, though. They both look a bit washed out! Did a quick edit on your eye monster for a comparison:

Your eyeball was completely gray. As a general rule, you should never be using true grays in any of your drawings, unless you're going for a very specific effect. In real life, you'll never find any true grays, anywhere. Take a picture of anything (even your eye!) and then do a color picker on it in photoshop or whatever. Unless it's very dark or your camera is broken, you should have some color reflected in there! In cartoony drawings like yours, it's even more important to use colors and lots of contrast, otherwise it'll look depressing and dull. Remember to make your drawings pop. Try weird color combinations! It's better to be a bit oversaturated than to be undersaturated, I think.

Ah, I also gave him some secondary shading from the ground in an attempt to make him look a bit shinier looking. Yours wasn't looking very reflective, in my opinion. Not sure how well I succeeded. Also played around with his iris, giving it a shadow and such. The iris...group...thing bulges off the eye a bit...it's not flat. The cornea is set inside the eye, sort of like a funnel shape? I think, anyway! I advise you to look up eye anatomy, hahah!

Note that my edit isn't too great. But that's because I'm not too great. XD
I'm actually hoping someone else does an eye edit now, so I can see what I did wrong, too. I had a hard time picking decent colors for it, somehow.

Edit: Oh. Just a tip that might be a huge help to you, Bowtie. (It was to me the first time I saw it done!)
Watching a lot of good digital painters do their thing, I noticed a lot of them started by filling their whole canvas with one color - basically whatever color they thought best fit the mood/lighting of their scene. If it was a swamp or a forest or whatever, they'd fill it with a murky green or a happier green, respectively. If it was an airplane battle scene, sky blue, etc. This helps set the mood for your piece, and it helps you paint the objects in your scene better too. Say you were doing the airplane scene. If you started out painting your Red Baron's plane with a simple white background, you might find that when you added the blue sky behind it, it looked too red. Because a red plane in the blue sky shouldn't *be* shaded like a red plane in a white void; the plane in the sky would be picking up the blue light being shot at it from all directions from the sky. It'd end up looking purple in a lot of places!

So when I paint now, I start with a wash for my main color. Then I paint the rough background and such. Then I add in the objects and shade, and keep on adding detail and changing things till they look right. So, when you're making your sprites, it's best to draw them on the background they're going to appear on, so you have an accurate idea of what they're really going to look like. If you don't have a background for them yet, or don't feel like making one, I'd at least suggest putting a wash behind them besides white. The colors surrounding an object dictate what color the object is going to appear as! I drew my eyeball edit assuming he'd be under a cheerful cartoon sky, for example. If he was in a cave, he'd be colored completely differently. Your eye looks weird because you colored him as if he exists inside of a white nothingness, which he obviously doesn't! That makes him look depressing. D:

Good luck, sir! :3
« Last Edit: March 16, 2012, 06:15:11 am by jams0988 »

Offline BowTieDaddy

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

Re: [WIP] Action-platformer sprites from a complete beginner

Reply #18 on: March 16, 2012, 01:59:23 pm
Okay, that makes sense; but what if these sprites (especially the King, since he's the player-character) are going to be used in multiple levels, with multiple backgrounds?   I would hope I wouldn't have to change the tint for every level.

Offline jams0988

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

Re: [WIP] Action-platformer sprites from a complete beginner

Reply #19 on: March 16, 2012, 03:59:27 pm
Mmm, good question. I guess in game art, you have to balance realism, aesthetics, and usability. You're right that my eye's shading wouldn't make sense in a dark, purple cave, but I think people would still accept him more than your gray one...that is an interesting problem, though!

Of course, most game engines will easily allow you to tint your sprites through code anyway, so you actually *could* tint your sprites to match their environment if you wanted to. Most games don't seem to do this, though! Or at least the old SNES games I remember and love...

Actually, didn't Super Metroid do it? I forget...she at least had the glowing visor, which was pretty badass. XD

Now I *really* want an expert opinion, hahah.

Offline PixelPiledriver

  • 0011
  • **
  • Posts: 997
  • Karma: +6/-0
  • Yo!
    • View Profile
    • My Blog

Re: [WIP] Action-platformer sprites from a complete beginner

Reply #20 on: March 16, 2012, 08:16:57 pm
Depending on the hardware some games do actually run on an Color Table or Index based graphics engine.
But it is not necessary to run in an indexed color mode (some graphics APIs such as OpenGL give you the option) as you can write your own code to handle color palettes.

You can totally alter image data using Pixel Shaders:
http://en.wikipedia.org/wiki/Shader
http://www.facewound.com/tutorials/shader1/

Many different effects can be achieved including palette swaps.
How you write the Shader to handle the color swap is very flexible.
The data can be passed in as RGBA values or you could pass in a tiny texture that has your palette of choice lined up.
Then using some simple index math you can access each of the colors as if it were an array.
Conceptually it would be something like this:


But really you could pass in a texture with a single pixel of each color (I've made a 2x2 just for a bit more clarity):


So now that you have a base table if you pass in another palette as a texture:



you can compare them and make the color swaps inside the shader.
This is HLSL code:

float4 ColorSwap(InStruct data) : COLOR  <-------- Pixel Shader function signature
{
  float4 color = tex2D(image, data.texel);  <-------- Get the image data of the current texel

  if(color == colorTable1(0))                    <-------- Compare current texel color to the "Base" Color Table's index 0
    color = colorTable2(0);                        <-------- Swap the current texel color to the new Color Table's index 0

  if(color == colorTable1(1))                    <-------- Compare current texel color to the "Base" Color Table's index 1
    color = colorTable2(1);                        <-------- Swap the current texel color to the new Color Table's index 1

  .....for each index......

  return color;                                       <-------- Set the current texel color to be drawn
}

Of course if you're looking to do something like this it requires some prerequisites:
- C and C++ coding knowledge
- DirectX, OpenGL or some other graphics API
- HLSL or GLSL or other Shading language
- Basic game engine

If you are not a coder some of the more "Game Maker" type programs also support Shaders.
I know that MultimediaFuison2 HWA does. Not sure what other programs do.
There is a few decent packs of Shaders that you can download for MMF2.
But if you want to make your own you'd have to learn HLSL or some similar shading language.

I want to do another post about how to do quick palette swaps in Graphics Gale.
But I'm off to eat lunch.
And knowing that it is, we seek what it is... ~ Aristotle, Posterior Analytics, Chapter 1

Offline 9_6

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

Re: [WIP] Action-platformer sprites from a complete beginner

Reply #21 on: March 16, 2012, 08:22:00 pm
Why are you bombarding him with all that complicated, unnecessary stuff? This is pretty scary for a newbie you know.

You do not need color tints or even shaders for sprites to work on multiple backgrounds.
Making sprites stand out from the background is even a desired thing in games.
You have to keep the balance between standing out and still looking coherent.

I'd suggest you make an actual background to see how that works out.
You may just find out that your fear of this sprite not being able to work on multiple backgrounds is unfounded.
« Last Edit: March 16, 2012, 08:25:43 pm by 9_6 »
Does scaling an image blur it?
Opera fix Firefox fix

Offline Charlieton

  • 0010
  • *
  • Posts: 167
  • Karma: +1/-0
  • awkward dancer
    • View Profile

Re: [WIP] Action-platformer sprites from a complete beginner

Reply #22 on: March 16, 2012, 09:18:37 pm
Why are you bombarding him with all that complicated, unnecessary stuff? This is pretty scary for a newbie you know.
While true that it's a bit out of place for this particular thread, I still found it to be an interesting read. I'm glad he wrote it! ;D

I want to do another post about how to do quick palette swaps in Graphics Gale.
Please do!
Det skulle vara lätt för mig att säga att jag inte gillar dig, men det gör jag; tror jag

Offline PixelPiledriver

  • 0011
  • **
  • Posts: 997
  • Karma: +6/-0
  • Yo!
    • View Profile
    • My Blog

Re: [WIP] Action-platformer sprites from a complete beginner

Reply #23 on: March 16, 2012, 09:57:07 pm
Quote
Why are you bombarding him with all that complicated, unnecessary stuff? This is pretty scary for a newbie you know.
Knowing more stuff can never hurt you.
I'm a graphics programmer doing dev work on games so I'm able to elaborate on such topics.
I was more responding to this sort of side conversation:

Quote
I would hope I wouldn't have to change the tint for every level.
Quote
Of course, most game engines will easily allow you to tint your sprites through code anyway, so you actually *could* tint your sprites to match their environment if you wanted to.

rather than offering an art process solution to working with his sprites.
Just sharing some info on what is possible.

Quote
Please do!
Cool. I'm actually rather sick so it'll take me a bit to put it together.
And knowing that it is, we seek what it is... ~ Aristotle, Posterior Analytics, Chapter 1

Offline PixelPiledriver

  • 0011
  • **
  • Posts: 997
  • Karma: +6/-0
  • Yo!
    • View Profile
    • My Blog

Re: [WIP] Action-platformer sprites from a complete beginner

Reply #24 on: March 16, 2012, 11:23:55 pm
Here's how I work with Indexed colors in GraphicsGale.

Start a new file and draw some stuff.
This is your dude:


Then you'll want to put your image into an Indexed color mode:


If you select a color and edit it with the color sliders it will change the color anywhere it is used in the image:


But this will act as the palette for the entire animation.
So let's set an option that allows each frame of animation to use its own palette:


Now add some new frames:

I like to use the Hotkeys:
1 - Copy frame
2 - Paste frame to the right
They are simple and accessible. But it's up to you.

Now when you edit colors they will be isolated per frame:



More Hotkeys:
Q - Previous frame
E - Next frame
That way we can jump between them quickly.

The preview window will be flashing all of the color palettes like crazy.
If you find the Preview window annoying you can pause it:


Save your work. Make a backup. Eat a sandwich.
When you're done if you really want to see them side by side you have to change back the color mode:


Then export the frames:


and you'll get an image like this:


Notes:
A lot of the UI shown has been edited to be more compact.
It will look similar but not exactly the same in GraphicsGale.
You can start drawing in one of the Index Color modes right from the start if you like.
And knowing that it is, we seek what it is... ~ Aristotle, Posterior Analytics, Chapter 1

Offline BowTieDaddy

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

Re: [WIP] Action-platformer sprites from a complete beginner

Reply #25 on: March 16, 2012, 11:36:55 pm
Oh, interesting.  It's good to know that changing the color scheme and comparing it is that simple.

I'll have to work on backgrounds in general at some point in the future, but for now I can try to move away from the gray to a blue or something else inoffensive.  In terms of sketching I have much more experience with characters than with backgrounds/objects, so that's going to be a trial in and of itself.  Probably won't come until I have basic strategies to get my sprites coherent-looking under my belt, though - even animation is looking pretty foreboding from here, haha.

Thanks for all the help, everyone!

Offline 9_6

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

Re: [WIP] Action-platformer sprites from a complete beginner

Reply #26 on: March 17, 2012, 12:55:20 am
Eyes are shaped like this:
(> )
So the iris isn't flat. You should consider than when shading.
You could also add more contrast into it and do some hue shifting because you tend to stay on the same hue for each ramp which looks kind of monotone.
Does scaling an image blur it?
Opera fix Firefox fix

Offline BowTieDaddy

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

Re: [WIP] Action-platformer sprites from a complete beginner

Reply #27 on: March 20, 2012, 07:11:33 pm
Edits on the eyeball, as well as edits on that new knight:





Tried to take the shading and coloring comments I got into account on both of them.  The pupil of the eyeball isn't quite as highlighted as some of you suggested, but everything I tried made it less sharp and so less emotive, which I'd like to avoid.

I'm thinking a simpler style (a la the eyeball and the sort of direction the knight is going) is going to satisfy me most, so I may have to see what I can do with the old knight.

Thanks!

Offline BowTieDaddy

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

Re: [WIP] Action-platformer sprites from a complete beginner

Reply #28 on: March 27, 2012, 02:55:49 pm
Going to assume the lack of comments means I'm on the right track, so I started on my next set of projects.



I also did the run cycle for that eyeball, but unfortunately I didn't realize I had to buy the full version of GraphicsGale to save as .gif, so I'm going to have to wait a little tog et the money to upgrade so I can show that.  In the meantime, I'm fairly happy with this one, but I think some of the shading is off and I'm having a hard time on the hair.  Looking at it as I've just posted it, the frizziness definitely isn't working, so I'll have to find some other way to make it work.  The face is also a concern - having a hard time cramming all those features on there, haha.

Thanks!

EDIT: had a burst of creativity today and figured out how to solve some of those problems.  Here's a redesign:

« Last Edit: March 28, 2012, 12:39:23 am by BowTieDaddy »