How to reskin a Neolite Ship.

[Simon B]

Tutorial/Example.

The detail and complexity of the neolite ships have been giving some people pause when it comes to reskinning them. It certainly requires a bit more forethought that a classic ship of the same kind - but not by much.

If you are already a veteran skinner, then this will be old hat. Good luck and have fun. For the rest of you...

---------------------
Simple reskin of the:

Galcop (Viper I) Patrol Cruiser


This craft is a mix of complex and simple bits. The complex bits are the lower - grey-metal - parts. But even the flat panels have their wrinkles.

This craft comes with a skin (called the diffuse or color map) viper1p-neolite-default.png which lives in the Textures directory of it's OXP. It looks like this:


The ship has basically been unfolded and the different sections laid out like a dressmakers pattern.

The first step is to understand the pattern and how it is laid out. Sit back, look at it, compare it with the model, and switch the brain on.

The most sections have been laid out flat, so they can be drawn on directly without worrying about distortion. However, the more complex sections have been "projected" onto a common plane - so some of the sides are oblique to the direction you are looking. This will make distortions in what you draw when it ends up on the model.

You can easily see the sections if you look at the unpainted skin:


There are actually seven projections to the white surfaces, placed in two groups (top and bottom).

On top you have the left and right wings, the top, the nose in front of the windows, and the "brow" that runs across the top of the windows (under the overhang). See if you can identify the sections.

On the bottom you have the whole arch of the bottom itself, and the back panel has been joined to it at the bottom (completing the loop).

In these white sections - the left and right (upper sloped surfaces) wings have been unfolded to be flat, and attached to the top surface.

Notice the top surface of the model has folds but the skin is continuous there? The parts of the top surface which are sloped against the horizontal, will have a slight distortion - in this case, nothing too dire to worry about.

Sometimes a skin will have sloping section which require you to distort your drawing so it will appear without distortion on the model. In general, you have to make the picture skinnier in the direction of the slope.

Care though, the skin details will only be continuous over boundaries where two panels touch. That split up the nose can create a cut in your drawing. eg. A sloping line drawn across the nose on the skin will be broken on the model - a horizontal line won't be broken, but it will make a vee shape on the model. Some experimentation will make this clear.

The grey sections have been handled more roughly. Since I don't expect a lot of detail here, the scale is smaller. This means that everything you draw there will appear bigger and fuzzier on the model.

The sections here are bottom, back and nozzels.

