AuthorTopic: [WIP][C+C] Ships for a space shooter  (Read 8488 times)

Offline Jason-S3Studios

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

[WIP][C+C] Ships for a space shooter

on: June 12, 2014, 04:46:47 am
Hey Guys!

I'm new to the pixel art scene, and really have no idea where to go from the current improvements we've made on our game for our ship sprites.

Column 1 & 2 shows the original game art, and the last column (only the right most) currently shows the redesign. You can see that we've moved to a little more consistent style, line width, and started our first attempt at shading from a standard view that is not overhead.

Please rip apart my art and let me know what are the biggest things we can fix to get the most value for effort!



and the new playership!



Thanks for having me as a new member of your community! Let me know if i violated any rules, i tried my best to read them thoroughly!

-Jason
« Last Edit: June 12, 2014, 04:49:55 am by Jason-S3Studios »

Offline Gil

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

Re: [WIP][C+C] Ships for a space shooter

Reply #1 on: June 13, 2014, 12:49:39 am
I would push the colors more, plain red and plain yellow is a bit boring, as well as all the greys.

Here's an example of a bunch of ideas in terms of shading, detailing, etc...

Offline Jason-S3Studios

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

Re: [WIP][C+C] Ships for a space shooter

Reply #2 on: June 13, 2014, 02:23:47 am
Wow that is incredibly motivating and demotivating at the same time. Incredible improvement over what we have now. Thanks for taking the time to visually explain the opportunity we have to improve.

Can you expand a bit more on your thoughts, pixel art is a very new realm for us. The key messages i'm trying to take away so far and current thoughts I have are:
  • Detailing: Clearly we need more details on the ships. There is small little intricate plates you have put all over the ship for example, these can be used to further give the image more things to interact with lighting.
  • Lighting: Need to have more details on the ship interact with the light more explicitly like you have done. Question: Is your light source overview top left, or center? Could we get away with doing a top center in a game like this?
  • Our colors are boring, how do I draw non-boring colors? Is this ship not plain blue and  yellow vs plain red and yellow? Visually I see the seemily miraculous change, but im not sure I logically get the differences in color. Also the gray and red ships are from a "robotic" race, so we are trying to get them to look terminator-like. I'm sure we could make red and gray work, but we need somehow a less boring red and grey mix.

Offline Corinthian Baby

  • 0010
  • *
  • Posts: 223
  • Karma: +1/-0
  • Meditating Pixel Placement
    • View Profile

Re: [WIP][C+C] Ships for a space shooter

Reply #3 on: June 13, 2014, 06:35:25 am
You can make the red and grey color scheme work but think about it in these terms. You want your player/enemy sprites to be easily readable at a glance. That means strong contrasting values. Make them pop from the BG!

Yellow and red for the player has the right idea but the colors you have are clashing a bit too much right now, and it's jarring. Look up color theory to find better groups of colors and to use them to evoke emotions and associations that each color carries.

For the grey, it's very flat, very boring because they're mostly midtone greys that are pretty desaturated. Try some hue-shifting. Use a red tinted grey or a blue tinted grey and play around with the color ramps. Same with the red, very straight up without much variation. Maybe get some warm purples in there or orange/yellows for the highlights.

Study space shooters. There are a lot of them. Look at how they use colors. Study their designs and try to deconstruct where the references come from. If you don't know how to detail the ship, well you don't make it up from nothing, you research and borrow disparate elements from ref. Don't go crazy with greeble though, use it to draw the player's attention to objects of importance.

Good luck, and welcome to pixelation. :y:

Offline Gil

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

Re: [WIP][C+C] Ships for a space shooter

Reply #4 on: June 13, 2014, 05:17:02 pm
All right, I wanted to see your reply to my edit first, so I could gauge your determination and skill at analyzing. Your reply pretty much nails the points I was trying to make, so I feel confident going a bit more in-depth now :)



Design

Okay, so first, the ship designs. For a shooter like this, it's all about silhouettes. Your silhouettes are pretty good, with the player ship having the most interesting shape. Your enemy ships could use a bit more variation, all seem to be different versions of triangular wings. Experiment with some shapes. Always start with silhouette for these if you can. Here's the player ship silhouette:



