furex

README

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

Documentation

Overview

Referenced code: https://github.com/golang/exp/blob/master/shiny/widget/flex/flex.go

Index

• func SetIsDebug(val bool)
• type AbsolutePositionItem
• type AlignContent
• type AlignItem
• type Button
• type Container
• type Direction
• type Drawable
• type FixedSizeItem
• type Flex
  • func NewFlex(width, height int) *Flex
  • func (cont *Flex) AddChild(child Drawable)
  • func (cont *Flex) AddChildContainer(child Container)
  • func (cont *Flex) Draw(screen *ebiten.Image)
  • func (cont *Flex) HandleJustPressedMouseButtonLeft(x, y int) bool
  • func (cont *Flex) HandleJustPressedTouchID(touchID ebiten.TouchID, x, y int) bool
  • func (cont *Flex) HandleJustReleasedMouseButtonLeft(x, y int)
  • func (cont *Flex) HandleJustReleasedTouchID(touchID ebiten.TouchID, x, y int)
  • func (cont *Flex) HandleMouse(x, y int) bool
  • func (f *Flex) Margin() []int
  • func (cont *Flex) SetFrame(frame image.Rectangle)
  • func (cont *Flex) SetFramePosition(x, y int)
  • func (f *Flex) SetMargin(m []int)
  • func (cont *Flex) SetSize(w, h int)
  • func (cont *Flex) Size() (int, int)
  • func (f *Flex) Update()
• type FlexAlign
• type FlexWrap
• type Justify
• type MarginedItem
• type MouseHandler
• type MouseLeftClickHandler
• type TouchHandler
• type Updatable

Functions

func SetIsDebug

func SetIsDebug(val bool)

Types

type AbsolutePositionItem

type AbsolutePositionItem interface {
	// Size returns the size(x,y) of the component.
	Size() (int, int)

	// Position returns the position(x,y) relative to it's parent container.
	Position() (int, int)
}

AbsolutePositionItem represents a component with fixed size.

type AlignContent

type AlignContent uint8

AlignContent is the 'align-content' property. It aligns container lines when there is extra space on the cross-axis.

const (
	AlignContentStart AlignContent = iota
	AlignContentEnd
	AlignContentCenter
	AlignContentSpaceBetween
	AlignContentSpaceAround
	AlignContentStretch
)

type AlignItem

type AlignItem uint8

AlignItem aligns items along the cross axis.

const (
	AlignItemStart AlignItem = iota
	AlignItemEnd
	AlignItemCenter
)

type Button

type Button interface {
	// HandlePress handle the event when user just started pressing the button
	// The parameter (x, y) is the location relative to the window (0,0).
	// touchID is the unique ID of the touch.
	// If the button is pressed by a mouse, touchID is -1.
	HandlePress(x, y int, t ebiten.TouchID)

	// HandleRelease handle the event when user just released the button.
	// The parameter (x, y) is the location relative to the window (0,0).
	// The parameter isCancel is true when the touch/left click is released outside of the button.
	HandleRelease(x, y int, isCancel bool)
}

Button represents a button component.

type Container

type Container interface {
	// SetFrame sets the location (x,y) and size (width,height) relative to the window (0,0).
	SetFrame(image.Rectangle)

	// AddChild adds a child component.
	AddChild(child Drawable)

	// AddChild adds a child component.
	AddChildContainer(child Container)

	// Draw draws its children component.
	Draw(screen *ebiten.Image)

	// Size returns the size(x,y) of the container.
	Size() (int, int)

	// Update updates the container.
	Update()
	// contains filtered or unexported methods
}

Container represents a container that can have child components.

type Direction

type Direction uint8

Direction is the direction in which flex items are laid out

const (
	Row Direction = iota
	Column
)

type Drawable

type Drawable interface {
	// Draw function draws the content of the component inside the frame.
	// The frame parameter represents the location (x,y) and size (width,height) relative to the window (0,0).
	Draw(screen *ebiten.Image, frame image.Rectangle)
}

Drawable represents a UI component that can be added to a Flex container.

type FixedSizeItem

type FixedSizeItem interface {
	// Size returns the size(width, height) of the component.
	Size() (int, int)
}

FixedSizeItem represents a component with fixed size.

type Flex

type Flex struct {
	Direction    Direction
	Wrap         FlexWrap
	Justify      Justify
	AlignItems   AlignItem
	AlignContent AlignContent
	// contains filtered or unexported fields
}

