5
\$\begingroup\$

Here's an example of what I mean:

enter image description here

In this gif, when the character is on the dark background, his outline is almost black, whilst it retains more colour if the background he's on is the sky one. How can I achieve this in Unity? I don't think it's individual sprites

\$\endgroup\$
  • \$\begingroup\$ I believe this is just a sprite with an opaque border. This can easily be achieved with any sprite editor. \$\endgroup\$ – Shroeder Nov 11 '14 at 14:27
  • \$\begingroup\$ @Shroeder I don't think so, if you see closely the border changes colour depending on the background the sprite is on. You can also see it on the block tiles either side of the ladder, their border is different depending on the background. \$\endgroup\$ – watMartin Nov 11 '14 at 14:36
  • \$\begingroup\$ You're both right. You can achieve this with a pixel shader and a cleverly designed source sprite. You draw a border color around your sprite that you won't use anywhere else in your sprite (e.g., bright red #ff0000), and then in your pixel shader, you replace that color with the appropriate color. \$\endgroup\$ – Michael Nov 11 '14 at 14:48
  • \$\begingroup\$ @Michael I'm quite new to unity, is a pixel shader like you speak about possible? and if so could you possibly link me to some documentation on it? Thanks for the answer either way! \$\endgroup\$ – watMartin Nov 11 '14 at 14:55
  • 6
    \$\begingroup\$ Not sure whether you need a shader. I can get a very similar effect just by putting a very dark coloured border around the sprite with about 75% opacity. On a light background it's noticeably dark, and on a dark background it looks nearly black. \$\endgroup\$ – DMGregory Nov 11 '14 at 16:23
6
\$\begingroup\$

Your gif is from Path to the Sky (TIGSource), and definitely uses a pixel shader to achieve that particular outline.

For a guide to using custom shaders in Unity, have a glance at their shader reference page. There are a few tutorials and samples that should get you started.

However, I agree with @DMGregory, you can create a similar looking effect with a LOT less effort by using a dark but transparent border around the sprites.

\$\endgroup\$
  • \$\begingroup\$ depending on the hardware being used. Classic video games, which this example seems to be an example, used only 8 or even 4 bits per pixel, with a color map to determine the color you see. In that environment, "transparent" colors are not available - everything is done by manipulating the pixel values and color maps. \$\endgroup\$ – ddyer Nov 12 '14 at 17:08
  • 1
    \$\begingroup\$ @ddyer The example is from a game currently being developed, so while you're right about classic games, we're talking about modern hardware. \$\endgroup\$ – Jannie Nov 14 '14 at 11:20
3
\$\begingroup\$

I think there is a simple/dump way of achieving this (which I have not tried yet on code).

Assets:

  • You have one background image
  • You have an image with the same size as the background but painted in the colours you want the border to be painted in (referred to as "border-color" image)
  • You have your regular sprites
  • You have a 1-bit (or 8-bit) outline sprite for each sprite

What you do is render the game in 3 layers:

  • Background at the back with 100% alpha
  • The "border-color" image with 0% alpha aligned to the background
  • Your sprites with their alpha on top

You also need a "hidden" layer, one that will not be rendered directly on the scene. This layer will contain the "outline" sprites (which should be aligned with the regular sprites). This layer will be in turn used as the mask of the "border-color" layer.


I got the following working on Pixelmator (something like Photoshop) real quick with sprites I found on the Internet:

Screenshot of Pixelmator

The border-color image is simply the background with inverted colours.

\$\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.