How To Make Menus become Horizontal

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.
Message
Author
the_omicron
Newbie
Posts: 10
Joined: Tue Jul 01, 2008 5:13 pm
Projects: Progress....... A Call From Heaven
Contact:

How To Make Menus become Horizontal

#1 Post by the_omicron » Wed Jul 02, 2008 4:15 pm

Seems no one can help my last topic :(

i hope someone will reply this thread..


I have few questions about the menu..

1.Like Title said..

2.How to make the background of the menu become transparent?

3.How to make a new menu?



i have only 3 question this mornin (its 3 o'clock in the mornin here lol)

I will greatly appreciate your help.. tyvm.. :D

User avatar
mozillauser
Newbie
Posts: 16
Joined: Mon Jun 30, 2008 4:00 pm
Contact:

Re: How To Make Menus become Horizontal

#2 Post by mozillauser » Wed Jul 02, 2008 6:28 pm

Just to understand your questions:

1: horizontal menus like the attached image?
2: seems to be clear
3: Do you need a new type of menu?

I am interested in the answers too, so I have no solution for you, sorry :roll:
Attachments
menu.jpg
menu.jpg (19.88 KiB) Viewed 3132 times

User avatar
EvilDragon
Veteran
Posts: 284
Joined: Fri Dec 28, 2007 5:47 am
Location: Where the Dragons rule!
Contact:

Re: How To Make Menus become Horizontal

#3 Post by EvilDragon » Wed Jul 02, 2008 6:37 pm

For horizontal menus, in options.rpy add:

layout.grouped_main_menu(x)

x is number of buttons. You have to put this before any theme and style changes.
Angels of paradise, angels of sacrifice
Please let me be under your wings...

User avatar
mozillauser
Newbie
Posts: 16
Joined: Mon Jun 30, 2008 4:00 pm
Contact:

Re: How To Make Menus become Horizontal

#4 Post by mozillauser » Thu Jul 03, 2008 11:57 am

EvilDragon wrote:layout.grouped_main_menu(x)
Thank you for trying it, but other values than x=4 will chop the main-menu. :cry:

I'm interested in arranging the normal (hand made) menus but not the main- or game-menu.
And while we're at it: Maybe there is a possibility to arrange certain menus, and not all menus, because sometimes it would be better to present horizontal menus and sometimes I want to show vertical ones. Therefore I'm looking for a solution, that is outside the options.rpy

User avatar
EvilDragon
Veteran
Posts: 284
Joined: Fri Dec 28, 2007 5:47 am
Location: Where the Dragons rule!
Contact:

Re: How To Make Menus become Horizontal

#5 Post by EvilDragon » Thu Jul 03, 2008 2:57 pm

It will chop some buttons if they are big. I'm currently using only text buttons and x=5, it works just fine. You just have to style the buttons so they take up less space, and you're good to go.

Attached is an example (don't mind the language) of using 6 buttons in horizontal direction.

Also, be sure to set style.mm_button.size_group to None, it will make the buttons uneven in width so that more of them could fit in one line.
Attachments
screenshot0001.jpg
Angels of paradise, angels of sacrifice
Please let me be under your wings...

User avatar
mozillauser
Newbie
Posts: 16
Joined: Mon Jun 30, 2008 4:00 pm
Contact:

Re: How To Make Menus become Horizontal

#6 Post by mozillauser » Thu Jul 03, 2008 5:01 pm

Looks very nice and totaly different from the native style in Ren'Py.
Good work!

User avatar
EvilDragon
Veteran
Posts: 284
Joined: Fri Dec 28, 2007 5:47 am
Location: Where the Dragons rule!
Contact:

Re: How To Make Menus become Horizontal

#7 Post by EvilDragon » Thu Jul 03, 2008 5:29 pm

Thanks! It was really quite simple. But, this is only like a placeholder menu. In the final version it will be a lot different visually. The horizontal lineup will remain, though.
Angels of paradise, angels of sacrifice
Please let me be under your wings...

the_omicron
Newbie
Posts: 10
Joined: Tue Jul 01, 2008 5:13 pm
Projects: Progress....... A Call From Heaven
Contact:

Re: How To Make Menus become Horizontal

#8 Post by the_omicron » Thu Jul 03, 2008 6:05 pm

wow tyvm evildragon :D

i finally can made my menu goes horizontally :D

but i'm still a newb, so i have another questions, i hope u didn't frustrate to explain it to me :)

-How to make buttons transparent, like yours?

-How to make a new menu? i want to make chapter selection menu screen, how can i make it?

and the lamest question:

How to change the mm buttons font? :lol:


ty 4 ur help :D

User avatar
EvilDragon
Veteran
Posts: 284
Joined: Fri Dec 28, 2007 5:47 am
Location: Where the Dragons rule!
Contact:

Re: How To Make Menus become Horizontal

#9 Post by EvilDragon » Thu Jul 03, 2008 6:23 pm

In options.rpy:

Code: Select all

style.frame.background = None #if you want for ALL buttons to lose frames
style.button.background = None #if you want for ALL buttons to lose backgrounds (leaving only text)
style.mm_menu_frame.xpos = 0.5 #positions the main menu buttons horizontally (here it's dead center)
style.mm_menu_frame.ypos = 0.9 #positions the main menu buttons vertically (here it's close to the bottom)
style.mm_button_text.font = "fonts/bankgoth.ttf" #try to guess this one :P
style.mm_button_text.drop_shadow = [ (-1, -1), (1, -1), (-1, 1), (1, 1) ] #adds the outline to the buttons
style.mm_button_text.size = 24 #font size
style.mm_button.size_group = None #makes all buttons not having the same width
For chapter menu, you should add a new line in config.main_menu variable. Something like this:

Code: Select all

config.main_menu = [
        (u"Start", "start", "True"),
        (u"Continue", "load_screen", "True"),
        (u"Chapters", _intra_jumps("chapter_screen", "intra_transition", "True"),
        (u"Preferences", _intra_jumps("preferences_screen", "intra_transition"), "True"),
        (u"Exit", ui.callsinnewcontext("quit_prompt"), "True")
        ]
Then, you will have to make a new label called chapter_screen (or whatever you wish it to be called, just change the value in config.main_menu too!) and make your chapter select screen there, using UI functions probably. Also, you can use any transition that you would like, instead of intra_transition, if you will. Good luck!
Angels of paradise, angels of sacrifice
Please let me be under your wings...

User avatar
EvilDragon
Veteran
Posts: 284
Joined: Fri Dec 28, 2007 5:47 am
Location: Where the Dragons rule!
Contact:

Re: How To Make Menus become Horizontal

#10 Post by EvilDragon » Thu Jul 03, 2008 6:30 pm

mozillauser wrote: And while we're at it: Maybe there is a possibility to arrange certain menus, and not all menus, because sometimes it would be better to present horizontal menus and sometimes I want to show vertical ones. Therefore I'm looking for a solution, that is outside the options.rpy
It can probably be done with some style variables, and they are all meant to go to options.rpy.

Style variables that affect in-game menus are:

Code: Select all

style.menu = Style(style.default, help='the vbox containing an in-game menu')
style.menu_caption = Style(style.default, help='in-game menu caption text')
style.menu_choice = Style(style.default, help='text of an in-game menu choice')
style.menu_choice_button = Style(style.default, help='buttons containing in-game menu choices')
style.menu_choice_chosen = Style(style.menu_choice, help='text of an in-game menu choice that has been chosen')
style.menu_choice_chosen_button = Style(style.menu_choice_button, help='buttons containing chosen in-game menu choices')
style.menu_window = Style(style.window, help='a window containing a menu')
This is copied from 00style.rpy. It tells you all the components of the in-game menu. I reckon if you want to arrange the buttons horizontally, the solution is to use a hbox instead of vbox in style.menu function.

EDIT: I did it, I got horizontal in-game menus when I put this in options.rpy:

Code: Select all

style.menu = Style(style.hbox)
style.menu_window.xfill = False
style.menu_choice_button.xminimum = 0
style.menu_choice_button.xpadding = 6
Last edited by EvilDragon on Thu Jul 03, 2008 7:04 pm, edited 1 time in total.
Angels of paradise, angels of sacrifice
Please let me be under your wings...

the_omicron
Newbie
Posts: 10
Joined: Tue Jul 01, 2008 5:13 pm
Projects: Progress....... A Call From Heaven
Contact:

Re: How To Make Menus become Horizontal

#11 Post by the_omicron » Thu Jul 03, 2008 7:03 pm

Wow, tyvm m8 :D

Now I can make menu buttons become transparent and i can change the menu buttons text size too! :D

----------------

i have created label chapter_screen

now what should i do to make the chapter menu looks like scrolling save menu?

and where can i found preference_screen, save_screen, or load_screen labels?





wow u have helped me so much ! :D

User avatar
EvilDragon
Veteran
Posts: 284
Joined: Fri Dec 28, 2007 5:47 am
Location: Where the Dragons rule!
Contact:

Re: How To Make Menus become Horizontal

#12 Post by EvilDragon » Thu Jul 03, 2008 7:10 pm

Ugh, that's a little more of work that I cannot do right now, maybe somebody else would also like to chip in with some ideas.

Disregard my label names, I have customized my screens and thus changed the names of some labels in order to avoid conflicts. You just use the normal config.main_menu found here: http://www.renpy.org/wiki/renpy/doc/ref ... Game_Menus, only add a new line like I showed you.

You can find the .rpy files that make up save/load screens in Common/_layout directory. It's really complicated from there. Don't change anything in Common directory!

Making a new screen sure is some work to boot, so good luck. Once again, UI functions are your best call, and I even think that scrolling is a less appealing solution for chapter screen. My opinion is that it should be done more like a gallery, with page buttons and all that.
Angels of paradise, angels of sacrifice
Please let me be under your wings...

the_omicron
Newbie
Posts: 10
Joined: Tue Jul 01, 2008 5:13 pm
Projects: Progress....... A Call From Heaven
Contact:

Re: How To Make Menus become Horizontal

#13 Post by the_omicron » Fri Jul 04, 2008 4:14 am

wow, making a new menu seems so hard for a newb :shock:

ty for all your helps evildragon :D

maybe another member can help?

User avatar
EvilDragon
Veteran
Posts: 284
Joined: Fri Dec 28, 2007 5:47 am
Location: Where the Dragons rule!
Contact:

Re: How To Make Menus become Horizontal

#14 Post by EvilDragon » Fri Jul 04, 2008 4:34 am

Now that the morning has come, I can give you a few tips about making a chapter menu.

First one is: all your chapters should be in separate labels. So, for example, chapter 1 would be the default "label start:". Then, at the end of the first chapter, insert "jump ch_2" instead of "return", and after that, insert "label ch_2:". It looks like this:

Code: Select all

label start:
     
     # The whole first chapter text

     jump ch_2

label ch_2:

     # The whole second chapter text
You do this for all chapters in your game. Why are we doing this? Well, if you use renpy.seen_label before showing a button (or image) that will lead to that chapter (when on chapter screen), the button (image) will or will not be shown! So, if the player hasn't read chapter 5, but has read all up to that point, the chapter screen will show buttons (images) for the first four chapters, but not any other chapters! This is how you provide the functionality you want for your chapter screen. General rule of making these buttons is like this:

Code: Select all

if renpy.seen_label("insert chapter name here"):
     draw the button (image) that will link to the said chapter
Hope that helps a bit.
Angels of paradise, angels of sacrifice
Please let me be under your wings...

the_omicron
Newbie
Posts: 10
Joined: Tue Jul 01, 2008 5:13 pm
Projects: Progress....... A Call From Heaven
Contact:

Re: How To Make Menus become Horizontal

#15 Post by the_omicron » Fri Jul 04, 2008 6:44 am

i already made every chapter have their own label

like u have posted above :D


--

so if i want to show a chapter button after reader has finished the prev chapter, i can use


if renpy.seen_label("chapter name")
and then draw the button on the chapter selection screen rite?


thx m8 :D
Last edited by the_omicron on Fri Jul 04, 2008 12:11 pm, edited 1 time in total.

Post Reply

Who is online

Users browsing this forum: Google [Bot], Majestic-12 [Bot]