https://github.com/adamwestman/define
A Defold UI/UX library
https://github.com/adamwestman/define
defold-game-engine gui ux-library
Last synced: 3 months ago
JSON representation
A Defold UI/UX library
- Host: GitHub
- URL: https://github.com/adamwestman/define
- Owner: adamwestman
- Created: 2017-07-12T23:26:44.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2017-09-01T11:53:31.000Z (almost 8 years ago)
- Last Synced: 2025-03-17T03:51:19.307Z (3 months ago)
- Topics: defold-game-engine, gui, ux-library
- Language: Lua
- Size: 19.5 KB
- Stars: 18
- Watchers: 3
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-defold - DeFine
README
# DeFine
_When great is not good enough.. __it needs to be Fine.___
A UI/UX library for the Defold engine, providing fundamental components to build a rich graphical user interface in no time.
# Usage
Add latest zip URL as a [dependency](http://www.defold.com/manuals/libraries/#_setting_up_library_dependencies) in your Defold project: `https://github.com/adamwestman/define/archive/master.zip`
## Input Manager
The __define.input_manager__ provide a shared container to manage all components, allowing them to be grouped and prioritized.
```lua
function init(self)
input_manager.acquire()
self.btn_text = input_manager.add_button(self, button.create("text/bg"), function()
self.current_proxy = TEXT_PROXY
msg.post(self.current_proxy, "async_load")
end)
self.btn_volume = input_manager.add_button(self, button.create("volume/bg"), function()
self.current_proxy = VOLUME_PROXY
msg.post(self.current_proxy, "async_load")
end)
self.btn_back = input_manager.add_button(self, button.create("back/bg"), function()
msg.post(self.current_proxy, "unload")
end)
button.hide(self.btn_back)
end
function final(self)
input_manager.release()
end
function on_input(self, action_id, action)
return input_manager.on_input(self, action_id, action)
end
```
### Buttons
The __define.gui.button__ component allows a gui node to react on user tap actions.
### Text Fields
The __define.gui.text__ component allows users to edit the contents of a text node.
```lua
local text = require "define.gui.text"
function init(self)
self.name = text.create("name")
self.place = text.create("place", {max_lengt=10})
msg.post(".", "acquire_input_focus")
end
function on_input(self, action_id, action)
if text.on_input(self.name, action_id, action) then
return true
elseif text.on_input(self.place, action_id, action) then
return true
end
end
```
### State Transitions
All components are built around a state/transition design. This enables the components to be appear and act in depending on needs. Here's an example of how a Checkbox component can be built using the __define.gui.button__ one.
```lua
local button = require "define.gui.button"
local volume_checkbox_transitions = require "examples.volume.volume_checkbox_transitions"
function init(self)
self.volume = button.create("volume", volume_checkbox_transitions)
msg.post(".", "acquire_input_focus")
end
function on_input(self, action_id, action)
if button.on_input(self.volume, action_id, action) then
self.muted = not self.muted
button.set_state(self.volume, self.muted and hash("off") or hash("on"))
sound.set_group_gain(hash("master"), self.muted and 0 or 1)
end
end
```
Where the transitions handle the checked state.
```lua
local input_states = require("define.input_states")
local input_transitions = require("define.gui.input_transitions")
local COLOR_DARKEN = vmath.vector4(0.8)
local COLOR_DEFAULT = vmath.vector4(1)
return {
input_transitions.create(input_states.STATE_IDLE, input_states.STATE_PRESSED, input_transitions.multi_parallell(
input_transitions.shake(),
input_transitions.to_color(COLOR_DARKEN)
)),
input_transitions.create(input_states.STATE_PRESSED, input_states.STATE_IDLE, input_transitions.multi_parallell(
input_transitions.shake(),
input_transitions.to_color(COLOR_DEFAULT)
)),
input_transitions.create(input_states.STATE_IDLE, input_states.STATE_HIDDEN, input_transitions.to_disabled()),
input_transitions.create(input_states.STATE_HIDDEN, input_states.STATE_IDLE, input_transitions.to_enabled()),
input_transitions.create(input_states.STATE_IDLE, input_states.STATE_HOVER, input_transitions.to_color(COLOR_DARKEN)),
input_transitions.create(input_states.STATE_HOVER, input_states.STATE_IDLE, input_transitions.to_color(COLOR_DEFAULT)),
input_transitions.create(input_states.STATE_IDLE, hash("on"), input_transitions.to_flipbook(hash("volume_on"))),
input_transitions.create(input_states.STATE_IDLE, hash("off"), input_transitions.to_flipbook(hash("volume_off"))),
}
```