[Solved] Help Turning Quick Menu into Imagebuttons

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
User avatar
Tritium
Newbie
Posts: 8
Joined: Wed Jul 01, 2015 4:40 pm
Location: London, UK
Contact:

[Solved] Help Turning Quick Menu into Imagebuttons

#1 Post by Tritium »

Hello, I know similar questions have been posted but I've been through them all (and the tutorials) multiple times for about 5 hours (not even exaggerating) and I'm about to tear my teeth out trying to figure this one out. Please help me!

I've been trying to simply turn the quick menu text into buttons and I've tried many code variations to no avail.

This is terrifyingly embarrassing for me to bare my ignorance like this so please be kind =[
edit: code tag
edit: SOLVED! (sorry if Mods are the only ones allowed to do this)

1. Is my button image meant to have the _% in the name? e.g menu_%s.png
2. If I leave it in the gui folder, do I code it in as "gui/menu_%s.png" ?
3. Do I edit the quick menu under the Quick Menu Screen in screens.rpy?
4. What am I doing wrong when I do this in screens.rpy?

Code: Select all

screen quick_menu():

    # Ensure this appears on top of other screens.
    zorder 100
    
    # Add an in-game quick menu.
    hbox:
        style_prefix "quick"

        xalign 0.5
        yalign 1.0

        textbutton _("Skip") action Skip() alternate Skip(fast=True, confirm=True)
        textbutton _("Auto") action Preference("auto-forward", "toggle")
        imagebutton auto "gui/menu_%s.png" action ShowMenu('preferences')
Last edited by Tritium on Fri Nov 25, 2016 5:39 pm, edited 2 times in total.

User avatar
Ocelot
Lemma-Class Veteran
Posts: 2407
Joined: Tue Aug 23, 2016 10:35 am
Github: MiiNiPaa
Discord: MiiNiPaa#4384
Contact:

Re: Help Turning Quick Menu into Imagebuttons

#2 Post by Ocelot »

1. Is my button image meant to have the _% in the name? e.g menu_%s.png
No. %s is a substitution mark: it will be replaced by property name. It was used to avoid need to restate basicly same thing several times

Code: Select all

auto 'something_%s.png'
# Works as if we defined following (line breaks added for clarity)
idle 'something_idle.png'
hover 'something_hover.png'
insensitive 'something_insensitive.png'
selected_idle 'something_selected_idle.png'
selected_hover 'something_selected_hover.png'
If there is property explicitely defined, it would not be defined again by auto. If there is no corresponding image, property will not be defined by auto.
If I leave it in the gui folder, do I code it in as "gui/menu_%s.png" ?
Well, yes, it is a correct path for images in gui folder.
Do I edit the quick menu under the Quick Menu Screen in screens.rpy?
Yes, it is a quick menu screen shown by default.
What am I doing wrong when I do this in screens.rpy?
And what is wrong? Does it not work? Gives you an error? Something else?

And use [ code ] tags when posting code. It preserves indentation which is important in Python and RenPy.

There is also a similar thread: viewtopic.php?f=8&t=41322
< < insert Rick Cook quote here > >

User avatar
Tritium
Newbie
Posts: 8
Joined: Wed Jul 01, 2015 4:40 pm
Location: London, UK
Contact:

Re: Help Turning Quick Menu into Imagebuttons

#3 Post by Tritium »

Thanks for a speedy reply. Let me re-kerjigger some parts of the code with your info and see what happens.
More suggestions from others are still welcome!

User avatar
Tritium
Newbie
Posts: 8
Joined: Wed Jul 01, 2015 4:40 pm
Location: London, UK
Contact:

Re: Help Turning Quick Menu into Imagebuttons

#4 Post by Tritium »

OK, I've already read over the link Ocelot kindly provided me many times and I've tried to even replicate word for word the code.

My menu button is named menu2_idle.png in the gui folder.
I've created a new renpy project that hasn't been altered in any way except for this one section.
I have put this under screens.rpy:

Code: Select all

screen quick_menu():

    # Ensure this appears on top of other screens.
    zorder 100

    # Add an in-game quick menu.
    hbox:
        style_prefix "quick"

        xalign 0.5
        yalign 1.0

        imagebutton auto "gui/menu2_%s.png" action ShowMenu('preferences')
and the resulting exception (do you need to see the full traceback too?) says:

Code: Select all

I'm sorry, but an uncaught exception occurred.

While running game code:
  File "game/script.rpy", line 26, in script
    "Hello, world."
  File "renpy/common/000window.rpy", line 76, in _window_auto_callback
    _window_show()
  File "renpy/common/000window.rpy", line 49, in _window_show
    renpy.with_statement(trans)
  File "game/screens.rpy", line 248, in execute
    screen quick_menu():
  File "game/screens.rpy", line 248, in execute
    screen quick_menu():
  File "game/screens.rpy", line 254, in execute
    hbox:
  File "game/screens.rpy", line 268, in execute
    imagebutton auto "gui/menu2_%s.png" action ShowMenu('preferences')
Exception: Not a displayable: None
What in the blazes am I doing wrong?

User avatar
Ocelot
Lemma-Class Veteran
Posts: 2407
Joined: Tue Aug 23, 2016 10:35 am
Github: MiiNiPaa
Discord: MiiNiPaa#4384
Contact:

Re: Help Turning Quick Menu into Imagebuttons

#5 Post by Ocelot »

Are you sure that you have saved screens file and not just left it open in editor?

I have just created new project, replaced quick_menu code with one you have provided, and created menu2_idle.png in GUI directory. Everything is working: http://puu.sh/ssf1u/34c66a1656.jpg (red thing is a button image)

Are you sure that you have named file correctly? No stray spaces at the end of name?
< < insert Rick Cook quote here > >

User avatar
Tritium
Newbie
Posts: 8
Joined: Wed Jul 01, 2015 4:40 pm
Location: London, UK
Contact:

Re: Help Turning Quick Menu into Imagebuttons

#6 Post by Tritium »

Hello again, there must be something I'm missing here...
I've saved and closed Editra, closed and reopened the RenPy project and it's still the same problem.
Perhaps there is something else wrong so I'm just going to throw some things out here.

Is my image incorrectly formatted? My button image is a small 85x65 .png image. There are no empty spaces or strings in the name.

Am I supposed to input other lines of code in the section underneath where it has init python and style quick_buttons?

Could this be an error of Editra/RenPy due to faulty download? Perhaps an uninstall and reinstall of RenPy and all associated files will help?

I bet the problem is something very simple and I'm too idiotic to spot it...

User avatar
Ocelot
Lemma-Class Veteran
Posts: 2407
Joined: Tue Aug 23, 2016 10:35 am
Github: MiiNiPaa
Discord: MiiNiPaa#4384
Contact:

Re: Help Turning Quick Menu into Imagebuttons

#7 Post by Ocelot »

It should work as is. Are you sure that your file looks like second there and not like first? http://puu.sh/ssgZC/d1dbaa627f.png
I routinely have a problem with copy-pasting idle/etc. into names, as double-click selects spaces after word, so I have to delete them.

If you still cannot find the problem, you can just archive your test project and attach it here. It might be easier to find problem this way.
< < insert Rick Cook quote here > >

User avatar
Tritium
Newbie
Posts: 8
Joined: Wed Jul 01, 2015 4:40 pm
Location: London, UK
Contact:

Re: Help Turning Quick Menu into Imagebuttons

#8 Post by Tritium »

There aren't any errant spaces in the menu2_idle.png =[
The button image I drag and dropped into the GUI folder. Is there a problem that could arise from that?

The only alterations in code I've made are the ones that I've posted here. I don't know how to archive the entire project to put here and not sure if it will be worth it.

You said you pasted the code I posted into your project and it worked, so there isn't anything wrong with the code itself...perhaps I have the image in an incorrect place?

The image is located here:
C:\Users\[myname]\Documents\VN Projects\GUI Clean Test 2\game\gui

...don't tell me I'm forward-slashing instead of back-slashing? (No, that didn't work, erm...)
Or am I missing some bits in the address of:

Code: Select all

        imagebutton auto "gui/menu2_%s.png" action ShowMenu('preferences')
Thanks for your patience, Ocelot.

User avatar
Ocelot
Lemma-Class Veteran
Posts: 2407
Joined: Tue Aug 23, 2016 10:35 am
Github: MiiNiPaa
Discord: MiiNiPaa#4384
Contact:

Re: Help Turning Quick Menu into Imagebuttons

#9 Post by Ocelot »

For now try simple basic imagebutton:

Code: Select all

imagebutton idle "gui/menu2_idle.png" action ShowMenu('preferences')
If it wouldn't work, then you hit same problem that some people have with imagebuttons:
viewtopic.php?f=8&t=28033
viewtopic.php?f=8&t=14525
< < insert Rick Cook quote here > >

User avatar
Tritium
Newbie
Posts: 8
Joined: Wed Jul 01, 2015 4:40 pm
Location: London, UK
Contact:

Re: Help Turning Quick Menu into Imagebuttons

#10 Post by Tritium »

Thanks for the code but I end up with:

Code: Select all

I'm sorry, but an uncaught exception occurred.

While loading <'Image' 'gui/menu2_idle.png'>:
  File "game/script.rpy", line 26, in script
    "Hello, world."
  File "renpy/common/000window.rpy", line 76, in _window_auto_callback
    _window_show()
  File "renpy/common/000window.rpy", line 49, in _window_show
    renpy.with_statement(trans)
IOError: Couldn't find file 'gui/menu2_idle.png'.

Thanks for the two links as well, I noticed that they mention I need at least 2 images (1 idle, 1 hover), which may be causing problems? (Though apparently it was OK with your version).
I'll have a good read and test again soon.
My eyes are like @_@ and I've had to stop and do some yoga just to calm down from this, lol.

Thank you very much for your time, Ocelot, and I'll update this thread with my progress in the event other newbs are having the same problem as me.

TheOtherNewGuy
Regular
Posts: 26
Joined: Wed Nov 16, 2016 2:53 am
Contact:

Re: Help Turning Quick Menu into Imagebuttons

#11 Post by TheOtherNewGuy »

Hey, I'm the guy from the similar thread Ocelot linked. He helped me with this too.

I've only gotten as far as replacing the textbutton with the imagebutton, so I can't really explain further than that. One thing i can bring though is a beginner's perspective.

I got the image to show up where the textbutton was with only one image file. mine is called "button 2_idle.png", meaning I didn't need a "button 2_idle.png" and a button 2_hover.png" to make it work. Just "button 2_idle.png"

I'm assuming that youre using Ren'Py 6.99.11 and when you clicked on your new game you chose the "New Gui", cuz that's what I did. I pretty sure that you can make everything work with everything, but I don't know that much about code to figure out those work arounds.

As far as making the image show up, replacing the text with an image, all you need to do is.
1: Create your image.
2: Make sure the "_idle" is at the end of the name of the actual image in your folder "yourimage_idle.png" (not in the screens.rpy). I put this image in my gui folder.
3: in the quick_menu section of the screens.rpy, replace the

Code: Select all

textbutton _("Prefs") action ShowMenu('preferences')
(I noticed the code you shared above was trying to change the Preference button, so I'm using that line as well).

with

Code: Select all

 imagebutton auto "gui/yourimage_%s.png" action ShowMenu('preferences')
this is what my quick_menu block looks like and it worked for me. Again my image is called "button 2_idle.png"

Code: Select all

## Quick Menu screen 
## The quick menu is displayed in-game to provide easy access to the out-of-game
## menus.

screen quick_menu():

    # Ensure this appears on top of other screens.
    zorder 100

    # Add an in-game quick menu.
    hbox:
        style_prefix "quick"

        xalign 0.5
        yalign 1.0

        textbutton _("Back") action Rollback()
        textbutton _("History") action ShowMenu('history')
        textbutton _("Skip") action Skip() alternate Skip(fast=True, confirm=True)
        textbutton _("Auto") action Preference("auto-forward", "toggle")
        textbutton _("Save") action ShowMenu('save')
        textbutton _("Q.Save") action QuickSave()
        textbutton _("Q.Load") action QuickLoad()
        imagebutton auto "gui/button 2_%s.png" action ShowMenu('preferences')
This is all I needed to make the imagebutton show up instead of the textbutton. With this code right here, I see the default textbuttons, but instead of "Prefs" is my image button. I actually made another folder inside my gui folder called imagebuttons, and that worked too as long as I typed "gui/imagebuttons/button 2_%s.png"

Now, I noticed that you're code pretty much looks exactly like this and it still threw you errors, so all I can suggest is to make sure that your image is in the right folder, that the Ren'Py launcher itself is pointing to the right directory. (Preferences >> Launcher Preferences >> Projects Directory >> Where the folder of your current version of renpy resides), and triple and quadruple check for any typos.

Hope this helps, cuz this is all the advice i can give :D

User avatar
Tritium
Newbie
Posts: 8
Joined: Wed Jul 01, 2015 4:40 pm
Location: London, UK
Contact:

Re: Help Turning Quick Menu into Imagebuttons

#12 Post by Tritium »

Thanks for the help, OtherNewGuy (and thanks again to Ocelot).
I've finally worked through it!

The problem was the name of the original imagebutton file name. I had made it on photoshop and I guess due to a program quirk or human error on my part, the name of the button was menu2_idle.png.png (there were two .pngs!)
Clarification: file extensions were hidden as default in my normal folder view.

I only found out when I decided to use MS Paint to make a new, temporary, image with the same name and after I saved it with what I thought was the same name in the same folder, it appeared as a separate file.

There we go! As Ocelot originally surmised, there WAS a problem in the file name.

So for anyone getting a:

Code: Select all

IOError: Couldn't find file
or

Code: Select all

Exception: Not a displayable: None
check to see if the file name has an extra file extension in the name!

Post Reply

Who is online

Users browsing this forum: Ahrefs [Bot], Bing [Bot]