Rotate Textbutton for inventory (Design)

Discuss how to use the Ren'Py engine to create visual novels and story-based games. New releases are announced in this section.
Forum rules
This is the right place for Ren'Py help. Please ask one question per thread, use a descriptive subject like 'NotFound error in option.rpy' , and include all the relevant information - especially any relevant code and traceback messages. Use the code tag to format scripts.
Post Reply
Posts: 72
Joined: Mon Jun 19, 2017 4:43 pm
Projects: Dangan Ren'Py
Location: United States

Rotate Textbutton for inventory (Design)

#1 Post by Westeford » Mon Jul 09, 2018 3:02 pm

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")):
            default selected_item = None
            cols 1
            spacing 5
            draggable True
            mousewheel True
            scrollbars "vertical"
            side_xalign 0.0
            for evidence_item in evidence_list:
                    style_prefix "evidence_item"
                    textbutton xysize (300, 25):
                        action (SetScreenVariable(name='selected_item', value=evidence_item))

            xalign 1.0
            yalign 0.0
            xysize (250, 250)
                if selected_item:
                    add selected_item.pic
            xalign 1.0
            yalign 1.0
            xysize (600, 300)
                if selected_item:
                    text selected_item.desc
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. :)

User avatar
Posts: 19
Joined: Mon Jul 09, 2018 5:49 am
Projects: Fuwa Fuwa Panic
Tumblr: maydohmaydoh
Location: The Satellite of Love

Re: Rotate Textbutton for inventory (Design)

#2 Post by MaydohMaydoh » Mon Jul 09, 2018 3:41 pm

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

Code: Select all

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

	hbox spacing -10:
		for evidence_item in evidence_list:
			textbutton 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.

Post Reply

Who is online

Users browsing this forum: No registered users