LFS UI Builder
==============
Introduction
------------
LFS UI Builder is a tool for creating and editing user interfaces for
LiveForSpeed, a racing simulation game. It allows you to visually design
UI elements and preview them in real-time within the game.
Features
--------
- Visual design interface
- Support for buttons, text labels, and panels
- Real-time preview in LiveForSpeed
- Property inspector for element customization
- Undo/Redo functionality
- Copy, cut, and paste support
- Element layering (bring to front, send to back)
- Most Recently Used (MRU) file list
Getting Started
---------------
1. Launch the LFS UI Builder application.
2. Create a new UI design or open an existing .lfsui file.
Designing Your UI
-----------------
- Use the toolbar to add UI elements (Panel, Button, Text).
- Select and manipulate elements in the design area.
- Modify element properties using the property inspector.
- Organize elements using the tree view and layering options.
IMPORTANT NOTE:
The size of the designer area is 400x400 pixels, but the actual size in
LiveForSpeed is 200x200 pixels. This larger design area is provided to
make it easier to create and manipulate UI elements. The design will be
automatically scaled down when saving or previewing in LiveForSpeed.
Previewing Your UI
------------------
1. Click "Tools" > "Live Preview" or use the preview button.
2. Enter the IP address and port of your LFS game instance.
3. Connect to see your UI in the game in real-time.
Saving Your Work
----------------
- Use "File" > "Save" or the Save button to save your design.
- "File" > "Save As" allows you to save with a new name or location.
How to use the .lfsui files
---------------------------
The .lfsui files are XML files that contain the UI layout information. To use these files in your project, you can parse the XML and extract the necessary information. Here's a simple C# code example that demonstrates how to parse the .lfsui file and print the results:
This code will parse the XML and print the flattened results, including the nested elements.
Additional Features
-------------------
- Advanced text editor for text elements
- Hierarchical view of UI elements in the tree view
Tips
----
- Group related UI elements using panels.
- Test your UI thoroughly in the game.
- Save your work frequently.
- Remember that the final UI will be half the size of what you see in the designer.
License
-------
Copyright (c) 2024 Periklis Koutsogiannis [email protected]
GPLv3 - See the included LICENSE.txt file or visit gnu.org and read the license.
==============
Introduction
------------
LFS UI Builder is a tool for creating and editing user interfaces for
LiveForSpeed, a racing simulation game. It allows you to visually design
UI elements and preview them in real-time within the game.
Features
--------
- Visual design interface
- Support for buttons, text labels, and panels
- Real-time preview in LiveForSpeed
- Property inspector for element customization
- Undo/Redo functionality
- Copy, cut, and paste support
- Element layering (bring to front, send to back)
- Most Recently Used (MRU) file list
Getting Started
---------------
1. Launch the LFS UI Builder application.
2. Create a new UI design or open an existing .lfsui file.
Designing Your UI
-----------------
- Use the toolbar to add UI elements (Panel, Button, Text).
- Select and manipulate elements in the design area.
- Modify element properties using the property inspector.
- Organize elements using the tree view and layering options.
IMPORTANT NOTE:
The size of the designer area is 400x400 pixels, but the actual size in
LiveForSpeed is 200x200 pixels. This larger design area is provided to
make it easier to create and manipulate UI elements. The design will be
automatically scaled down when saving or previewing in LiveForSpeed.
Previewing Your UI
------------------
1. Click "Tools" > "Live Preview" or use the preview button.
2. Enter the IP address and port of your LFS game instance.
3. Connect to see your UI in the game in real-time.
Saving Your Work
----------------
- Use "File" > "Save" or the Save button to save your design.
- "File" > "Save As" allows you to save with a new name or location.
How to use the .lfsui files
---------------------------
The .lfsui files are XML files that contain the UI layout information. To use these files in your project, you can parse the XML and extract the necessary information. Here's a simple C# code example that demonstrates how to parse the .lfsui file and print the results:
using System;
using System.Xml.Linq;
using System.Collections.Generic;
class Program
{
static void Main()
{
string xmlString = @"<ui>
<element type=""TLfsUIPanel"" align=""0"" anchors=""akLeft,akTop"" rel_left=""14"" rel_top=""16"" width=""250"" height=""200"" id=""4"" text="""" typein=""0"" bstyle=""32"" left=""14"" top=""16"">
<element type=""TLfsUIText"" align=""0"" anchors=""akLeft,akTop"" rel_left=""12"" rel_top=""16"" width=""100"" height=""30"" id=""1"" text=""TEXT"" typein=""0"" bstyle=""64"" left=""26"" top=""32""/>
<element type=""TLfsUIButton"" align=""0"" anchors=""akLeft,akTop"" rel_left=""128"" rel_top=""158"" width=""50"" height=""30"" id=""3"" text=""BUTTON"" typein=""0"" bstyle=""40"" left=""142"" top=""174""/>
<element type=""TLfsUIButton"" align=""0"" anchors=""akLeft,akTop"" rel_left=""188"" rel_top=""158"" width=""50"" height=""30"" id=""2"" text=""BUTTON"" typein=""0"" bstyle=""40"" left=""202"" top=""174""/>
</element>
<element type=""TLfsUIText"" align=""0"" anchors=""akLeft,akTop"" rel_left=""20"" rel_top=""224"" width=""100"" height=""30"" id=""0"" text=""TEXT"" typein=""0"" bstyle=""64"" left=""20"" top=""224""/>
<element type=""TLfsUIButton"" align=""0"" anchors=""akLeft,akTop"" rel_left=""132"" rel_top=""224"" width=""50"" height=""30"" id=""5"" text=""BUTTON"" typein=""0"" bstyle=""40"" left=""132"" top=""224""/>
</ui>";
XElement root = XElement.Parse(xmlString);
PrintElements(root.Elements("element"));
}
static void PrintElements(IEnumerable<XElement> elements, string indent = "")
{
foreach (var element in elements)
{
Console.WriteLine(
$"{indent}id: {element.Attribute("id").Value}, " +
$"left: {element.Attribute("left").Value}, " +
$"top: {element.Attribute("top").Value}, " +
$"width: {element.Attribute("width").Value}, " +
$"height: {element.Attribute("height").Value}, " +
$"bstyle: {element.Attribute("bstyle").Value}, " +
$"text: {element.Attribute("text").Value}, " +
$"typein: {element.Attribute("typein").Value}");
PrintElements(element.Elements("element"), indent + " ");
}
}
}
This code will parse the XML and print the flattened results, including the nested elements.
Additional Features
-------------------
- Advanced text editor for text elements
- Hierarchical view of UI elements in the tree view
Tips
----
- Group related UI elements using panels.
- Test your UI thoroughly in the game.
- Save your work frequently.
- Remember that the final UI will be half the size of what you see in the designer.
License
-------
Copyright (c) 2024 Periklis Koutsogiannis [email protected]
GPLv3 - See the included LICENSE.txt file or visit gnu.org and read the license.