GR#115 - Space Ships - Topdown

[Szyu]

Hey community,
I'm just starting off working on Sprites for my game, which I am programming on XNA, so I want to hear your real opinions. I will show you 4 space ships i have created and yes I know, there is much missing for good Sprites. With your help and tips I want to improve my skill.
So let's start with the ships.

[yrizoud]

The big issue is that they look too flat. All shapes have one-pixel-wide highlight at top and one-pixel shadow at the bottom, which makes them look flat, all parallel to the viewer, and 1-centimeter thick. You need to use thicker highlights and shadows to represent shapes that are thicker : ship bodies, reactors, turrets...
Darker shade can help represent something that is farther from the viewer, and lighter shade when they are closer.

Last, you probably shouldn't keep the internal black outlines. I know they help early on when designing the general shape, but as soon as you need to flesh out the volumes, they get in the way: they make a huge separation between forms that are actually contiguous.

[Szyu]

Okay thanks for the introduction to my mistakes. I have to say that i am really new to the whole pixel thing, so i really have to learn a lot yet. This is why i have joined this forum. So at this time, i really dont have a clue how to proper set the shadows and lights to make a detailled and perhaps realistic view.

[PypeBros]

It's a 3D rendering trick that you can apply to any drawing medium, it's not pixel-specific.

A horizontal area would have a flat color: no shading. If an area is slanted towards the lightsource, highlight it. If it's slanted the other side, shadow it. Using a simple 3D modeller can help you .. or put a toy ship next to a desk light and study what is lighter and what is darker ... then practice drawing this very ship

[Lazycow]

i really dont have a clue how to proper set the shadows and lights to make a detailled and perhaps realistic view.

Divide et impera...

Build yourself a space ship construction kit, here's an example from chriskot

(from the CC Challenge - Dodonpachi Assembly Line)

[Szyu]

Ok this is a really interesting suggestion i should have an eye on. But still i dont know how to make the tiles. I am a real noob in setting shadows and lights for a realistic view.
And i am also struggling with the question, if such a view would be possible in my game. My Idea was just to Rotate the ship to move around. i guess it would look weird if you always see the engines of the ship. What do you think?

I will try to create my own construction kit, but i would be glad of any kind of help =)

[yrizoud]

I had started an edit based on one of your designs:

[PypeBros]

My Idea was just to Rotate the ship to move around. i guess it would look weird if you always see the engines of the ship. What do you think?

If rotations is strongly part of your game design, then likely pixel art isn't the appropriate medium for your game assets. Not only you'll struggle with lightning, but any automated rotation will screw up the antialias/banding-preventions and any sort of eye-candy effort you pushed on your reference pictures.

