2D, 2.5D With Mix Of 3D Rendering (Transparency Issues)

So I am really in love with [Ubisoft’s Raymand Legends][1] and Moon Studio’s [Ori And The Blind Forest][2], being inspired by their work I wanted to see if it was possible to build a similar look in UE4.

Right out the gate I have hit a huge road block, it has to do with the way UE4 draws transparency and deals with the draw order for it’s shapes.

I have tried the paper 2d sprite method but currently I couldn’t get the sprites to cast or receive shadows, it also seemed rather limited with what I can do with the sprites themselves. I am using bones and animating a mesh with color and alpha to produce the final look. UE4 seems to be a bit behind Unity as far as being able to build a 2D puppet directly in the engine and being able to animate that puppet. But even Unity doesn’t have true bone deformation for their sprite sheets, unless you use a 3rd party plugin. [Pupet2D Looks rather promising][3]

If I use the shader method of masked V.S. translucent I can get things to look pretty good but there is no gradation in the transparencies. This works in some cases.

So if I do use the translucent method, I get no shadows and there is no control over the draw order of the pieces.

So unless I am mistaken, it may be impossible for me to get the look that I am going for in UE4 due to the way transparency currently works. I know transparency issues is on Epic’s radar, but when will this be addressed? We have this beautiful rendering engine but something as crucial as transparency is still an issue in many different areas of rendering in UE4.

I’m posting a shot of how things look like in Maya as well as UE4, Maya is using viewport 2.0 and I am using their depth peel method for transparency sorting. This is the look that I hope to achieve in UE4.

Also as the game is moving, this type of rending to cards can at times become blurry and hard to read correctly, I have tried to disable mipmaps, depth of field and also motion blur, but none of these things completely get rid of the issue. It is hard to describe what is going on other than to say with movement the 2D art becomes hard to read.

Any help would be greatly appreciated.

Here are the rest of the images:

Without full transparency control and proper sorting, I’m not sure if I will be able to layer a scene quite in the manner that I would like to. I have elements in the extreme foreground that have been pre-blurred in Photoshop.

Hey NickZucc -

So there are a few settings that must be adjusted but you can achieve the look you are after in Paper2D (minus the Skeletal-driven Sprite, which is actually [on our roadmap][1] to add into the engine). I’ll try to breakdown everything:

Translucency Sorting -

This is a result of the deferred rendering in the engine and how we currently deal with Translucency, you can however manual set the depth sort order for translucent objects by going into the details panel of the sprite and manually setting the Translucency Sort Priority, the higher the number always draws on top with a default value of 0.

Lit and Lighting Sprites:

The default Paper2D project in the engine is setup to not use lighting so all sprites are created using the MaskedUnlitSprite Material, however we do have a MaskedLitSprite Material (and TranslucentLitSprite) and you would need to set those Materials in the Sprite’s Details:

In addition to that though, the default project has no lighting in it since all the default sprites are set to unlit and emissive. So you would need to add a light, a spotlight or directional light would probably work the best for overall lighting. I would suggest using the settings below to start (the big one being turn off Inverse Sqaure, it might be the way light works in the real world but in 2D it can be hard to layout lighting using):

Finally you will need to make sure your sprites actually cast shadows and in the case of translucent shadows like these vines they cast them volumentrically:

Hopefully this can get you started and if there is anything I can do to help further please let me know -

Eric Ketchum

Eric,

Thanks for the quick reply. I will give these a try. Is there any eta on when you wull be able to use sprites with bones? Will it be fully weighted deformation of the sprite mesh or just rotational information? Will there be IK? And also will you animate directly in UE4? Sorry for all the questions but if these will not show for some time is there a way we can get sorting order on a skeletal mesh? I have everything I need minus the sorting order.

Hey NickZucc -

I know it is on our wishlist but there are several 2D rendering functions that we want to clean and polish before adding the new system in place. How are you setting up the animation currently? The sorting order should be controllable just like I described above. I would be happy to take a look at the asset if you want to upload it to here or a dropbox. If you want to keep it private feel free to private message me via the Forums.

Thank You

Eric Ketchum

