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!

[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

[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?

[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

[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.

[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

[anonymous_user_46dc83731 (anonymous_user_46dc8373)]

Sure I’m doing the pants outline as the extra alpha channel and as you can see I did the same setup as the pants with color nodes but this is impossible as you cannot plug two nodes into the emissive color.

Texture:

[anonymous_user_46dc83731 (anonymous_user_46dc8373)]

I want entirely different colors that can be chosen

[anonymous_user_46dc83731 (anonymous_user_46dc8373)]

Thank you for this!

I’ve just copyed this out and added an extra multiply node as the top multiply was plugged into the emissive color for the pants and that didn’t have anywhere to go.

Chosing the pants color works perfectly find but when I choose the pants outline, it almost works but the colors are off and way more saturated.

Here’s my material:

Again, I couldn’t thank you enough for your help

[anonymous_user_46dc83731 (anonymous_user_46dc8373)]

I’m also working on getting the material working with lots of different sprites that are part of many flipbook animations. So I created a spritesheet for the character animations and the red and green only pants and pant outline that match the character animations on the other spritesheet.

Any idea of what I should do now to get it so the colors work with sprites now? Because I know I can always input a source texture on the sprite, but I’m not able to input the pants texture that matches the sprite.

[anonymous_user_46dc83731 (anonymous_user_46dc8373)]

Thanks but I have tried this and it half works as it does the pants color and outline correctly but it makes the outline of my character really pixaly and there is a black rectangle.

[anonymous_user_46dc83731 (anonymous_user_46dc8373)]

Thank you that was it! It finally works haha

I’m also working on getting the material working with lots of different sprites that are part of many flipbook animations. So I created a spritesheet for the character animations and the red and green only pants and pant outline that match the character animations on the other spritesheet.

Any idea of what I should do now to get it so the colors work with sprites now? Because I know I can always input a source texture on the sprite, but I’m not able to input the pants texture that matches the sprite.