Hello Guest

Author Topic: Add a Border to a sprite  (Read 14915 times)

AdamWaters

  • Newbie
  • *
  • Posts: 4
    • View Profile
Add a Border to a sprite
« on: July 26, 2012, 10:05:31 pm »
Is there an easy way to programmatically add a border around a sprite easily?  This is the type of effect that I am looking for:
http://positech.co.uk/cliffsblog/wp-content/uploads/2011/08/Image1.jpg

The only way that I can think of to pull this off would be to add another set of sprites with the border and toggle between them when needed.

Is there another way?


unikronsoftware

  • Administrator
  • Hero Member
  • *****
  • Posts: 9709
    • View Profile
Re: Add a Border to a sprite
« Reply #1 on: July 27, 2012, 12:16:19 am »
The easiest way would be to do what you just said there, but would be incredibly wasteful in terms of memory as you'd need 2 of each texture. If you've only got a handful of textures this is probably all you'll need.

If you need this on all your sprites (making it totally impractical to store 2 copies of each), here is something I've done before. It also gives you full control over the border, and you can do some interesting stuff with it.

1. In each textures alpha channel, draw the border in incorporate the border.
2. Use a cutout shader (or a blended cutout hybrid for iOS) to draw the sprites without a border.
3. Create a second shader, which takes a color and uses the alpha blended value. So basically, ignore the color channel of the texture, and use the alpha channel. Create this sprite and push it back in the main sprite, so you get a nice glow around it. You can tint this sprite and control the strength of the glow, and even cycle it if you'd like.

Hope that helps.
« Last Edit: July 27, 2012, 12:33:53 am by unikron »

DannyB

  • 2D Toolkit
  • Hero Member
  • *
  • Posts: 609
    • View Profile
    • Chicks Ahead
Re: Add a Border to a sprite
« Reply #2 on: August 17, 2012, 11:10:02 am »
Hi,

I am also looking to add a glow effect to a sprite.
In my case, I do not need to turn it on or off, just always on and I prefer doing it outside the graphic asset itself.

The proposed answer is slightly above my current understanding of things so I am not sure if it is what I need.
Also, I probably need to mention, I want to add it to an animated sprite.

Will a custom made shader be able to do the trick? Like the one described in this Unity Answer?

unikronsoftware

  • Administrator
  • Hero Member
  • *****
  • Posts: 9709
    • View Profile
Re: Add a Border to a sprite
« Reply #3 on: August 17, 2012, 06:54:14 pm »
That shader in Unity Answers will not work - that will only work on solid 3d objects. The easiest way (and most efficient) to do a border on a 2d sprite is to draw it in to the texture itself.There are ways to do it without, eg. drawing a few copies of the same sprite behind the main one, tinted black and offset a random amount, but that is obviously a lot more expensive.

DannyB

  • 2D Toolkit
  • Hero Member
  • *
  • Posts: 609
    • View Profile
    • Chicks Ahead
Re: Add a Border to a sprite
« Reply #4 on: August 17, 2012, 07:20:30 pm »
Understood, thanks.

Finnegan

  • 2D Toolkit
  • Newbie
  • *
  • Posts: 38
    • View Profile
Re: Add a Border to a sprite
« Reply #5 on: May 31, 2013, 12:24:28 pm »
Sorry for bumping the old thread.

I recently implemented Flash-like dynamic glow/stroke in Cocos2d-iPhone by running pixel by pixel around sprite's border (based on pixel's alpha) and placing tiny circle sprites on a new texture (sprite sized).

Then I create a new sprite from the texture with outline and place it behind the main sprite. It's too expensive to run every frame but ok for a level preloading (0.5-1s for multiple big sprites even on iPad 1).

Will it be possible to reproduce this algorithm with Unity and 2d Toolkit? I need something like glReadPixels and CCRenderTexture.
« Last Edit: May 31, 2013, 12:28:59 pm by Finnegan »

unikronsoftware

  • Administrator
  • Hero Member
  • *****
  • Posts: 9709
    • View Profile
Re: Add a Border to a sprite
« Reply #6 on: May 31, 2013, 02:29:20 pm »
You could read the textures pixels, and it might be possible, but remember that when you read pixels in Unity, it creates another copy of the texture. If you can afford the memory overhead, you could work out the data.

But the sprite itself is static, so this might work a lot better simply performed in the sprite collection editor - make it do this computation and store a list of points in the sprite class during build. Then you can extract and use this data as needed later.