AnchorLayout only shows a single child. about ebitenui HOT 6 OPEN

The stacked layout example does pretty much what you're suggesting: https://ebitenui.github.io/stacked_layout/
-> https://github.com/ebitenui/ebitenui/blob/master/_examples/widget_demos/stackedlayout/main.go

So in regards to the grid layout, you can set it up in quadrants, so 2 columns 2 rows (or 3x3), each setup to stretch. Then add another containers to the individual corners so that you can add your various widgets where you want them. The grid layout just helps get the sub containers and widgets in the right places.

Another option to consider is to use a Window. Windows can be placed where ever you want with x/y coordinates. This is how I am handling the UI for my game. See https://ebitenui.github.io/window/ -> https://github.com/ebitenui/ebitenui/blob/master/_examples/widget_demos/window/main.go

Along with that, Since I have added stacked layout that does allow overlapping widgets, I will leave this open as an enhancement to allow multiple children to be laid out in an anchor layout.

from ebitenui.

Just in case anyone stumbles upon this, I was able to get this to work with your suggestion of using Windows with a StackedLayout for the root container.

Since I couldn't position windows with Anchors, I just make a translation function (I'm sure there's a smarter way, but this seems to work) which I'm sharing here in case this will help others:

// getAnchorPosition returns the screen position of windows according to an anchor. 
// width and height are the results of `PreferredSize()` of the window's contents. 
// this also assumes ScreenWidth and ScreenHeight are accessible and exposed.
func getAnchorPosition(anchor AnchorPosition, width, height int) (int, int) {
	var x, y int

	centerX := (ScreenWidth / 2) - (width / 2)
	centerY := (ScreenHeight / 2) - (height / 2)
	rightX := ScreenWidth - width
	bottomY := ScreenHeight - height

	switch anchor {
	case TopLeft:
		x = 0
		y = 0
	case TopCenter:
		x = centerX
		y = centerY
	case TopRight:
		x = rightX
		y = 0
	case MiddleLeft:
		x = 0
		y = centerY
	case MiddleCenter:
		x = centerX
		y = centerY
	case MiddleRight:
		x = rightX
		y = centerY
	case BottomLeft:
		x = 0
		y = bottomY
	case BottomCenter:
		x = centerX
		y = bottomY
	case BottomRight:
		x = rightX
		y = bottomY
	}

	return x, y
}

from ebitenui.

This actually working as expected. The anchor layout is built to only layout a single child. I believe the reasoning is "what do you do if two items are anchored to the same location.?". What you're trying to achieve can be done with a grid layout with 4 quarters instead, or a stacked layout.

from ebitenui.

This actually working as expected

So an anchored layout is special in that it only allows a single child container? In this case, logging an error could be helpful.

"what do you do if two items are anchored to the same location.?"

In that case, it seems like drawing one over the other makes sense. It makes more sense than just silently hiding all subsequent containers (if that's what it's doing, appears to be the case).

What you're trying to achieve can be done with a grid layout with 4 quarters instead, or a stacked layout.

A grid layout was a no go as I expect to have variable sizes for the various anchored components of the screen (like a minimap, menu button, bottom hud, all varying widths and heights like you'd see in a typical game).

Though I did give it a few hours trying to get this to work with a stacked layout. If you have an example of how I could handle this I'd greatly appreciate it!

One workaround has been to create multiple instances of ebitenui.UI and iterating them, but that feels like a hack.

from ebitenui.

Awesome, thanks very much for the prompt replies!

I'll see if I can figure out stacked layout with multiple anchored containers.

Good ideas on the grid, but part of these elements may span the entirety of a grid row which makes that a bit tricky.

Appreciate tagging this as an enhancement!

from ebitenui.

from ebitenui.