Eric,

I’m going to go ahead and make the work so far public. I’m going to do this in the hopes that others might start looking into this workflow as well.

Here is a link to the [ZIP project][1].

In the ZIP file there is the Maya 2015 file that holds the bones, meshes and temp materials. There is a sourceimages directory that holds all the .PNG files that I am currently using. There is an FBX dierectory that holds the base skelmesh in the bind pose and 3 idle animations. There is a UE4 directory that holds everything that has been saved for 4.6. There is an anim blueprint that you can throw into the level and have the dino character loop through 3 different idle animations.

Hey NickZucc -

On behalf of the community thank you for being willing to share your work. As far as the sort order, I see the issue currently and the Translucency Sort order will not help with the dino walking in the opposite direction only if she’s facing right. Currently you would need to duplicate the Eyebrow and Moth and set up a Material Instance which can control which side the dino is facing and which of the two pieces to show. All well within the realm of doable and not at all to performant. The hardest part would be going into the skeleton and skinning the two new sprites to match on both sides.

Thank You

Eric Ketchum

Eric, So the way I was planning on dealing with the character facing the opposite direction was this, I have specific bones that are at the base of the eye, the brow, the hips and the arms, all I need to do is add key data those joints and push them one way or another depending on how the character was facing toward the camera.

I was thinking that this could be handled with a blueprint, if the character faces left then add this animation offset to specific bones and if the character faces right then add this animation offset to specific bones.

Do you have any advice on how that would be set up as an animation offset on those specific bones.

So when this is all working with sprites, will it be a pretty simple process to flip the character? I was watching a video on paper 2d and the person setting things up just gave a negative scale to the sprite/flipbook to have the character doing the same animations but in the other direction.

I should have mentioned that I am using the translation of joints to control the depth/sort order of my shapes.

I am reopening discussion of this because of the changes that were made in 4.7.

It appears as if the new transparency sort order only works on an object vs. object level. If you have a mesh (like mine above) that has full transparency, this new sort order will not take into account that the various shapes in a mesh that have transparency applied to them need to be sorted.

Is that correct?

I have tried all the various sort order methods that are mentioned in the what’s new section. (Project Settings>Rendering>Translucency)

Is anyone else trying to accomplish what I am doing with a 2.5d 3d character that is made out of a sprite card?

Thanks for any help!

Is anyone from Epic able to say when we will have full transparency sorting within an object it’s self and not just an object vs object comparison? Thanks in advance!

Hey NickZucc -

I have placed an official Feature Request, UE-11220, for this feature and will keep you up to date as I know more.

Thank You

Eric Ketchum

Eric, I just wanted to check in on this feature and see If full transparency sorting within an object will be making it to 4.9 or not. If not 4.9, do you have an eta of when that might hit? I’m guessing this is a forward rendering issue? And because so, it will take quite some time to get fully implemented?

Hi -

I took a peak at the Feature Request and it is listed as backlogged currently, but I upped the Community Interest to see if we can get some traction in it. I don’t want to get an hopes up but it is early to say what will or won’t be in 4.9 yet. I will try to keep an eye out for movement on this request and let you know as soon as I know anymore.

Thank You

Eric Ketchum

Thanks Eric, Much appreciated!

As there has been ten engine versions that have come out since 4.9, what is the progress here? Have the features requested been implemented yet? I am looking to find a way to light 2D characters similarly to the way it was done in Ori and the Blind Forest or the game in development called The Last Night. Basically I’m looking for a way to produce beautiful lighting in a 2D game

Is there any hope for this functionality to be added, I think it could add a lot of possibilities for those who are looking to create 2.5 D art to the engine. I talked to one of the programmers that worked on the paper 2D system at GDC and from what I was told there still has been no traction on this feature.

I really hope so. Either we need some official support from Epic, or some third party plugin that fixes the issues.

I was watching the videos you posted of Rayman Legends and when he shows the lights that reveal a lit material, that was amazing. And he could change the color. I think it could be possible to build a volume based lighting system like that, however I wouldn’t know how to make it fade away or only effect parts of the material, rather than the entire material.