|Go to Page...|
||Thread Tools||Display Modes|
|03-07-20, 08:18 AM||#1|
A Flamescale Wyrmkin
Join Date: Aug 2011
Scorpio.UI - a new ui & skin system
After spending two years on web project with Openresty, finally I got time and the new ideas for the Scorpio lib's UI part. This is not an officially introduction, so I'm sorry I can't explain all the details. It's only a preview of my new design.
i. As the first example, I'll show the popup dialog using the Scorpio lib:
So we can use the input result directly, the system also provide Confirm and Alert APIs like this. Since the function processed in a coroutine, the Input API can yield the coroutine, and resume it when the user finished his input, this is a trick I used many years in my IGAS lib.
ii. The new idea for the Scorpio UI is come from the HTML+CSS. The HTML only provide the elements and their relationship, we can give different css file to show a very different view with the same HTML.
We can change an element's style based on its type, its class, or the custom settings of itself. Also we can change the element's style from the element's parent(the parent type, class or the parent itself) and the parent's parent, and so on.
With this design pattern, we can split the functionality and the view styles.
Take the Input Popup dialog as an example, its template is a class defined like:
There is no texture, font and location settings in the template, so the template only provide the functionality.
Now we can declare the default skin for the template :
The skin settings is a little like the xml, we have plenty properties(case ignored) to be set, we don't need set all the properties, like the ConfirmButtons' normal texture, since it's already done in the default skin of the UIPanelButton.
Now, we'll see how to give a new skin for the InputDialog:
When active the custom skin, all InputDialog objects will receive the skin updating:
The updating process is processed in the Scorpio's task schedule system, so it won't freeze the game even if you have thousand ui elements to be updated.
It's a little comple for the class definition, but if we don't need bind those events, we can create a class template very simple:
iii. You can find all the skin properties in Scorpio.UI.Property.lua, besided the same properties from the UI.xsd like alpha, altas, size. We also can define other useful properties like Fadeout, it works like
We can use the Style[obj] to change the object's custom styles. It's not a skin for the class, so only affect the object.
Since there would be too many template classes and properties, a developer tool will be provided like how we inspect the css styles in the Chrome.
For now, it's still under development, the code won't be released to curseforge until most useful template classes are added. So this is only a preview.
I still have many plans for the UI part, the CSS Box Model to replace the anchors, the reactive system to drive the ui refreshing and etc.
|WoWInterface » Developer Discussions » Dev Tools » Scorpio.UI - a new ui & skin system|