In-game menu buttons

[Darkling]

Hi, just a couple of questions about in-game menu buttons.

1) Is it possible to make the in-game menu buttons look different to the main menu buttons?

2) How can I make the in-game buttons semi-transparent? (This is why I'd like the in-game buttons to be different to the main menu buttons, if possible, because I'd like the main menu buttons to be opaque.)


PS I didn't realise that registering with my username uncapitalised meant that my name would always display uncapitalised. Is there a way to fix that? Sorry!

[mikey]

Welcome to the forums! A bit offtopic... are you by any chance the Darkling who is working on Kana: Eternity? (together with Zero)

[Jake]

1) Is it possible to make the in-game menu buttons look different to the main menu buttons?

I'm pretty sure the answer is 'yes', but I'm at work at the moment so I can't double-check. Have a look in the manual for some pointers on styling your game; as it mentions at that link, if you have config.developer (in options.rpy, I believe) set to True you can hit Shift-D to help find the style you need to change in your layout.

2) How can I make the in-game buttons semi-transparent? (This is why I'd like the in-game buttons to be different to the main menu buttons, if possible, because I'd like the main menu buttons to be opaque.)

There's a couple of ways I can think of, offhand.

Firstly, all the buttons are created as graphics, using the 'Frame' displayable, which allows for neat resizing... so one option would just be to create a different graphic for your in-game buttons and set the alpha on that graphic to make them semi-transparent.

Secondly, since Frame takes an Image object, you could also change the style to use the same graphic, but use im.Alpha to manipulate the alpha to suit your needs.

PS I didn't realise that registering with my username uncapitalised meant that my name would always display uncapitalised. Is there a way to fix that? Sorry!

(I was under the impression it was at least theoretically possible on PHPBB to allow users to change their own display name, but I don't see the option in the control panel, it may be disabled on this forum. I guess the best bet is to ask an admin nicely...

[PyTom]

I went ahead and changed darkling to Darkling. You may need to use upper-case when logging in.

[Darkling]

(I was under the impression it was at least theoretically possible on PHPBB to allow users to change their own display name, but I don't see the option in the control panel, it may be disabled on this forum. I guess the best bet is to ask an admin nicely...

Yes, I thought changing the display name was possible too, but I went looking for the option when I realised my mistake, and I couldn't find it. Thanks for changing it for me, PyTom. I found that I can still log in with a lower case 'darkling' as my user name.

Welcome to the forums! A bit offtopic... are you by any chance the Darkling who is working on Kana: Eternity? (together with Zero)

Well, I'm not really working on it. JPop wrote the story, Zero and I helped to edit it, and Zero is turning them into Flash movies. My role at the moment is basically just QA - I look at the movies when Zero is done with them, and suggest changes or refinements.

Oh wait, I remember you now. You compiled that list of bishoujo games and fan-created works. You had some very nice things to say about Zero's Fanfic Flash movies, as I recall. =)

I found that I've gotten the urge to do something interactive that's Kana Little Sister related. I don't have Zero's expertise with Flash, so Ren'Py seemed like a good option. I've been playing around with it for a few days now, trying to settle on a look for my project. I was able to create a new frame for the text window, but the in-game buttons have me stumped at the moment. I'm still pretty new at this Ren'Py thing!

Thanks for the advice, Jake.

I had layout.button_menu (): enabled. The manual says 'This changes the in-game menus to use buttons defined in the current theme.' So I disabled it, and nothing changed. I guess I have to define a new button style for in-game buttons now.

I went into the developer menu and found the name of the style I want to change - style.menu_choice_button. However, I have no idea how to redefine a style. Does anyone have any advice?

[PyTom]

I'd prefer not to allow free name changing, on the grounds that if I did certain forum members... and they know who they are... would make overly enthusiastic use of the feature.

With regard to changing the buttons, the first thing I need to know is what you want to change them to. It's hard to give completely generic advice, as there are lots of different ways that the menu can be changed.

[Darkling]

Well, I'd like them to be the same basic shape as they are now, but with a bit more space around the text to the top and bottom (maybe 8 pixels more padding).

I'd also want them to be transparent black (alpha of 0.6) with white text, changing to transparent purple (alpha of 0.7) when highlighted. The purple I'm using is #be38ff or (190,56,255).

Also, is it possible to increase the amount of spacing between the buttons? Currently it seems to be about 4 pixels, but I'd prefer 15.

Thanks for your help with this! =)

[PyTom]

Okay. I'm assuming you're using Ren'Py 6.6.1, and you haven't enabled the compatibility mode.

The first thing you want to do is to change the button backgrounds, using a call to RoundRect. The code to do this looks like:

Code: Select all

init python:
    style.menu_choice_button.idle_background = RoundRect("#00000099")
    style.menu_choice_button.hover_background = RoundRect("#be38ffb3")

The padding at the top of the bottom is controlled by style.menu_choice_button.ypadding:

Code: Select all

init python:
    style.menu_choice_button.ypadding = 10

Finally, the inter-button spacing is controlled by style.menu.box_spacing. For example:

Code: Select all

init python:
    style.menu.box_spacing = 10

I'm somewhat surprised you're not using NVL-mode, which for quite a while was known as Kana-mode, and featured Kana-inspired defaults.

[Darkling]

Excellent! Thank you so much for your help. I played around with the alpha values and the spacing to find settings that I liked, and I think it all looks great now. =)

