AuthorTopic: [CC] 2D Shoot 'em up readability  (Read 3367 times)

Offline drunkenoodle

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

[CC] 2D Shoot 'em up readability

on: June 21, 2016, 09:39:43 pm
Hey everyone,
bit of a different kettle of fish to the weekends post of the pixely tower thing, I'm also working on a sneaky little project that's basically your usual 2D shoot 'em up.

So far a few ship concepts have come out but I chose this one for now (hope the colours don't blind anyone!):



Basically I'm just wondering above all else how that reads to people who don't currently have a bad case of eye-strain. The game's going to be pretty low-rez, but I've just been looking at selective outlining to make the thing stand out in a variety of situations.

I think the worst one on there is the red background, as obviously that clashes with the actual ships colour. So not sure how one might get around that...

Anyway, if you've got the time feel free to bash us a comment or two. Only way to get better, right?

Thanks guys!

Offline PixelPiledriver

  • 0011
  • **
  • Posts: 997
  • Karma: +6/-0
  • Yo!
    • View Profile
    • My Blog

Re: [CC] 2D Shoot 'em up readability

Reply #1 on: June 21, 2016, 11:36:05 pm
Your test cases are too general.
Do you plan on having a backdrop that close to 255 red?
Unless you have a thematic reason to do so, it isn't helping readability.

Build up your colors and assets relative to each other in the same file.
Use the sprites to inform your backdrop color choices and vice versa.
Push the backdrops back and bring the sprites forward.

Here's some quick backdrop sketches using your test colors as a base theme.


The values on the ship itself don't read super well.
Try adjusting them a bit.


And knowing that it is, we seek what it is... ~ Aristotle, Posterior Analytics, Chapter 1

Offline drunkenoodle

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

Re: [CC] 2D Shoot 'em up readability

Reply #2 on: June 22, 2016, 08:57:39 am
Thanks for your reply PixelPiledriver, I see your point. The idea behind the 255 was an extreme case to test against and had totally forgotten about doing an actual real-world scenario instead, so thanks for knocking together some examples.

I'm thinking if I added a little more contrast around the edge of the ship itself, it should bring it forward a little more. Also, perhaps reducing the amount of black on the ships body to give it more vibrancy against the background.

Am I on the right lines with that strategy do you think?

Thanks again!

Offline drunkenoodle

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

Re: [CC] 2D Shoot 'em up readability

Reply #3 on: June 22, 2016, 01:32:40 pm
The more I look at the ship actually the less happy I am with it. A lot of it doesn't make visual sense on some areas. Almost looks like part of it's rolling a little, which isn't quite the effect I was after.

Some traditional pencil sketches are in order I'd say.

Offline Double7

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

Re: [CC] 2D Shoot 'em up readability

Reply #4 on: June 22, 2016, 02:30:36 pm
Make sure to look at some real planes and stuff too. That helped me a ton when I was doing designs for ships for a past project, I sat down in my school library and went pure 4th grader on an airplane book and went and looked at pictures. XD

Offline PixelPiledriver

  • 0011
  • **
  • Posts: 997
  • Karma: +6/-0
  • Yo!
    • View Profile
    • My Blog

Re: [CC] 2D Shoot 'em up readability

Reply #5 on: June 22, 2016, 08:04:18 pm
Don't hate your ship!
It has a good feeling.
Comes off as very gamey.  :)

Def try some slight tweaks, some major changes, and a complete redraft. --> all as different sprites, don't overwrite this one
Explore a little if this is the only design you've made.

I'm also working on a shooter with stylized player ships.
Some of them look really fucking weird.
"Weirdness" has value, but can sometimes be hard to wrap you head around if you haven't given it a definition.

The process that helped me was designing them with a specific feeling as a goal.
Even just "I'm the player ship" is totally valid and can work.
However the more you can refine that thought, the more you can integrate it into your design, and other people will be more likely to pick up on the feeling.
The feeling you choose might be strong, but only show subtly, and then lost on the viewer as an easy to describe single word.
But it will still help through the design process.

What do you want your ship to say to the player?

Also just to be super clear, I don't want to give you the impression that bold saturated colors are bad.
Cuz they aren't, they have they're own strengths.
If you really want to have the feel of intense vibrancy, you can totally make it work.
But you'll need to work with it in a different manner to make your image readable.
« Last Edit: June 22, 2016, 10:21:09 pm by PixelPiledriver »
And knowing that it is, we seek what it is... ~ Aristotle, Posterior Analytics, Chapter 1

Offline drunkenoodle

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

Re: [CC] 2D Shoot 'em up readability

Reply #6 on: June 23, 2016, 05:56:53 pm
Hey guys,
thanks for the further advice. It's really helped things along actually as last night I sat down and started thinking things through a little more and sketched them out on paper first (really made it easier to put things in order).

The more of this I did, the more the original ship design felt a little too flat and not really what I was after anyway, so since then have been working on knocking together some other silhouettes. Nothing really finished yet but I think they look a lot more exciting and give across the approach of 'power, speed and agility'. Which is what you'd want in a situation when you're on your own stuck in a giant fight against a bunch of dudes who just want to watch the world burn.

Colour-wise and readability I'm still struggling with a little however, but I'll post up a few more variations when they're ready (hopefully tonight).

Cheers guys!

Offline drunkenoodle

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

Re: [CC] 2D Shoot 'em up readability

Reply #7 on: June 23, 2016, 07:41:27 pm
o/

So I decided to pop up a quick example of the various amendments I've been tinkering with. The backgrounds are a little closer to what I'm after, but they still need properly fleshing out rather than just being some generic sort of colour:



The main changes have been adding more shape, a darker outline to the sprite and a bit more sureness in colour placement. I'm not totally sure that the outline is a good thing, I mean sure it makes the shape stand out a little more, but it almost looks... I don't know, too deliberate perhaps?

I kept the original design on there also just as a comparison. Would love to hear / see your thoughts if you've got time, thanks very much chaps! :)

Offline wzl

  • 0010
  • *
  • Posts: 298
  • Karma: +1/-0
    • View Profile

Re: [CC] 2D Shoot 'em up readability

Reply #8 on: June 24, 2016, 07:52:46 am
imo you went a step back with the new designs.
Your first one felt nicely volumetric, interesting in design, it reminds me of early 1900 planes somehow.
Your new ones however seem very flat, especially because of the outline, but also because the designs aren't that strong, and quite bland in nature and shading. additionally the silhouettes seem not that recognizable.
however, the readability is a lot better on them, but i'd reckon that this is due to their bigger scale. the old one looks quite flimsy in comparison.

Offline drunkenoodle

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

Re: [CC] 2D Shoot 'em up readability

Reply #9 on: June 24, 2016, 08:04:14 am
Ah nuts, so some how I've fixed one issue somewhat and created another couple... perhaps now's a good time to take the best of both and move further forward with that one.

Thanks for the feedback wzl, I'll keep at it. :)

Offline drunkenoodle

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

Re: [CC] 2D Shoot 'em up readability

Reply #10 on: June 24, 2016, 01:45:54 pm
Potentially looks too busy now, but I thought I'd have a go at texturing the shape out a bit to see the result:



I think more research / reference is required really. But thought I'd post up anyway :)

Cheers