Rotate Textbutton for inventory (Design)

[Westeford]

So this post is purely about my gui layout design.
This is my current GUI for my inventory screen.

As you can see it's not the most efficient. There's a chunk of empty space. So. I had an idea. I was thinking about moving the thumbnail and text box to the top row next to each other (And with similar height.) Then move the grid to the bottom row.
Something like this (Forgive my totally professional photoshopping. lol)

But I also want to arrange the list like how the world map is arranged in Mario Odyssey shown below.

The list items are tilted in such a way so that the player won't need to tilt their head (hopefully).
So my question is, is this possible to do? The list will be draggable and items will be added throughout the story.
Here is my code

Code: Select all

default evidence_list = []

screen inventory():
    tag menu
    use game_menu(_("Inventory")):
        vpgrid:
            default selected_item = None
            cols 1
            spacing 5
            draggable True
            mousewheel True
            scrollbars "vertical"
            side_xalign 0.0
            for evidence_item in evidence_list:
                frame:
                    style_prefix "evidence_item"
                    textbutton evidence_item.name xysize (300, 25):
                        action (SetScreenVariable(name='selected_item', value=evidence_item))

        #Thumbnail
        frame:
            xalign 1.0
            yalign 0.0
            xysize (250, 250)
            vbox:
                if selected_item:
                    add selected_item.pic
                else:
                    pass
                
        #Description
        frame:
            xalign 1.0
            yalign 1.0
            xysize (600, 300)
            vbox:
                if selected_item:
                    text selected_item.desc
                else:
                    pass

I hope to change the design to be more visually pleasing later on. Right now I want to nail the layout down.
I also welcome any alternate ideas if you have them.
Thank you very much for taking the time to read this.

[MaydohMaydoh]

I think you can use a transform here to rotate them.
Something like

Code: Select all

init:
    	transform rotate_btn():
		rotate -60
		
screen inventory():

	hbox spacing -10:
	
		for evidence_item in evidence_list:
			textbutton evidence_item.name xysize (300, 25) at rotate_btn:
				action (SetScreenVariable(name='selected_item', value=evidence_item))

Something like that, maybe?
Just put the hbox into a scrollable viewport or put the buttons into vpgrid as you already had, I was just too lazy to add it.