furex

README

furex

A simple UI framework for Ebiten with a subset of flexbox layout specifications. GoDoc

Motivation

When I was developing React Native apps, I thought the Flexbox layout was a very intuitive UI, so I thought it would be great if I could use the same concept for the UI of the games I make with Ebiten. I hope this library will help others with the same idea. Any types of Issue/PRs are welcomed :)

Features

• Flexbox layout
  • Supports a subset of flexbox layout spec.
• Custom component
  • Supports any component that implements DrawHandler and UpdateHandler. See the example.
• Button comopnent
  • Able to handle touch ID on components that implements the ButtonHandler interface. See the example.
• Touch handling
  • Able to handle touch ID on components that implements the TouchHandler interface.
• Mouse click / move handling
  • Able to handle left click on components that implements the MouseHandler interface.
• Margin
• Absolute position
• Nesting view
• Wrap children
• Removing child view

Layout Example

To check all examples, visit this page.

Full source code of the example

Simple Usage

go get github.com/yohamta/furex/v2

Full source code of simple usage example

import "github.com/yohamta/furex/v2"

type Game struct {
  init   bool
  screen screen
  gameUI *furex.View
}

func (g *Game) Update() error {
  if !g.init {
    g.init = true
    g.setupUI()
  }
  g.gameUI.Update()
  return nil
}

func (g *Game) setupUI() {
  // create root view
  g.gameUI = &furex.View{
    Width:        g.screen.Width,
    Height:       g.screen.Height,
    Direction:    furex.Row,
    Justify:      furex.JustifyCenter,
    AlignItems:   furex.AlignItemCenter,
    AlignContent: furex.AlignContentCenter,
    Wrap:         furex.Wrap,
  }

  // create child view
  for i := 0; i < 20; i++ {
    g.gameUI.AddChild(&furex.View{
      Width:  100,
      Height: 100,
      Handler: &components.Box{
        Color: colors[i%len(colors)],
      },
    })
  }
}

func (g *Game) Draw(screen *ebiten.Image) {
  // Draw the UI tree
  g.gameUI.Draw(screen)
}

var colors = []color.Color{
  color.RGBA{0xaa, 0, 0, 0xff},
  color.RGBA{0, 0xaa, 0, 0xff},
  color.RGBA{0, 0, 0xaa, 0xff},
}

Result

Documentation

Overview

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

Index

• Variables
• type AlignContent
• type AlignItem
• type ButtonHandler
• type Direction
• type DrawHandler
• type DrawRectOpts
• type FillRectOpts
• type FlexAlign
• type FlexWrap
• type Justify
• type MouseHandler
• type MouseLeftButtonHandler
• type Position
• type TouchHandler
• type UpdateHandler
• type View
  • func (v *View) AddChild(cv *View)
  • func (v *View) Draw(screen *ebiten.Image)
  • func (ct *View) HandleJustPressedMouseButtonLeft(x, y int) bool
  • func (ct *View) HandleJustPressedTouchID(touchID ebiten.TouchID, x, y int) bool
  • func (ct *View) HandleJustReleasedMouseButtonLeft(x, y int)
  • func (ct *View) HandleJustReleasedTouchID(touchID ebiten.TouchID, x, y int)
  • func (ct *View) HandleMouse(x, y int) bool
  • func (v *View) PopChild() *View
  • func (v *View) RemoveChild(cv *View) bool
  • func (v *View) Update()

Variables

var Debug = false

var G graphic

Types

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 ButtonHandler

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

ButtonHandler represents a button component.

type Direction

type Direction uint8

Direction is the direction in which flex items are laid out

const (
	Row Direction = iota
	Column
)

type DrawHandler

type DrawHandler interface {
	// HandleDraw 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).
	HandleDraw(screen *ebiten.Image, frame image.Rectangle)
}

DrawHandler represents a component that can be added to a container.

type DrawRectOpts

type DrawRectOpts struct {
	Rect        image.Rectangle
	Color       color.Color
	StrokeWidth int
}

type FillRectOpts

type FillRectOpts struct {
	Rect  image.Rectangle
	Color color.Color
}

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 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 MouseLeftButtonHandler

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

MouseLeftButtonHandler represents a component that handle mouse button left click.

type Position

type Position uint8

const (
	PositionStatic Position = iota
	PositionAbsolute
)

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 UpdateHandler

type UpdateHandler interface {
	// Updater updates the state of the component by one tick.
	HandleUpdate()
}

UpdateHandler represents a component that updates by one tick.

type View

type View struct {
	Left         int
	Top          int
	Width        int
	Height       int
	MarginLeft   int
	MarginTop    int
	MarginRight  int
	MarginBottom int
	Position     Position
	Handler      DrawHandler
	Direction    Direction
	Wrap         FlexWrap
	Justify      Justify
	AlignItems   AlignItem
	AlignContent AlignContent
	// contains filtered or unexported fields
}

func (*View) AddChild

func (v *View) AddChild(cv *View)

func (*View) Draw

func (v *View) Draw(screen *ebiten.Image)

func (*View) HandleJustPressedMouseButtonLeft

func (ct *View) HandleJustPressedMouseButtonLeft(x, y int) bool

func (*View) HandleJustPressedTouchID

func (ct *View) HandleJustPressedTouchID(
	touchID ebiten.TouchID, x, y int,
) bool

func (*View) HandleJustReleasedMouseButtonLeft

func (ct *View) HandleJustReleasedMouseButtonLeft(x, y int)

func (*View) HandleJustReleasedTouchID

func (ct *View) HandleJustReleasedTouchID(touchID ebiten.TouchID, x, y int)

func (*View) HandleMouse

func (ct *View) HandleMouse(x, y int) bool

func (*View) PopChild

func (v *View) PopChild() *View

func (*View) RemoveChild

func (v *View) RemoveChild(cv *View) bool

func (*View) Update

func (v *View) Update()