The Inverted Section Tutorial

Got questions about Shipmaker? Get answers here. Please read the stickied topics first!

Moderators: th15, Moderators

Post Reply
TheShipwrightArms
Lieutenant Commander
Lieutenant Commander
Posts: 51
Joined: Mon Dec 15, 2008 3:26 am

The Inverted Section Tutorial

Post by TheShipwrightArms »

Following on from the I've been working on the sections... thread here is a short tutorial on how to create sections in the 'Inverted' Style (so-called because they stemmed from inverting the colours of more conventionally coloured sections).

These sections can all be created using very simple raster art apps.

Step 1
Image Image
Assuming that you are converting an old style sprite, substitute background colour for a neutral one (I've used 0,255,0 here) and the white outlining with black. The 473 fill can stay for now.

Step 2
Image Image
Now fill each enclosed area of the section with a base shade of grey. Areas which appear higher should be a lighter shade than areas which appear lower - this is the same principle as used in shipbuilding.

Step 3
Image Image
Now to add depth to the section we need to emphasize the edges. An edge can be defined as any black or background colour pixel. In effect we are trying to simulate a single light source landing on the section.

To do this chose two adjacent sides, these two sides will receive highlighting while the remaining two will be shadowed (made darker). So for example for this section I have made all pixels directly to the right or below an edge pixel lighter, and any pixel directly to the left or above an edge pixel darker.

In general any pixel bordered on 2 sides by an edge pixel will receive a strong highlight (if it is to the right of an edge pixel) or a strong shadow (if it is left of an edge). Pixels bordered only on one side will receive the weaker highlight or shadow. In addition use the weak shade to soften the edge between any strong shade pixels and the base colour.

If unsure which edge rule to apply use your discretion.

Step 4
Image Image
If any large flat areas of base colour remain add detail. Lines can simulate grooves in the sections surface, highlight these as detailed in step 4.

Step 5
Image Image
Fool about with the contrast until you are happy with the final look.


A Note on Colour.
There has been some discussion around whether we should try and standardise the colours used in inverted sections to ensure consistency between packs. For instance if I'd known what I was doing I could have picked the colours beforehand and not needed Step 5 at all.

After the Uraki pack (which won't follow any rules) I will at least attempt to standardise my own subsequent sections in the following way:

Base colour a multiple of 16, or more likely 32.

Strong highlight = Base colour + 46
Weak highlight = Base colour + 23

Strong shadow = Base colour - 46
Weak shadow = Base colour - 23

Why multiples of 23? Because in the Step 5 section the contrast shift ended up like this. This is obviously arbitrary, provisional and subject to change.


If there are any questions/comments fire at will.

Kae_mecha01 used with kind permission.

TSA



KAE EDIT: Added magnified versions for convenience, hope you don't mind.
25000st
Captain
Captain
Posts: 493
Joined: Mon May 11, 2009 5:05 am

Post by 25000st »

This tutorial pwns. I probably will suck at this though :D . That converted section looks very nice and much more 3d. Nice job!
ArcaneDude
Fleet Admiral
Fleet Admiral
Posts: 2520
Joined: Sun Jan 27, 2008 4:50 am
Location: Antwerp, Belgium

Post by ArcaneDude »

From

Image

To

Image

It's meticulous work, but the result is fascinating. Thanks for the guide.
Check out The Star Wreck project!
Check out the Epic Music Library
Image
And in this Alliance we bestow our hope and will, that the Dogs of War may never harass the people of our homes again, and that it will bring peace, equality and liberty for all in need and despair. One Universe, One Goal. By the Manifest we command this.~ Saren Vil Ush
Slayer0019
Commodore
Commodore
Posts: 535
Joined: Mon Jul 21, 2008 1:04 pm
Location: CT, America

Post by Slayer0019 »

Is a sprite pack planned? Frankly these are outright beautiful, and I want them in a way a therapist would want to hear about.
Got Steam?
Join the official BSF Steam group today!
Sign up [url=http://steamcommunity.com/groups/wyrdysm]here![/url]

[img]http://i192.photobucket.com/albums/z148/JohnDG/sig-1.png[/img]
Water_and_Wind
Captain
Captain
Posts: 497
Joined: Wed Sep 12, 2007 3:29 am

Post by Water_and_Wind »

I think it would be better if the outlines were not pure black, since it makes it look cartoonish.
Metagame 2.0 calculator: [url]http://bsf_meta2_calculator.byethost17.com/index.php[/url]
Curvy Alien Fleet: viewtopic.php?t=4959
Thrusallanian Naval Database: Patrol Craft to Behemoth, support ships, stations, warp gates, everything.
http://www.wyrdysm.com/phpBB2/viewtopic ... sc&start=0
Fleets of the Five States, get it here: http://www.wyrdysm.com/phpBB2/viewtopic.php?t=1929
Droid
Vice Admiral
Vice Admiral
Posts: 1173
Joined: Mon Jan 07, 2008 2:07 pm
Location: Canada

Post by Droid »

Wouldn't pure black also turn out transparent in SM/BSF?
25000st
Captain
Captain
Posts: 493
Joined: Mon May 11, 2009 5:05 am

Post by 25000st »

No it wouldn't (i think). From what I've seen when I use game maker, it makes the background color alpha. Not necessarily black.
Droid
Vice Admiral
Vice Admiral
Posts: 1173
Joined: Mon Jan 07, 2008 2:07 pm
Location: Canada

Post by Droid »

Hm...interesting.
Chiiro
Commodore
Commodore
Posts: 521
Joined: Mon Mar 24, 2008 5:27 am
Location: San Diego, CA

Post by Chiiro »

BSF picks transparency from one of the corner pixels IIRC, I don't remember which one.
Fly me to the moon, so I can play among the stars~
Let me see what spring is like on Jupiter and Mars~
Commodore111
Commodore
Commodore
Posts: 684
Joined: Sat Jan 26, 2008 12:06 pm

Post by Commodore111 »

I think it's the lower left one. I haven't used the GM sprite editor in a long time so I could be wrong.
User avatar
Arcalane
Pseudofeline Overlord
Posts: 4034
Joined: Thu Sep 13, 2007 10:37 am
Location: UK

Post by Arcalane »

Chiiro wrote:BSF picks transparency from one of the corner pixels IIRC, I don't remember which one.
Lower left, yes.
  /l、
゙(゚、 。 7
 l、゙ ~ヽ
 じしf_, )ノ
User avatar
Arcalane
Pseudofeline Overlord
Posts: 4034
Joined: Thu Sep 13, 2007 10:37 am
Location: UK

Post by Arcalane »

Bumpin' dis because've Kaelis' pack here. More people need to get in on this and convert old sections/make new ones in this style.

The more we have, the better. Same as normal sections!

A reminder, though; if you're converting someone else's sections, it is considered poor form to post them (or even begin converting them) without asking for the author's/creator's permission first.
  /l、
゙(゚、 。 7
 l、゙ ~ヽ
 じしf_, )ノ
Post Reply