/furex

A simple flexbox layout library for Ebiten

Primary LanguageGoBSD 3-Clause "New" or "Revised" LicenseBSD-3-Clause

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)
}

Result