Display an image by clicking on a menu

A place to discuss things that aren't specific to any one creator or game.
Forum rules
Ren'Py specific questions should be posted in the Ren'Py Questions and Annoucements forum, not here.
Message
Author
User avatar
sambotte
Regular
Posts: 25
Joined: Thu Jun 23, 2016 11:56 am
Contact:

Display an image by clicking on a menu

#1 Post by sambotte » Wed Oct 10, 2018 2:01 pm

Hello.

I am currently working on a Ren'Py project. My question is simple.

I want to add a small drop-down menu in the upper right corner of my screen, which will display an image when the player clicks on it.

Is that possible ?

Thanks for your help.

Have a good day.

Sorry, my english is limited.

Sambotte

User avatar
Imperf3kt
Eileen-Class Veteran
Posts: 1950
Joined: Mon Dec 14, 2015 5:05 am
Location: Your monitor
Contact:

Re: Display an image by clicking on a menu

#2 Post by Imperf3kt » Wed Oct 10, 2018 4:08 pm

Easily done. You will need two screens, one to hold the button and one to show when the button is pressed.

Something like this should work as a bare minimum.

Code: Select all

screen button_screen():
    textbutton _("menu") action togglescreen("drop_menu")

screen drop_menu():
    #your menu goes here, use regular screen language.


label start:
    show screen button_screen
Warning: May contain trace amounts of gratuitous plot.
pro·gram·mer (noun) An organism capable of converting caffeine into code.

User avatar
sambotte
Regular
Posts: 25
Joined: Thu Jun 23, 2016 11:56 am
Contact:

Re: Display an image by clicking on a menu

#3 Post by sambotte » Wed Oct 10, 2018 4:15 pm

I will test this process and come back to you.

Thank you very much.

User avatar
sambotte
Regular
Posts: 25
Joined: Thu Jun 23, 2016 11:56 am
Contact:

Re: Display an image by clicking on a menu

#4 Post by sambotte » Wed Oct 10, 2018 4:21 pm

I am not a software professional. Can you tell me where do I insert the code?

Exemple :

Code: Select all

# Vous pouvez placer le script de votre jeu dans ce fichier.
screen button_screen():
    textbutton _("menu") action togglescreen("drop_menu")

screen drop_menu():
#Votre menu va ici, utilisez la langue d'écran habituelle.

# Déclarez sous cette ligne les images, avec l'instruction 'image'
image plage = "plage.png"
image explications ="explications.png"
image chargement = "chargement.png"
image affiche developpeur = "affiche_developpeur.png"
image groupe1 = "groupe1.png"
image crabes = "crabes.png"
image recolte = "recolte.png"
image inventaire = "inventaire.png"

# Déclarez les personnages utilisés dans le jeu.
define c = Character('CONSEIL', color="#c8ffc8")
define v = Character('Vous', color="#c8ffc8")
define t = Character('Trebor', color="#c8ffc8")
define y = Character('Yram', color="#c8ffc8")
define j = Character('Jennifer', color="#c8ffc8")


# Le jeu commence ici
label start:

    show screen button_screen

    play music "intro.mp3" fadeout 1
    queue music "intro.mp3"

    scene affiche developpeur
    with Dissolve(1.5)
    pause 3.5

    scene explications
    with Dissolve(1.5)
    pause 0.5
ERROR :

Code: Select all

I'm sorry, but errors were detected in your script. Please correct the
errors listed below, and try again.


File "game/script.rpy", line 5: screen expects a non-empty block.
    screen drop_menu():
                       ^

Ren'Py Version: Ren'Py 7.1.0.882
Wed Oct 10 22:28:00 2018

User avatar
Imperf3kt
Eileen-Class Veteran
Posts: 1950
Joined: Mon Dec 14, 2015 5:05 am
Location: Your monitor
Contact:

Re: Display an image by clicking on a menu

#5 Post by Imperf3kt » Wed Oct 10, 2018 5:41 pm

It's preferred to put screens in screens.rpy but where you have them is fine.

The problem is that the drop menu is empty. You need to put something in it. I didn't know what you want to use it for, so left it blank.
You mentioned an image, so maybe just:

Code: Select all

# Vous pouvez placer le script de votre jeu dans ce fichier.
screen button_screen():
    textbutton _("menu") action togglescreen("drop_menu")

screen drop_menu():
#Votre menu va ici, utilisez la langue d'écran habituelle.
    add "images/plage.png" 
Qqq
# Déclarez sous cette ligne les images, avec l'instruction 'image'
image plage = "plage.png"
image explications ="explications.png"
image chargement = "chargement.png"
image affiche developpeur = "affiche_developpeur.png"
image groupe1 = "groupe1.png"
image crabes = "crabes.png"
image recolte = "recolte.png"
image inventaire = "inventaire.png"

