Using alpha channel for paper 2d sprite...?

[anonymous_user_46dc83731 (anonymous_user_46dc8373)]

Hey so what I’m trying to do is make it so my character sprite can have a chosen color of headband. So i’ve made a black and white alpha channel of each texture frame of my character and put it on ue4 as targa files.

Please can someone explain to me what I do now because I’ve messed around with sprite materials to try and get a material instance where I can set the color of the alpha channel but I’m very new to materials in ue4 still and i’m so confused.

I’ve spent days trying to figure this out so any help is much appreciated, thank you!

[NachoMonkey2]

@anonymous_user_46dc83731

So i’ve made a black and white alpha channel of each texture frame

I’m confused about this part… Did make the alpha channel part of your original textures, or did you create a new set of textures that is black and white?

[anonymous_user_46dc83731 (anonymous_user_46dc8373)]

I got my original textures on photoshop and added an alpha channel layer with the white being the headband and the black being everything else, then I saved all of these frames as targa files and imported them back into ue4

[anonymous_user_46dc83731 (anonymous_user_46dc8373)]

@ I hope this makes it clearer for you so you can help me

[NachoMonkey2]

Sorry for the late response… I wasn’t ignoring you, I’m just not on these forums 24/7.

My guess is that this is your character (based on previous posts):

https://d3kjluh73b9h9o.cloudfront.net/uploads/default/original/3X/4/0/403c21e39ee3d212a5111629903b2e0a5c85fcee.jpeg

My concern is that you were already using the alpha channel for transparency/masking your sprite. Am I correct in that assumption? In that case, then by overwriting the alpha channel to mask the color, you would have lost the transparency data.

[anonymous_user_46dc83731 (anonymous_user_46dc8373)]

Thats correct that is the character

Im sorry but I don’t fully understand what you mean, but I think this may be the case. Each sprite is using the MaskedUnlitSpriteMaterial instance which uses the DefaultSpriteMaterial which I think does use the alpha channel for something, here is an image of the DefaultSpriteMaterial:

If this is the case, is there any way at all I can make it so I can change the color of the headband of my sprite?

[NachoMonkey2]

@anonymous_user_46dc83731

Im sorry but I don’t fully understand what you mean

