Search Unity

  1. Megacity Metro Demo now available. Download now.
    Dismiss Notice
  2. Unity support for visionOS is now available. Learn more in our blog post.
    Dismiss Notice

Multiple image for button

Discussion in '2D' started by samim99, Sep 9, 2019.

  1. samim99

    samim99

    Joined:
    Apr 10, 2018
    Posts:
    24
    Hi,

    I have created a border, body and two glowing parts for a button in Photoshop.

    My idea is to have border as parent then body image and glow images over it, then change the body's colour in each level, is that good idea?

    so far when testing in each resolution and making it bigger looks fine.

    want your input please.
     
  2. SAVVU

    SAVVU

    Joined:
    Dec 6, 2015
    Posts:
    21
    Totally fine!
    Put a script on the button parent with Color variables in it. Check with a function of this script in which level you are and apply the right color to the body and glow!

    Otherwise when your levels are different scenes you could just place the buttons (as prefabs) in it and change the color as you like in the inspector
     
    vakabaka likes this.
  3. samim99

    samim99

    Joined:
    Apr 10, 2018
    Posts:
    24
    @SAVVU Thank you, have done exactly that.

    If I have a circle border image and circle body image I am setting body to stretch to parent then set margins to fit it inside parent, now if I resize it the body image gets small and I can see my background between border and body. What do you suggest in this case?
     
  4. MisterSkitz

    MisterSkitz

    Joined:
    Sep 2, 2015
    Posts:
    833
    I'm wondering if you can Create Empty Object and make the Border and Body images both children of the Empty? Then do not make the Body element the child of the Border element and when you stretch the body, also resize the border at the same.

    For clarity:
    1. Create Empty Object
    2. Remove the Body element from child position by dragging it out
    3. Make Border a child of the Empty
    4. Make Body child of empty not child of Border
    5. Code Border and Body to scale at the same time
     
  5. samim99

    samim99

    Joined:
    Apr 10, 2018
    Posts:
    24
    @MisterSkitz I had it like that before, but if my border has shadow at the bottom, it will not scale the bottom properly.

    Another question related this, currently have designed them in photoshop and in unity the border is blurry and for body the point where it joins the border is blurry - even though the images are 512x512 but in unity am setting width to 100x100.

    Do you think if I did this in illustrator vector based png would solve this issue?
     
  6. MisterSkitz

    MisterSkitz

    Joined:
    Sep 2, 2015
    Posts:
    833
    The best way to answer your question is by trying it. Gather data from your test and then ask a question based upon the result. I have asked so many questions exactly like you just did. I tried my thought and usually resolved my issue before anyone here responded.

    Now the shadow isn't going to scale properly so you may need to make a few versions of the image in different resolutions and switch resolution images through code. Then you wouldn't need several images for Border and Body. They would all be the same image but different resolutions.
     
  7. samim99

    samim99

    Joined:
    Apr 10, 2018
    Posts:
    24
    @MisterSkitz I managed to get it to work by parent being the border and child body stretched then giving margins..
    Again regarding images being blurry, tried a border with illustrator same result - didnt see any difference.. please see attached image of what I mean the red image was exported from photoshop and blue is screenshot from unity
     

    Attached Files:

    Last edited: Oct 11, 2019
    MisterSkitz likes this.
  8. Shack_Man

    Shack_Man

    Joined:
    Jun 7, 2017
    Posts:
    372
    try scaling it down in photoshop before you export, usually looks better and keeps your project smaller.
     
  9. krupps

    krupps

    Joined:
    Oct 17, 2017
    Posts:
    159
    I actually did this


    Empty Object --> ButtonScript
    -->Spinning Image
    -->Button - Shows Avatar ( On the click I dragged my button script to a custom method void ClickEvent() )
    -->Background Frame

    Then converted it to a Prefab. I use this for all of my abilities with cooldowns. I like this better because the Parent object has the script that all control link to instead of wandering which object has the script.

    I could be wrong, as I have only been doing Unity for a year or two as a hobby.