# Déclarez les personnages utilisés dans le jeu.
define c = Character('CONSEIL', color="#c8ffc8")
define v = Character('Vous', color="#c8ffc8")
define t = Character('Trebor', color="#c8ffc8")
define y = Character('Yram', color="#c8ffc8")
define j = Character('Jennifer', color="#c8ffc8")


# Le jeu commence ici
label start:

    show screen button_screen

    play music "intro.mp3" fadeout 1
    queue music "intro.mp3"

    scene affiche developpeur
    with Dissolve(1.5)
    pause 3.5

    scene explications
    with Dissolve(1.5)
    pause 0.5
The bit I added was here:

Code: Select all

screen drop_menu():
#Votre menu va ici, utilisez la langue d'écran habituelle.
    add "images/plage.png" 
Warning: May contain trace amounts of gratuitous plot.
pro·gram·mer (noun) An organism capable of converting caffeine into code.

User avatar
sambotte
Regular
Posts: 25
Joined: Thu Jun 23, 2016 11:56 am
Contact:

Re: Display an image by clicking on a menu

#6 Post by sambotte » Wed Oct 10, 2018 6:00 pm

OK, I will test this process and come back to you.

Thank you very much.

User avatar
sambotte
Regular
Posts: 25
Joined: Thu Jun 23, 2016 11:56 am
Contact:

Re: Display an image by clicking on a menu

#7 Post by sambotte » Wed Oct 10, 2018 6:16 pm

No, error ... I do not understand!

# Vous pouvez placer le script de votre jeu dans ce fichier.
screen button_screen():
textbutton _("menu") action togglescreen("drop_menu")

screen drop_menu():
add "images/inventaire.png"

#Votre menu va ici, utilisez la langue d'écran habituelle.

# Déclarez sous cette ligne les images, avec l'instruction 'image'
image plage = "plage.png"
image explications ="explications.png"
image chargement = "chargement.png"
image affiche developpeur = "affiche_developpeur.png"
image groupe1 = "groupe1.png"
image crabes = "crabes.png"
image recolte = "recolte.png"
image inventaire = "inventaire.png"

# Déclarez les personnages utilisés dans le jeu.
define c = Character('CONSEIL', color="#c8ffc8")
define v = Character('Vous', color="#c8ffc8")
define t = Character('Trebor', color="#c8ffc8")
define y = Character('Yram', color="#c8ffc8")
define j = Character('Jennifer', color="#c8ffc8")

# Le jeu commence ici
label start:

play music "intro.mp3" fadeout 1
queue music "intro.mp3"

scene affiche developpeur
with Dissolve(1.5)
pause 3.5

scene explications
with Dissolve(1.5)
pause 0.5

"Bonne chance !"

stop music fadeout 1

scene chargement
with Dissolve(1.5)
pause 4.0

scene plage
show groupe1 at topleft
with Dissolve(1.5)
pause 1.5

play music "plage.mp3" fadeout 1
queue music "plage.mp3"

#Zone 1 - La plage
#-----------------
"Vous avez naufragé sur une île étrange."
"Vous devez trouver un moyen de retourner chez vous."
"Trebor et vous devez-vous remettre de vos émotions si vous souhaitez survivre !"
"Vous reprenez vos esprits."

show screen button_screen

Code: Select all

I'm sorry, but an uncaught exception occurred.

While running game code:
  File "game/script.rpy", line 80, in script
    menu:
  File "game/script.rpy", line 2, in execute
    screen button_screen():
  File "game/script.rpy", line 2, in execute
    screen button_screen():
  File "game/script.rpy", line 3, in execute
    textbutton _("menu") action togglescreen("drop_menu")
  File "game/script.rpy", line 3, in keywords
    textbutton _("menu") action togglescreen("drop_menu")
NameError: name 'togglescreen' is not defined

-- Full Traceback ------------------------------------------------------------

