furex

package module
Version: v0.6.3 Latest Latest
Warning

This package is not in the latest version of its module.

Go to latest
Published: Dec 2, 2021 License: BSD-3-Clause Imports: 9 Imported by: 0

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

Constants

This section is empty.

Variables

This section is empty.

Functions

func SetIsDebug added in v0.5.9

func SetIsDebug(val bool)

Types

type AbsolutePositionItem added in v0.5.7

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 added in v0.5.0

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 added in v0.5.7

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 added in v0.5.7

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 added in v0.5.3

func (cont *Flex) AddChild(child Drawable)

AddChild adds child component

func (*Flex) AddChildContainer added in v0.5.3

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 added in v0.5.3

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

func (*Flex) HandleJustPressedTouchID added in v0.5.3

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

func (*Flex) HandleJustReleasedMouseButtonLeft added in v0.5.3

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

func (*Flex) HandleJustReleasedTouchID added in v0.5.3

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

func (*Flex) HandleMouse added in v0.5.3

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

func (*Flex) Margin added in v0.5.8

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

func (*Flex) SetFrame added in v0.5.3

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 added in v0.5.3

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

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

func (*Flex) SetMargin added in v0.5.8

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

func (*Flex) SetSize added in v0.5.0

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

SetSize sets the size of the flex container.

func (*Flex) Size added in v0.2.0

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 added in v0.5.8

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 added in v0.5.0

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 added in v0.5.7

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

Updatable represents a component that updates by one tick.

Directories

Path Synopsis
examples
internal

Jump to

Keyboard shortcuts

? : This menu
/ : Search site
f or F : Jump to
y or Y : Canonical URL