Many shoot-em-up of the pixel-golden-age had no rotation, but instead used angling of the opponents to suggest horizontal moves. (by the way, in some environment it makes sense: your jet plane does not rotate left/right easily: it twists along the main movement axis and then gets "lifted to the right" by its wings.


(illustration with the tyrian spritesheet. Check planes on top-right corner).

[Szyu]

@yrizoud:
your Edit would be a great start for me. I will try to bring this shadowstyle to the rest of the ship and show you the result.

@PypeBros:
Rotating the ship WILL be a main part of the game structure. It will be like the good old Asteroids game. When you fly outside a screenborder, you will return on the other side. So you need to rotate for not flying only in one line. I tried one of the ships from the topic Lazycow linked, and the issue with shadows and lights dont seem to make it look creepy.
My particle system perfectly compensated the perspective, so all i need to do is to add more details (much more) and better shadows/lights

[yrizoud]

Games that rotate bitmaps tend to have everything drawn in higher size, and the game engine reduces the visual size at runtime. The extra pixels help during roto-zoom, to provide finer details.
In this case, use only a small number of solid colors, never single-pixel details.
Linley's Angry Moth used this technique :

The ships don't show a specific lighting either.

[rikfuzz]

Another method consists in using vectorial pictures, and not raster, but in this case they don't draw with pixel art.

Also nothing new or possibly super practical, but a lot of games simply stored 16 or 32 rotations, so they could be pre-cleaned up on a pixel level.  There is that 'rotsprite' program that gives very clean rotations (designed for sonic fan-games I think) that need only a small fraction of the manual cleanup.

[Grimsane]

one of my own modular shmup ships in combination with an edited version of your torus shape part, may not be very good and I could probably point to decent examples of commercial quality shmup graphics, but hopefully it's helpful as a suggestion to what you may want to do with the base of that ship, colour scheme and shading

your Hull design doesn't look very compelling at the moment and what I am assuming is the cockpit (on the blue one) seems to have some clashing perspective with the hull of the ship,making everything but the cockpit look extremely flat, even with the flat reinforcing shading aside, if it is top down with rotation, keep it pure top down like in the example yrizoud posted, if you have anything that comes out like that cockpit it will look rather strange when it is rotating because the points of the perspective will be changing on every degree of rotation, the other ship sprites are fine in that regard

and I agree you may consider what has been mentioned by rik, pre rotated sprite sheets definitely offer more flexibility with the ships detailing

[Szyu]

Ok this one definitly looks great... I totally agree with your statements with pre rotated sheets, but I think for me as a beginner I should hold it easy until I reach a level i can say Ok this has to be like this and so on. So this is why Grimsanes style interests me. Is there any good tutorial that shows how to set the shadows properly for this perspective? Remember, I am a noob...

But thank you all for the great and constructive criticisms. It will be hard to learn, but Im optimistic i will make it, if there is anyone who could help me with tips

[Lachie Dazdarian]

Try to shade by casting light on the ship hull from ship's own sources (windows, etc....) and from the very top (but subtly to avoid pillow shading). It definitely won't work if you pick a static light source in one corner, shade the ship like that, and then rotate it.

[Grimsane]

well I don't have time to make a tutorial persay, but here is a deconstruction of the shading, you could try layering it on like this, but I just do it all randomly and adjust it all as I go, some people work much better with a technical approach like this.


also note how you can highlight paint stripes using the same colours to brighten the edges, and add some visual interest, same with concave/inset regions and lines, and utilize the edge of the object, pull or push the outlines to suite the shame, but with pixels you can also imply bulges with colour alone if you do it right, like the edges with the highlights in the later half of this animated example


major things to concentrate on are the shape, and the colour choice, make sure each shade you choice has visible and significant contrast with each other colour, subtle ramps of value often read very soft and gradient, which you want to avoid.

hope these are helpful

[Szyu]

I tried to accomplish your advices and this is the result of the huntership.

I wanted to try it on another ship, so it isnt as well as yours though, but in my own opinion, I can see a development so far. Any further suggestions?
I think the cockpit seems very flat, but i really dont know how to fix this.

[PypeBros]

The ships don't show a specific lighting either.

Indeed, and many of them looks pretty flat (esp. the protagonist's own fleet).
Note that there *is* a well-defined light-source for most ships, and that's their own booster's light. That one has the advantage of rotating with the ship, so if you need something to increase the 3D look of the ships, you can use that.

[Szyu]

The boosters lights are going to be because of the particles.

A Screenshot of the particle system laying under the ship (The old Huntership version). if i put it over the ship, the booster would be lightened by the particles.

So I dont get whether you want to say only flat sheets are better then sheets with little more details?

[Grimsane]

the approach to the lighting will dramatically effect how flat your ship looks, if the light you want to apply to the ship is a form of overlay filtering that alters the existing colours, then it might look okay, but if it's just a simple lighten overlay it'll reinforce the flatness, I could elaborate more but hopefully you know what i mean.

and regarding your ship shading, you should avoid having so much banded clusters, here I'll just highlight some


red= some of most noticeable cases of pixel banding, green is where you have applied some forms of combating it, but the yellow is showing the banding still present, banding is unavoidable especially at this resolution, so I must say do not avoid it entirely it'll just wrack your brain, but try to minimise it for sure, something you shouldn't be afraid to do is push the highlight tone to the dark tones, buffering them with the intermediate tone is not always necessary and alot of the time just causes banding. some of the things in this edit are effective



ignore alot of the redesign, just some experiment but hopefully some of it is useful, I think the balance of details on your original design look effect in the rotated example, so maybe pushing some of it back to that, most notably the grey wing tips look good and could double as the origin of the lasers/blasts etc (the guns) and the light yellow features on the wing serve well to reinforce the orientation of the ship, the latest one they don't stand out so much, also a possible approach to lighting when the thrusters are active having a sprite change, maybe even 2 or so frame light flicker animation.

you're meteors need work, I'm sure the forum will offer ample help if you get around to refining them and ask for feedback

[Szyu]

First thank you for your annotation. Yes my particles affect every color they overlap, so if the ship emits a trail and i let the particles overlay, the booster's colors are affected, too.
The Meteors were my first attempt of spriting something for this game, so i know they need to be redone. But currently I am remaking the hunter ship. So hopefully you will get a new, better version of the Huntership.

At this moment you dont spot the real shape. My intention was to create a spider-like ship. If you know it, you realize the 8 legs, the head and the abdomen. The newer version points the shape out very well.
Special thanks to Cyangmou, explaining me alot about the whole thing of spriting.

[Lachie Dazdarian]

Also, sorry for barging in, but try to shade wings with lower tones or higher tones, depending if they are closer or further to the screen compared with the center cockpit part. Another way to add the third dimension into the design.

[PypeBros]

First thank you for your annotation. Yes my particles affect every color they overlap, so if the ship emits a trail and i let the particles overlay, the booster's colors are affected, too.

But there's more than just "where the particles go": a real beam of energy would scatter light in all directions, including towards the ship. And then, it makes some part of the ship lighter than others. For instance, the "legs" of your ship: they'll get more light from the rear of the ship than from the front, so you should shade them to the opposite of what they currently look like.

My intention was to create a spider-like ship. If you know it, you realize the 8 legs, the head and the abdomen. The newer version points the shape out very well.

That's still a bit too subtle, imho. Those "legs" tubes are currently masked by the large wings that surround the ship. Maybe if you had the "legs" going futher onto the ship, it'd be more obvious. You could also make the abdomen wider than the "head".

Now of course, it all depends on whether you want subtle allusion or immediate recognition.

[Szyu]

So here is the new Huntershape.


I played with the colors because I really couldnt get myself to be happy. So what do you think? And I think the spider shapes comes out clearly here?

[Kazuya Mochu]

if the ships are going to be rotating in game and you don't want to make every rotation sprite (which I understand), maybe you could paint them as if the light was coming from above, in wich the surfaces that are parallel to the camera plane are brighter, and the more perpendicular they are, the darker.

so a slanted surface would be sort of half way between the two. other then that you could also gradually darken the parts that are further away from the light.

[Grimsane]

yeah sorry I didn't clarify that much, and got slack with my edit.
something more like this and some little diagrams roughly showing most likely interpretations in 3D due to the shading, rather lazy but hopefully it illustrates the point. like everyone else has also commented if you want to make something seem higher on the Z axis then you should use lighting cues to imply it, like I tried somewhat on the left most, and illustrated next to is the intended effect.


and that's more what I meant about the wing tip guns, actually spriting guns, and I could see it was meant to look somewhat arachnid so to you're merit you did convey that somewhat, one suggestion to push that though is to have the cockpit where the spiders head would be, not on the thorax, as it'd break the parallels to spiders slightly

new design doesn't look bad, is it the player ship or fleets of enemies? if you have different models and variations upgrades, you could try doing several of each theme, using something like bigger vessels to represent stronger variations. also you have quite a lot of banding still present especially on the 'legs', other than that seeing a marginal improvement over your first iteration

[Szyu]

@Grimsane:
About the weaponry and the question of player ship or not:
Because the game is meant to be an Asteroids-like, i thought it could happen to become boring, if the player hasnt some points he could achieve. So I thought of different ship types the player can unlock (And other things too of course). This is why there isnt a "Players ship" oder "Enemys Ship".
It is the same with the weaponry. Different weapons are going to be unlockable. My idea was to render the weaponry independently, because the player has the opportunity to modify the ship classes. Each ship has Weapon slots, where a Turret of a weapontype can be placed. So this is why I dont have any weapons on the sheets.

 And its the same with the engines. There are many Engine types with different trail colors. The screenshot I posted above was with a red trail. But there can also be a green, yellow, purple and so on.

Im glad you like the improvement

@Kazuya:
That is what i am trying but I dont have the knowledge yet, so I have to experiment a little bit more

@Grimsane again:
In my opinion, there is isnt a marginal improvement, but rather a vast one

[Szyu]

I tried to use everything I know yet to create a new graphic. So this is how I tried it and the result:


Feedback would be kind.

[Kazuya Mochu]

it does give the viewer a better sense of form and volumes! I like where it is going!

[pistachio]

Edit (of one of the other ships) utilizing the tips mentioned:



By the way this seems like good ref material, and looking at that, you might wanna try out hue variation/more values on the latest ship seeing as it's probably made of metal.

Keep it up man, thread gets more awesome with every post!

[Grimsane]

great improvement and nice to see you utilizing what you've learnt some quick things I'd suggest to improve it would be



to try eliminate the banding on the round parts, try something along these lines, style dither to ease the transition of your colour count, also just boosted the contrast slightly to emphasis the metallic nature of the vessel. I know it's still a WiP but still need to emphasis you should try avoid banding, also a couple structural suggestions in the edit too, and those pipe like features looked strange as a support so I suggest some cross pillars of some type like hinted in the edit

keep it up, it's great to see you're art evolving so rapidly

Pistachio's edit is really exemplifies the type of approach to shading that works and reinforces far more realism, which partly comes from doing away with inner outlines all together and would be one approach to keep in mind, and also good example of reinforcing top down perspective with the flow of lines and lighting for the most part, I think parts like toward the engine look a bit confused in regard to the perspective but I think that is due to attempting to stay faithful to your initial design, also note there is quite a bit of banding but it all works rather well, and is an example of acceptable/effective banding.

hope you don't mind, I probably could've edited the original to show somewhat the gist of my crit regarding what I think is clashing but I couldn't resist the chance to edit something this lovely 

[Szyu]

First thank both of you for your edits. Pistachio's Edit looks awesome... I can see my own design in it and I really like it.
Grimsanes Edit of my new ship was first a little bit confusing... I didnt really see the changes despite on the brighter colors. But then i noticed a lot of them while zooming in. They give it a more obvious depth and metallc material... but I think i have to learn a lot more than now if i want to succeed in working those things out more naturally.

So one little question... is there a trick to completely avoid banding?

And no, i won't mind if anyone makes an edit of one of my designs... I should have added C&C to the topic... But in the beginning i didnt know the meaning of it. So i have to admit, I dont know the meaing of WiP...

[Grimsane]

well I slapped together a crude diagram, and the general rule to avoid it is to make sure lines don't line up in rows like in some of these red examples


not the best elaboration but hopefully helpful to some degree, also if you look closely at the rings at the helm of the ship in my edit you'll see the dither that's one way to eliminate banding, and also always keep in mind in some circumstances banding can be better and is the most effective approach to some clusters and becoming obsessed with getting rid of every little part won't necessarily be better, likely just waste your time, just concentrate on the larger instances of it and avoid stepping like in the diagonal lines amongst the red tinted examples

*Edit: also here is another method try avoid banding, to layer clusters on top of each other in a more organic fashion,

it's not completely polished, and it's at half the resolution of your big battle cruiser, but that was to further emphasis the effect, and to make it quicker to pixel, it's not the most beginner friendly approach but it is quite effective, and worth trying to see if you can pull it off, I added the lines much further into the process after layering in the bulk of the detail, but by all means it can be done from lineart first

[Szyu]

Sorry for let you guys wait, but i didnt really have enough time to make something new. But now I tried again what I learned with a new ship. I liked the shape, but it seems that i have a lot of trouble with it. So here is what ive got so far.
I like the style i used for the "wings" but i really have some kind of trouble with doing the same for the red marked areas. Should i just go on with the same way or do i have to care for anything?


@Grimsane:
This method seems to be very sparkling, but i dont know if it would look so cool with colors instead of grayscale. And knowing my current skill level, i can tell that i am not able to do something like  this

[Szyu]

I tried it myself and I must admit... I am really really satisfied with the result:


So what do you guys think about it? I adopted the colorset of pistachio (hope you dont mind) and tried to copy his style of the red-gray balancing

I am currently working on another ship for improving my skills... I let you know if I a have decent preview

[Grimsane]

I find the find some of the shading quite illogical to be honest


particularly the wings, if you are trying to make it read like fins coming up at the viewer at the back I don't think it's not working so well, and the overall shape isn't that appealing it doesn't flow very well the you should try working more on the silhouette before detailing, tried blackening it and it doesn't read anything like the shading, this is a rough depiction of the kinda thing it reads as silhouette wise, it seems like the most haphazard looking design out of all your posts, your other's being quite decent and balanced and having more solid foundations.



if you want to keep the general design I'd recommend re-adjusting the proportions and silhouette

[jams0988]

Hahah, I actually like this last ship! And Grimsane, I'm pretty sure the point of the ship was for it to read like some kind of evil squid/sea creature, hence all the fins and the red color. Your edit is cool, though, taking the silhouette literally. Biological spaceships are pretty neat! It could crap out evil little babies that swarm the enemy ship, a la Star Control. =)

All these ships are still reading as really flat to me, though. I'd probably shade the ships as if the light was coming from directly above, like someone already said earlier. Shade things so that the planes facing straight up are the brightest, with things turned away shaded darker. Maybe add some atmospheric shading to parts of the ship that are further away, too, to further keep away from the paper cutout look.

It's tough, because having the lightsource directly behind the viewer is the worst way to show depth possible, but there's not much other choice if you want to be able to rotate your sprites...you should make the rocket behind the ship light up the ship, too, along with the lasers that fire from the front. That'd be an easy way to further push the depth of your ships.

[Szyu]

@grimsane:
the shape was intended to look like this. I used this as a reference in a more extreme way.
Reference

But i must admit the shading was failed. I tried to use the same technique as with the other ones, but as you can see.. it didnt work quite well. and to be honest, i dont like the tentacle ship^^" sure it looks very well shaded, but i prefer my version of shape, though it was really hard to shade because of the big areas.

@jams:
the ships dont have to look too 3-dimensional. This level of flatness is a characteristic trait of  the game to make it look more suitable for the gameplay and yeah its really tough to shade with the lightsource behind the viewer... and the fact that im a newby doesnt make it easier

[deadlock]

Nice comments crimsane, also learning a lot even if it isn't my topic 

[Grimsane]

never got around to replying  wasn't even really reading yours as a trilobite besides slight general shape, my interpretation was close to your reference without concious intention so I guess that  and well I'm sure you could make a more compelling silhouette based on the source inspiration, you could use more or less organic angles to reinforce a either organic or more mechanical construction, some rough examples



one approach is to do each side independant of each other, very assymetrical but following a similar design, then doing 2 mirrored versions, this means you are conceptualizing designs far more rapidly, and sometimes you can combine parts from both sides, and it is a good tool for exploration.

I think the major issue I have with your latest is not so much the silhouette as it doesn't read too bad but the placement of the cockpit and detailing looks rather unbalanced to me, that and yeah the shading falls rather flat, also i might add your large one prior to this had 3 areas that could potentially read as seperate cockpits/bridges, which you could conceivably break apart into 3 separate ships, using some wing commander vessels for reference would probably be productive way at studying cockpit placement and balance, because for the most part they did a rather good job at that.



already seems like one of your ships looks very much like this

[Szyu]

First i have to say, the star wars ship was originally my reference for the hunter ship. But then i decided to reconsider and so i came up with the spider shape.
The bad shadowing and detailing of my last one is because i thought "hey til now you have improved a lot. Now your ships seems to be very small, lets make a veeery huge one".. Now this is the problem. I didnt really thought about where and how to place the details anymore, but I mainly wanted to create something big.. dont ask me why. Today I realized it isnt the size of a ship that makes it look great and even the gameplay can be very confusing with such big ships. So now i will try to stay small to first enhance my skills until i am ready to grow in size.

The fact that my last silhouette didnt really look exactly like my reference was on purpose. I first had something like you posted (of course not as good), but then i wanted to go ahead to create something own into this silhouette. And like i already said, i was really satisfied. My ships must not look organic. But your suggestion with asymetric ships... i think i will give it a shot