Full traceback:
  File "game/script.rpy", line 80, in script
    menu:
  File "C:\Users\Sambotte\Downloads\Logiciels\renpy-7.1.0-sdk\renpy\ast.py", line 1551, in execute
    choice = renpy.exports.menu(choices, self.set)
  File "C:\Users\Sambotte\Downloads\Logiciels\renpy-7.1.0-sdk\renpy\exports.py", line 897, in menu
    rv = renpy.store.menu(items)
  File "C:\Users\Sambotte\Downloads\Logiciels\renpy-7.1.0-sdk\renpy\exports.py", line 1084, in display_menu
    rv = renpy.ui.interact(mouse='menu', type=type, roll_forward=roll_forward)
  File "C:\Users\Sambotte\Downloads\Logiciels\renpy-7.1.0-sdk\renpy\ui.py", line 289, in interact
    rv = renpy.game.interface.interact(roll_forward=roll_forward, **kwargs)
  File "C:\Users\Sambotte\Downloads\Logiciels\renpy-7.1.0-sdk\renpy\display\core.py", line 2662, in interact
    repeat, rv = self.interact_core(preloads=preloads, trans_pause=trans_pause, **kwargs)
  File "C:\Users\Sambotte\Downloads\Logiciels\renpy-7.1.0-sdk\renpy\display\core.py", line 3049, in interact_core
    root_widget.visit_all(lambda i : i.per_interact())
  File "C:\Users\Sambotte\Downloads\Logiciels\renpy-7.1.0-sdk\renpy\display\core.py", line 521, in visit_all
    d.visit_all(callback, seen)
  File "C:\Users\Sambotte\Downloads\Logiciels\renpy-7.1.0-sdk\renpy\display\core.py", line 521, in visit_all
    d.visit_all(callback, seen)
  File "C:\Users\Sambotte\Downloads\Logiciels\renpy-7.1.0-sdk\renpy\display\core.py", line 521, in visit_all
    d.visit_all(callback, seen)
  File "C:\Users\Sambotte\Downloads\Logiciels\renpy-7.1.0-sdk\renpy\display\screen.py", line 424, in visit_all
    callback(self)
  File "C:\Users\Sambotte\Downloads\Logiciels\renpy-7.1.0-sdk\renpy\display\core.py", line 3049, in <lambda>
    root_widget.visit_all(lambda i : i.per_interact())
  File "C:\Users\Sambotte\Downloads\Logiciels\renpy-7.1.0-sdk\renpy\display\screen.py", line 434, in per_interact
    self.update()
  File "C:\Users\Sambotte\Downloads\Logiciels\renpy-7.1.0-sdk\renpy\display\screen.py", line 619, in update
    self.screen.function(**self.scope)
  File "game/script.rpy", line 2, in execute
    screen button_screen():
  File "game/script.rpy", line 2, in execute
    screen button_screen():
  File "game/script.rpy", line 3, in execute
    textbutton _("menu") action togglescreen("drop_menu")
  File "game/script.rpy", line 3, in keywords
    textbutton _("menu") action togglescreen("drop_menu")
  File "<screen language>", line 3, in <module>
NameError: name 'togglescreen' is not defined

Windows-8-6.2.9200
Ren'Py 7.1.0.882
Strange Island 0.1
Thu Oct 11 00:17:07 2018

User avatar
Imperf3kt
Eileen-Class Veteran
Posts: 1950
Joined: Mon Dec 14, 2015 5:05 am
Location: Your monitor
Contact:

Re: Display an image by clicking on a menu

#8 Post by Imperf3kt » Wed Oct 10, 2018 6:26 pm

Oops, sorry. That's my error.
It should be ToggleScreen
https://www.renpy.org/doc/html/screen_a ... ggleScreen

Here's a fixed version.

Code: Select all

# Vous pouvez placer le script de votre jeu dans ce fichier.
screen button_screen():
    textbutton _("menu") action ToggleScreen("drop_menu")

screen drop_menu():
#Votre menu va ici, utilisez la langue d'écran habituelle.
    add "images/plage.png" 
Qqq
# Déclarez sous cette ligne les images, avec l'instruction 'image'
image plage = "plage.png"
image explications ="explications.png"
image chargement = "chargement.png"
image affiche developpeur = "affiche_developpeur.png"
image groupe1 = "groupe1.png"
image crabes = "crabes.png"
image recolte = "recolte.png"
image inventaire = "inventaire.png"

# Déclarez les personnages utilisés dans le jeu.
define c = Character('CONSEIL', color="#c8ffc8")
define v = Character('Vous', color="#c8ffc8")
define t = Character('Trebor', color="#c8ffc8")
define y = Character('Yram', color="#c8ffc8")
define j = Character('Jennifer', color="#c8ffc8")


# Le jeu commence ici
label start:

    show screen button_screen

    play music "intro.mp3" fadeout 1
    queue music "intro.mp3"

    scene affiche developpeur
    with Dissolve(1.5)
    pause 3.5

    scene explications
    with Dissolve(1.5)
    pause 0.5
I haven't yet figured out how to disable auto correct on my new phone so it is making typing in code very difficult.
Last edited by Imperf3kt on Wed Oct 10, 2018 6:31 pm, edited 1 time in total.
Warning: May contain trace amounts of gratuitous plot.
pro·gram·mer (noun) An organism capable of converting caffeine into code.

User avatar
sambotte
Regular
Posts: 25
Joined: Thu Jun 23, 2016 11:56 am
Contact:

Re: Display an image by clicking on a menu

