Interface pipeline

[Gryphon_de]

We are trying to realize how interface should be implemented to our project now. What does Unigine interface pipeline look like?

We need interface to be split at artist (elements look and screens ergonomics) and programming (buttons functionality etc) parts. Is it possible? Is there a way to design interface in Photoshop, then implement it in QT or whatever and then add it to Unigine without (or with minimal) programming?

We tried manually create, fill and edit .ui files, but it isn't thing designers can or want to do(

[ashwin.sudhir]

I trust the Qt plugin is the thing that would fill this void. AFAIK it's still in alpha(?). Would be glad to know from the Team when we can expect it :)

[danni.coy]

I trust the Qt plugin is the thing that would fill this void. AFAIK it's still in alpha(?). Would be glad to know from the Team when we can expect it :)

 

My understanding is that the Qt Plugin will be for creating editor tools than in game UI elements.

Currently there are three steps

 

1) Generate the look of each element. This step can be done by an artist in any tool that can generate a png file. to check out how existing elements are set up look at the data/gui and data/editor/gui folders

2) (optional) create an Xml layout file. This uses grids, vertical boxes, horizontal boxes etc to specify the layout. spacing etc. This is a lot like old school notepad website coding (and could conceivably be done by the artist - depending on the artist).

3) set up actions for what a UI element does. This is done in unigine-script and could be handled by anybody at a level where they could code javascript or actionscript. Layout can also be done is script (this helps if you have patterns you want to reuse).

 

There two more things I would like to point out.

1) There is a flash UI element which can be based on a flash file (should you happen to have a flash artist on your team) - I can't tell you a lot about that one.

2) The WidgetSprite widget class is a great base for creating your own custom game controls. With a coder and an artist working together using a widgetsprite you should be able to create just about any control you want.

[danni.coy]

I have been doing a lot of UI stuff lately and I have a few things to add to the above.

 

My workflow now goes like this.

1) design UI using qt designer. If it is editor only code then I will use the Qt plugin. otherwise.

2) hand build a xml file for Unigine matching the layout in QT Designer.

 

This way artist can create layout without doing any markup. Coder can take the markup and build the layout.

It is easier to play with the layout using Qt Designer.

[hintuc_de]

Требуется наиболее удобно разрабатывать и редактировать интерфейс в игре.

 

Как мы это видим:

1. 2d художник дизайнер, рисует макет в графическом редакторе, например Photoshop,

2. После окончательного утверждения пункта 1, присходит как бы верстка на внутреннем представлении интерфейса также художником/верстальщиком интерфейса, т.е. есть утилита, например WPF Designer, Qt designer, Html редакторы, Flex, Flash. Из макета беруться элементы, и осуществляется их компоновка, делается проверка на различных размерах, при различных условиях, проверка работы скинов и т.д.

3. Дальше на готовый интерфейс с рабочими скинами программисты прописывают на элементы управления стандартные обработчки click, move, press, up, down и т.д. Зависит от конкретной задачи.

4. Ключевые слова заменяются тэгами для последующей локализации.

 

Требуется наиболее удобно разрабатывать и редактировать интерфейс в игре.

 

Как мы это видим:

 

1. 2d художник дизайнер, рисует макет в графическом редакторе, например Photoshop,

 

2. После окончательного утверждения пункта 1, присходит как бы верстка на внутреннем представлении интерфейса также художником/верстальщиком интерфейса, т.е. есть утилита, например WPF Designer, Qt designer, Html редакторы, Flex, Flash. Из макета беруться элементы, и осуществляется их компоновка, делается проверка на различных размерах, при различных условиях, проверка работы скинов и т.д.

 

3. Дальше на готовый интерфейс с рабочими скинами программисты прописывают на элементы управления стандартные обработчки click, move, press, up, down и т.д. Зависит от конкретной задачи.

 

4. Ключевые слова заменяются тэгами для последующей локализации.

 

В итоге имеем формат *.ui, который чем-то похож на Qt ui формат, однако отсутствует много обработчиков, которые действительно нужны.

Механизмы выравнивания не работают так как нужно.

Нет возможности визуального редактирования. Чтобы художники могли в живую посмотреть как оно должно выглядеть.

 

Хотелось бы слышать представителей Ungine, что нам делать и как наиболее просто создавать и редактировать

интерфейс художникам, без участия программистов и наоборот писать обработчики программистам не нарушая дизайна,

составленного художниками.

 

Translate:

 

Required to develop the most convenient and editing interface in the game.

 

As we see it:

 

1. 2d artist designer draws a layout in a graphics editor like Photoshop,

 

2. After final approval of paragraph 1, prishodit like makeup on the internal representation of the interface of the artist / coders interface, ie there is a utility, such as WPF Designer, Qt designer, Html editor, Flex, Flash. Layout of the elements are taken, and by linking them, a check is made on a variety of sizes, with different conditions, the verification of the skins, etc.

 

3. Next to the finished interface with skins programmers working on the prescribed controls are standard obrabotchki click, move, press, up, down, etc. Depends on the application.

 

4. Key words are replaced by tags for the subsequent localization.

 

Required to develop the most convenient and editing interface in the game.

 

As we see it:

 

1. 2d artist designer draws a layout in a graphics editor like Photoshop,

 

2. After final approval of paragraph 1, prishodit like makeup on the internal representation of the interface of the artist / coders interface, ie there is a utility, such as WPF Designer, Qt designer, Html editor, Flex, Flash. Layout of the elements are taken, and by linking them, a check is made on a variety of sizes, with different conditions, the verification of the skins, etc.

 

3. Next to the finished interface with skins programmers working on the prescribed controls are standard obrabotchki click, move, press, up, down, etc. Depends on the application.

 

4. Key words are replaced by tags for the subsequent localization.

 

As a result, we have the format *. ui, which is something like Qt ui format, but not a lot of handlers that are really needed.

 

Equalization mechanisms do not work as expected.

There is no possibility of visual editing. That artists could live to see how it should look like.

 

I would like to hear representatives Ungine, what we do and how to most easily create and edit

interface to artists, programmers and without contrast programmers to write handlers without breaking the design,

drawn by artists.

[manguste]

It is exactly how Danni Coy said. First of all elements of GUI are drawn by the artist (in Photoshop, for example). After that GUI layout can be created manually in the *.ui file and then programmers need to register widgets in code. It is also possible to create widgets directly from code.