Custom UI Mods
- Uncanny_Valley
- Posts: 221
- Joined: Mon Mar 23, 2015 5:47 pm
Custom UI Mods
Hiya!
I been thinking and tinkering with the idea of adding mod support to customize the UI in Daggerfall. The position of elements (text, buttons windows etc) , the graphics used, text content, the font, etc. And maybe even adding new interface elements into the game. The question is, how? Creating a entirely custom solution seems unnecessary, so I been looking at some pre-existing ones.
One solution could be using HTML/CSS code. There is a really nice example on the old XLengine forum called Lazaroths Modern GUI, which uses HTML/CSS code with some additional plugin.
http://xlengine.com/forums/viewtopic.php?f=14&t=867
The nice thing about HTML/CSS is that it's easy to work with if you you want to edit, move or otherwise change elements in a existing interface (and you can quickly preview any changes in your web browser).
Another solution could be using LUA or some other script language to modify UI elements. This is for example how you can make UI mods for World of Warcraft, which allows for a large of amount of customization. You can make huge changes in the look and functionality of UI, and even creating whole new UI elements and new behaviors that integrates into the game.
I'm just beginning to look into it, and while it's a big task it is something I would like to explore for a bit and see what I can do. But I wanted to know if anybody else been looking into this? Any thoughts about how this should/would work? Wishlist of features?
I been thinking and tinkering with the idea of adding mod support to customize the UI in Daggerfall. The position of elements (text, buttons windows etc) , the graphics used, text content, the font, etc. And maybe even adding new interface elements into the game. The question is, how? Creating a entirely custom solution seems unnecessary, so I been looking at some pre-existing ones.
One solution could be using HTML/CSS code. There is a really nice example on the old XLengine forum called Lazaroths Modern GUI, which uses HTML/CSS code with some additional plugin.
http://xlengine.com/forums/viewtopic.php?f=14&t=867
The nice thing about HTML/CSS is that it's easy to work with if you you want to edit, move or otherwise change elements in a existing interface (and you can quickly preview any changes in your web browser).
Another solution could be using LUA or some other script language to modify UI elements. This is for example how you can make UI mods for World of Warcraft, which allows for a large of amount of customization. You can make huge changes in the look and functionality of UI, and even creating whole new UI elements and new behaviors that integrates into the game.
I'm just beginning to look into it, and while it's a big task it is something I would like to explore for a bit and see what I can do. But I wanted to know if anybody else been looking into this? Any thoughts about how this should/would work? Wishlist of features?
- Biboran
- Posts: 277
- Joined: Thu Jun 25, 2015 8:26 pm
Re: Custom UI Mods
There was demo modern interface on xl forums but I can't find it anymore. It looked nice
-
- Posts: 833
- Joined: Mon Nov 30, 2015 6:32 pm
Re: Custom UI Mods
HTML/CSS would be the most flexible, but would seem to come with security concerns; for example, an embedded web link to a malware site.
LUA, OTOH, is quite a bit more than needed, being a full-on scripting language.
My recommendation would be to use XML or JSON to specify layout and elements. No embedded code; at least as widely-understood; and you can design the data elements to be exactly what you need.
LUA, OTOH, is quite a bit more than needed, being a full-on scripting language.
My recommendation would be to use XML or JSON to specify layout and elements. No embedded code; at least as widely-understood; and you can design the data elements to be exactly what you need.
Previous experience tells me it's very easy to misunderstand the tone, intent, or meaning of what I've posted. If you have questions, ask.
- Nystul
- Posts: 1501
- Joined: Mon Mar 23, 2015 8:31 am
Re: Custom UI Mods
security is an issue with mods anyway
- TheLacus
- Posts: 1305
- Joined: Wed Sep 14, 2016 6:22 pm
Re: Custom UI Mods
I used xml files for this one (mid-page) but it's only a simple ad-hoc implementation in code.Uncanny_Valley wrote:Hiya!
I'm just beginning to look into it, and while it's a big task it is something I would like to explore for a bit and see what I can do. But I wanted to know if anybody else been looking into this? Any thoughts about how this should/would work? Wishlist of features?
What you're talking about is definitely a more complex, and thus interesting, feature. Looking forward to see it!
-
- Posts: 833
- Joined: Mon Nov 30, 2015 6:32 pm
Re: Custom UI Mods
True. But not an unmanageable one.Nystul wrote:security is an issue with mods anyway
Previous experience tells me it's very easy to misunderstand the tone, intent, or meaning of what I've posted. If you have questions, ask.
- Uncanny_Valley
- Posts: 221
- Joined: Mon Mar 23, 2015 5:47 pm
Re: Custom UI Mods
A small update.
So after looking at the available options, I decide to look more into LUA.
My goal for this "little" project is to give users as much control as possibly to customize the UI, not only the re-arranging the position or look of the elements, but also change and add functionality. Some examples could be...
Using the following Lua Script
Gives the following result in unity. (Pressing the buttons prints messages using Debug.log)
This is of course only a small step, but I'm quite happy with the early result. The next part of the experiment will be to customize the look of the Buttons using Lua Script.
So after looking at the available options, I decide to look more into LUA.
My goal for this "little" project is to give users as much control as possibly to customize the UI, not only the re-arranging the position or look of the elements, but also change and add functionality. Some examples could be...
- Hiding the health bar when health is full
- Display stamina as numbers
- Show the characters current level on the Hud
- Add a unequip all button in the inventory
- Create a new submenu for savefiles based on the character your playing
- and so on...
Using the following Lua Script
Code: Select all
function OnGUI()
buttonRect1 = {0,0,128,64}
buttonRect2 = {0,128,128,64}
Button(buttonRect1, "Hello 1", "PrintHello")
Button(buttonRect2, "Goodbye", "PrintGoodbye")
end
function PrintHello()
Print("Hello")
end
function PrintGoodbye()
Print("Goodbyte")
end
This is of course only a small step, but I'm quite happy with the early result. The next part of the experiment will be to customize the look of the Buttons using Lua Script.
- Jay_H
- Posts: 4072
- Joined: Tue Aug 25, 2015 1:54 am
- Contact:
Re: Custom UI Mods
Dude, numerical values for stats would be awesome. This whole thing would be awesome! This would be a huge step towards bringing Daggerfall into a modern UI, and I think that's something a lot of people would be happy to see.
- Uncanny_Valley
- Posts: 221
- Joined: Mon Mar 23, 2015 5:47 pm
Re: Custom UI Mods
So I have been continuing my work on creating UI elements in Unity using Lua. In my last post I had managed to load a single Lua file and ran a function from it to create a few buttons within Unity. Not very impressive but a good start.
Since then I have come a long way towards my goals for this little project. I'm still doing everything in a separate Unity project, and have decided that I will continue to do so. I believe that making this into a separate system on it's own (that later can easily be integrated into any game project) will help keep the code clean and make everything easier to maintain in the future.
Here is a rundown on the functionality in it's current state.
Mainmenu.Lua
MainmenuLogo.Lua
Options.Lua
]
Since then I have come a long way towards my goals for this little project. I'm still doing everything in a separate Unity project, and have decided that I will continue to do so. I believe that making this into a separate system on it's own (that later can easily be integrated into any game project) will help keep the code clean and make everything easier to maintain in the future.
Here is a rundown on the functionality in it's current state.
- When Unity starts, all files that ends with ".lua" and are within a specific folder are loaded into Unity.
- Each .lua file represents a individual UI "panel". This can be any UI element, such as a set of buttons, a logo, a health bar or an entire inventory screen.
- Panels start as disabled, and when enabled they draw each UI element in their OnGUI function.
- RegisterTrigger(string trigger) registers a panel together with a trigger. This can be used to enable a panel (or several) during a game event, for example: starting the game, entering a dungeon or pressing the "inventory"-button.
- GUISkins (that Unity use to set the visual style of a UI element) can be created and assign to elements using lua. And Since all .lua scripts are loaded when Unity starts, GUISkins can be used across multiple panels.
- Being a scripting language, Lua supports the use of variables, if-statements and so on
- The "startup" trigger is triggered when my example Unity scene starts.
- Buttons change their sprites and text color when you hover your mouse over them. (The images are loaded from the Resources folder)
- In the option menu I display a variable created within the option.lua script and the "Go back"- button is only visible when that number is even. I can increase that the number by 1 when pressing the "make some option"-button
Mainmenu.Lua
Code: Select all
RegisterTrigger("startup") --Enabled this panel when the game starts
--Setting up the "Normal" GUIskin
GUISkin("Normal","button.fontsize", "20");
GUISkin("Normal","button.normal.textColor", "#000000");
GUISkin("Normal","button.normal.background", "normalButton");
GUISkin("Normal","button.hover.background", "normalButtonHover");
GUISkin("Normal","button.hover.textColor", "#FFFFFF");
GUISkin("Normal","button.alignment", "MiddleCenter");
--Setting up the "Exit" GUIskin
GUISkin("Exit","button.fontsize", "30");
GUISkin("Exit","button.normal.background", "exitButton");
GUISkin("Exit","button.hover.background", "exitButtonHover");
GUISkin("Exit","button.alignment", "MiddleCenter");
--Setting up the "Logo" GUISkin
GUISkin("Logo","label.fontsize", "40");
GUISkin("Logo","label.nomral.textColor", "#FF0000");
buttonRect1 = {0,128,128,32}
buttonRect2 = {0,196,128,32}
buttonRect3 = {64,256,32,32}
--Everything drawn OnGUI in Unity
function OnGUI()
Button(buttonRect1, "Start", "F_Start", "Normal")
Button(buttonRect2, "Options", "F_Options", "Normal")
Button(buttonRect3, "", "F_Quit", "Exit")
end
--Runs when pressing the Start button we print a small message
function F_Start()
Print("Begin game")
end
--Runs when pressing the Options button we disable this panel, and enable the options panel
function F_Options()
DisablePanel("MainMenu")
EnablePanel("Options")
end
--Runs when pressing the Quit button, we print a goodbye message and close the mainmenu and the the logo
function F_Quit()
Print("Good bye!")
DisablePanel("MainMenu")
DisablePanel("MainMenuLogo")
end
Code: Select all
RegisterTrigger("startup") --Enabled this panel when the game starts
labelRect1 = {32,32,128,128}
--Everything drawn OnGUI in Unity
function OnGUI()
Label(labelRect1, "MyGame", "Logo")
end
Code: Select all
buttonRect1 = {128,128,196,32}
buttonRect2 = {128,196,128,32}
labelRect1 = {356,128,128,32}
testVariables = 0
--Everything drawn OnGUI in Unity
function OnGUI()
Button(buttonRect1, "Make some option", "F_Option", "Normal")
Label(labelRect1, testVariables, "Normal")
if(testVariables%2 == 0) then
Button(buttonRect2, "Go Back", "F_GoBack", "Normal")
end
end
--When pressing the "make some option" button will increase the testVariables by 1.
function F_Option()
testVariables = testVariables+1;
end
--When pressing the "Go Back" button we disable this panel and enable the MainMenu panel again
function F_GoBack()
DisablePanel("Options");
EnablePanel("MainMenu");
end
- Interkarma
- Posts: 7247
- Joined: Sun Mar 22, 2015 1:51 am
Re: Custom UI Mods
I respect the dedication to this. It would be great to see this mature eventually into a more advanced UI mod for Daggerfall Unity, while my classic-styled UI can be the default fallback.