Pixelation

Critique => Pixel Art => Topic started by: LoftyTheMetroid on March 17, 2008, 10:42:31 pm

Title: Get Back High -- A Fighting Game
Post by: LoftyTheMetroid on March 17, 2008, 10:42:31 pm
Hello, everyone!  This site was recommended to me a while back, and I've finally found the time to join.  You're all incredibly talented, and, to be honest, I'm a little intimidated (and envious).  Hopefully, with enough practice, I'll be able to make something that doesn't look horribly amateur compared to you guys' stuff. :)

Anyway, on with the topic!

I'm about to graduate high school, and am getting serious about getting involved in the game industry.  To that end, I've been teaching myself everything I can about game development.  I'm also working on my very own video game (using the Allegro game library) called Get Back High.  It's an extremely unique fighting game with outrageous characters and gameplay that takes place in a crazy high school with even crazier students (and teachers).  I've got the programming thing down, but I don't really know where to begin with the artwork.

Let's see, where do I begin...

Well, first, I wanted to see if I was even competent at pixel artwork, so I attempted making one of the standing sprites of the main character.  I didn't have a drawing tablet (more on that later), and quickly found the mouse was an inadequate tool for my needs (at least, for the general layout of the sprite, not the details).  So, I started using my fairly decent hand-sketching skills to draw poses and models (usually while at school), and scanned them onto my computer.  Using Pixen, which was the first free Mac-compatible pixel software I could find (more on that later), I scanned in my first sketch, estimated the size my sprite would be and proportions of the sketch (since Pixen stretches background images to fit the dimensions, which could potentially distort my sketches), and traced it with a mouse.  Afterwords, I filled in the details, and got a pretty decent (or, at least, I think so) end product.

Oh, and before you look at them, I should probably tell you the style I'm going for.  First, I want to intentionally use a low-resolution.  I'm going for a pixelly, old-school, SNES-esque look.  Because of the game's gameplay style, I also don't need the sprites to look perfect -- I'm going for personality, and stray pixels here or there won't hurt it.  I'm doing this for several reasons: 1) Fits the game's style, obviously, which needs to be ridiculous when you have, say, a maniacal midget genius commanding physically deformed robots (hunchbacks, beer-bellies, and thunder-thighs) through the use of a mechanical diaper she wears.  2) Allows the artwork to be not-so-perfect, which is nice, since this whole game is going to be a lesson for me in both programming and pixel artwork and would otherwise look amateurish.  3) Since I'm making this game all by myself, creating and animating the artwork in this game is going to be a bitch, and I want to get to the point where I can create sprites in under an hour (...is that reasonable/possible?) and animate them without much difficulty.

With that all said, here are some examples of a typical page of sketches I make:

