"Camouflaging" your character (SPRITING TUTORIAL)

Handy guides on how to do things, written by users for users.

Moderators: GZDoom Developers, Raze Developers

Forum rules
Please don't start threads here asking for help. This forum is not for requesting guides, only for posting them. If you need help, the Editing forum is for you.

"Camouflaging" your character (SPRITING TUTORIAL)

Postby Koto » Sun Feb 15, 2015 6:21 am

Hello everyone, this is a basic tutorial for adding a good camouflage to your characters. It can be any image, but I will use camouflage because I have seen many sprites trying to recreate a soldier with a very poor camo or just with an military-ish shade of green or ocher.

This technique did before changing uniforms in Pro Evolution Soccer 6 (the principle is the same) and now put it into practice in pinochestein GL with the black beret and the MP.
ImageImage

I will show this tutorial with Photoshop (what I have in Spanish but can be guided by the position of the options), but if you use Gimp should also work.

Well, let's start.

1- Looking for resources.

For this tutorial I'll see a sprite of Doomguy (you can choose any sprite).

Image

2- Separating colors.

For this technique, you must copy the sprite layer or sheet that will be used.

Image

and repaint every part of one color in this way (only green suit and boots will be repainted here).

Image

3- "Whitening" the area.

Now select the green area with the magic wand, go to the original layer and proceed to press Ctrl + U (Hue/saturation).

Mark Colorize and reduce the saturation to 0.

Image

But we are not yet ready. Now we must select "Image->Settings->Brightness/contrast" option.
Is required to extend the brightness (100 in this case).

The contrast can also be adjusted to taste, but for this exercise we will leave it to 0.

Image

4- Adding camouflage.

We can look for any image that has a camouflage texture (I chose this). When we have the image, we have 2 options

-Save The image in our PC.
-Copy The image from the browser.

This time we will do the second.

Image
(Example made in a 1024x768 workspace)

Oops, it's too big for our sprite, so I proceed to select and transform the image (Ctrl + T).

Image

Select the chain for an optimum adjustment, so the image is reduced uniformly. and set the interpolation in "Nearest Neighbor" to that note is a sprite or otherwise be blurred. Reduce its size to achieve the desired result.

Image

5- Camouflaging our hero.

Now select the area opposite the green area, select the camouflage layer and delete whatever is left.

Image

We position our camouflage behind the Doomguy, select the Doomguy layer and seek a suitable and user choice blend mode (Overlay in this example).

Image

6- Final Result.

When they select our blend mode, combine layers and have our result in sight.

Image

We can experiment with any texture and blend mode and have good, fast and effective results every time. Pick your flavor.

Image
(From left to right: Desert camo, Snow camo, Hexa camo, Black digital camo, Blue urban camo, Orange urban camo)

I hope you have served this tutorial, any question let me know here.
User avatar
Koto
El conocimiento engendra sufrimiento
 
Joined: 10 Aug 2013
Location: Southamerican sacrifice zone (Chile)
Discord: Kotometal#6085
Operating System: Windows 10/8.1/8/201x 64-bit
OS Test Version: No (Using Stable Public Version)
Graphics Processor: nVidia (Modern GZDoom)

Re: "Camouflaging" your character (SPRITING TUTORIAL)

Postby Devianteist » Sun Feb 15, 2015 9:41 am

Using this tutorial, I decided to see what a camouflage Shyguy would look like.

Image

Not too shabby if I say so myself.
User avatar
Devianteist
Dev, resident lurking user.
 
Joined: 24 Sep 2014
Location: Creating a SPACE HULK conversion!
Discord: #0561

Re: "Camouflaging" your character (SPRITING TUTORIAL)

Postby Enjay » Sun Feb 15, 2015 10:41 am

Kotometal0041 wrote:I have seen many sprites trying to recreate a soldier with a very poor camo.

Indeed. There are certainly a few of them around and one or two seem to crop up in mods with quite high regularity despite looking really quite bad.

When I was playing Pinochestein, I did notice the cammo-wearing guys and I had also noticed that the quality of their cammo was better than usual.
User avatar
Enjay
Everyone is a moon, and has a dark side which he never shows to anybody. Twain
 
 
 
Joined: 15 Jul 2003
Location: Scotland

Re: "Camouflaging" your character (SPRITING TUTORIAL)

Postby Galaxy_Stranger » Sun Feb 15, 2015 1:37 pm

These are amazing.

I want to apply this technique to the existing doom guy's colors so the players can still change colors and still have awesome looking camo.
User avatar
Galaxy_Stranger
Shropshire Slasher
 
Joined: 17 Aug 2003
Location: Shropshire

Re: "Camouflaging" your character (SPRITING TUTORIAL)

Postby Koto » Sun Feb 15, 2015 2:26 pm

Devianteist wrote:Using this tutorial, I decided to see what a camouflage Shyguy would look like.

Image

Not too shabby if I say so myself.


It's good. It works with any sprite style. just about to try different blend modes.

Enjay wrote:
Kotometal0041 wrote:I have seen many sprites trying to recreate a soldier with a very poor camo.

Indeed. There are certainly a few of them around and one or two seem to crop up in mods with quite high regularity despite looking really quite bad.

When I was playing Pinochestein, I did notice the cammo-wearing guys and I had also noticed that the quality of their cammo was better than usual.


When I did this tutorial came to mind "Twilight warrior" and a sprite can not remember its origin but had a horrible arctic camouflage.

About pinochestein, thanks for noticing. Next week I'll upload a new version that fixes many known problems.

