chopstiqs

chopstiqs

Chopstiqs aims to be a minimalistic plug-and-play GUI package for the ebitengine. Rather than using separate image files, it draws GUI components using built-in drawing functions. This allows for quick prototyping and use in projects that do not need polished graphics.

Chopstiqs is heavily inspired by ebitenui.

Examples

Simple example with few components: _examples/simple/main.go

Example containing every component: _examples/demo/main.go

Running example: https://fglo.github.io/chopstiqs/

Quick Start

You can create gui using the gui.New() function:

gui := gui.New()

The gui object has two methods: Update() and Draw(screen *ebiten.Image) that should be called in the ebiten game's object Update() and Draw(screen *ebiten.Image) methods, e.g.:

func (g *Game) Update() error {
	gui.Update()
	return nil
}

func (g *Game) Draw(screen *ebiten.Image) {
	gui.Draw(screen)
}

Every gui has one root container that contains all components. You can create container using gui.NewContainer() method.

rootContainer := gui.NewContainer(&component.ContainerOptions{
	Padding: &component.Padding{Left: 5, Right: 5, Top: 5, Bottom: 5},
	Layout:  &component.VerticalListLayout{RowGap: 5}})

g.gui.SetRootContainer(rootContainer)

Note: New components should be created from the gui object (using gui's methods, not methods from the component package), to ensure that events are propagated correctly.

Create next components the same way you created the root container:

lbl := gui.NewLabel("chopstiqs demo", nil)

You can modify default component appearance by changing it's Options:

btn := gui.NewButton(&component.ButtonOptions{
	Label: gui.NewLabel("dummy button", &component.LabelOptions{Color: color.RGBA{50, 50, 50, 255}}),
})

Components have methods like AddWhateverEventHandler(func(args *WhateverEventArgs) {}) that can be used to add handlers to component's events.

cbOpts := &component.CheckBoxOptions{
	Label: g.gui.NewLabel("disable components", &component.LabelOptions{Color: color.RGBA{230, 230, 230, 255}}),
}

cb := g.gui.NewCheckBox(cbOpts)

cb.AddToggledHandler(func(args *component.CheckBoxToggledEventArgs) {
	btn.SetDisabled(args.CheckBox.Checked())
})

To display components in gui, add them to a container (it can be the root container):

rootContainer.AddComponent(lbl)
rootContainer.AddComponent(cb)
rootContainer.AddComponent(btn)

Components

What I have already:

• buttons
• checkboxes
• labels
• sliders
• containers
• container layouts
  • horizontal list
  • vertical list
  • grid (not the greatest thing in the world)
• text inputs (without undo/redo functionality :/)

Roadmap

What I want to achieve (not necessarily in the following order):

• better documentation
• component behaviour:
  • labels:
    • rethink aligning
  • text inputs:
    • shortcuts: ctrl+z, ctrl+shift+z, ctrl+y
  • vertical list
    • aligning components
  • horizontal list
    • aligning components
  • grid container layout
    • redesign
  • drawers:
    • initialization
    • caching
    • separate package
• more components:
  • dropdowns
  • radio groups
  • tooltips
  • modals and/or dialogs
  • range sliders
• container layouts
  • vertical scroll
  • horizontal scroll
  • flexbox
• reusing cached images if component wasn't modified
• layers (mulitple containers on top of each other)