#9 Post by sambotte » Wed Oct 10, 2018 6:29 pm

And so .. does that mean?

Can you help me write the code please?

User avatar
Imperf3kt
Eileen-Class Veteran
Posts: 1950
Joined: Mon Dec 14, 2015 5:05 am
Location: Your monitor
Contact:

Re: Display an image by clicking on a menu

#10 Post by Imperf3kt » Wed Oct 10, 2018 6:32 pm

Yes, I just now added it to my last post.

If you need more help, just ask, I will help where I can.

I expect you will still require help as the code provided is unstyled.
Warning: May contain trace amounts of gratuitous plot.
pro·gram·mer (noun) An organism capable of converting caffeine into code.

User avatar
sambotte
Regular
Posts: 25
Joined: Thu Jun 23, 2016 11:56 am
Contact:

Re: Display an image by clicking on a menu

#11 Post by sambotte » Wed Oct 10, 2018 6:46 pm

OK, I will test this process and come back to you.

User avatar
sambotte
Regular
Posts: 25
Joined: Thu Jun 23, 2016 11:56 am
Contact:

Re: Display an image by clicking on a menu

#12 Post by sambotte » Wed Oct 10, 2018 6:57 pm

Great, it works!

The word "inventory" appears at the top left of the game screen.

First question: would it be possible to display it at the top right?
Second question: Would it be possible to center the "inventory" image in the center of the screen when you click on it?

We advance more :)

User avatar
Imperf3kt
Eileen-Class Veteran
Posts: 1950
Joined: Mon Dec 14, 2015 5:05 am
Location: Your monitor
Contact:

Re: Display an image by clicking on a menu

#13 Post by Imperf3kt » Wed Oct 10, 2018 9:10 pm

Certainly possible.
I'm limited on time now and unable to give a detailed response at the moment as I am in the middle of work, but I can help after that. (about 6 hours)

What I'd do is create a fixed or a vbox and place the textbutton in that. Using the style property xalign 1.0, will align it to the right.

To centre the image, use the same process, and add a yalign, but set both to 0.5, although if you're making an inventory, a grid or vpgrid may be more suited.
Warning: May contain trace amounts of gratuitous plot.
pro·gram·mer (noun) An organism capable of converting caffeine into code.

User avatar
sambotte
Regular
Posts: 25
Joined: Thu Jun 23, 2016 11:56 am
Contact:

Re: Display an image by clicking on a menu

#14 Post by sambotte » Wed Oct 10, 2018 10:24 pm

OK, we'll see that tomorrow. A big thank-you.

User avatar
Imperf3kt
Eileen-Class Veteran
Posts: 1950
Joined: Mon Dec 14, 2015 5:05 am
Location: Your monitor
Contact:

Re: Display an image by clicking on a menu

#15 Post by Imperf3kt » Thu Oct 11, 2018 2:46 pm

Sorry about the late reply, I got really busy and forgot about this.

Code: Select all

# Vous pouvez placer le script de votre jeu dans ce fichier.
screen button_screen():
    vbox:
        xalign 1.0
        ypos 0.01
        textbutton _("menu") action ToggleScreen("drop_menu")

screen drop_menu():
#Votre menu va ici, utilisez la langue d'écran habituelle.

    grid 1 1:
    # the two numbers represent how many columns and rows the grid has.
    #It must have exactly columns times rows, items inside it.
    # see https://www.renpy.org/doc/html/displayables.html?highlight=grid#Grid
    #for more information on using grids.
    
        xalign 0.5
        add "images/plage.png"
        
        
Qqq
# Déclarez sous cette ligne les images, avec l'instruction 'image'
image plage = "plage.png"
image explications ="explications.png"
image chargement = "chargement.png"
image affiche developpeur = "affiche_developpeur.png"
image groupe1 = "groupe1.png"
image crabes = "crabes.png"
image recolte = "recolte.png"
image inventaire = "inventaire.png"

# Déclarez les personnages utilisés dans le jeu.
define c = Character('CONSEIL', color="#c8ffc8")
define v = Character('Vous', color="#c8ffc8")
define t = Character('Trebor', color="#c8ffc8")
define y = Character('Yram', color="#c8ffc8")
define j = Character('Jennifer', color="#c8ffc8")


# Le jeu commence ici
label start:

    show screen button_screen

    play music "intro.mp3" fadeout 1
    queue music "intro.mp3"

    scene affiche developpeur
    with Dissolve(1.5)
    pause 3.5

    scene explications
    with Dissolve(1.5)
    pause 0.5
Warning: May contain trace amounts of gratuitous plot.
pro·gram·mer (noun) An organism capable of converting caffeine into code.

Post Reply

Who is online

Users browsing this forum: No registered users