The character I see in the picture has something masking its visibility (otherwise, you would see the entire rectangle of his sprite). Traditionally, that would be the alpha channel of the texture. You said you used the alpha channel of your texture to mask out the headband color. The problem is that you can’t store the headband mask and visibility mask on the same texture’s alpha channel. (actually, option #1 does do that, but it uses the material to figure it out)

@anonymous_user_46dc83731

If this is the case, is there any way at all I can make it so I can change the color of the headband of my sprite?

Yes.

You have two options as I see it:

1. You could keep both the visibility channel and the headband mask channel in the alpha channel of the texture by: Making the normal parts (not headband, but visible) have alpha 1, making the headband part have alpha 0.5, and making the invisible parts have alpha 0. I could then compose a material that could differentiate between them and make it all work.

–or–

2. You could undo your changes to the original texture’s alpha channel, and then create a new set of black&white textures that masks out the headband by making the colored parts white, and the other parts black.

So, if you are currently having the problem of storing the headband mask and visiblity mask in the same texture’s alpha channel, then choose one of those options.

[anonymous_user_46dc83731 (anonymous_user_46dc8373)]

Thanks so much for helping me, I’ll try one of these options when I get back home

[Suthriel]

The easiest way for later customisation would be the latter version, where you make each headband, addotional armor etc an extra texture with alpha and save it separately.

Because then you can modify the Sprite material with some multiplying and lerp (blendign two textures together based on an alpha/black and white mask) to make your headband visible, and change it´s colors.

Something like this here :

UE4 - Paper2D with Extra Alpha Texture

[anonymous_user_46dc83731 (anonymous_user_46dc8373)]

Thank you! I’m going to try this method now and this video really helps me out!

[anonymous_user_46dc83731 (anonymous_user_46dc8373)]

I have two more questions that I’m still a little confused about if you don’t mind answering:

1. Is there any way I can do more than one extra alpha texture such as being able to customise the headband color and perhaps the pants color?

2. Since I have many frames of my sprites, do I have to create a new material + material instance for each one? Or is there some way I can just have one instance where I can set the extra alpha texture in the sprite or something along those lines…?

Thank you very much for your help anyways

[NachoMonkey2]

@anonymous_user_46dc83731

alpha texture

…that’s not a thing. Let me clarify somethings. As you may know textures are composed of channels. The most common configuration of channels is RGB (Red, Green, Blue). You can think of each channel almost like a black&white sub-texture that controls the value of each color. Now, the alpha channel is an optional fourth channel of textures that is generally used to represent transparency.

With you’re character’s texture, you’re storing the transparency on the alpha channel, which decides which parts are visible.

But here’s another interesting fact: the channels of a texture don’t have to be used for just color. You can separate the channels and use them to decide their own factors.

@anonymous_user_46dc83731

Is there any way I can do more than one extra alpha texture such as being able to customise the headband color and perhaps the pants color?

Yes – you could have the headband, pants, and whatever else have their own colors, but you wouldn’t need to create more than one extra texture. You could store the headband mask on the Red channel, and the pants mask on the Green channel, for instance.

@anonymous_user_46dc83731

Since I have many frames of my sprites, do I have to create a new material + material instance for each one? Or is there some way I can just have one instance where I can set the extra alpha texture in the sprite or something along those lines…?

No. You only need one material. The “Source Texture” node on the DefaultSpriteMaterial lets you select different textures for the material.

[NachoMonkey2]

So, here is what I advise you do:

1. Modify the original texture for your character to make the color-able parts black&white.
   As in, do something like this on all frames (obviously do a more thorough/precise job than me):

Before:

After:

That will let you change the intensity of the colors, to preserve the dark border that is there right now.

2. Create a new set of textures (or new sprite sheet, depending on your setup), and just make the pants area solid red and the rest completely black.

3. Show me the results, and I’ll give you the material.

---

This will be expandable to make a color-able headband in the future, but I think we should just start with the pants just to get something working.

Hope this helps!

[Suthriel]

1. In theory, you can add many textures, one for each extra piece of clothes, headband/helmet/hat, or feet/shoes/boots.
   The only tricky part is just to blend them so that they overlay each other in the correct way. F.E. multiplying won´t do it, since this creates a mix of the two input textures → bald head and hair texture will become one mix with the color of both of them mixed, instead hair in hair color lying on top if the bald head. Or the headband lies on top of the head and hair, it should not get mixed with the head and hair color.

2. Not sure, if i understand this question correct ^.^ Will you combine those sprites into a flipbook to get an animation? Then you would need only one instance for that flipbook (or for all flipbooks , that are created from the same texture and its sprites), and the master material contains all the stuff for merging and blending the extra textures together.
   if you want use every sprite as a unique sprite, then you would need one instance per sprite. One master material, and several instances created from it, for deciding, which instance will show which parts and color them in which way.

I tried to create such a material with some character textures from a RPG Char Generator. It´s far from perfect (in fact, its pretty buggy and breaks, as soon as i try to add a chainmail under the chestplate ), but it shows, that with some smart lerping (smarter than my version ^.^ ), blending and whatnot, it´s possible.

UE4 - RPG-Sprites with more Extra Stuff

[anonymous_user_46dc83731 (anonymous_user_46dc8373)]

Thank you for the clarification of channels, I understand it a lot more now!

• Create a new set of textures (or new sprite sheet, depending on your setup), and just make the pants area solid red and the rest completely black.

And I’ve just done this with a single texture for now just to test whether it works or not and I got it working but when I try to change the pants color, it can’t change to other colors apart from red, moving the color picker around just changes the saturation of the red.

As you can see, I set the color to blue and green and the pants color doesn’t match.

Here is my material so far, I’ve set the blend mode to translucent since when I set it to masked, the sprite shows up extremely pixelated and I’ve set the shading model to unlit.

Again thank you so much for your help.

[anonymous_user_46dc83731 (anonymous_user_46dc8373)]

Thank you, this is so helpful! I was thinking in the future to add more customisable elements to my character so its great to know it is achievable

@Suthriel

Will you combine those sprites into a flipbook to get an animation?

And yes I will be combining them into multiple flipbooks so I guess I will have to have multiple spritesheets of the character animations and multiple spritesheets of the pants or headband? (a spritesheet for every animation since I have lots of animations and frames) Then make one main material and one instance?

[Suthriel]

Essentially, yes, you will need one sprite sheet for the body (that can contain the whole collection for walking, idle, fighting, taking damage etc), another sprite sheet for the headband/helmet, and then another one for pants or belts or shoes etc.
Or short, one sprite sheet for every piece, that you want to be customizable, or that you want to be able to turn on and off (to be visible or to be not visible). And yeah, to get those parts fit with the rest of the model, you have to draw them so that they animate with the rest of the sprites and are at the right position.

Here are the sheets i used in that video, i just grabbed them from an RPG Character Builder ( from this one: RPG Character Builder on Steam ) and renamed them. This should give you a rough idea, how to draw them. Especially the spear, and how its missing several parts to show, that those parts would be covered by other body parts during some of those animations.
Well, the spear seems to switch hands during walking left and walking right, but you could draw your sprites, that a weapon (or any item) stays always in the same hand, and does not switch places, if a different animation plays ^.^

RPG Sprite Char.zip (244.0 KB)

If you google for sprite sheets for such chars, then you see, that they are usually arranged in rows and coloums, where:

• a row usually contains all the sprites for one particular animation (like walking, then it contains the sprites for walking, and walking only) - at least nowadays, there is no standard, but it´s easier to arrange them in that way
• a coloum contains all the possible different animations, like walking (separated into the possible directions f.e. left, right, up, down), fighting, jumping.

And if you split a character into several pieces for customisation, then all those pieces have to be in the correct position, so that they give a correct picture, if you combine them later in your material

And as you saw in my clip, in Unreal i only extracted Paper2D sprites for the body, since all the rest gets stacked on top of those body sprites in the material, and all textures are in the same size etc to fit together.
However, I would have to create different sprite sheets for different bodies, f.e. if i would have male and female, and demon ^.^ and then of course matching clothes for those different bodies.

[NachoMonkey2]

I see the problem with your material. Do the changes illustrated in this picture:

The problem was that you were multiplying the pants color by the pants mask’s RGB. The pants mask is only red (1, 0, 0), so by multiplying by it, you were destroying the green and blue channels.

Using Translucent will be more a bit more expensive than Masked, but it shouldn’t be a problem.

[anonymous_user_46dc83731 (anonymous_user_46dc8373)]

Ah yes, thank you! It now works perfectly!

Now I’m trying to add another customisable texture using the alpha channel and I have done the same thing, but I can’t plug two nodes into emissive color, any ideas of what I should do?

Thanks

[anonymous_user_46dc83731 (anonymous_user_46dc8373)]

@Suthriel

a row usually contains all the sprites for one particular animation (like walking, then it contains the sprites for walking, and walking only) - at least nowadays, there is no standard, but it´s easier to arrange them in that way

Okay thank you so much for all of this information its so useful! and that is one nice Steam app, I’m going to download it now haha