furex
A simple UI framework for Ebiten with a subset of flexbox layout specification. GoDoc
Motivation
When I was developing some React Native app, I thought the Flexbox layout is very intuitive for UI and it would be great if I could use the same concept when building UI for a game made in Ebiten. I hope this library will help others with the same thoughts.
Features
Feature | Supported | Note |
---|---|---|
Flexbox layout | o | Supports a subset of flexbox layout spec. |
Custom component | o | Supports any component that implements Drawable (and Updatable ) interface. See the example. |
Button event handling | o | Supports both of touch and mouse click on components that implements Button interface. See the example. |
Touch handler interface | o | Able to handle touch ID on components that implements the TouchHandler interface. |
Mouse handler | o | Able to handle left click on components that implements the MouseHandler interface. |
Margin | o | Margin is supported for components that implement MarginedItem interface. |
Padding | - | To be implemented when needed. |
Layout Example
Full source code of the example
Simple Usage
Full source code of simple usage example
import "github.com/yohamta/furex"
var (
colors = []color.Color{
color.RGBA{0xaa, 0, 0, 0xff},
color.RGBA{0, 0xaa, 0, 0xff},
color.RGBA{0, 0, 0xaa, 0xff},
}
)
var {
rootFlex *furex.Flex
}
// Initialize the UI
func (g *Game) initUI() {
// Make a instance of root flexbox container
rootFlex = furex.NewFlex(screenWidth, screenHeight)
// Set options for flexbox layout
rootFlex.Direction = furex.Row
rootFlex.Justify = furex.JustifyCenter
rootFlex.AlignItems = furex.AlignItemCenter
rootFlex.AlignContent = furex.AlignContentCenter
rootFlex.Wrap = furex.Wrap
// Add items to flexbox container
for i := 0; i < 20; i++ {
rootFlex.AddChild(NewBox(50, 50, colors[i%3]))
}
}
func (g *Game) Update() {
// Update the UI tree
rootFlex.Update()
}
func (g *Game) Draw(screen *ebiten.Image) {
// Draw the UI tree
rootFlex.Draw(screen)
}