draco-ui

$ smaug add draco-ui

Draco UI

draco-ui is a quick and easy way to add overlay elements such as buttons and menus into your game.

Design your UI using a simple declarative layout syntax and contribute back by adding new widgets to our growing library.

Demo

Example

A quick code sample, just to give you an idea...

panel {
width 600
height 600
layout {
align :center
space :evenly
padding 32
label {
text 'Panel'
size 42
font 'fonts/kenney-fonts/blocks.ttf'
}
label {
text 'This is a panel'
size 4
padding 0
font 'fonts/kenney-fonts/pixel.ttf'
}
button {
text 'Quit Game'
variant :red
size 16
padding 24
on_click ->(entity, world, args) {
$gtk.request_quit
}
}
}
}

Check the examples/ directory for a complete demo containing several more examples you can learn from.


Installation

If you don't already have a game project, run smaug new to create one.

Add dependencies

$ smaug add draco
$ smaug add draco-common
$ smaug add draco-state
$ smaug add draco-events
$ smaug add color
$ smaug add kenney-ui-pack
$ smaug add kenney-fonts
$ smaug add kenney-game-icons

And then...

$ smaug add draco-ui
$ smaug install
# app/main.rb
require 'smaug.rb'
def tick args
args.state.world ||= HelloWorld.new
args.state.world.tick(args)
end

Next, create a World and include Draco::UI.

# app/worlds/hello_world.rb
class HelloWorld < Draco::World
include Draco::UI
end

Start the game with smaug run, and your UI should appear.


Layout

Wrap entities in a Layout to automatically position them relative to each other and the parent or grid.

AttributeDefaultValidNote
align:center:center, :left, :rightSets the horizontal position of all entities inside the layout relative to the parent. If the layout has no parent, alignment is relative to the grid.
space:evenly:evenly, :start, :endDistribute entities evenly spaced over the height of the parent (or grid), or push them to the top or bottom.
padding0IntegerSet a distance from all edges of the parent for entities nested inside of the layout to be placed
orientation:vertical:verticalNot implemented

Example

layout {
align :center
space :evenly
padding 24
orientation :vertical
# Nested entities...
button { text 'Button 1' }
button { text 'Button 2' }
}

Label

Display single or multiple lines of text content.

AttributeDefaultValidNote
textnilStringText will be line-wrapped at 65 characters
size0IntegerValue given to args.outputs.labels (SIZE_ENUM). 0 represents "default size". A negative value will decrease the label size. A positive value will increase the label's size.
padding0IntegerAdd space to all sides of the label
fontSubject to changeRelative path to a TrueType fontNot implemented
color'#ffffff'.to_colorColorColor may be expressed in any format understood by https://smaug.dev/packages/color/
width0IntegerWidth
height42IntegerHeight

Example

# Headline
label {
padding 0
text 'Hello World'
size 42
color '#cca533ff'
font 'fonts/Fonts/Kenney Blocks.ttf'
}
# Paragraph
label {
text <<-TEXT
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aliquam eget dolor venenatis, fermentum enim quis, faucibus enim.
Vivamus elementum mattis ornare.
TEXT
size 4
font 'fonts/Fonts/Kenney Pixel.ttf'
}

Panel

Create a panel to display a visual container for your content.

AttributeDefaultValidNote
width100IntegerSet the width of the panel
height100IntegerSet the height of the panel
pathsprites/kenney-ui-pack/blue_panel.pngRelative pathSprite path for panel image
colorColorTint color

Example

panel {
width $gtk.args.grid.w
height 400
layout {
label {
text 'Example Panel'
}
}
}

Button

A clickable, customizable all-purpose button control.

AttributeDefaultValidNote
text100IntegerButton label
size0IntegerSIZE_ENUM
padding12IntegerSpace between the content and the edges of the button
variant'blue'String or SymbolAny value supported by your StatefulSprite :dynamic_path
on_clickProc->(entity, world, args) { #... }

Example

button {
text 'Confirm'
variant :green
size 16
padding 24
icon {
path 'sprites/kenney-game-icons/white/2x/larger.png'
}
on_click ->(entity, world, args) {
# ...Anything you want!
}
}

Icon

A clickable icon without a label.

AttributeDefaultValidNote
width32IntegerSet the width of the icon
height32IntegerSet the height of the icon
pathRelative pathSprite path for icon image
colorColorTint color
on_clickProc->(entity, world, args) { #... }

Example

icon {
width 100
height 100
path 'sprites/kenney-game-icons/white/2x/larger.png'
on_click ->(entity, world, args) {
# ...Anything you want!
}
}

Progress

An animated progress bar.

AttributeDefaultValidNote
width400IntegerSet the width of the progress bar
height42IntegerSet the height of the progress bar
speed1IntegerRate of change when animating
max100IntegerMaximum possible value in range
backgroundsprites/draco-ui/progress/background_01.pngRelative pathSprite path for background image
fillsprites/draco-ui/progress/background_03.pngRelative pathSprite path for fill image
value-> { 0 }ProcReturns the current value every tick

Example

progress {
width 400
height 42
speed 1
max 100
background 'sprites/draco-ui/progress/background_01.png'
fill 'sprites/draco-ui/progress/background_04.png'
value -> { 90 }
}

Banner

Display a notification message to the player.

AttributeDefaultValidNote
width100IntegerSet the width of the banner
height100IntegerSet the height of the banner
pathsprites/kenney-ui-pack/red_panel.pngRelative pathSprite path for banner image
colorColorTint color

Example

Banner.notify do
label { text "This is a banner" }
end

Author

Gravatar for logan@logankoester.com

Logan Koester

Last updated

a month ago

License

Unknown

Tagged