Pixelation

Critique => Pixel Art => Topic started by: Endpiece on July 23, 2009, 09:07:20 pm

Title: [C+C] [WIP] Menu Design/Beat-Em-Up Mockup
Post by: Endpiece on July 23, 2009, 09:07:20 pm
I'm currently working on a website that acts as a webcomic host and online portfolio. At the moment I'm working on the flash splash of the site - a functional front-end that allows newcomers and regular visiters to find the pages they want to visit. Since my site deals with comics and arts, I needed two buttons for each category (latest and archive) alongside a blogroll link and 'about' page.

The first idea involved using parodies of videogame boxes as navigation buttons, the results of which are displayed below. They're alright but not my cup of tea. If anyone else wants to use them, go ahead.

(http://img132.imageshack.us/img132/6388/menub.gif)

The second, current idea uses a more streamlined colour scheme to go with the website (mimicking the Nintendo Game Boy's 4-colour palette). Obviously the picture will be zoomed in to at least 200, maybe 300% for the final menu. Below is a WIP .gif preview.

(http://img132.imageshack.us/img132/6388/menub.gif)

Highlighting a sign in the final menu will change the animation of the guy's arm to pinpoint your choice, whilst highlighting the guy himself will bring up the 'about/faq/email' page.

Question for you veterans and newcomers - what changes can I make to this menu, aside from the obvious need for a background? Are there any other stylistic or compositional mistakes I need to fix?
Title: Re: Menu Navigation Design
Post by: LoTekK on July 24, 2009, 08:46:40 am
Compositionally, my initial feeling is that the guy should be on the left, pointing right. Same deal with the orientation of the arrows (first, and consequently last, arrows should point right). Love the art itself, though, and the GB palette made me smile.

[edit]Quick edit:
(http://files.getdropbox.com/u/778345/endpiece-edit1.gif)
[/edit]
Title: Re: Menu Navigation Design
Post by: honored on July 24, 2009, 12:04:53 pm
Compositionally, my initial feeling is that the guy should be on the left, pointing right. Same deal with the orientation of the arrows (first, and consequently last, arrows should point right). Love the art itself, though, and the GB palette made me smile.

Hmm the right arm (on the picture the most on the left) looks a little odd.
Maybe you could fix this up?
Title: Re: Menu Navigation Design
Post by: Endpiece on July 24, 2009, 12:57:46 pm
Compositionally, my initial feeling is that the guy should be on the left, pointing right. Same deal with the orientation of the arrows (first, and consequently last, arrows should point right). Love the art itself, though, and the GB palette made me smile.

Ah, right! I didn't realise it at first but from a Western standpoint left-pointing-to-right makes more sense. Cheers!

Hmm the right arm (on the picture the most on the left) looks a little odd.
Maybe you could fix this up?

I think the guy's sleeve is what's bugging me the most - gravity's meant to be pulling it down, but it has a very unnatural shape in the image at the moment. At least I think that's what you meant - the arm length's already been explained in the first post.

I'm going to have another go at editing the picture. I will flip it horizontally eventually, but the way things are set up on the document (layers, layers everywhere  :-[) I don't want to flip it until I have a background in place. Any ideas?

EDIT:

(http://img.photobucket.com/)

Changed the hand a bit - I wanted it to be more detailed, but not to contrast too much with the character model.
Title: Re: [C+C] [WIP] Menu Navigation Design
Post by: Endpiece on September 21, 2009, 02:09:52 am
I'm in the midst of creating a videogame screenshot mockup for general pixelart practice. The general scheme I'm going for is the Game Boy Color's palette, as seen in the "Mock the Ocean's Sphere" thread.

The idea is a RPG battle set in a graveyard - four (!) characters on the hero's team, and a giant mook and braggart/archrival on the 'bad' side. Each is color-coded (red/blue/yellow/black/green) save for the giant mook, whom I'm still working on. Some draft designs:

(http://img.photobucket.com/)

Generic tree.

(http://img.photobucket.com/)

Initial graveyard locale. Nice top-down view, but considering switiching out for a more side-on approach. Beta designs of characters (brown/yellow-coloured character currently being 'worked on' as we speak - it really looks unreadable there).

(http://img.photobucket.com/)

Progress shot of three characters. I'll post more as they're finished.

The big question I have is: how do you get the absolute most out of the absolute least? That is, how would you be able to create great sprites like the ones from the GBC Blue Ocean or SNES Final Fantasy games with such a small size and smaller palette? It's really quite frustrating, especially if your first thoughts on such a project were as ignorant as mine ("Oh, fewer pixels, quicker job!").

22/09/09 Edit:

(http://img.photobucket.com/)
Title: Re: [C+C] [WIP] Menu Navigation Design
Post by: Endpiece on September 23, 2009, 05:03:50 am
23/09/09:

(http://img.photobucket.com/)

This probably won't be permanent - the background needs a greater sense of spatial depth (the character outlines clash with the background even now) and it's mirrored at the moment. I had also intended a bleaker graveyard theme in this mockup, but as I started studying previous Game Boy and Neo Geo Pocket screenshots, the palette got a tad out of hand. The giant mook isn't finished either - still has an excess palette, and dodgy lower body. We'll see how things go later on.

Question: Pixelation has a forum feature where clicking on a picture balloons the resolution of the image, as in a zoom-in. In Firefox the image is filtered - is this supposed to happen?

The characters are just standing around at the moment, yes. I'd anticipated a cutscene before the actual fight starts to get underway. Once I've got the designs sorted out properly, I can get into drawing attack/hurt sprites.

Edit:

(http://img.photobucket.com/)

Colour adjustment. Attempting to stick to the 'max 4 colours per background tile' rule. Unless I've goofed up somehow and that's NOT how the GBC worked? I'll look it up again in the morning.
Title: Re: [C+C] [WIP] Menu Design/Beat-Em-Up Mockup
Post by: ndchristie on September 24, 2009, 01:41:27 pm
That is how it worked but you're limited to the number of 4 color palettes you're allowed to assign.  The specs are somewhere on this forum if you look a bit :).
Title: Re: [C+C] [WIP] Menu Design/Beat-Em-Up Mockup
Post by: Endpiece on September 24, 2009, 03:44:37 pm
Found said specs in the Blue Sphere thread of all places. Why didn't I remember that? Anyway:

- Use GBC's Limitations
   - 8x8 Tiles
   (done and done)
   - 8 four color palettes for the BG
   (Ah, this is the one I think I'm going to have trouble with. I'll start combing through the picture for excess colours.)
   - 8 four color palettes for the sprites (one of the four being transparent)
   (in other words everyone has a max of three colors, so that's fine - except for the mook, who I still have to work on)
   - RGB555 for the colors (optional for those who can't set the colors that way)
   (trying to sort this out in GraphicsGale though its a tad bitchy on the issue)
   - 160x144pxls
   (done)
- Be clever with your tile usage!
- Animation is optional

EDIT:

(http://img.photobucket.com/)

(http://img.photobucket.com/)

Not sure what to do about the score/health counters, but other than that the BG uses 5 palettes(!) with overlapping colours. I can probably optimise it further, but would it be worth the effort?
Title: Re: [C+C] [WIP] Menu Design/Beat-Em-Up Mockup
Post by: blumunkee on September 24, 2009, 09:22:29 pm
The Batman thread by Arne also has a good discussion of NES limitations.

For the backgrounds, I'd say use the blue as a global background color and make clever use of the other 3 colors.

These are looking quite good. Love the characters. The design of the yellow thing with boobs slightly confuses me thou.
Title: Re: [C+C] [WIP] Menu Design/Beat-Em-Up Mockup
Post by: Endpiece on September 24, 2009, 10:07:12 pm
For the backgrounds, I'd say use the blue as a global background color and make clever use of the other 3 colors.

I'll test that out now, and see what I can get from it. Maybe a nice mix of blue and green to better fit the clocktower.

Quote
These are looking quite good. Love the characters. The design of the yellow thing with boobs slightly confuses me thou.

Colette's reference design was actually an amalgamation of several different designs - we had this project about the ideal comic-book/cartoon girl, and everyone threw in random suggestions, like the front/back bangs, large tits, giant robot hands, hotpants, etc. I think some of the artists did a good job with it, but I'm finding it difficult to make a standout design for Colette that doesn't look like a complete mess. If you've any suggestions, I'm all ears!

Edit: thanks, Pawige!
Title: Re: [C+C] [WIP] Menu Design/Beat-Em-Up Mockup
Post by: Pawige on September 24, 2009, 10:38:50 pm
Hmm, I like this, so I thought I'd see if I could lend a hand. Here's a really fast edit for her. Changed the shirt from yellow pasties to a sort of shirt...thing. Lined the boobs up. Solidified and simplified the hair. Shortened the mech arm, added another one on the other side. Dinked around with the legs and waist a bit. Hope it helps!

(http://www.gerla.us/paul/pxlrt/palettecheck.png)
Title: Re: [C+C] [WIP] Menu Design/Beat-Em-Up Mockup
Post by: Endpiece on September 25, 2009, 03:53:49 pm
Will continue work on the draft. For now, update on the splash menu! Added scrolling clouds, buttons, blinking.

Preview of the final draft!

Edit: also the background graphics if that's your sort of thing.
Title: Re: [C+C] [WIP] Menu Design/Beat-Em-Up Mockup
Post by: Endpiece on September 26, 2009, 01:06:55 am
This art, it is going places! ...like the Recycle Bin!

(http://img.photobucket.com/)

Thanks again to Pawige for the edit! No worries, that hairdo won't be in the final mockup.

Or will it?  :D

(http://img.photobucket.com/)

Further optimisation and (some helpful hints from Blumunkee) now leaves me with two background palettes! Granted the area around the trees still needs some sorting out, and I may end up sacrificing another palette to do so. That floor needs some serious decorating as well. We'll see how that goes.
Title: Re: [C+C] [WIP] Menu Design/Beat-Em-Up Mockup
Post by: Jad on September 26, 2009, 05:43:34 pm
POMPADOUR GIRL IS ONE OF MY SECRET FETISHES

MODERATOR ONE-LINING JUST TO APPROVE!

There's something sissy about her bikininess that gets completely reversed by a phallic pompadour. (into awesome, I might add)

Make it shoot bullets.
Title: Re: [C+C] [WIP] Menu Design/Beat-Em-Up Mockup
Post by: Endpiece on September 28, 2009, 03:50:58 pm
Make it shoot bullets.

YES

Also update

(http://img.photobucket.com/)

From left to right: Conata (http://img.photobucket.com/), Conrad (http://img.photobucket.com/), Colette (http://img.photobucket.com/), Medieval Zuko (http://img.photobucket.com/), Hazel (http://img.photobucket.com/), Wolfbatman (http://img.photobucket.com/), Ghost Strider (http://img.photobucket.com/), Ghost Rider (created as base for GStrider).

All the reference pictures were drawn by Pseudonym. In some cases (Strider, Wolfbat) I changed the look of the sprites, mostly to look less like a ripoff of one franchise (Ghost Rider and Batman respectively)... and I'm not all that convinced they came out well. Wolfbat was meant to look more like a cross between a Water Tribe warrior (shoulderplate, wolfhead, loincloth, etc) and the Batman, and instead he looks like... I dunno, some parallel universe Medieval guard?

I still love the Rider sprite despite its flaws.

C+C away, guys! I need it!

Edit: yeah, that old Wolfbatman sucked. So I redrew him again.

Double Edit: Ghost St/Rider uses two sprites - the flaming skull, and the main body and half of the scarf. I are a savvy spriter!
Title: Re: [C+C] [WIP] Menu Design/Beat-Em-Up Mockup
Post by: Endpiece on September 29, 2009, 04:28:49 pm
(http://img.photobucket.com/)

While I make no promises, I would like to think this whole mockup thing will turn out very special indeed.
Title: Re: [C+C] [WIP] Menu Design/Beat-Em-Up Mockup
Post by: Endpiece on September 30, 2009, 08:01:44 pm
Alright, putting on my 'serious question' face. I have Medieval Zuko here, both in idle stance (without sword, which I'll get to soon) and 'post-slash' stance.

(http://img.photobucket.com/)

1) He looks kind of 'static' in the second pose (I know he does in the first one, but the second is the one I'm concerned with at the moment). What can I do to make him look more alive, in-motion as it were?

2) Colour scheme. Zuko's general palette in the Avatar cartoon comprises of red and brown with a hint of gold. The general palette of a knight varies but isn't generally saturated (colours range from greys to faint hues to midtones). The reference picture supplied for Zuko doesn't have a colour scheme. What sort of colours should I give to this sprite to both (a) make him 'pop out', (b) still show him as a knight in shining armour, and (c) not have him confused with Conrad (also a red palette) mid-fight?

EDIT:

(http://img.photobucket.com/)
Title: Re: [C+C] [WIP] Menu Design/Beat-Em-Up Mockup
Post by: IvanX on October 01, 2009, 01:44:06 am
Thought I'd give my 2 cents.
Shorter blade and tryed to define the eye more.

(http://img195.imageshack.us/img195/4805/zukoedit.png)
Title: Re: [C+C] [WIP] Menu Design/Beat-Em-Up Mockup
Post by: Jakten on October 01, 2009, 02:33:13 am
(http://img.photobucket.com/albums/v206/MANDRAGGANON/endpieceedit.gif)
I think it needs a more dynamic line of action. Hopefully my image explains what I mean. Also I think if you add how the action is affecting things on his body it will add a good amount of action into the pose. For instance I raised his cape and messed his hair a bit. I gave him a bit more of a reach on his arms because generally when you slash a sword its not so close to your body and your guy kind of seem like was doing a stronger attack so I think it suits it better.

Hope this helps!

I'm really liking how these guys are looking, the mock up in front of the building looks awesome though I think the recent image the forsground gets mixed up with the background too much. The second palette looked a lot better to me.
Title: Re: [C+C] [WIP] Menu Design/Beat-Em-Up Mockup
Post by: Endpiece on October 01, 2009, 03:17:27 am
Quote from: IvanX
Thought I'd give my 2 cents.
Shorter blade and tryed to define the eye more.

I should work on that eye thing. Thanks for the note on the blade!

(http://img.photobucket.com/albums/v206/MANDRAGGANON/endpieceedit.gif)
I think it needs a more dynamic line of action. Hopefully my image explains what I mean.

I think I get it - the majority of the body in action conforms to the line of action, strengthening the pose. But shouldn't the line of action be running through the sword as well, or does said line only apply to people and not to the objects they're interacting with? I'm not sure, but I think as the hands are holding the sword (and the arms are bolstering the wrists), shouldn't they have more say in how the body is curved? Maybe he could be performing an upside-down U curve? I don't know, please elaborate for me on this!

Quote
Also I think if you add how the action is affecting things on his body it will add a good amount of action into the pose. For instance I raised his cape and messed his hair a bit. I gave him a bit more of a reach on his arms because generally when you slash a sword its not so close to your body and your guy kind of seem like was doing a stronger attack so I think it suits it better.

So there's a bunch of secondary reactions going on (hair, cape) owing to the monumentum of the sword being swung. That's actually pretty helpful. Thanks!

(Edit: does the cape in the first picture count as a secondary reaction, seeing as its billowing upwards, or not? Maybe not.)

Quote
I'm really liking how these guys are looking, the mock up in front of the building looks awesome though I think the recent image the forsground gets mixed up with the background too much. The second palette looked a lot better to me.

When you say the foreground, you mean the floor the guys are standing on, right? I really should fix that, even if it does mean another palette - it should look more like a proper footpath - with cracks in the floor, dirt and rocks, etc. With the trees and buildings it's a more streamlined background in terms of colours, which is nice - I'm not an expert on the 'guts' and mechanics of the Game Boy, but I'd assume a larger use of palettes at once wouldn't be all that beneficial.
Title: Re: [C+C] [WIP] Menu Design/Beat-Em-Up Mockup
Post by: Jakten on October 01, 2009, 05:46:54 am
The line doesn't necessarily need to go through the blade, it just shows the general movement throughout his body. if he were holding his sword above his head about to bring it down chances are the line would run in a C shape up his spine and out through the sword. Its more just what seems natural. The line of action usually is either an S or a C shape and runs through the spine because the spine usually holds a lot of movement. I don't think I've ever seen otherwise i could be wrong though.

The first image has secondary action in the cape but I just thought it looked a bit weird. The cape would probably flick at the tips from the movement.

As for the other image, I think it would look nicer if you add some texture to the ground (not too much though it might get cluttered) But i was more talking about the characters when I said foreground. Especially the tall blue guy to me it feels like hes melting into the background. I think when the building was brown it made the characters show up a lot better.
Title: Re: [C+C] [WIP] Menu Design/Beat-Em-Up Mockup
Post by: Endpiece on November 19, 2009, 09:21:58 pm
Warning: this topic has not been posted in for at least 30 days.
Unless you're sure you want to reply, please consider starting a new topic.

It's a valid concern, but I already have a thread. And making more than one just seems overkill, especially to get a question out of the way. That question being:

(http://img.photobucket.com/)

What's the style of animation called wherein the pixels may change colour, but the silhouette of the sprite stays the same? If I remember right its to simulate a more subtle form of movement (like breathing) with smaller resolutions, but (a) I can't remember the right term for it, and (b) I can't remember the particular 'rules' of it either, like when best not to do it, etc.

(http://img.photobucket.com/)

New HUD, also. I revised the engine. It's more like Monkey Island crossed with Phoenix Wright, now.
Title: Re: [C+C] [WIP] Menu Design/Beat-Em-Up Mockup
Post by: Jad on November 20, 2009, 12:27:28 am
You're talking about subpixel animation aaaaAND it's probably not what you want to do with these small sprites - work on animation that utilizes ease-in and ease-out of recognizable poses rather than millions of tweens and subtle animation.

Also the warning is for people who are on the verge of necroing dead threads - you're reviving your own, that's another thing entirely, I even encourage that.
Title: Re: [C+C] [WIP] Menu Design/Beat-Em-Up Mockup
Post by: Endpiece on November 20, 2009, 12:37:09 am
You're talking about subpixel animation aaaaAND it's probably not what you want to do with these small sprites - work on animation that utilizes ease-in and ease-out of recognizable poses rather than millions of tweens and subtle animation.

Ease-in/out is where the animation goes like, 1-2-3---4---5---6---7-8-9, right? The last time I tried animating sprites for one of my games, I ended up doing it all Chuck Jone style - smearing from one pose to another!

I need to do animation for walking, talking, gesturing etc, and for that I'll have to make the animation smooth (as suggested) and the silhouettes clear. I think it'll be alright to keep subpixelling for the idle breathing animation though, right? Or I could do it like the old videogames where the player idles and the characters start pulling 'bored' poses. I think if the player comes across important NPCs, they'll be doing more than standing around, obviously.

I think I'll leave the issue until I get a bigger sheet of animated sprites, then we can discuss the matter better. You guys are awesome for critiques on animation in other threads, so I'm looking forward to that.
Title: Re: [C+C] [WIP] Menu Design/Beat-Em-Up Mockup
Post by: Jad on November 20, 2009, 01:32:20 am
Know what I think? Ditch idle poses completely. Or make them into easily recognizable actions that trigger here and there. I hate idle animations. And you don't have the palette to pull if off with subpixel animation either.

Ease-in and ease-out is basically that, yup. I'm thinking of GBC restrictions and that doesn't allow for a shitload of frames so I'd be all for going, instead of

1-2-3---4---5---6---7-8-9 which is impossible due to frame count (assuming that you're working with GBC restrictions of course)

1---2---3---4---5 which is .. sucky and boring western children's cartoons with dreams of high framecount but sucky budget and animation skills kind of boring animation

I'm thinking more along the lines of

1-2----------3-4 , snappy cheap animation that's awesome for games and looks more smooth than you'd think! Especially for violent and speedy action, just easing in and out from pose to pose creates something very dynamic. Combining that with smooth cycles of looped frames that move very little (creating smoothness) you can make both exciting and cheap animation.

I think konjak (http://www.konjak.org/) works a lot like this, at least it's the kind of critique he often gives - do check his stuff out.

EDIT: Oh also, dudeman, did I mention that I love the shit out of what you're doing? You've got hot girl with rocket pompadour, man, I love you forever, just wanted to say.
Title: Re: [C+C] [WIP] Menu Design/Beat-Em-Up Mockup
Post by: Tobe on November 20, 2009, 09:27:05 pm
Wao, I didn't like what I saw on the first post, but the latest update was great. Maybe because it was enlarge, or the UI, I'm not sure. But it does looks much more stylish. And I always respect those that manage to create beautiful artwork on GBC restriction. That's crazy.

A question I wanna ask though is : Is it necessary to give an idle animation to such small characters? I mean, I'm not suspecting the decision, I'm actually asking because I have no idea myself, lol ???

I think konjak (http://www.konjak.org/) works a lot like this, at least it's the kind of critique he often gives - do check his stuff out.

 ...and for some reason, I always thought Konjak is a lady...damn...
Title: Re: [C+C] [WIP] Menu Design/Beat-Em-Up Mockup
Post by: Endpiece on November 21, 2009, 01:19:30 am
I think konjak (http://www.konjak.org/) works a lot like this, at least it's the kind of critique he often gives - do check his stuff out.

Yeah, I've seen a lot of his work beforehand, like Noitu Love 2 and Ivory Springs. I'll have another look at the animations, though. From the sound of it I won't have much room for filler animation, so I'll have to really emphasise the actual animation, before, during and after (anticipation-action-reaction?).

A question I wanna ask though is : Is it necessary to give an idle animation to such small characters? I mean, I'm not suspecting the decision, I'm actually asking because I have no idea myself, lol ???

It doesn't seem like it, but for some reason that's the animation I started out with. Mostly because I was confused as to what subpixelling actually was, but we've sorted that out. So now I'm going to try animating other movements for the characters (walking, fighting, taking damage, victory, etc) and see how I get on. An important thing for me to remember is that the personalities and mannerisms subtly (or not-so-subtly) affect the movements of the characters too.

Speaking of pompadours, I took another look at the sprites and decided to draw them out in 8 directions. It's a fair bit harder than I thought - I'm simplifying and adding to the designs as I work through them. And now I've hit a snag.

(http://img.photobucket.com/)

Eeek. Help?

Edit: I should probably add that I seem to go through various 'phases' of pixelart referencing. Some days I look at NGPC screenshots, for others it'll be Paul Robertson or Derek Yu, and right now I'm in the middle of a Metroid/Mother 3 fix. It's very possible it'll be something totally different tomorrow.