Galaxy_Stranger wrote:These are amazing.

I want to apply this technique to the existing doom guy's colors so the players can still change colors and still have awesome looking camo.


It sounds great, go ahead. Is always good to contribute to the community.

==End of quotes==

not necessarily have to be camouflage.

can be animal print.

Image

or any other (e.g., Bauhaus).

Image

and works perfectly with other sprite styles.

ImageImage
User avatar
Koto
El conocimiento engendra sufrimiento
 
Joined: 10 Aug 2013
Location: Southamerican sacrifice zone (Chile)
Discord: Kotometal#6085
Operating System: Windows 10/8.1/8/201x 64-bit
OS Test Version: No (Using Stable Public Version)
Graphics Processor: nVidia (Modern GZDoom)

Re: "Camouflaging" your character (SPRITING TUTORIAL)

Postby Devianteist » Sun Feb 15, 2015 2:51 pm

It is very versatile, and this tutorial also taught me how the Overlay function in GIMP/Photoshop works, so there's another plus.
User avatar
Devianteist
Dev, resident lurking user.
 
Joined: 24 Sep 2014
Location: Creating a SPACE HULK conversion!
Discord: #0561

Re: "Camouflaging" your character (SPRITING TUTORIAL)

Postby Blox » Sun Feb 15, 2015 4:22 pm

Well that's cool and all except that it breaks animation depth because the pattern is never distorted according to how the object moves.

although i guess it's better than schizophrenic animations
User avatar
Blox
I am Laziness Incarnate!
 
Joined: 22 Sep 2010
Location: Apathetic Limbo

Re: "Camouflaging" your character (SPRITING TUTORIAL)

Postby Marinelol » Sun Feb 15, 2015 4:29 pm

Nice tutorial.

I think if you split the camo image with a red line as reference layer, you can print the camo a little bit aligned each time. So it doesn't look like the camo never moves\warps around.
User avatar
Marinelol
ONLY PEGG
 
Joined: 06 Feb 2011

Re: "Camouflaging" your character (SPRITING TUTORIAL)

Postby Galaxy_Stranger » Sun Feb 15, 2015 5:08 pm

Blox wrote:Well that's cool and all except that it breaks animation depth because the pattern is never distorted according to how the object moves.

although i guess it's better than schizophrenic animations


That's a good point, but easily fixable, I think.
User avatar
Galaxy_Stranger
Shropshire Slasher
 
Joined: 17 Aug 2003
Location: Shropshire

Re: "Camouflaging" your character (SPRITING TUTORIAL)

Postby Snarboo » Sun Feb 15, 2015 7:47 pm

Oh hey, I see someone else stumbled upon displacement maps! If you want the texture to follow the sprite, there's an easy trick with that.

Edit:
Here's a quick and dirty example of what I mean:
Image

If you notice, the texture follows the contours of the rocket launcher!
User avatar
Snarboo
Bacon doesn't know it's not dogs
 
Joined: 29 Nov 2005

Re: "Camouflaging" your character (SPRITING TUTORIAL)

Postby Galaxy_Stranger » Sun Feb 15, 2015 11:46 pm

what's the trick?
User avatar
Galaxy_Stranger
Shropshire Slasher
 
Joined: 17 Aug 2003
Location: Shropshire

Re: "Camouflaging" your character (SPRITING TUTORIAL)

Postby Snarboo » Mon Feb 16, 2015 12:14 am

Basically, you need to create a separate, black and white version of the image you want to use as your displacement map (usually the sprite you're working with), blur it slightly with a Guassian blur, then save it. Afterwards, go to Filter -> Distort -> Displacement in Photoshop, then load the image you saved as your map with the default filter settings on top of the texture layer. The rest is very similar to the current tutorial, but I'll see if I can create a simple tutorial for this one!
User avatar
Snarboo
Bacon doesn't know it's not dogs
 
Joined: 29 Nov 2005

Re: "Camouflaging" your character (SPRITING TUTORIAL)

Postby Galaxy_Stranger » Mon Feb 16, 2015 12:19 am

Very cool!

In GIMP:
User avatar
Galaxy_Stranger
Shropshire Slasher
 
Joined: 17 Aug 2003
Location: Shropshire

Re: "Camouflaging" your character (SPRITING TUTORIAL)

Postby Zanieon » Wed Mar 18, 2015 10:02 pm

Hmm nice hint, lemme try...

Spoiler:
User avatar
Zanieon
A Tamer of The Dark
 
Joined: 13 Jan 2009
Location: Somewhere in the future
Discord: Zanieon#3177
Twitch ID: Zanieon
Operating System: Windows 10/8.1/8/201x 64-bit
OS Test Version: No (Using Stable Public Version)
Graphics Processor: ATI/AMD with Vulkan Support

Re: "Camouflaging" your character (SPRITING TUTORIAL)

Postby Koto » Fri Mar 20, 2015 6:25 am

Revilution wrote:Hmm nice hint, lemme try...

Spoiler:


Oh jeez :lol:
You can get better results with Displacement maps explained above.
User avatar
Koto
El conocimiento engendra sufrimiento
 
Joined: 10 Aug 2013
Location: Southamerican sacrifice zone (Chile)
Discord: Kotometal#6085
Operating System: Windows 10/8.1/8/201x 64-bit
OS Test Version: No (Using Stable Public Version)
Graphics Processor: nVidia (Modern GZDoom)

Next

Return to Tutorials

Who is online

Users browsing this forum: No registered users and 1 guest