Flex is a container widget that lays out its children following the flexbox algorithm.

func NewFlex

func NewFlex(width, height int) *Flex

NewFlex creates NewFlexContaienr

func (*Flex) AddChild

func (cont *Flex) AddChild(child Drawable)

AddChild adds child component

func (*Flex) AddChildContainer

func (cont *Flex) AddChildContainer(child Container)

AddChildContainer adds child container

func (*Flex) Draw

func (cont *Flex) Draw(screen *ebiten.Image)

Draw draws it's children

func (*Flex) HandleJustPressedMouseButtonLeft

func (cont *Flex) HandleJustPressedMouseButtonLeft(x, y int) bool

func (*Flex) HandleJustPressedTouchID

func (cont *Flex) HandleJustPressedTouchID(touchID ebiten.TouchID, x, y int) bool

func (*Flex) HandleJustReleasedMouseButtonLeft

func (cont *Flex) HandleJustReleasedMouseButtonLeft(x, y int)

func (*Flex) HandleJustReleasedTouchID

func (cont *Flex) HandleJustReleasedTouchID(touchID ebiten.TouchID, x, y int)

func (*Flex) HandleMouse

func (cont *Flex) HandleMouse(x, y int) bool

func (*Flex) Margin

func (f *Flex) Margin() []int

func (*Flex) SetFrame

func (cont *Flex) SetFrame(frame image.Rectangle)

SetFrame sets the location (x,y) and size (width,height) relative to the window (0,0).

func (*Flex) SetFramePosition

func (cont *Flex) SetFramePosition(x, y int)

SetFramePosition sets the location (x,y) relative to the window (0,0).

func (*Flex) SetMargin

func (f *Flex) SetMargin(m []int)

func (*Flex) SetSize

func (cont *Flex) SetSize(w, h int)

SetSize sets the size of the flex container.

func (*Flex) Size

func (cont *Flex) Size() (int, int)

Size returns the size of the contaienr

func (*Flex) Update

func (f *Flex) Update()

type FlexAlign

type FlexAlign int

FlexAlign represents align of flex children

const (
	FlexCenter FlexAlign = iota
	FlexStart
	FlexEnd
	FlexSpaceBetween
)

type FlexWrap

type FlexWrap uint8

FlexWrap controls whether the container is single- or multi-line, and the direction in which the lines are laid out.

const (
	NoWrap FlexWrap = iota
	Wrap
	WrapReverse
)

type Justify

type Justify uint8

Justify aligns items along the main axis.

const (
	JustifyStart        Justify = iota // pack to start of line
	JustifyEnd                         // pack to end of line
	JustifyCenter                      // pack to center of line
	JustifySpaceBetween                // even spacing
	JustifySpaceAround                 // even spacing, half-size on each end
)

type MarginedItem

type MarginedItem interface {
	// Margin returns the size of margin int[]{top, riht, bottom, left}
	Margin() []int
}

MarginedItem represents a component with fixed size.

type MouseHandler

type MouseHandler interface {
	// HandleMouse handles the mouch move and returns true if it handle the mouse move.
	// The parameter (x, y) is the location relative to the window (0,0).
	HandleMouse(x, y int) bool
}

MouseHandler represents a component that handle mouse move.

type MouseLeftClickHandler

type MouseLeftClickHandler interface {
	// HandleJustPressedMouseButtonLeft handle left mouse button click just pressed.
	// The parameter (x, y) is the location relative to the window (0,0).
	// It returns true if it handles the mouse move.
	HandleJustPressedMouseButtonLeft(x, y int) bool
	// HandleJustReleasedTouchID handles the touchID just released.
	// The parameter (x, y) is the location relative to the window (0,0).
	HandleJustReleasedMouseButtonLeft(x, y int)
}

MouseLeftClickHandler represents a component that handle mouse button left click.

type TouchHandler

type TouchHandler interface {
	// HandleJustPressedTouchID handles the touchID just pressed and returns true if it handles the TouchID
	HandleJustPressedTouchID(touch ebiten.TouchID, x, y int) bool
	// HandleJustReleasedTouchID handles the touchID just released
	// Should be called only when it handled the TouchID when pressed
	HandleJustReleasedTouchID(touch ebiten.TouchID, x, y int)
}

TouchHandler represents a component that handle touches.

type Updatable

type Updatable interface {
	// Update updates the state of the component by one tick.
	Update()
}

Updatable represents a component that updates by one tick.