(http://i201.photobucket.com/albums/aa183/LoftyTheMetroid/sc001470f0.jpg)

(http://i201.photobucket.com/albums/aa183/LoftyTheMetroid/GBH_Scan2.jpg)

(http://i201.photobucket.com/albums/aa183/LoftyTheMetroid/GBH_Scan3.jpg)

(http://i201.photobucket.com/albums/aa183/LoftyTheMetroid/GBH_Scan1.jpg)

And so, for my first sprite, I took the following sketch (cropped and blown up as a background in Pixen):

(http://i201.photobucket.com/albums/aa183/LoftyTheMetroid/Lofty_Sketch.jpg)

Which eventually resulted in:

(http://i201.photobucket.com/albums/aa183/LoftyTheMetroid/Lofty_Stand.gif)

(...Which isn't too bad for a first sprite I think.  ...Right?)

Now, that took me, like, three hours total.  I've tried repeating the process with other sprites, but it's turning out horribly.  Pixen has a lot of bugs, and I was screwed on the outset with this next sprite due to distortion, program hiccups, and some silly mistakes on my part (like, proportion, point of view, and a bazillion other mistakes that I would normally not make).

Sketch:

(http://i201.photobucket.com/albums/aa183/LoftyTheMetroid/Eckskemethy_Stand_Sketch.jpg)

Ugly result (which I'm probably going to trash and start over on instead of trying to fix):

(http://i201.photobucket.com/albums/aa183/LoftyTheMetroid/Eckskemethy_2.gif)

(BTW, the head was a stand-in, so at least that bit of ugliness wasn't an accident.)

So anyway, I need some professional assistance. XP

First, I think a big problem for me is that I'm a sketchy type person, who needs to really sketch and mess around with an image before detailing it.  I can't do that with just a mouse, and I think I'm going to need to get a tablet.  That way, I can just sketch directly on the sprite, instead of having to hand-draw paper ones, scan 'em in, and go through all that crap.

Right?  Shouldn't I get a tablet?

If so, can I get any recommendations?  Anything from $100 to $250 would be my price range.

Second, I need a new sprite program.  Pixen just ain't cutting it.  Any recommendations on that front?  I have had people tell me Graphics Gale (I think that's it, the Japanese one) is fantastic.  Is that the direction I should go in?

Third, how should I go about making these sprites?  What's the most efficient, professional way of going about it?  What do I need to know in regards to spritesheets and color palettes and all that jazz?

Finally... thank you for slogging through all of this!  I know this is an epic post, I talk too much, ask too many questions, etc., but I'm really lost here.  I feel I'm a good enough artist (XP) that I can pick up the ropes if I can just establish a good foundation for myself.  I would be eternally grateful to anyone that can help me in that regard.

Cheers!
Title: Re: Get Back High -- A Fighting Game
Post by: Bouzolf on March 18, 2008, 08:08:02 pm
Sorry, but I think you should practice a lil more your pixelling skills before going into a big project like that.

I like the drawings, but really not the sprites. They're too big and you're not doing a good use of your pixels. To me, you should make that game either, with Flash Games like graphics or later, when you'll have better pixelling skills.

Or, you can keep doing what you are doing, and that can end up good too. But I prety shure you will be disapointed with the graphics.
 
That said, good luck with this project. It does have a great potential.  ;)
Title: Re: Get Back High -- A Fighting Game
Post by: Sherman Gill on March 18, 2008, 09:47:32 pm
The yellow and red are too close together in the pinstripe's outfit, and what's with the segmentation of the crotch? It should be part of the pants or part of the shirt.
Also, your shading is very artificial and doesn't take form or lightsource into account.
The pencil draws show lots of promise though ;).
Also, I disagree with Bouzolf. No game ever should have "Flash Game like graphics".
Title: Re: Get Back High -- A Fighting Game
Post by: LoftyTheMetroid on March 19, 2008, 02:43:15 am
EDIT:  Crap.  Should this whole thread have gone in the General Discussion?  I was thinking I'd update it later with game sprites as time went on for actual critique, but maybe for now, when I'm just trying to get advice and resources, I could have put something on the other board.  Sorry, my fault.  If this needs to be moved, then by all means, move it.

Well, wait wait wait!  While I'm all up for criticism, I'd like to get the other details ironed out first!  (Maybe I didn't make it clear enough in my first post...)

I know the sprites aren't professional (those were my first two, ever), so let's clear that up first.  The only way to get better is with practice, so that's what this project is for me.  Whenever I get the tools and setup all organized, I want all the criticism I can get.  But for right now, I don't even have the stuff to get started, so that was the main purpose of this thread.

First, a drawing tablet.  What should I do about that?

Second, I need a graphics program.  What makes something like Graphics Gale so good (if it is good), and how do I use it effectively?  (The only other graphics program I have is Gimp.  That's not suitable, I think... or is it?)

Third, how should I go about making these sprites?  What do I need to know about formatting and palettes so that this project can remain viable and provide me with experience I can use for the future?

Please, these are the questions I need answered.  Criticism comes later, if you don't mind. ;)

However, addressing what criticism I do have...

Sorry, but I think you should practice a lil more your pixelling skills before going into a big project like that.

Well, I see this project as being my practice.  I don't intend to finish it till about the end of my college years, and I imagine it being a sort of testing ground for my ideas and graphics along the way.

Quote
I like the drawings, but really not the sprites. They're too big and you're not doing a good use of your pixels. To me, you should make that game either, with Flash Games like graphics or later, when you'll have better pixelling skills.

Well, as I said, I want the sprites to appear large and pixelly (for reasons outlined above).  However, if you are already aware of that and still hold the same opinion, where exactly should I make better use of pixels?  I could use some pointers, but seeing as how these are my first sprites, I'm not good enough to understand what should be adjusted without specific points. XP

Also, I just want to make clear that I'm not looking for incredibly detailed or realistic graphics.  It's not like I'm making Metal Slug or anything, I don't need graphics like that.  (I hope that's not offensive, considering how much high-quality pixel art is produced here.)  Part of the general appeal is going to be the large pixelated style, similar to how Contact purposefully used low-res graphics for the professor and such.  I'd be more concerned with comments concerning, say, what color schemes or palettes should be used, such as what should be used for moving sprites in order for the player to differentiate them from the background image.

The yellow and red are too close together in the pinstripe's outfit, and what's with the segmentation of the crotch? It should be part of the pants or part of the shirt.
Also, your shading is very artificial and doesn't take form or lightsource into account.

Actually, I meant to show that sprite more as an example of how much trouble I'm having with the current tools I'm using, and why I need help establishing a firm foundation in a technical sense.  Sorry, I forgot to mention that, I guess I was too excited. XP

I didn't get into it, but the crotch and all that looks weird because I didn't know what layering was, and I tried to make the legs and body separately (on, which I later found out was, a distorted image of my sketch, sabotaging the sprite from the get-go -- see: why I need a tablet and new drawing program).  Afterwards, I tried to combine the layers, and then smooth it out so it didn't look like that, and a bunch of other messy stuff.  You don't need to point out the other stuff (like the effed up shoulder, how the entire chest is flat and distorted, etc.).  I already know about that, trust me.  I was testing out a LOT of features, but even so, my biggest problem (I think) was trying to trace scanned sketches in the first place.  Would a drawing tablet help, and is there a professional (but free!) pixel program I could use with it?

(By the way, when should I use the layer tool? You know, while I'm thinking about it...)

I don't mind criticism of the other guy, though.  For example, people have told me that the light blue highlights on the jeans look good, but I'm not sure if it needs them.  (Should I get into a habit of using limited palettes for technical reasons?)

And now that you brought up lighting... Taking into account that these are not stand-alone sprites and are going to be placed in multiple environments with varying light sources, what should I do in that regard?  What's the proper way to use lighting on a sprite when the lighting is assumed to not be static?  Is there a way, or do I just do what looks best for each sprite, knowing it'll never be realistic?

Thanks!  Sorry if I'm being too difficult! XP
Title: Re: Get Back High -- A Fighting Game
Post by: Sherman Gill on March 19, 2008, 03:03:28 am
First, a drawing tablet.  What should I do about that?
It's a matter of preference. For some of us (me included), it's an absolute necessity. Others like their mice and don't aspire to use greater tools (Note: sarcasm. mostly).

Quote
Second, I need a graphics program.  What makes something like Graphics Gale so good (if it is good), and how do I use it effectively?  (The only other graphics program I have is Gimp.  That's not suitable, I think... or is it?)
GraphicsGale has two main advantages over other programs: customizable hotkeys and great palette management.
Palette management is a biggy when it comes to programs. That's the only reason I can see the GIMP not being suitable, actually.
You can alter colors already placed down by setting a program to 8-bit (256 colors) color depth or less and then just changing the palette entries.

Quote
Third, how should I go about making these sprites?  What do I need to know about formatting and palettes so that this project can remain viable and provide me with experience I can use for the future?
That's tough and depends more on you than anything. I'd go with smaller sprites, though, personally.  :-*

Quote
I don't mind criticism of the other guy, though.  For example, people have told me that the light blue highlights on the jeans look good, but I'm not sure if it needs them.  (Should I get into a habit of using limited palettes for technical reasons?)
Using small palettes that you made yourself will teach you a lot about color. Very good habit to have!
Quote
And now that you brought up lighting... Taking into account that these are not stand-alone sprites and are going to be placed in multiple environments with varying light sources, what should I do in that regard?  What's the proper way to use lighting on a sprite when the lighting is assumed to not be static?  Is there a way, or do I just do what looks best for each sprite, knowing it'll never be realistic?
Overhead lighting is the general solution.

I gotta go, so I can't adress everything right now, but good luck!
Title: Re: Get Back High -- A Fighting Game
Post by: LoftyTheMetroid on March 19, 2008, 03:32:20 am
I like to ask questions. :)

(Also, nobody be afraid to chime in with your recommendations or tell me what you personally use.)

It's a matter of preference. For some of us (me included), it's an absolute necessity.

That sounds like me. Definitely.

So, what kind of tablet should I get that's between $100 and $250?  What will get me the most bang for my buck?  (...What do you use?)  I'm open to recommendations, especially specific products.

(I don't need a monstrously large one, do I?  I've heard the medium size ones are best, if that's true.)

Quote
GraphicsGale has two main advantages over other programs: customizable hotkeys and great palette management.
Palette management is a biggy when it comes to programs. That's the only reason I can see the GIMP not being suitable, actually.
You can alter colors already placed down by setting a program to 8-bit (256 colors) color depth or less and then just changing the palette entries.

Well, then maybe that's the one I should try.  (Is that the program you use?)

Quote
That's tough and depends more on you than anything. I'd go with smaller sprites, though, personally.

Well, I meant more in regards to spritesheets and if I should get used to certain palette limitations that are the norm for games (and if so, what limitations).  Also, what would be easiest and most efficient for animations.  (Animating is another topic I could probably get advice on.  For example, I don't know what onion-skinning is or how it works exactly, but I hear I should.)

BTW, since this is a fighting game, I want semi-large sprites.  Also, I know it sounds like I'm just making excuses, but the low-res thing is honestly a stylistic choice, and will be more evident in the finished product.  Even if I have to draw the sprites in high-resolution on my tablet, I'm going to purposefully lower the resolution afterwards.  The charm of the game will not be in how good the graphics are, but what the graphics are depicting.  (Perhaps this is blasphemous, but, for this game, the gameplay and character style are more important and have greater emphasis than the sprite graphics themselves.  While the individual sprites won't look like much on their own, everything will come together in the end.  Well, at least, that's the plan.  We'll see how it turns out. ;))

Quote
Using small palettes that you made yourself will teach you a lot about color. Very good habit to have!

Cool!  What types of limits should I place on myself, then (if any)?  16 color?  32 color?  What would help me out most in terms of experience?

Quote
Overhead lighting is the general solution.

Awesome, thank you.  That'll be helpful.
Title: Re: Get Back High -- A Fighting Game
Post by: Sherman Gill on March 19, 2008, 05:46:03 am
So, what kind of tablet should I get that's between $100 and $250?  What will get me the most bang for my buck?  (...What do you use?)  I'm open to recommendations, especially specific products.

(I don't need a monstrously large one, do I?  I've heard the medium size ones are best, if that's true.)
If you're poor, Wacom Bamboo* ($80 new) is a nice tablet, albeit tiny. Don't get something non-wacom though, seriously. They break and they don't work as well in the first place.

*Not Bamboo Fun, from what I understand Bamboo Funs are a watered down lame version not made for artistic use.
Quote
(Is that the program you use?)
Yup. GG 4 lyfe YO.

Quote
Well, I meant more in regards to spritesheets and if I should get used to certain palette limitations that are the norm for games (and if so, what limitations).  Also, what would be easiest and most efficient for animations.  (Animating is another topic I could probably get advice on.  For example, I don't know what onion-skinning is or how it works exactly, but I hear I should.)
PC gaming doesn't usually have any limitations in regards to sprite size. It's really tough to say anything definitive here though, particularly since I've never made fighting game sprites. Try reading this wonderful post of Baccaman though: http://www.wayofthepixel.net/pixelation/index.php?topic=2913.msg36415#msg36415 Animations are almost always made up of key frames and tweens and if you can grasp what he's saying there you can animate.
Onion skinning is a term for when the frames before and/or after the one you're looking at are slightly visible. It's pretty much to help you make tweens by seeing what the extremes you're making should be between.

Quote
BTW, since this is a fighting game, I want semi-large sprites.  Also, I know it sounds like I'm just making excuses, but the low-res thing is honestly a stylistic choice, and will be more evident in the finished product.  Even if I have to draw the sprites in high-resolution on my tablet, I'm going to purposefully lower the resolution afterwards.  The charm of the game will not be in how good the graphics are, but what the graphics are depicting.  (Perhaps this is blasphemous, but, for this game, the gameplay and character style are more important and have greater emphasis than the sprite graphics themselves.  While the individual sprites won't look like much on their own, everything will come together in the end.  Well, at least, that's the plan.  We'll see how it turns out. ;))
Don't shrink your sprites down from a large res :(. If you use nearest neighbor it leaves LOTS of artifacts and you'll double your workload having to clean that up. If you use interpolation it makes it blurry and not like pixel art anymore.


Quote
Cool!  What types of limits should I place on myself, then (if any)?  16 color?  32 color?  What would help me out most in terms of experience?
16 and 32 are both good. If you use colors efficiently 32 colors should be all you need to make something byootiful.
Also, since in GG you can tinker with colors as much as you want, it can be best to start out with a greyscale palette and just make it colorful once you've got the forms down :).
Title: Re: Get Back High -- A Fighting Game
Post by: LoftyTheMetroid on March 19, 2008, 07:12:39 am
If you're poor, Wacom Bamboo* ($80 new) is a nice tablet, albeit tiny.

Well, I may just go with that.  However, I don't mind spending more if there's a significant difference in the results or ease of use; I want this to be something I'll use for years to come.  I'm just saying, I don't want to pay beyond the point of diminishing returns, if you know what I mean.

(Although, I have heard some people say a $100 Wacom is nearly as useful as most higher priced models...)

Quote
Yup. GG 4 lyfe YO.

Then it's settled. :)

Quote
PC gaming doesn't usually have any limitations in regards to sprite size. It's really tough to say anything definitive here though, particularly since I've never made fighting game sprites. Try reading this wonderful post of Baccaman though: http://www.wayofthepixel.net/pixelation/index.php?topic=2913.msg36415#msg36415 Animations are almost always made up of key frames and tweens and if you can grasp what he's saying there you can animate.
Onion skinning is a term for when the frames before and/or after the one you're looking at are slightly visible. It's pretty much to help you make tweens by seeing what the extremes you're making should be between.

Thanks, that's good stuff!

Incidentally, I'm now ordering a copy of The Animator's Survival Kit.

Quote
Don't shrink your sprites down from a large res :(. If you use nearest neighbor it leaves LOTS of artifacts and you'll double your workload having to clean that up. If you use interpolation it makes it blurry and not like pixel art anymore.

Err, you're right.  That would be stupid.

I guess I was just trying to emphasize that I'm dead set on going for a pixelly look with my game.  By that I meant I could sketch the sprites on my computer, and then use my amateur pixel skillz to actually make them, using the sketches as kind of a background guide.  (Or something.  Can I do that?  Is it possible with Graphics Gale?  Is there a better way to get the look I want?)

By the way, just so I can throw it out there, I don't think using less pixels or making a sprite less detailed makes it any less beautiful.  It'd be like saying a game is worse because it's design is simple and not complicated.  The key is in the depth of the work, and if more is being done with less.  (Just thought I'd kind of make it clear how I feel on my game's graphics...)

Quote
16 and 32 are both good. If you use colors efficiently 32 colors should be all you need to make something byootiful.
Also, since in GG you can tinker with colors as much as you want, it can be best to start out with a greyscale palette and just make it colorful once you've got the forms down :).

Great then, I'll take your advice. :)

The color limit should be fairly easy.  I don't think I used more than 16 colors on my first sprite (if I remember correctly...).
Title: Re: Get Back High -- A Fighting Game
Post by: Shrike on March 19, 2008, 01:50:31 pm
In ways of wacom, if you want to spend more money, i was looking at the intuos3 4x6, $199. (http://www.wacom.com/intuos/4x6.cfm (http://www.wacom.com/intuos/4x6.cfm)) but i can't say i have looked at bamboo.

Title: Re: Get Back High -- A Fighting Game
Post by: LoftyTheMetroid on March 25, 2008, 05:16:12 am
Alright, so I'm rolling with Graphics Gale and a Bamboo tablet. (Would have gone for the Intuous, but the Bamboo looks like it's going to do everything I need it to.)

Anyway, quick question.  With the game software library I'm using (Allegro), the set transparency color for sprites is pink (255, 0, 255).  I've been messing around with Graphics Gale and saw a lot of options for various transparencies, but I thought I'd ask here to make sure I'm doing the right thing.

So... How do I set it up so that pink will be the default background color thing when I export my sprites?  Can I set it up so it'll be white while I work so I won't get distracted?  Also, since I've decided to work with a strict 16 color palette limit, do I need to make one of those colors pink (effectively limiting me to a 15 color palette), or is it somehow not necessary if it's the default color thing?  (I know that last question must seem particularly noobish, but I don't know how these sorts of things are saved and whatnot, if background/default/transparent/whatever colors are also part of the palette.  I'm assuming yes, but...)

Also, while I'm posting... anybody know the best way to make a spritesheet using Graphics Gale?  I saw I can save frames in one combined file and organize them by columns, but is there an easy way to save multiple animations and sets of frames to the same file, but just arranged in appropriate rows and columns?  If not, would I just have to export the various animations in single row files, and somehow manually combine them into one giant image file?  (How would I go about doing that while keeping everything even and organized so that my program can process it nicely?)

I know all my questions must get annoying, but it'll all stop once I get my bearings.  Then, later, if you're all not convinced GBH will be rubbish, I'll be sure to show you all any major progress I've made in the future. :)

Thanks!
Title: Re: Get Back High -- A Fighting Game
Post by: zephiel87 on March 27, 2008, 05:43:57 am
Transparency does count as a palette entry, so yes, you're effectively limited to 15.

I'm not too familiar with GG, so can't answer your other questions.
Title: Re: Get Back High -- A Fighting Game
Post by: Sherman Gill on March 27, 2008, 03:20:48 pm
If you wanna work with a white background and end with magic pink, just make a white color for the background and at the very end change it to the pink.
As for the sprite sheet, if all the sprites are the same size you could export each animation as an individual file and then adjust one's canvas size and use align-to-grid to copy and paste each animation (Align-to-grid just speeds the process up).