Custom UI Mods

Talk about the mods you'd like to see in Daggerfall Unity. Give mod creators some ideas!
User avatar
Uncanny_Valley
Posts: 221
Joined: Mon Mar 23, 2015 5:47 pm

Custom UI Mods

Post by Uncanny_Valley »

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?

User avatar
Biboran
Posts: 277
Joined: Thu Jun 25, 2015 8:26 pm

Re: Custom UI Mods

Post by Biboran »

There was demo modern interface on xl forums but I can't find it anymore. It looked nice

Narf the Mouse
Posts: 833
Joined: Mon Nov 30, 2015 6:32 pm

Re: Custom UI Mods

Post by Narf the Mouse »

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.
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.

User avatar
Nystul
Posts: 1501
Joined: Mon Mar 23, 2015 8:31 am

Re: Custom UI Mods

Post by Nystul »

security is an issue with mods anyway ;)

User avatar
TheLacus
Posts: 1305
Joined: Wed Sep 14, 2016 6:22 pm

Re: Custom UI Mods

Post by TheLacus »

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?
I used xml files for this one (mid-page) but it's only a simple ad-hoc implementation in code.

What you're talking about is definitely a more complex, and thus interesting, feature. Looking forward to see it!

Narf the Mouse
Posts: 833
Joined: Mon Nov 30, 2015 6:32 pm

Re: Custom UI Mods

Post by Narf the Mouse »

Nystul wrote:security is an issue with mods anyway ;)
True. But not an unmanageable one.
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.

User avatar
Uncanny_Valley
Posts: 221
Joined: Mon Mar 23, 2015 5:47 pm

Re: Custom UI Mods

Post by Uncanny_Valley »

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...
  • 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...
Since I'm new to Lua and I'm really testing the waters on what is possible to do, I started a new Unity project and began experimentation. After some Googling I found moonsharp, a Lua interpreter for C# that is fairly straight forward to use and works quite well in Unity. And after a few hours of trial and error I was able to add buttons into Unity as well as giving them functionality using Lua Script.

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
Gives the following result in unity. (Pressing the buttons prints messages using Debug.log)
LuaButtons.png
LuaButtons.png (70.13 KiB) Viewed 6883 times
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.

User avatar
Jay_H
Posts: 4061
Joined: Tue Aug 25, 2015 1:54 am
Contact:

Re: Custom UI Mods

Post by Jay_H »

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.

User avatar
Uncanny_Valley
Posts: 221
Joined: Mon Mar 23, 2015 5:47 pm

Re: Custom UI Mods

Post by Uncanny_Valley »

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. :D
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
Below is an example that demonstrates everything I mentioned above. A few things that may not be apparent from the screenshots and code:
  • 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
MainMenuPanel.png
MainMenuPanel.png (56.69 KiB) Viewed 6770 times
options.png
options.png (57.9 KiB) Viewed 6770 times
options2.png
options2.png (56.08 KiB) Viewed 6770 times

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
MainmenuLogo.Lua

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
Options.Lua

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
]

User avatar
Interkarma
Posts: 7236
Joined: Sun Mar 22, 2015 1:51 am

Re: Custom UI Mods

Post by Interkarma »

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.

Post Reply