I’m have a (for me) super tricky issue I’m trying to figure out how to solve. I’ve googled for a couple of days and have yet to find a working solution I could use.
My setup: I have a 2D-character made up of multiple sprites set up with the awesome tool 2DAnimation. I’m using these 2D character-setups as portraits during dialogue. Additionally, by using a custom shader on the characters and adjusting its alpha-value, the “2D character portraits” will fade in and out when it’s their turn to speak/not speak. It’s great!
The issue: There is however one big issue. Adjusting the alpha on a shader on overlapping sprites will show the sprites as the parts they are. The character looks fragmented and strange when fading in/out. See below:
plumpdeadantbear
If you look at the character to the left. She is made up of 2D-parts animated in 2DAnimation with bones. As she’s fading you can see her body-parts shine through in a fragmented way as some overlap and some don’t. It’s easier to catch if I put all her bodyparts’ alpha to 0.5:
Notice how her body-parts and their overlapping structure stack/shine through.
What I’m trying to achieve: Rather than the parts fading in a fragmented way, I want her whole body to fade in a uniform, cohesive way. I found a silly gif to illustrate what I mean, just to show the effect I’m after:
Does anyone here have any idea how I could achieve this?
What I’ve tried:
setting as a UI-component: 2DAnimation-sprite parts cannot be UI-objects. If they could, I could just put them under a canvas “Canvas Group” and manipulate it’s alpha. As it is now I cannot do this because 2DAnimation setups can’t be set to being UI components.
Shader: I’m currently manipulating the alpha in shaders (that are attached to the body parts) now to do the fade, which has the problem described above with overlapping sprites.
-Overlay camera? Render textures?: I thought I could perhaps stack cameras (and have one overlay camera for my portraits), and then somehow fade on/off the overlay’s camera. I also found something called Camera Render texture but don’t know if it could be of help
I have noooo idea if this is possible using overlay cameras, and I have found very little when I’ve googled. Does anyone know if it’s possible? And if so how? If it’s important I’m using the 2D Experimental Renderer (but can swap if it’s vital).
Any help at all is enormously appreciated. I’ve really struggled with this effect. It doesn’t seem very common to have this setup, using 2DAnimations (the tool is quite new) for dialogue-portrait animations, so maybe that’s why I haven’t found anyone else online with the same issue as me. I’m crossing my fingers there is someone here who knows something on how this effect could be achieved with this setup.
I think you will need something like a RenderTexture to do this properly. You would set up a separate camera to view the animated model, and send its output to a RenderTexture that you display where the animated sprite used to be.
It takes a little bit of fiddling to set it up but once set up it should be pretty straightforward, and you would leave the 2D sprites always at alpha 1.0, and you would then control the alpha on the thing displaying the RenderTexture.
EDIT: I wanted to make sure I wasn’t leading you down the wrong path. I’m confident you can get what you want with RTs because I just did. I “photographed” an animated 3D cube and 2 sprites animated in place.
I present this image and allow it to fade in / out, both presenting it on a Quad (MeshRenderer) and on a UI Canvas (RawImage) through the same RenderTexture (your choice!). See attached project for how it works.
First of all, thank you so much for your response! Not only did you give me a tip on which path could lead me right (render textures), you made a WHOLE package I can open that reproduces the very effect I’ve been trying for days to achieve. I feel like I don’t know how to put in words how relieved and grateful I feel so I’ll just say thank you, thank you, thank you!
It works so well too. You set it up with a slider and everything! I have to go to bed for work tomorrow morning, but first thing when I get home I will be decoding how you set it up and try to implement it into my project.
It’s people like you who are the backbone of warm and helpful communities you took time out of your day just to help me, you made my day. I will pay your help forward in the future whenever I can!
I just got back to trying, and imported my 2DAnimated character into your scene to give it a go. I increased the resolution too so my character is more visible and zoomed into her face. The fade works!!! I could cry! Thank you!
There is just one little isse and it’s that there are some strange artefacts around the sprite-parts that have transparency. You can see it here:
viciousbreakablearmyworm
Notice how around the nose and lips there are dark lines, and pink from the 3D objects behind is also shining through some parts as well.
I thought it might be something with the render texture so I tried different Color Formats. You can see me trying another one in the video. In the “R8G8_SNORM” I try for example the dark lines around her body-parts dissappears, but she’s turned yellow so it’s no good. I tried the other Color Formats but couldn’t find any that removed the artefacts + kept her in her true color.
Do you/anyone else here know how I could fix this? Is there a fix? How could she be rendered without artefacts/transparency issues? I googled but couldn’t find this specific issue described with render textures.
Weird… try putting something super-intense behind the original sprite and make sure it’s not partially translucent there in her face shadow. That’s what it looks like is going on.
I put a red square behind her and it’s the same.
So odd!
I’m googling “transparency issue render texture sprite” and getting hits like this and this . Blending channel sounds like it could be relevant, but I don’t know if it would help/what it is/where it is at to try it. I’m looking around!
If anyone knows how this could maybe be solved, I’m really grateful for all help! And to you Kurt thank you always I will always be grateful! If you find anything you think might do the trick, do share! <3
Maybe it has something to do with 2DAnimation? Hmmm
Edit:
I’m using 2D-experiemental renderer. I’m using 2D Lit custom shader material on my 2DAnimation character (these also change the color of her skin/hair etc. to what I want). When I try giving her the “Sprite-Lit-Default” materials (her colors are beige, ignore that, it’s her default color) she still has these artefacts, see here:
But if I give all her parts the “Sprite-Default” they more or less dissappear (she does have pink that shines through around her lips/Eyes though)
Could it be something with the 2DExperimental renderer I’m using? Could it be something with the Render Texture? Could it be something with the “Raw Image” the camera? Some setting? Or a bug in the 2D experimental renderer? or something else entirely? So tricky. It seems like it could have something to do with the “lit” functionality in the 2D-renderer…
To anyone who finds this thread in the future, I think I found a solution! At least, it looks perfect now
I went into the Render Texture I’m using to render my 2d character on a camera and chose Color Format“B5G5R5A1_UNORM_PACK16”. This mode made all artefacts dissappear! See below:
Imortant to note here is that I don’t know at all why it works, if it’s a “performance heavy” Color Format or if it has other issues. But it currently works and I’m now using it!
Hope this helps someone in the future. Thanks to all who helped me (especially Kurt-Dekker who made an entire package for me to try)!!
Thank you so much for sharing this! I’m on Windows but there’s so much good info in that thread, and it looks so similair. Really thankful for your message, I’m going to look through their replies!
so I’ll just say thank you, thank you, thank you!
