furex

README

furex

A simple and flexible 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 or UpdateHandler. See the example.
• Button component
  • Able to handle touch ID by implementing ButtonHandler interface. See the example.
• Touch event handling
  • Able to handle touch ID by implementing TouchHandler interface.
• Mouse click / Mouse move handling
  • Able to handle left click by implementing MouseHandler interface.
  • Able to handle mouse move by implementing MouseLeftButtonHandler interface.
• Margin
• Nesting
• Wrap
• Flex-grow
• Align-stretch
• Absolute-position

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

How to contribute?

Feel free to contribute in any way you want. Share ideas, submit issues, create pull requests. Thank you!

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 (
	AlignItemStretch AlignItem = iota
	AlignItemStart
	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

Position is the 'position' property

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
	Grow         float64
	Shrink       float64
	// 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()