The nozzles have the most distortion - giving the model a streaky appearance there - which is deliberate (means you don't have to draw-in the streaky effect). There is no point bothering with any kind of detail there.

Notice that the ship has three nozzels, but the skin only shows two. The port and starboard nozzles have the same shape, so they have been mapped to the same part of the skin. The center nozzle is oval, so it gets it's own placement.

All the small triangles making the back have been given the same projection. This means that details won't be broken across boundaries, but the details will be distorted.

Same with the bottom, only the curve of the hull is not very pronounced - leaving the distortion for the edges of this region. We'll revisit this when we do the normal mapping. For now, details go towards the middle (see the star on the bottom?)

The next prominent grouping are the special-effects bits. These are the exhaust panel, windows, and grilled-sections. They are all scaled up so the texture here is from 1.5 (grills) to 3x (windows) higher resolution than the rest of the skin. These are parts which may have glows associated with them, and/or need to withstand closeup.

You are probably best to leave them alone. Things you can do here are change the glowing sections patterns and colors - though only the pattern of the exhaust can be changed. You can remove the grills - but remember that you'll have to alter the effects map if you do that. You'll also have to alter the effectsmap if you make substantial alterations to the skin. (More on this later).

However, smaller alterations can make a big differentce to the look and feel of the model.

Having watched and understood the way the map elates to the model, you can confidently paint it.

[Simon B]

Editing the texture is a matter of coloring inside the lines.

Backup the original texture (always!)
Open it in an image manipulator - The GIMP is favorite for this though many people use a commercial program like Photoshop. Anything which can handle PNG files will work.

It is helpful to do alll your additions and alterations in a seperate layer. Learn to use layers, they save a lot of work for little additional learning.

In this example, I wanted a more dramatic livery for the pursuit viper (which is normally just the same). For this I painted a bunch of squares on a higher layer, cut them to fit the panel shapes, and selected a "grain merge" mode for the layer - so the lower patterns show though.

This is very minimal - look:


A circle had to be cut out of one of the square to avoid obscuring the star too much.

The eraser tool is used with a galaxy brush to nibble away at the square - as if a decal has been chipped a bit. (If you set the brush opacity to 30% you get the half-lifted look that the stripes and the star have.)

Matrix-like, the models became more "real" as they accumulate imperfections, so don't be too concerned about being perfect.

The squares are not quite cut to the exact panel - creates a mass-applied-decal effect and besides, it's not very noticeable if you don't know it's there.

It is still worth paying attention to small details as they contribute to the "feeling" to the model - even when not consciously observed.

Even this small change makes the whole model softer and somehow "more special".



Quite a lot can be done without changing the basic design:


The renegade viper (purple anarchy symbol bottom left) was even simpler - it involved "painting out" the default livery with a not-quite-matching shade of grey, then graffiti-ing the renegade symbols over the top.

If the scrawl looks a little too precise, remember that the bit A on top is several stories high... they must have used some sort of guide. Besides, I plan this to be a neon sign - glowing.

The rorschach pattern on the vigilante (bottom right) repeats on the underside. This involves adding the pattern to two layers (one inverted) and moving them around until there is a match across the edge. If the mirror-fold of the pattern is lined up to the exact middle of the top panel, I avoid the discontinuity effect across the nose.

[Simon B]

o much for simple. At the other end of the scale, what if you want to do a detailed makeover?

The best place to start there is the UV map. For that you need a model. This example uses the Anaconda (neoanaconda.dat lives in the Models subdirectory of the OXP) and Wings3D.

Copy the model to a working directory, make a backup, and run it through the Dat2Obj.py script that comes with the source code. Import the result into wings, then save it as a .wings file.

This means you'll have a backup dat, the original dat, a wavefront obj file and a wings file that you'll be working on. So when you stuff up you should be able to recover off something.

Your converted model will have lots of extraneous lines - so your first and most tedious task is to remove lots of them. When you are happy - enter the UV Map window.

How to use Wings is not part of this tutorial.

[Simon B]

Creating the UV Map

... in this example, continuous areas which are expected to have the same basic orientation have been made the same color.

The top area does include bits (like around the bridge) which are actually at a steep angle to the bulk of the green area. These bits will have a smeared skin, which I plan to hide in some dirt. I've done it like that so I can stitch the entire top back together later.

However, it is very important that areas which will see normalmapping effects are projected as flat as possible to avoid artifacts later. That will be all of this example, so I'm careful to keep distortions small.

[Simon B]

.... the default layout is too untidy to be used easily, so we have to rearrange it. We want to stitch together panels which will have a continuous texture across their borders, and maximize on map use.

In general, panels which will see a lot of detail, fine markings etc, need to be scaled up. Grubby areas which don't have much about them can be scaled down. Similar colors get grouped together.

When you do your stitching, select line mode in the model and the uv-map windows. Then use the model window to highlight the edges you want to stitch. This automatically matches compatible edges letting the computer do the work.

Use the preview to reality-check your decisions. Sometimes you have to balance distortions with a need for continuity. In a conflict, continuity loses (it's easier to fix in the skin-painting stage).

The bright-color squares and letters are useful for making sure you have the right bits the right way around.


... this example shows just such a failure. Stitching the back of the anaconda to the bottom (at the red lines) creates unacceptable distortions. These can be ameliorated by moving the other sides around but that's usually quite tricky. Simpler just to leave it be.


... the final UV Map is much tidier - and easier to use.

A 1024x1024 texture is selected - and I'm keeping all the lines.

Most neolite textures are created to 512x512 but scaled to 256x256 for the OXP. In general, work at a higher resolution than you plan to use.

[Simon B]

Creating the Diffuse Map (skin)
Make the texture external, this one was saved as anaconda-neolite-default with file format PNG. The PNG is essential. It is useful to name the skins for the ones you are replacing.

You can now minimize the Wings3D window and open the png in your image editor (or switch to a different workspace if you use gnu/linux ;) ) I used the GIMP under Ubuntu 8.04LTR - so I get to use separate workspaces for different activities. Even so, it can get quite cluttered.


... The first step is to duplicate the blank texture in the layers dialog, then make all the white go to alpha (colors > color to alpha in the GIMP). You can then insert additional layers between these, using the top layer for sight-lines.

These lines are not intended for the final skin, they are just a guide.

Check your progress in Wings frequently by refreshing the exported skin. Especially if you are working with complex textures.


Working with layers is essential for making a good texture. Get in the habit of adding new effects on a separate layer. Look:

... the paintwork part of the texture is actually made up of five different layers, each borrowing different amounts from each other. What I did exactly is outside the scope of this tutorial, the point is to empower you to make your own rather than have you reproduce my work. Hint: "layer modes". Play and thou shalt learn.

This also means I can keep important details for use in the special-effects and normal-map textures later.

I finish by putting a 5-point gaussian blur on the sight-lines layer (the first one created, remember?) to make blacklines . I duplicate that layer, then invert it's colors - bucket fill all the outsides with black, and color-to-alpha. This creates the mask layer (see pic. layers dialog, at the top.)

You don't have to do this. It creates a tidy effect, and the png compression algorithm can make a big area of uniform color quite small - so it saves bandwidth. Any color will do, it's just that solid black is just zeroes... so it feels small.

Finally I can preview the skinned model:

[Simon B]

Effects Map Demystified

... the funny green skin is the special effects map.

The green part is the trickiest, so we do it first. Green is the "dullness" of the surface: the less shiny, the more green.

Bare metal bits are shiny, painted bits are mid-way, dirt and soot is dull.
Since white bits are shinier than black bits, the first step is to open the default.png file in GIMP (or whatever), duplicate it, and desaturate the colors on the top copy - then send all the white to alpha. Cheating? Of course it is.

This gives a black-on-transparent image which makes the underlying layer look dark. Create a new layer above that, bucket-fill it pure green (thats 00ff00), then change the layer mode to "addition". This will add green to everything below it. Merge it down - to turn all the black areas pure green.

Relabel this layer to something more original - I called it "green".

Add a new layer below it, and bucket-fill that layer black.

I get a a good effect if I duplicate the green layer, then set it to 60-80%, and merge them all down to the black layer.

Now I just need to examine this layer for things which don't follow the pattern - like, white paint: should this be shinier are duller that grey metal? Certainly the exhausts should be totally matt (they glow by themselves) and the glass parts need to be shiny. All this is tweaking after the hard work is done.

The next color channel is red - which is dead easy, so we'll do that next.

Red means engine-glow. Create a layer for it, rectangle-select the bits that glow with speed (hint: exhaust and the nozzles ... not much else - the ability to have some hull-lights glow more with speed is not coded in to the textures - so you'll only get red.)

Set that layer's mode to "addition". This means that you'll get yellow where there is green, and there is green everywhere. Don't worry, the shader reads the channel, and all the red is there. If you left in "normal" it would make a big matt hole in the specular effects. (Not that it matters much for the engines - these areas are matt anyway.)

Last layer is "blue", create it. Blue is for anything which glows constantly with the color painted on the skin - so we use it for windows and hull lights.

Neolite ships often have fancy grills - which means drawing rows of lines on the effectsmap (use the default layer from the bottom as a guide). But the anaconda does not use them - oh no. Instead it has floodlights on the hull.

I drag the lights layer from when I made the default png across to here - desaturate it, duplicate it to make it darker, merge the layers together. Now I can paint it blue like a painted first layer green.

This makes the bright lights. The light sources.

Duplicate it, and blur - adjust transparency and merge it down. This gives a bit of a corona about the sources.

After that, it's a matter of tedious work with gradients. I did the gradient work on a different level - which I called: reflected blue.

Set all layers to addition - merge them all together. Save the image as anaconda-neolite-effectsmap.png

[Simon B]

Normal Map Demystified
The normal map is easy to make but tricky to make right - often involves lots of messing about with small changes. Which is why it is good ta have a realtime preview program. These tend to be part of big professional quality systems which take some dedication to learn. So I cheat.

The normal map's job is to tell the shaders how high a bit of the texture is above other bits. So, step one is to make a picture which shows just that:


... this is a height-map or displacement map or whatever. I usually call it a bump map, which it is not, because I cannot easily spell hight.

This is a greyscale image where the light parts are higher than the dark parts. Easy - but also why you have to make sure that you did flat projection in the uv map earlier (otherwise they are higher on a slant to the surface - which can create annoying effects).

I build this by drawing flat black lines, boxes, etc on different layers corresponding to different depths. Then I adjust the transparency to get the correct relative height effect (and merge everything down). Repeat for white (raised) areas.

The Alien-Hull texture zipfile includes a displacement map - which is useful for the fine detail. This got it's own layer (on the bottom of the black stack) - it was sharpened, and all the white sent to alpha. This should create a lot of narrow cuts in the hull surface.

Keeping the layer seperate means it's easy to remove if it don't work too good.

That's the hard part - save the layers (xcf format for GIMP) then save as anaconda-neolite-hmap.png or whatever.

Note - you want PNG instead of JPG for these pictures to avoid the artifacts that JPG introduces to anything with lots of lines.

Merge all the layers - and use the normalmap plugin for your tool. Photoshop has one from nvidia, the GIMP has a freedom-enhanced version ;)



I used a sobel 3x3 filter with a 0.7 scale, otherwise accepted the defaults.

You can sort-of see the 3D in the map. It looks inverted because your eye expects light to come from top-left. Turn the monitor upside down.

The next step is to test it all in the game.

[Simon B]

In the Game

Backup the current textures, then copy the new ones into the Textures subdirectory of the oxp.

You need a model - go back to wings, refresh the texture and check it for defects one last time. Make the texture internal. Save the file.

Export the model as wavefront - which will overwrite the obj file already there.

Next you need to run the Obj2Dat.py script that comes with the source code on the neoanaconda.obj file. This usually involves running a terminal emulator.


... you can use tab-completion to make sure you spell the filename correctly <ahem>.

Move the resulting dat file to the Models subdirectory of the OXP.

Now we get a pilot - edit his save file. I keep Commander Jameson around for this.



Launch the game - notice that there has been no need to edit the shipdata.plist, so these changes should take effect without additional effort.

Load Commander > Jameson - launch and ogle:



I actually want to see if I need to alter the normalmap, so I need top and bottom views:





hmmm ... cargo-bay doors could be better, but still, not bad for the first test. The rest is tweaks.

So................................................ now it's your turn.
Have fun.

[DaddyHoggy]

That's excellent Simon - thank-you - and as a GIMP user (neo) it's good to see a tutorial using this fab freebie.

BTW, what version of GIMP and Ubuntu are you using?

[Simon B]

BTW, what version of GIMP and Ubuntu are you using?

Good point:

I am using GIMP 2.4.5 on Ubuntu 8.04LTR with
Linux 2.6.24-23-generic #1 SMP Wed Apr 1 21:47:28 UTC 2009 i686

The desktop (above) only gets upgraded with the LTRs.
The laptops all run 9.04 now.

I have tried not to be too system or program specific in these notes. There is a GIMP crash-course for the novice here [pdf 283kB].

AFAIK: the normalmap plugin fo the gimp is not in the standard packages.

I've deliberately not updated my Oolite build out of sympathy for others in that boat. At some point the 800 triangle limit goes and I can accidentally break other people's installs. Still ...

[Diziet Sma]

There is a GIMP crash-course for the novice here [pdf 283kB].

Errr... beggin' your pardon Simon, but that's a general "getting comfortable with Linux" tutorial, not a GIMP crash-course...

I think this is the link you meant to provide... And I notice you are also the author of said crash-course.. Nice work, and many thanks for this tutorial too!

[Simon B]

There is a GIMP crash-course for the novice here [pdf 283kB].

Errr... beggin' your pardon Simon, but that's a general "getting comfortable with Linux" tutorial, not a GIMP crash-course...

Excuse me, this is true - I copied the url from the wrong line - note that the file-size stated was for the correct file. Corrected.

And I notice you are also the author of said crash-course.

Well, why suggest someone elses work when ones own is so handy ;)

Nice work, and many thanks for this tutorial too!

No worries - I got paid for all that stuff already ... mind you ...

[Simon B]

I'm missing in-game shots for those vipers....


... here's the standard ones.

I did the same makeover for the interceptor:

... this mod re-mapped the model, and added a new normalmap to the lower hull. I had to paint green over the lettering on the lower hull, and add an additional green layer to the upper (white) areas, in the effectsmap, to avoid glare off the paint.

Thee craft are very visible.

[DaddyHoggy]

Hmmm, why aren't the flashers from the interceptor actually physically touching the body of the ship?