That's pretty good! As you can tell, the silhouette loses some of the details of the original ship, so you could spend some extra time here getting it right. A small edit here to make the lines a bit more sleek and to get the back of the ship to look less blocky might be all that's needed, but you could obviously spend hours on this step.



Rendering

For my edit, I deliberately changed the different parts of the ship to be more blocky, to make the shading easier and more obvious. Also, it allowed me to show a bunch of tricks that were used in Dodonpachi, one of the legendary shooters you should certainly study. There's two threads about it on Pixelation here and here. Unfortunately there's a lot of broken images due to the age of the threads.

The basic design I used was this:



As you can tell, I moved the light source above the ship to make shading a bit easier, though I agree that the side lighting you use is a staple of shooters and very fun too. Basically, I made easy to shade geometric blocks and made sure that each flat plane is all the same shade. That's where you went wrong for example. A flat wing will be one shade of color, because every spot gets hit by the light at the same angle. This is true for global directional light sources like the sun, yours is more shaded like the plane is being followed by a spotlight, but even then it's not shaded correctly.

A cool way to do this step with new technology is to work with 3D renders here. You can design the ships in 3D, with basic shapes and flat shading (important!) and even animate them tilting and such and then apply the colors and detailing afterwards. Do notice that this requires some proper 3D knowledge to pull off (not a lot though). If you can't figure out the 3D, it's better not to go this route. Some relevant threads are here and here, though neither really follow the process I outlined. If possible, I'll try to get an example going, but I need some help on that part.

Notice that my background is not white or black. This is a trick we pixel artists use to make sure the palette isn't playing tricks on us. Cyangmou explains it better than I can here. In your case, if the ships are always displayed on a pure black background, you might be able to get away with a black background, but certainly not a white one. Trust us that this will negatively affect your colors. Which brings me to:

Colors

Color theory is complex. It's a science, it's an art, it's experience. There's tons and tons and tons of resources online, from specific pixel art theories to web-design articles, to paint mixing. All of them are relevant and interesting. One of our Pixelation members, Arne, is pretty much an expert on the subject. You can find some of his stuff here, here and here.

One of the things to remember is that there's basic colors, like "red", but there's infinite shades of red, ranging all the way over orange to yellow or over magenta towards purple. Never pick a pure red unless you know what you're doing, tint it slightly orange or purplish, make it dull, make it lighter, etc. Basically, color is build up from three values, hue, saturation and brightness. Look these terms up, play with them. I personally like to use very saturated colors, but you should avoid using 100% saturated colors as a rule (or at least be aware that you're using highly saturated colors). Greys are also very important. Grey is a color of infinite variety too. By completely desaturating your greys, you limit yourself to a single hue, which is bad. Though personally, I kinda like the effect of mixing very saturated colors with pure grey details, for machinery. For your enemy designs though, since the grey is not detail, avoid using the boring 100% desaturated grey.

I'm hoping that someone else might jump in to give more primers on color theory for you, as this is a complex subject, one that I am not a master at.

Detailing



Dodonpachi style games like to use a lot of detailing. While improving your overall look, it's also very fun to do. I just subdivided a lot of the bigger planes, added some grey machinery, etc. Also, I used some of the yellow details to look like they're self-illuminating (the wing insets and the engine exhausts). I also added some brackets to bring back some of that wonderful silhouette that I lost when trying to simplify the forms. If you go with a more organic shape like your original, you can still put in a lot of detailing.

As a general rule of thumb of the detailing, I used a dark line to do the detailing, then put a light line next to it, to make the detailing "pop". After that next step is done, I just go in and do tweaks to make certain surfaces more rounded, vary some edges, etc. This last step is less important and will just provide a level of polish that comes with years of experience. The final polish is better left out than done improperly, though I do think that the extra curvature I gave to the wings is needed.

