[Tutorial] Customizing Menus

[roankun]

Um, is there any way to move the erm, buttons(?) in the preferences menu? I'm not sure which ones to add, but when I try to change the grid, it always says something like grid too full or grid not full. My navigation bar is in the right side, not the bottom, so the preferences thingies kinda cover them...

EDIT: I was thinking of just using an image map since I'm still kinda at a loss with styles, but then I realized I had no idea how to use an imagemap for the bars (ie. volume, text speed). What I mean is, with styles, because of your tutorial, I now know how to change how they look, but I still don't know how to change their position... Would you kindly...

[Aleema]

Sorry for my late response.

Yes, I don't like using Grids much myself since they are SO fickle. You need exactly the amount you specify for it to work. So I understand.

Here's what I did to move the grid over when I skinned the Rapunzel game:

Code: Select all

screen load:

    # This ensures that any other menu screen is replaced.
    tag menu

    use navigation

    frame:
        xpos 280
        ypos 35
        xfill False
        xmaximum 525
        background None
        has vbox

As you can see, even though that's the load screen not prefs, I told the containing frame to start 280 pixels over (xpos), and 35 pixels from the top (ypos), and then I readjusted the xmaximum so it didn't spill off the screen. Not sure if it was necessary or not, I forget.

xpos/ypos are your best friends when positioning things.

If you let me know exactly what you want to do, I can definitely help you. Right now, I hear that you're doing both imagemaps AND styling? Is this correct?

[roankun]

