4
\$\begingroup\$

I was wondering how I could go about creating a vignette type effect / some sort of volumetric shadow for the 'cross section' parts of a 2.5D level. The effect I'm going for can be seen in 'This war of mine' where the edges of the rooms and walls / floors that are facing the camera have been darkened and blurred. (see below).

enter image description here

I thought about creating the edges in photoshop and then blurring them and putting them in, however the blur scales weirdly as I'm re scaling the sprites so it looks really fake and not like a visual effect. Is there perhaps a 2d shader I could use or make?

Any help on this would be appreciated!

Cheers

My photoshop attempt to recreateenter image description here

\$\endgroup\$
  • \$\begingroup\$ It sounds like you might be describing "ambient occlusion," the effect that makes concave corners darker. Is that right? Searching that term will turn up lots of ways to implement the effect, including from baked AO maps, vertex colours, and screenspace post-processing using the depth buffer (called SSAO). \$\endgroup\$ – DMGregory Sep 2 '18 at 17:59
  • \$\begingroup\$ Can you clarify what you did in your Photoshop example, and whether this accurately recreates the effect you wanted or if there are still aspects you want to change? \$\endgroup\$ – DMGregory Oct 18 '18 at 10:13
  • \$\begingroup\$ In the photoshop example I've added black sprites to the edges of the floors and falls (the ones that face the camera) in an attempt to copy the effect from the screenshot from This War of Mine. As you can see however, they aren't anywhere near as organic, and if I add effects to the sprite in photoshop like a blurred edge or finer details, once I import them into Unity, resizing it to fit the different parts ruins the effect and makes it very obvious that they're just drawn in \$\endgroup\$ – Huntsman Games Nov 5 '18 at 3:50
0
\$\begingroup\$

The effect you are looking for is easily archieved with the help of the Post Processing Stack available on the asset store for free and owned by Unity Technologies. You can also create other effects using this as well with lots of tutorials around the web. An example with and without post procesing from the asset store:
An example with and without post processing
An vignette type effect is also available the post processing script.

\$\endgroup\$
  • 1
    \$\begingroup\$ This seems to only solve a part of what OP was asking for, since the question also mentions making the building edges dark. \$\endgroup\$ – Tyyppi_77 Sep 2 '18 at 12:02
  • 1
    \$\begingroup\$ I agree. It would be good for the OP to show his implementation of the "photoshop" solution he has tried. So we can answer him more precisely. \$\endgroup\$ – S4NNY1 Sep 2 '18 at 12:27
  • \$\begingroup\$ Sorry for the confusion, I know how to add a vignette, I was mainly just wondering about the dark 'cross sections' of the walls. As S4NNY1 said, I've added a screenshot of how I attempted to recreate the effect with photoshop \$\endgroup\$ – Huntsman Games Oct 18 '18 at 5:01
0
\$\begingroup\$

You could implement a cross section shader but if you are not going to move the cross sectional plane then this would be a waste of time.

I believe the solution for TWOM was simply to overlay some black bars with rough edges a cutout/transparent shader.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.