Author Topic: Artifacts inbetween multiple background sprites for a button  (Read 10395 times)

miyudreams

  • Newbie
  • *
  • Thank You
  • -Given: 0
  • -Receive: 0
  • Posts: 19
    • View Profile
Hi,

I have a Button widget. I want to dynamically expand the button based on what text is displayed. The button has a background texture cut up into 3 pieces, where the middle part of the texture is where it will expand.

1. I created an atlas with "Padding" 0 and "Trim Alpha" unchecked, that contains these 3 png files, font files, and other files.
2. I created a Button widget, and duplicated the Background object, so there is now 3 Background objects. Each one will use a different sprite, (top, middle, and bottom).
3. I set each background object to the same X scale (so it's same in width).
4. Then I moved each background to one on top of another, so it is pieced together without any spacing inbetween.
5. Play the game, and I see this black line artifact between my middle and bottom pieces.

Texture sizes, Top = 397 x 89, Middle 397 x 65, Bottom = 397 x 61

Zooming into the button backgrounds, I can see the textures have this greying gradient around the rim of the textures. But when I look at my original textures, they don't have any grey outline.

Here's some images on my Dropbox account

Button in editor:
Button in editor zoomed in:
Button while in Play mode:

Original art:
Top:
Middle:
Bottom:

How do I make sure these artifacts disappear?
Is there some texture compression that needs to be disabled?
Is there a better way to piece backgrounds together?

Thanks for any help provided.
« Last Edit: July 02, 2013, 01:27:54 AM by miyudreams »

ArenMook

  • Administrator
  • Hero Member
  • *****
  • Thank You
  • -Given: 337
  • -Receive: 1171
  • Posts: 22,128
  • Toronto, Canada
    • View Profile
Re: Artifacts inbetween multiple background sprites for a button
« Reply #1 on: July 01, 2013, 11:38:44 PM »
None of your images work.

miyudreams

  • Newbie
  • *
  • Thank You
  • -Given: 0
  • -Receive: 0
  • Posts: 19
    • View Profile
Re: Artifacts inbetween multiple background sprites for a button
« Reply #2 on: July 02, 2013, 01:29:19 AM »
None of your images work.

Thanks for letting me know. Images moved to dropbox. Hopefully they work now. Hope this helps give you some insight on what I did wrong.

Malzbier

  • Jr. Member
  • **
  • Thank You
  • -Given: 0
  • -Receive: 0
  • Posts: 93
    • View Profile
Re: Artifacts inbetween multiple background sprites for a button
« Reply #3 on: July 02, 2013, 02:05:16 AM »
This looks for me like an perfect opportunity to use a Sliced Sprite (UISliced Sprite).
Just make it one sprite and play around with the Border Settings and you will be happy.

About compression: NGUI atlas are not compressed but if you have the Quality very low the setting for Texture quality is maybe not set to full res.

For the padding i would recommend a value of 8 pixels (that that works fine for me).
« Last Edit: July 02, 2013, 02:30:46 AM by Malzbier »

Nicki

  • Global Moderator
  • Hero Member
  • *****
  • Thank You
  • -Given: 33
  • -Receive: 141
  • Posts: 1,768
    • View Profile
Re: Artifacts inbetween multiple background sprites for a button
« Reply #4 on: July 02, 2013, 06:03:19 AM »
Use a sliced sprite and split it as I've illustrated here:



Here's the source file btw, if you want it


miyudreams

  • Newbie
  • *
  • Thank You
  • -Given: 0
  • -Receive: 0
  • Posts: 19
    • View Profile
Re: Artifacts inbetween multiple background sprites for a button
« Reply #5 on: July 02, 2013, 09:26:47 PM »
I was using the free NGUI, and turns out the Border properties on a Sprite wasn't available! Well, now that I got the paid version...

@Nicki: thanks for the reply and image. Can you please explain a bit more on the slicing? Do I set the same values for both the top and bottom, and the right and left values are the same? I tried setting the Border like your lines specified, but when I scale the speech bubble, it still stretches the speech arrow. Do I set the pivot point to Top-Left? I tried that and Center pivot and Top/Center, but my the bubble is still stretching the arrow.

About compression: NGUI atlas are not compressed but if you have the Quality very low the setting for Texture quality is maybe not set to full res.

For the padding i would recommend a value of 8 pixels (that that works fine for me).

@Malzbier : thanks for replying. What is the purpose of the padding? When I set the Atlas with 8 pixels, the text on my label disappeared, but my font texture is still in the Atlas. I set the padding back to 0, and update my Atlas, the text on my label reappears! Weird...

Where can I find the Quality property? I'm not seeing it on the Atlas Maker window. Thanks.

Malzbier

  • Jr. Member
  • **
  • Thank You
  • -Given: 0
  • -Receive: 0
  • Posts: 93
    • View Profile
Re: Artifacts inbetween multiple background sprites for a button
« Reply #6 on: July 03, 2013, 02:27:37 AM »
With the Quality settings i mean the unity Quality settings : Edit -> Project settings -> Quality.

ArenMook

  • Administrator
  • Hero Member
  • *****
  • Thank You
  • -Given: 337
  • -Receive: 1171
  • Posts: 22,128
  • Toronto, Canada
    • View Profile
Re: Artifacts inbetween multiple background sprites for a button
« Reply #7 on: July 03, 2013, 05:55:13 AM »
Nicki is off on vacation somewhere. You need to use a Sliced sprite option.

miyudreams

  • Newbie
  • *
  • Thank You
  • -Given: 0
  • -Receive: 0
  • Posts: 19
    • View Profile
Re: Artifacts inbetween multiple background sprites for a button
« Reply #8 on: July 04, 2013, 09:42:22 AM »
I finally got it working by editing the border of the sliced sprite. Thank you.