Pixelation

Critique => Pixel Art => Topic started by: Jason-S3Studios on June 12, 2014, 04:46:47 am

Title: [WIP][C+C] Ships for a space shooter
Post by: Jason-S3Studios 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!

(http://i.imgur.com/3fwcfnx.png)

and the new playership!

(http://i.imgur.com/nMmz4VJ.png)

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
Title: Re: [WIP][C+C] Ships for a space shooter
Post by: Gil 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...

(http://i.imgur.com/YPE1RlT.png)
Title: Re: [WIP][C+C] Ships for a space shooter
Post by: Jason-S3Studios 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:
Title: Re: [WIP][C+C] Ships for a space shooter
Post by: Corinthian Baby 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:
Title: Re: [WIP][C+C] Ships for a space shooter
Post by: Gil 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 :)

(http://art.game-designer.org/pixelart/edit/spaceshooter/original.png) (http://art.game-designer.org/pixelart/edit/spaceshooter/edit1.png)

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:

(http://art.game-designer.org/pixelart/edit/spaceshooter/silhouette.png)

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.

(http://art.game-designer.org/pixelart/edit/spaceshooter/silhouette2.png)

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 (http://wayofthepixel.net/index.php?topic=4211.0) and here (http://wayofthepixel.net/index.php?topic=4212.0). Unfortunately there's a lot of broken images due to the age of the threads.

The basic design I used was this:

(http://art.game-designer.org/pixelart/edit/spaceshooter/edit2.png)

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 (http://wayofthepixel.net/index.php?topic=16644.0) and here (http://wayofthepixel.net/index.php?topic=14902.0), 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 (http://cyangmou.deviantart.com/art/5-Tips-for-the-Aspiring-Pixel-Artist-457660938). 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 (http://wayofthepixel.net/index.php?topic=4306.0), here (http://androidarts.com/art_tut.htm) and here (http://wayofthepixel.net/index.php?topic=15704.msg143598).

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

(http://art.game-designer.org/pixelart/edit/spaceshooter/edit1.png)

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.

(http://art.game-designer.org/pixelart/edit/spaceshooter/details1.png)

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

(http://art.game-designer.org/pixelart/edit/spaceshooter/details2.png)

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:

(http://art.game-designer.org/portfolio/pixel/SPRITE_ship.png) (http://art.game-designer.org/portfolio/pixel/MOCKUP_ship.gif)
(http://art.game-designer.org/portfolio/pixel/SPRITE_alien.png)(http://art.game-designer.org/portfolio/pixel/SPRITE_alien-upgrade1.png)(http://art.game-designer.org/portfolio/pixel/SPRITE_alien-upgrade2.png)

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 :)
Title: Re: [WIP][C+C] Ships for a space shooter
Post by: Neophos 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.
Title: Re: [WIP][C+C] Ships for a space shooter
Post by: Jason-S3Studios 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. :)
Title: Re: [WIP][C+C] Ships for a space shooter
Post by: Buko-Studios 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 (http://shmuproom.deviantart.com).
There are lots of other examples of nice pixel art ships you can see there.
Title: Re: [WIP][C+C] Ships for a space shooter
Post by: Jason-S3Studios 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?

(http://i.imgur.com/bJoKhjZ.png)

(http://i.imgur.com/cGPd82D.png)

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 :)
Title: Re: [WIP][C+C] Ships for a space shooter
Post by: Manupix 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 (http://wouterpleizier.nl/pj/index.php?input=http%3A%2F%2Fi.imgur.com%2FbJoKhjZ.png)  :-[

Aside from this, your colors still look kind of basic because you don't apply enough hue shifting (http://www.pixeljoint.com/forum/forum_posts.asp?TID=11299&PID=139392#139392). 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:
Title: Re: [WIP][C+C] Ships for a space shooter
Post by: Gil on July 03, 2014, 07:17:43 pm
I think you're "getting it" :)

Good study of my sprite, probably better than mine in terms of design. There's indeed a few subtleties that you still seem to miss, but you handled it well enough.

The palette could probably use some hue shifting, but personally, I don't think all sprites need it. My original one didn't either.

Thanks to this thread, I started overhauling those old sprites btw, thread is here: http://wayofthepixel.net/index.php?topic=16814.0
Title: Re: [WIP][C+C] Ships for a space shooter
Post by: Jason-S3Studios on July 09, 2014, 12:08:48 am
Thanks for the additional feedback. I tried a few new things based on your feedback Manupix, let me know your thoughts!

(http://i.imgur.com/jrDPWlV.png)


Gil you also mentioned not every image needs hue shifting. What is the approach I should take or logic I should use to decide when and when not to hue shift? Also awesome thread, ill be following!
Title: Re: [WIP][C+C] Ships for a space shooter
Post by: Gil on July 10, 2014, 01:15:06 pm
Well, in terms of palette, there's such a thing as harmony. The palette in my edit contains little harmony (though there is a slight hue shift). Basically, by hue shifting, you push colors towards the ambient color (usually blue), by doing this, you unite the ramps more. You can do the same thing by pushing highlights towards the light source color (usually yellow). You can go even further than that though and integrate the ramps, as illustrated by Syosa in this picture:

(http://i49.photobucket.com/albums/f251/alonsoart/pallet.png)
http://www.pixeljoint.com/2009/10/03/2938/Pixel_Artist_-_Syosa.htm

The ultimate harmony is by having one palette for all your sprites in your game.

The degree of harmony you want for your game is all up to preference though. I personally like the dissonance that distinct ramps provide, which is something you'll also see a lot in Japanese anime for example. The colors contrast more and I like color contrast. A high degree of harmony can really pull your game together though, it's your choice.
Title: Re: [WIP][C+C] Ships for a space shooter
Post by: Jason-S3Studios on August 01, 2014, 02:28:37 pm
As always the advice is appreciated. Tried to work on a new color pallete for the drone race. Here is the WIP I promised. It is a drone cargo ship!

I've tried to incorporate alot of all of your feedback in an entirely new work (detailing, color pallete, avoiding pure grey, lighting) so I can't heavily leverage what Gil has done. Let me know your thoughts!

(http://i.imgur.com/wdFro1s.png)
Title: Re: [WIP][C+C] Ships for a space shooter
Post by: miro42 on August 02, 2014, 01:34:47 am
That's quite amazing!  Just looking from your first post to this, you look like a completely different artist!

One thing I noticed is that the tubes on the back end are copy/pasted and it kind of makes them look like a different perspective that the rest of the ship, which looks entirely top down.

Also about perspective, the exhaust ports are kind of pointing upwards.  Maybe think about shortening the gap on the ends.

Otherwise, great job!
Title: Re: [WIP][C+C] Ships for a space shooter
Post by: Jason-S3Studios on August 02, 2014, 06:31:50 pm
good points, i see what you mean on the perspective shift! it was copy pasted and i tried to correct the shading  :(
Title: Re: [WIP][C+C] Ships for a space shooter
Post by: Gil on August 03, 2014, 10:11:48 pm
That looks like a million bucks already Jason :)

The use of outlines make it look a little flat and almost give it a "banded" look. I see you tried your best with the palette, did a pretty good job :)

Oh, right, banding. There's a primer here: http://pixel.schlet.net/
Title: Re: [WIP][C+C] Ships for a space shooter
Post by: Jason-S3Studios on June 06, 2015, 03:31:15 am
Been busy with work and school but got back into it with your feedback. Let me know your thoughts!

(http://i.imgur.com/97lgPuP.png)

(http://i.imgur.com/pMUQWmo.png)
Title: Re: [WIP][C+C] Ships for a space shooter
Post by: Decroded on June 06, 2015, 12:34:45 pm
Looks like fire-engine ship :-D

I think the main problem here is u have a big flat block with a bunch of forms which don't make much sense and look like they were added just to fill the space with detail.
I'd suggest to go back to gil's advice on design based building basic forms which make geometric sense and worrying abut the detail later.
it helps if u post ur steps u went through.
with a large ship like this u need to consider firstly creating large shapes and angled planes, then add sections of smaller forms but its good to leave sections of large less detailed shapes too instead of putting small bits everywhere.
Then u can still go and add the pixel level detail over all the panels to spice it up.
Title: Re: [WIP][C+C] Ships for a space shooter
Post by: Jason-S3Studios on June 06, 2015, 06:42:47 pm
I think i see what you're saying. I'll see if I can post the steps of my next one
Title: Re: [WIP][C+C] Ships for a space shooter
Post by: Gil on June 06, 2015, 10:47:24 pm
Small one really works for me, strong silhouette.

The big one is a big improvement over earlier work, but like decroded said, the detail muddles the form. Start with a strong silhouette, carve it up in big chunks, then start adding details, etc. The perspective on the pipes in the middle of the ship are nifty btw, makes it feel a lot larger than the small ship, I like that.

You need to flip the bit to the left of the pipes btw, to sustain the weird Link to the Past like perspective illusion (which I've never seen done on a sprite, looks funky, kudos):

(http://i.imgur.com/b8sooV5.png)
Title: Re: [WIP][C+C] Ships for a space shooter
Post by: Decroded on June 07, 2015, 06:55:56 am
I meant to say this can still be useful to cut into pieces and incorporate into parts of the level like the side walls and stuff.

Another thing to point out is if u look at the Donpachi series you notice everything has an angle (we see top AND back).
This angle gives you much more ability to describe interesting forms instead of a completely top down perspective.
Games that adopt this kind of perspective generally look more 3D and interesting and less flat than directly top-down or side-on.
I'm not saying you need to adopt this perspective but I hope you can look at the screenshots in the links Gil posted and compare to your ship here and see what I'm talking about.
It also forces your design to make more geometric sense ;-)
Title: Re: [WIP][C+C] Ships for a space shooter
Post by: Jason-S3Studios on June 10, 2015, 01:36:36 pm
Im working on another and will post my steps, but already finished one which i think os going in the right direction.
(http://i.imgur.com/b0TQduX.png)

Also i tried comparing the images but i dont see the difference. What dis you mean by flip the bit?
Title: Re: [WIP][C+C] Ships for a space shooter
Post by: Decroded on June 11, 2015, 12:59:31 pm
hey u you've some good chunky geometry in there.
some bits such as the rear centre booster-looking things are flat though instead of matching the angle of the rest of it.
I don't like those panels hanging off the outer most edge.
the palette is pretty dark and boring too try some more vibrant colours.