Tessella, a (truly) declarative UI framework for Pygame
Hello everyone!
Over the last 20 months I've been working on and off on Tessella, a Flutter-inspired declarative UI framework for pygame. The idea is to build UIs of any shape or size by nesting widgets (25+ of them so far) inside one another, instead of hand-placing rects. Here's a minimal example, taken straight from the "Hello World" tab in the (very flashy) video above:
gui = Center(
Container(
child=Padding(
padding=EdgeInsets.all(28),
child=Column(
shrink_wrap=True,
children=[
Text(text="TESSELLA DEMO"),
SizedBox(width=0, height=10), # Spacer
TextWrap(text="Every screen is built by nesting widgets like these."),
SizedBox(width=0, height=20), # Spacer
Text(text="Quite simple, right?"),
SizedBox(width=0, height=10), # Spacer
Button(
key=WidgetKey(),
text="Hello World!",
width=200,
height=40,
on_click=lambda: print("Hello World!")
)
]
)
)
)
)
The goal with Tessella was to fix a few problems most pygame UI setups run into: having to set rects and coordinates by hand (which makes responsive UIs a pain), and the lack of anything modular or scalable enough to fit projects of different sizes without dragging in a pile of boilerplate.
To get the example above on screen, all you need to do is call gui.calculate_layout, passing it a rect for the area you want the UI to occupy once at the start, and again on WINDOWRESIZED events. That's the entire responsiveness story. From there, Tessella figures out sizing and layout on its own, updates via gui.process_event and gui.update, and renders with gui.render, which also has a debug mode that draws the bounds of every widget, so you can see exactly why the layout ended up the way it did. You can see that in action toward the end of the video.
Tessella was a core part of a game I released on Steam a few months ago, Protocol: Umbra, and building a real project on top of it is what really pushed it forward. If it looks interesting, you can try it right now with pip install tessella, as well as check the docs or source for a quickstart and more examples:
Docs: https://tessella.readthedocs.io/en/latest/
GitHub: https://github.com/cuaitz/tessella
This is the first "real" release, so Tessella is still a bit rough around the edges, which means that feedback and contributions are very welcome!
More things are always on the way :)