lgrant
Topic Author
Posts: 1
Joined: 15 Sep 2014, 18:13

For those who like to design GUIs in PhotoShop

17 Sep 2014, 20:54

Even though Visual Studio has a graphic XAML designer, and Kaxaml is nice for verifying hand-entered XAML, sometimes it is nice to design your GUI in Photoshop. This lets you make modifications to all of the graphic elements in one place, which is particularly handy if you need to make color or style changes that affect the whole GUI. But how do you get from Photoshop to XAML?

There is a $20 tool in the Unity Asset Store called FastGUI (https://www.assetstore.unity3d.com/en/#!/content/4895). It was intended to work with the NGUI middleware, but with some post-processing, it should be useful with Noesis GUI. Here is how it works with NGUI:
  • You design your GUI in Photoshop, using specially named layer groups for active elements, like buttons and sliders. For example, if you want a submit button you might name the layer group "ibtn_submit". Underneath the group are layer groups named "Idle", "Hover", "Pushed", and "Disabled". Within these layer groups are the images for the button in its various states. Similarly, for a slider you would have sub-layer-groups for the slider, the 0% image, and the 100% image.

    You run a Javascript program supplied with FastGUI that, inside Photoshop, trims and exports the images from all the layer groups, and produces an XML file that lists the coördinates for each element, what kind of element it is, and points to the image files for all its states.

    You run the FastGUI importer in Unity. It imports the image files, reads the XML file, and sets up the corresponding NGUI elements.

I am thinking it should not be difficult to process the FastGUI XML file with an XQuery program or an XSLT stylesheet to produce the corresponding XAML elements. They may need some final hand tweaking, but it will eliminate having to enter all the coördinates manually and manually exporting all the sprites.

I'm not sure where this falls on my priority list yet, but I will post more after I have given it a try.
 
User avatar
jsantos
Site Admin
Posts: 3906
Joined: 20 Jan 2012, 17:18
Contact:

Re: For those who like to design GUIs in PhotoShop

18 Sep 2014, 11:42

Sounds amazing! Please tell us about your results. It could even become a new package in the store.

Who is online

Users browsing this forum: No registered users and 89 guests