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
Message
Author
Westeford
Regular
Posts: 90
Joined: Mon Jun 19, 2017 4:43 pm
Projects: Dangan Ren'Py
Location: United States
Contact:

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.
inventory.png
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)
talentedphotoshop.png
But I also want to arrange the list like how the world map is arranged in Mario Odyssey shown below.
mariomap.png
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. :)

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

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

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.

Post Reply

Who is online

Users browsing this forum: No registered users