Chili

Wiki < Chili

Chili UI

Chili is Springs very own GUI framework. It's a flexible, class based framework which allows you to create great looking GUIs very quickly. See Screenshots.

Learning Chili

• Chili Tutorial
• Examples of Chili widgets

Before working with Chili, it is strongly recommended to be familiar with using Lua in Spring, in particular with writing simple widgets.

Including Chili

• Adding Chili to a game
• Hiding Springs default GUI

Documentation: Chili Component Hierarchy

The Chili framework is object orientated, and each different component is a class. The hierarchy of components, which is documented here, is as follows:

Object
|_ Screen
|_ Control
 |_ Button
 |_ Checkbox
 |_ ColorBars
 |_ ComboBox
 |_ EditBox
 |_ Font
 |_ Label
 |_ LayoutPanel
   |_ ImageListView
   |_ Grid
   |_ StackPanel
   |_ TabPanel
 |_ Line
 |_ Image
 |_ MultiProgressBar
 |_ Panel
 |_ ProgressBar
 |_ Scale
 |_ ScrollPanel
 |_ TextBox
 |_ TrackBar
 |_ TreeView
  |_ TreeViewNode
 |_ Window

Viewing the diagram as a tree, each component inherits from its parent in the tree. In practice, this means each component has the properties/functionality of its own type, and also of all components found upwards from it in the tree. For example, a Grid has it's own properties, but also has those of a LayoutPanel, Control and Object.

Skinning Chili

Start with your desired skin.lua.

An example button skin will look like this:

<syntaxhighlight lang="lua"> skin.positive_button = {

 clone     = "window";

 TileImageBK = ":cl:tech_button_bright_small_bk.png",
 TileImageFG = ":cl:tech_button_bright_small_fg.png",

 tiles = {40, 40, 40, 40}, --// tile widths: left,top,right,bottom
 padding = {10, 10, 10, 10},

 backgroundColor = {0.50, 0.50, 0.50, 0.65},
 focusColor  = {0.50, 0.50, 0.50, 0.9},
 borderColor = {0.50, 0.50, 0.50, 0.15},

 DrawControl = DrawButton,

} </syntaxhighlight>

• TileImageBK - This image will be the background of your control. Alpha values indicate transparency, and color values you will be multiplied with backgroundColor

• TileImageFG - This image will be the foreground (drawn over background) of your control. Alpha values indicate transparency, and color values you will be multiplied with borderColor

• tiles - This image will be the background of your control. Alpha values indicate transparency, and color values you will be multiplied with backgroundColor

• padding - This image will be the background of your control. Alpha values indicate transparency, and color values you will be multiplied with backgroundColor

• backgroundColor - This image will be the background of your control. Alpha values indicate transparency, and color values you will be multiplied with backgroundColor

• focusColor - This image will be the background of your control. Alpha values indicate transparency, and color values you will be multiplied with backgroundColor

• borderColor - This image will be the background of your control. Alpha values indicate transparency, and color values you will be multiplied with backgroundColor