Comments (7)
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.
This is complete now with the latest commit
from ebitenui.
Related Issues (20)
- Move events handling to the Update tree HOT 2
- Tabbook should have a distinct hovered and activated states HOT 3
- FAQ bits collection HOT 1
- Friendlier messages when widget options are missing HOT 2
- SIGSEGV panic when no image is specified for a Button HOT 2
- Add ability to change focus in user defined directions
- Recommendation: OS's theme detection HOT 1
- How to create a transparent root Container? HOT 1
- Tooltip freezes when owning widget is removed while tooltip is visible
- Extend button widget to support optional "mask", instead of triggering hover, press, etc on entering/clicking the widget boundaries.
- Add a repeated image in addition to the nineslice image?
- Allow auto-sized windows that fit the content's size
- Issue in `List.AddEntry` and `List.SetEntries` HOT 3
- Better control for events like "click" when multiple layers of UI are on top of each other
- TextInput panics if Validation func returns string shorter than before
- GridLayout with GridLayoutPositionCenter vertical centering incorrect.
- Outdated text API
- Checkbox hover image has no effect
- Setting an initial value of a checkbox leads to the execution of the associated trigger function
- Provide a click pos information for a ButtonClickedEventArgs when possible
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ebitenui.