I found out about NVL mode when I was already a little way into my Ren'Py research, but it didn't really tempt me. There have already been a couple of KLS fan projects that duplicate the style of the original game (Kana Fanfic Flash and Kana Eternity), so I felt that it wouldn't really be novel (pun unintended) anymore. I much prefer the more contemporary approach of having a dialogue window and not obscuring the graphics with text.

Of course, the downside to that is that I'm limited to three-line paragraphs (since I don't want to disrupt the illusion by having the dialogue window stretched vertically), but I think I can work with that. It's just a matter of adapting my storytelling to this new medium.

Anyway, now that I've more or less finished the visual design phase, it's time to move on to actual content. I wrote a bit of a nonsense script to try out the various Ren'Py functions (menus, variables, if statements, and so on), and I think I've got a decent handle on the basics.

Thanks again for your help. Much appreciated!

[Cart]

How did you manage to get the box with the character name on top on the box with the text?
Thanks.

[Darkling]

First I included this line:

Code: Select all

init python:
    style.window.yminimum = 130

That gave me a dialogue window 130 pixels high, which would fit the character's name and three lines of dialogue, with the font size I was using.

Then I went into the game and took a screenshot. I pasted the screenshot into Photoshop and built a frame on top of the dialogue window, on a new layer. I added transparent backgrounds to my frame on a separate layer. Then I removed the background (ie my original screenshot) and cropped the graphic to the edges of my new frame. I saved the graphic as frame.png.

Code: Select all

init python:
    style.window.background = Frame("frame.png", 12, 12)

That loaded my image as the background for the dialogue window. I then tinkered with the margins (space between the edges of the screen and the frame) and the padding (space between the frame and the text inside) to make the text sit neatly inside the frame.

Code: Select all

init python:
    style.window.left_margin = 8
    style.window.right_margin = 8
    style.window.top_margin = 8
    style.window.bottom_margin = 8

    style.window.left_padding = 19
    style.window.right_padding = 10
    style.window.top_padding = 3
    style.window.bottom_padding = 10

I had to go back and modify my frame graphic a couple of times. Originally the name box was too tall and was dominating the window, so I made it shorter. I also made the name box wider than it originally was, in case I have characters with longer names later on (at that point, I only had characters with four-letter names: Kana, Taka, Miki, etc).

I'm pretty sure that I've forgotten a couple of steps - ie changing the original dialogue window from a box to one with rounded edges. And there's a function that creates a separate box for the character name, but I only discovered that after I'd already created my frame. I think the end result would have been the same in that regard anyway. I would have still had to create my own frame to get the look I wanted.

Ah, I found the rounded window function for the dialogue window. In options.rpy, I changed rounded_window under theme.roundrect( to this:

Code: Select all

    rounded_window = True,

[Cart]

Okay thanks for you reply!

I was using show_two_window=True and show_two_window_vbox_properties={'box_spacing':-20} but the name would be under the text so the result was not what I had in mind...

[mikey]

I found that I've gotten the urge to do something interactive that's Kana Little Sister related. I don't have Zero's expertise with Flash, so Ren'Py seemed like a good option. I've been playing around with it for a few days now, trying to settle on a look for my project. I was able to create a new frame for the text window, but the in-game buttons have me stumped at the moment. I'm still pretty new at this Ren'Py thing!?

In that case, good luck with your project! (and indeed the frame is really nice)

[Darkling]

In that case, good luck with your project! (and indeed the frame is really nice)

Thanks, mikey. Now I just need to figure out a story to go with it.

I was coming up with lots of ideas before I started experimenting with what Ren'Py could do, but then I think I got caught up in editing graphics and learning the scripting commands, and now I don't remember what my ideas were, for the most part. So I'm starting pretty much from scratch again. But I'll keep soldiering on, and hopefully something will start to gel. =)