No, well, I was initially going to use styling, since that seemed a lot easier (and I'm not a photoshop prodigy either XD) but the I couldn't change the positions without getting an error of sorts, so I switched to imagemaps, but that gave me a different headache. Coordinates are a pain.

Here's what the imagemap I worked on looked like:


Please don't ask why there're so many hearts. I'm not too sure myself.
I'm thinking of changing the design/layout (read: everything) though. After that week-long break from game-making, I realize I'm tired of all those hearts.

Well, for now, I guess, is it possible to use the erm, image frame thing for borders like mine (since they're cut off where there's text)?

And thanks for the tip. I haven't tried it yet, but maybe next week after my camp.

[Aleema]

First thing I want to say is to NOT have your navigation included in your preference/load/save imagemaps. That should be an imagemap all by itself that you define in "screen navigation." If that was just a design summary, sorry, just needed to warn you in case not.

That's an interesting question about your boxes as frames. I'm going to say no, that would not be possible, unless you made one for every variation/word length. I would suggest either making an image for each box (including the text title) or go the imagemap route here. Which you seem to be wanting to do. Coordinates are a pain though, I agree.

I never said customizing menus was easy, unfortunately. ^^; They usually take some hard work, especially if you're relatively new with them. I remember it took me WEEKS to make my first menu, and even more time figuring out what the heck I did wrong when there were graphic glitches.

And I don't see a problem with the hearts.

[roankun]

Truthfully, I hadn't put the pref and nav bar together initially. But then the nav bar won't work, so I put them together. Nevermind that though. I already switched to a different layout (using styling this time).

Thanks! The xpos and xmaximum worked wonders.

Erm, one more question though.

Code: Select all

vbox:
    #top widgets
    hbox:
        vbox:
            #column 1 widgets
        vbox:
            #column 2 widgets

I was wondering, does this still go under grid? Something always seems to go wrong...
Erm... say there's two columns. But at the bottom, I want the text speed, music and sound bars to cover the space of the two columns. I know I'm supposed to use something like this, but it won't work.. somehow...

P.S. I got rid of the hearts. XD

EDIT: And, um, another thing. For the bars, what if I don't have/want a thumb? I don't have one, but there's still thing dark, thing that appear at the end of the bar...

[Aleema]

Don't use a grid at all. There's no reason to: you are manually placing where you want each widget (preference). The only use of a grid is to align everything perfectly even with each other, but it's fickle and breaks easily.
Avoid it completely:

Code: Select all

screen preferences:

    tag menu

    # Include the navigation.
    use navigation
    
    vbox:
        #top widgets
        hbox:
            vbox:
                #column 1 widgets
            vbox:
                #column 2 widgets
        #bottom widgets

If you want to add something on the bottom that covers both columns, you'd place it in the "bottom widgets" area. The tabbing is very important here to tell Ren'Py where each widget should go. As you can see, the #bottom aligns with the #top, so they are in the same vbox (and will stack on top of each other). You DO NOT NEED any top widgets (or bottom widgets) for this to work. All vbox/hbox does is tell Ren'Py whether to place something to the right or the bottom of the previous widget. Play around with vbox/hbox if you're unsure how they work, and it will become second nature to you.

EDIT: And, um, another thing. For the bars, what if I don't have/want a thumb? I don't have one, but there's still thing dark, thing that appear at the end of the bar...

I know, and I hate that, too. All I can say is to try and do the no-thumb procedures I listed in my opening post, or to do a Photoshop trick so that the bar can completely fill: open up your bar images, and then give it space on the right side of the image (make sure to readjust any xmaximum you had set for the bar before). This will trick Ren'Py into thinking the end of the bar is farther over to the right and then your full bar will finally overlap with the end of your empty bar. You might have to play around with different right margins to get it right. Here's one of my bar graphics to show you what I mean:

bar_music_empty.png (2.2 KiB) Viewed 3667 times

bar_music_full.png (2.13 KiB) Viewed 3667 times

[renpao]

Thank you so much for making this!
I really wanted to make my own customized menu, but was too afraid to touch it in fear of messing things up. Your guide made me understand a lot of things that I feel slightly confident to try making one. So thank you! You're such a big help. :'D

[roankun]

I see. It worked this time.
I can't seem to stretch the buttons above though, but I'm sure that just fatigue speaking. I'll remember tomorrow. XD
Thank you very much!

[Glitter]

Being a disastrously newbie to this... well, any - Kind of programming, I tried to simply follow the tutorial. Imagemaps... didn't seem to work as well as I would have liked, but no biggie - Styles worked much better on that front! I have a question or two however.

I got down to style bars, using the images off this this picture that was provided (edited in Paint to just cut out the bars, just to try the code and such.) Most every thing worked flawlessly; what didn't was the bars. They went in fine and all, but they're very small, very thin, and thumb.png sits waaay to the right of the graphic's slide (but at least the thumb.png looks appropriate!) I THOUGHT that Ren'Py would... stretch the image, I guess? to be the appropriate size, but I might be over-estimating the capabilities. :3 Is it just that I needed a larger full_bar, empty_bar, hover_bar, or did I miss something?

Second question that comes to mind is, in the final image, the menu buttons (Return, Save, Load, etc) are situated along the bottom, and that above-linked reference has a navigation_hover, navigation_idle, navigation_selected_hover and navigation_selected_idle png; I assume they should each be a SEPARATE image unto themselves for use in the code (correct me if I'm wrong!) Can I assume that the buttons were moved over via styling, as well? If yes, would the code for that be placed in the same area with the same code (style) or some where else? If not, where at, and is there a handy-dandy step-by-step tutorial for pushing them over or something?

Thanks for any replies and patience with a humble beginner with large aspirations. :3

[Aleema]

If you could post your bar images, I could perhaps tell what the problem is. Bars have been a pain in the butt for a lot of people. Sorry they're so ... fragile! I usually have to babysit them myself, too.

When you edited the graphics from the sample game, did you adjust their length or height? If so, that should be reflected in the code. Find:

Code: Select all

    style.pref_slider.ymaximum = 29
    style.pref_slider.xmaximum = 197

And set those numbers to the actual height and width of your new images.

Also, if I've completely misunderstood you, you have taken this exact image and cropped/exported the bars in there? If so, that was totally unnecessary and actually kinda funny. xD That was just a screencap of my project folder. Those images, in their full size, already exist in the game folder. Here they are if you can't find them:

bar_full.png (1.24 KiB) Viewed 3638 times

bar_hover.png (1.24 KiB) Viewed 3638 times

bar_empty.png (611 Bytes) Viewed 3638 times

2nd question: The final screen that you see is the combination of two types: imagemap and style. The preference screen (the upper part) is styling, the navigation bar (Return, Save, Load, etc) was an imagemap. Yes, each state of an imagemap must be its own image. That is why there are 5 image versions of the navigation. How did I get the navigation to be at the bottom? You're going to kick yourself: They're on the bottom of the image.

See how I have huge open spaces of nothing and then the buttons on the bottom? That's the easy way to do imagemaps. Make every image the fullsize of the screen and then place the items exactly where you want in your photo editor. I'm sure you could make smaller imagemaps and then place them manually, but why? Just use styling if you're going to go through that trouble. xD

The navigation is a separate screen all together, so I was allowed to mix imagemap and styles in one screen, since they're technically two screens, overlapped.

Am I making sense? Have you downloaded the sample game in the first post? All of the images in this picture are in the "menu" folder inside of it.

[Glitter]

Much obliged for the speedy retort, Aleema!

For the first bit: Yes. Yes, I did mangle and cut a copy/paste of that exact image. Which is even more funny, because I think I snagged the bar images from the sample game! 3: Coding is not in my blood, or general proximity, clearly. After I facepalmed and changed the thumb.png placement, as a test, THAT at least oriented itself into the proper place (for the most part, since cut jobs in Paint are surprisingly inaccurate and my hack-job bars were kind-of... not entirely lining up exactly!) The size of the bars was still ver' small, but that's to be expected from small base images! Switched them out with the bars from the sample game, and it looked much, much more groovy.


For the second bit: .. hm. If I'm understanding correctly... It would just need the five navigation_ pngs, to make an imagemap like that and it... layers in some way that only the selected button changes? Is that it? S..so how would that work? And... that's how the main menu (and not just the buttons at the bottom of the Options screen) is set up, right? Huff, unfortunately I'm a more.. visual person, so just hearing the description of how it ought works makes my brain go "splt?" heh.

[SilentWolfie]

I'll add in some of the the things I found about the ATL codes for Click to Continue button icon... first time I saw the wiki I completely didn't understand what it meant. I experimented for like 2 hours. Frustrating.

http://www.renpy.org/wiki/atl#Animation ... n_Language

Code: Select all

# <---- this sign allows the renpy program to ignore the all codes and lines. ATL block are simply declared by          image NameAnImageWhateverYouWant :

image ctc1:
        "ctc1.png",           #image file name in default "[u]game[/u]" folder. If in another folder, i.e, "Images/ctc1.png"
        0.08                  #this represents the time to for ctc1.png to appear on screen. Probably means 0.08 seconds.
        "ctc2.png", 
        0.08                  #etc, etc. I made 25 pngs with 0.08 sec timing, so it's ended up like ...."ctc25.png"
        repeat.               #eventually I ended up with repeat. This allows me to loop the 25 pngs into an animation of a Click to Continue indicator.

#I also fiddled with rotate, rotate_pad. This controls the png that you wish to use for rotation. i.e

#       "ctc1.png", 
#       rotate_pad 1.0 
#       linear 3.0 rotate 720 #I believe linear controls timing. So it means here, rotate 720 degrees in 3.0 seconds.
#       repeat
# Unfortunately I have no idea why repeat doesn't work in this case... so you can't use this for a Click to Continue indicator

    $ narrator = Character(None, ctc="ctc1") 

# declaration of narrator to use ctc1 which is an image you declared earlier.
# ATL codes are *definitely* much better than Animation() codings. Don't ask me why, but I think there's a limitation on the Animation()

[Candedus]

Thanks you very much !
this is really helpful ^ v ^ !
I'll make sure to come back when I have some questions > u <

[badspeler]

How would you do a preferences screen as an image map? Or is it not possible to do so with bars...

[Aleema]

You make the hotspot for the bars the height and width of the bar on the image. It will have a bar behavior based on the action you give it. The actions should match the ones that already exists in screen preferences, or here.

Look, the imagemap example itself IS a preference screen.