furex

package module
Version: v0.2.0 Latest Latest
Warning

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

Go to latest
Published: Jul 18, 2021 License: BSD-3-Clause Imports: 5 Imported by: 0

README

furex

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

Motivation

When I was making React Native apps, Flexbox layout felt useful and intuitive to me, so I thought it would be great if I can use the same concept to build user interface in my game using Ebiten framework. I would be so happy if it helps someone who has the same thoughts. I really appreciate if anyone can make any contribution to grow the library.

Features

Feature Supported Note
Flexbox layout o Supports a subset of flexbox layout spec.
Custom component o Supports any component that implements Component interface. See the example.
Button event handling o Supports both of touch and mouse click on components that implements ButtonComponent 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.
Padding x To be implemented when needed.
Margin x To be implemented when needed.

Simple Usage

import "github.com/yohamta/furex"

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

type Game struct {
	view *furex.View
}

// Initialize the UI
func (g *Game) initUI() {
	// Create flexbox container
	rootFlex := furex.NewFlex(0, 0, screenWidth, screenHeight)

	// Set the options for flexbox
	rootFlex.Direction = furex.Row
	rootFlex.Justify = furex.JustifyCenter
	rootFlex.AlignItems = furex.AlignItemCenter
	rootFlex.AlignContent = furex.AlignContentCenter
	rootFlex.Wrap = furex.Wrap

	// Make flexbox items on flexbox container
	for i := 0; i < 20; i++ {
		// Each flexbox item must have fixed size so far.
		// In this case, the width is 50, height is 50.
		// Box component is just an example of a component.
		rootFlex.AddChild(NewBox(50, 50, colors[i%3]))
	}

	// Layer: A Layer can be stacked inside a View
	layer := furex.NewLayerWithContainer(rootFlex)

	// View: A View handles multiple layers of the UI and propagate UI events 
	//       such as touches or mouse click.
	g.view = furex.NewView()
	g.view.Layout(0, 0, screenWidth, screenHeight)

	// Add the layer to the View
	g.view.AddLayer(layer)
}

func (g *Game) Update() {
	// Update the UI 
	g.view.Update()
}

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

Use case

This simple game is using furex for UI layout and interaction.

Documentation

Index

Constants

This section is empty.

Variables

This section is empty.

Functions

func IsInside

func IsInside(r image.Rectangle, x, y int) bool

Types

type AbsolutePositionComponent

type AbsolutePositionComponent interface {
	FixedSizeComponent

	Position() image.Point
}

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

type AlignItem

type AlignItem uint8

AlignItem aligns items along the cross axis.

const (
	AlignItemStart AlignItem = iota
	AlignItemEnd
	AlignItemCenter
)

type ButtonComponent

type ButtonComponent interface {
	// OnPressButton will be called when the button is pressed
	OnPressButton()
	// OnReleaseButton will be called when the button is released
	OnReleaseButton()
}

ButtonComponent represents a button

type Child

type Child struct {
	IsButtonPressed bool
	// contains filtered or unexported fields
}

type ChildLayer

type ChildLayer struct {
	// contains filtered or unexported fields
}

type Component

type Component interface {
	Update()

	Draw(screen *ebiten.Image, frame image.Rectangle)
}

Component represents a component of the UI

type Container

type Container interface {
	Component

	AddChild(child Component)
}

Container represents a container that can have child components

type ContainerEmbed

type ContainerEmbed struct {
	// contains filtered or unexported fields
}

func (*ContainerEmbed) AddChild

func (cont *ContainerEmbed) AddChild(child Component)

func (*ContainerEmbed) HandleJustPressedTouchID

func (cont *ContainerEmbed) HandleJustPressedTouchID(touchID ebiten.TouchID) bool

func (*ContainerEmbed) HandleJustReleasedTouchID

func (cont *ContainerEmbed) HandleJustReleasedTouchID(touchID ebiten.TouchID)

func (*ContainerEmbed) HandleMouse

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

type Direction

type Direction uint8

Direction is the direction in which flex items are laid out

const (
	Row Direction = iota
	Column
)

type FixedSizeComponent

type FixedSizeComponent interface {
	Component

	Size() image.Point
}

FixedSizeComponent represents a component with fixed size

type Flex

type Flex struct {
	ContainerEmbed

	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 CSS flexbox algorithm.

func NewFlex

func NewFlex(x, y, width, height int) *Flex

NewFlex creates NewFlexContaienr

func (*Flex) Draw

func (f *Flex) Draw(screen *ebiten.Image, frame image.Rectangle)

func (*Flex) Size

func (f *Flex) Size() image.Point

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 Layer

type Layer struct {
	// contains filtered or unexported fields
}

func NewLayerWithContainer

func NewLayerWithContainer(cont Container) *Layer

func (*Layer) Draw

func (l *Layer) Draw(screen *ebiten.Image)

func (*Layer) HandleJustPressedTouchID

func (l *Layer) HandleJustPressedTouchID(touchID ebiten.TouchID) bool

func (*Layer) HandleJustReleasedTouchID

func (l *Layer) HandleJustReleasedTouchID(touchID ebiten.TouchID)

func (*Layer) HandleMouse

func (l *Layer) HandleMouse(x, y int) bool

func (*Layer) Layout

func (l *Layer) Layout(x0, y0, x1, y1 int)

func (*Layer) Update

func (l *Layer) Update()

type MouseHandler

type MouseHandler interface {
	HandleMouse(x, y int) bool
}

MouseHandler represents a mouse handler

type TouchHandler

type TouchHandler interface {
	HandleJustPressedTouchID(touchID ebiten.TouchID) bool
	HandleJustReleasedTouchID(touchID ebiten.TouchID)
}

TouchHandler represents a touch handler

type View

type View struct {
	// contains filtered or unexported fields
}

func NewView

func NewView() *View

func (*View) AddLayer

func (view *View) AddLayer(l *Layer)

func (*View) Draw

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

func (*View) Layout

func (view *View) Layout(x0, y0, x1, y1 int)

func (*View) Update

func (view *View) Update()

Directories

Path Synopsis
examples

Jump to

Keyboard shortcuts

? : This menu
/ : Search site
f or F : Jump to