Page 1 of 1

Edit GUI Skins

Posted: Mon Apr 04, 2016 7:35 pm
by bakershah
Is there any way to edit the GUI skins in Unity? I'm using the necromancer GUI and want to change some of the buttons/ add some. Also I want to change their functionality. (Have one button do something else instead).

Re: Edit GUI Skins

Posted: Mon Apr 04, 2016 7:49 pm
by Tony Li
Hi,

Yes, the Necromancer GUI Skin is in Assets/Dialogue System/Prefabs/Legacy Unity GUI Prefabs/Necromancer/Necromancer GUI. You can edit it directly or, better yet, make a copy and assign it to your custom copy of the Necromancer Dialogue UI and/or quest log window. This way you won't overwrite your customizations when you update the Dialogue System.

Necromancer is a free GUI theme made by Enemy Giant and included in the Dialogue System with permission. The dialogue UI and quest log window use the custom styles defined by Enemy Giant, such as PlainText, ShortButton, etc. To see which styles to change, put a copy of the Necromancer Dialogue UI in your scene. Then expand it in the Hierarchy and inspect each GUI element. The GUI style is listed under "Gui Style Name". For example, the NPC Subtitle Line's GUI Style is "PlainText".

You can do the same for the quest log window. To make the buttons do something different, set the GUI Button component's Message, Parameter, and Target. You can find more information about the Dialogue System's Legacy Unity GUI Control System here.

Re: Edit GUI Skins

Posted: Tue May 31, 2016 11:06 pm
by bakershah
Still very confused on how to edit the buttons... The inspector settings dont explain much. Right now I just want to add a quit button which will take me back to the main menu. I also want to remove the load and save buttons.

Re: Edit GUI Skins

Posted: Tue May 31, 2016 11:35 pm
by Tony Li
Hi,

Personally I think Unity UI is easier to use than legacy Unity GUI. Unity also has a good set of Unity UI tutorials.

If you want to use legacy Unity GUI with the Dialogue System's helper components, here's the basic process:

1. Create a GUI Root GameObject. (GameObject > Create Other > Dialogue System > Unity GUI > Root)

2. Assign your GUI Skin (e.g., Necromancer GUI) to the GUI Root's Gui Skin field.

3. Click on the GUI Root GameObject, and create a GUI Button. (GameObject > Create Other > Dialogue System > Unity GUI > Button)

4. Inspect the button. Use the Scaled Rect section to define what area of the screen the button occupies. Here are some recommended steps:
  • Expand Scaled Rect > Width. Set Scale to Pixel. Set Value to 160.
  • Expand Scaled Rect > Height. Set Scale to Pixel. Set Value to 30. You should now see the button in the upper left of the screen.
  • Change Origin and Alignment to Bottom Center. This will move the button to the bottom center of the screen. You can play around with these settings as well as the X and Y offsets below them to position the button exactly where you want.
With Scaled Rects, you can specify sizes in absolute pixels (Scale=Pixel) or relative to the screen size (Scale=Normalized). If you want the button width to be 20% of the screen width, change the Width to Normalized and 0.2.

5. Set the button's Text field to "Quit".

6. Optional: Set the button's Gui Style Name field to a style in your GUI Skin, such as "ShortButton". Otherwise it will use the default button style.

7. Now you need to hook the button up to some action. Let's say you have a script with a method "QuitToMenu" that returns to the main menu. At the bottom of the button's inspector, assign the script's GameObject to the Target field. Change the Message to "QuitToMenu".


EDIT: On re-reading your reply, I think you may be asking something different. Are you using the FeatureDemo script? If so, please feel free to customize it -- for example, in the WindowFunction method, comment out buttons that you don't want to show.

The FeatureDemo script was just written to drive the demo scenes. If you want a more robust menu system, I recommend the Dialogue System Menu Template, which you can download on the Dialogue System Extras page.

Re: Edit GUI Skins

Posted: Wed Aug 08, 2018 1:36 pm
by herrybraun
I am also looking for skin edit system function and thankful to start this useful conversation.

Re: Edit GUI Skins

Posted: Wed Aug 08, 2018 2:03 pm
by Tony Li
The instructions above work fine for the legacy Unity GUI system, but they were written more than two years ago. I recommend using the Standard Dialogue UI system now, which uses Unity UI. There is a link to a video tutorial on the Dialogue UI Tutorial page. The video tutorial (as well the written tutorial) explain how to reskin UIs.

Re: Edit GUI Skins

Posted: Fri Aug 07, 2020 4:24 pm
by danosono
I too am interested in how to manipulate the GUI "look" and have found these videos very helpful; just wanted to share.

https://learn.unity.com/tutorial/ui-com ... 002053b4d0

Jesus is King of kings