Here's a two-step example of the detailing, with the wing, which has that final layer of polish, next to it. Notice that I inset the yellow parts for extra detail and that the yellow is shaded in a way to suggest it's its own light-source (like it's slightly glowing). You could add a light blur on top of that, like you did with the red lights on your enemies, if you want. Keep the original image and palette clean though, so you can easily edit it afterwards. Adding a post-effect glow will ruin the pixels from being easily edited. I made sure to keep a clean 16-color palette for ease of use.



Here's an example with post effects for the glow (not a very good example):



Combining pixel art and post-effects like this is tricky, but fun. Remember: keep the originals clean!

Ages back, when I was starting out like you, I made these, which have a different style (but still contain some detailing), might be a cool comparison:




I disapprove of the checkerboard pattern shading (called dithering) I used on the enemy sprite's organic liver-type attachments. These days I wouldn't recommend that style of shading.


I hope this is helpful and a good primer for general pixel art and space shooters in particular. I hope it helps :)
« Last Edit: June 13, 2014, 05:25:29 pm by Gil »

Offline Neophos

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

Re: [WIP][C+C] Ships for a space shooter

Reply #5 on: June 13, 2014, 06:56:55 pm
I just want to chime in that that post was great and helpful!  :y:

As for the opening post, I think you should add more variety to the ships. Now right, every enemy has cannons that point forwards, and only that, so all enemies can only fire shots forward (or that is what the player would expect, at least). Add ships that can fire in all kind of directions, or with different kinds of weapons rather than the kind of unintresting tank-like cannons they look like they have now.

Offline Jason-S3Studios

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

Re: [WIP][C+C] Ships for a space shooter

Reply #6 on: June 13, 2014, 08:25:26 pm
Thanks so much for all the info, need some time to digest, and read some of these links. I'll come back soon with an attempt at implementing some of your advice (hopefully eventually all) to see if I am properly executing the advice.

Above and beyond my expectations guys, this community is by far one of the most friendly and helpful I've visited in a long time. :)
« Last Edit: June 13, 2014, 09:17:16 pm by Jason-S3Studios »

Offline Buko-Studios

  • 0001
  • *
  • Posts: 5
  • Karma: +0/-0
  • Game Art & Design Specialists
    • View Profile
    • Buko-Studios

Re: [WIP][C+C] Ships for a space shooter

Reply #7 on: June 15, 2014, 06:25:27 am
Some great thoughts and discussion in this thread!

Pre-rendering the ship angles for a nice roll is a great technique, we have used it often.

You could consider 11 frames for reasonably smooth roll. So you have 5 either side of a center frame.

If you are planning to clean up the render to pixels you really don't need to spend long on the 3d. (1 hour of work for a quick model..)

Just enough to get the basic shape down, and extrusions for the wings.
Render it with a high ambient light in your scene.
If it has some simple blocks of colour, just cut them into the mesh and apply a different material. No need for UV Mapping or textures.

You might also be interested in our deviant art group the Shmuproom.
There are lots of other examples of nice pixel art ships you can see there.
Buko Studios
Game Art & Design Specialists
Check out our portfolio [Facebook][Deviant art]

Offline Jason-S3Studios

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

Re: [WIP][C+C] Ships for a space shooter

Reply #8 on: July 03, 2014, 02:39:27 am
Thank you everyone for your feedback! I know I respond slow, finally found some time to take some of your advice into practice.

I took a pass at mostly Gil's feedback so far, let me know what areas I'm getting right, and what i'm getting wrong (I appreciate the rest! Just starting here). I went a similar route to your design for now just to learn the technique. Didn't come out exactly as I wanted. Biggest hangup I have is on the wings though, is it just the shading I'm not getting right?





Working on a new ship to that i'm trying to incorporate some of the communities feedback into, will post when i get the draft complete :)

Offline Manupix

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

Re: [WIP][C+C] Ships for a space shooter

Reply #9 on: July 03, 2014, 08:56:47 am
Good improvement!

Looks like you're accidentally (or not) using some soft tool, you got 130 colors  :-[

Aside from this, your colors still look kind of basic because you don't apply enough hue shifting. As you can see from the H-S-V panel in the checker, all the purples have nearly the same hue, and most of the yellow hues too. There's not much in between except neutral grays (pure neutrals should be avoided anyway unless you have a compelling reason to use them). You should try to build a more organic palette (same tuto).

Also you need brighter tones for highlights, up to near-white.



@ Gil's post:   :o :y: