Difference between revisions of "UI"

From GiderosMobile
Line 2: Line 2:
 
'''Supported platforms:''' [[File:Platform android.png]][[File:Platform ios.png]][[File:Platform mac.png]][[File:Platform pc.png]][[File:Platform html5.png]][[File:Platform winrt.png]][[File:Platform win32.png]][[File:Platform linux.png]]<br/>
 
'''Supported platforms:''' [[File:Platform android.png]][[File:Platform ios.png]][[File:Platform mac.png]][[File:Platform pc.png]][[File:Platform html5.png]][[File:Platform winrt.png]][[File:Platform win32.png]][[File:Platform linux.png]]<br/>
 
'''Available since:''' Gideros 2023.1<br/>
 
'''Available since:''' Gideros 2023.1<br/>
 +
 +
 +
  In order to use Gideros UI Library, you have to link or include the two following folders to your project:
 +
  * '''''Library/ui'''''
 +
  * '''''Library/luashaders'''''
 +
  The folders are available in your '''Gideros installation folder''' (UI Library depends on luashaders)
  
 
=== Description ===
 
=== Description ===
 
A UI Library for Gideros made of a plethora of widgets.
 
A UI Library for Gideros made of a plethora of widgets.
  
In order to use Gideros UI Library, you have to link or include the two following folders to your project:
+
'''UI.Builder''' allows for building complex UI layouts.
* '''''Library/ui'''''
 
* '''''Library/luashaders'''''
 
 
 
The folders are available in your Gideros installation folder. The UI Library depends on luashaders.
 
  
 
=== Examples ===
 
=== Examples ===
Line 83: Line 85:
 
[[UI.Border]] ''creates a Border widget''<br/>
 
[[UI.Border]] ''creates a Border widget''<br/>
 
[[UI.BreadCrumbs]] ''creates a BreadCrumbs widget''<br/>
 
[[UI.BreadCrumbs]] ''creates a BreadCrumbs widget''<br/>
 +
'''[[UI.Builder]]''' ''builds layout interfaces''<br/>
 
| style="width: 50%; vertical-align:top;"|
 
| style="width: 50%; vertical-align:top;"|
 
|}
 
|}
  
 
{{GIDEROS IMPORTANT LINKS}}
 
{{GIDEROS IMPORTANT LINKS}}

Revision as of 15:51, 14 October 2023

Supported platforms: Platform android.pngPlatform ios.pngPlatform mac.pngPlatform pc.pngPlatform html5.pngPlatform winrt.pngPlatform win32.pngPlatform linux.png
Available since: Gideros 2023.1


  In order to use Gideros UI Library, you have to link or include the two following folders to your project:
  * Library/ui
  * Library/luashaders
  The folders are available in your Gideros installation folder (UI Library depends on luashaders)

Description

A UI Library for Gideros made of a plethora of widgets.

UI.Builder allows for building complex UI layouts.

Examples

In init.lua

UI=UI or {}

local fontfilebold = "fonts/OpenSans-Bold.ttf"

UI.Default = {
	TTF=fontfilebold,
}

In your game

--UI.Style:setDefault(UI.Theme.PointCore_Base)
--UI.Style:setDefault(UI.Theme.PointCore_Red)
UI.Style:setDefault(UI.Theme.PointCore_Pink)

-- a Button
local button=UI.Button.new()
button:setDimensions(64, 48)
button:setPosition(50,50)
button:setText("Button")

function button:onWidgetAction()
	print("Hello Gideros UI")
end

stage:addChild(button)

Sliders

--Sliders give value from 0 to 1
local sliderA=UI.Slider.new()
sliderA:setDimensions(200,50)
sliderA:setPosition(250,50)
sliderA.name="Slider A"

local sliderB=UI.Slider.new()
sliderB:setDimensions(200,50)
sliderB:setPosition(250,150)
--This slider center is in the middle of the range
sliderB:setCenter(.5)
--Initial value is .6
sliderB:setKnobPosition(.6)
--Discrete steps of .1
sliderB:setResolution(.1)
sliderB.name="Slider B"

stage:addChild(sliderA)
stage:addChild(sliderB)

--Here we put the WidgetAction listener on stage. 
--It will be propagated from each button up to stage through the sprite tree
--First parameter of event listeners are always the source widget of the event
function stage:onWidgetChange(w,v)
	print(w.name.." value is "..v)
end

Widgets

UI.Accordion WIP creates a UI accordion
UI.Animation creates UI animations
UI.Bar creates a Bar widget
UI.Behavior manages widget behavior
UI.Border creates a Border widget
UI.BreadCrumbs creates a BreadCrumbs widget
UI.Builder builds layout interfaces