How do I change the scene? (Image buttons)

[tinlin]

So I'm pretty new to coding games and I'm only just starting to get on feet here but I need to know how it is that I script an arrow key to change the background. So I know how to show and hide a picture, my first image is fine, it fits and other things go on top but I don't exactly know how to make the arrow, when clicked show 'bakcground2'.

So if somebody could help me it would really be appreciated.

- Thanks in advanced.

[Valmoer]

Hello Tinlin, and welcome to the Ren'py community! I hope you have lots of fun with your current project.
Coding can be a little disorienting, at first. Don't hesitate to ask for help and tips like you just did

I'm assuming that you're not trying to simply substitute an image for another, which is done by simply giving them the same first part of the name : this allows Renpy to identify this as variations of the same drawn element.

Code: Select all

    image bg red=Solid("#f00")
    image bg blue=Solid("#00f")

    show bg red
    "Hey"
    show bg blue

Like this.

Now, fair warning, there's a wall of text incoming. Feel free to ask for precisions if I get too much verbose.

Now, I'll have to ask for more details about the desired behavior of the elements you want to add.
Correct me if I'm wrong, but here you seem to desire two things :

• an imagebutton
• an effect (enacted by a click on this button)

The button:
Whatever the effect, the moment and the location of the effect, adding an element to the UI (User Interface) means tinkering with the screens and the screen language (http://www.renpy.org/doc/html/screens.html)

How to add a button
Funnily enough, that's the easy part : http://www.renpy.org/doc/html/screens.html#imagebutton
If you have all your button's images ready, that's not that hard. The true question is "Where to add that code ?".

Where & when
That's an important design decision (of course, if you're just tinkering about to see how stuff works, proper interface design is not high on the list of priorities, but still) : do you want your button to be accessible at anytime during regular play (ie, during the say statements such as e "Hi! Nice to meet ya!"), or do you want if to appear only in a certain menu either a standard one (the main menu, the preference menu,...) or a custom one.

Adding stuff in a menu

Okay, let's try to add your button to the main menu. That's might not be what you decide in the end (or even what you want) but hey, let's start somewhere. Going to the screens.rpy file, where the built-in menus are defined, you normally can see this :

Code: Select all

screen main_menu:

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

    # The background of the main menu.
    window:
        style "mm_root"

    # The main menu buttons.
    frame:
        style_group "mm"
        xalign .98
        yalign .98

        has vbox

        textbutton _("Start Game") action Start()
        textbutton _("Load Game") action ShowMenu("load")
        textbutton _("Preferences") action ShowMenu("preferences")
        textbutton _("Help") action Help()
        textbutton _("Quit") action Quit(confirm=False)

init -2 python:

    # Make all the main menu buttons be the same size.
    style.mm_button.size_group = "mm"

Now, let's add our button at the end of that list.

Code: Select all

        textbutton _("Start Game") action Start()
        textbutton _("Load Game") action ShowMenu("load")
        textbutton _("Preferences") action ShowMenu("preferences")
        textbutton _("Help") action Help()
        textbutton _("Quit") action Quit(confirm=False)
        imagebutton auto "rightArrow_%s.png" action None

And voilà, you should have a nice arrow-shaped button under your main menu's usual buttons (under the condition, of course, that you have images called rightArrow_idle.png,... and such in your game directory, following the naming conventions in the imagebutton documentation (linked to earlier, but here it is again)).

Of course, clicking the button doesn't do anything. Given that we defined action None that's quite logical. So now, on to part 2.

The effect:

An effect triggered by a button is by definition an action : http://www.renpy.org/doc/html/screen_actions.html. And actions cannot -directly- show or hide displayable elements such as images. (They can show or hide screens, but using custom screen for your purposes as I understand them would be slightly overkill.

Now, let's parse your words. Literally.

How to make the arrow, when clicked show 'bakcground2'.

If I rephrase,

• when I click on the arrow
• I want a different image to show up

If I rephrase again,

• I want a different image to show up in function of a given situation
• I want the click on the arrow to modify that situation.

If I rephrase in technical terms,

• I want to show an image that changes if a parameter changes : you want ConditionSwitch
• I want the click on the arrow to modify that parameter : you want the action to Toggle the variable

Let's put that at the beginning of your script.rpy

Code: Select all

define arrow_active = False
image bg myChoice= ConditionSwitch(
    "arrow_active == True", Solid("#f00"),
    "True", Solid("#00f"))

and going back at the screens.rpy file, let's change

Code: Select all

        imagebutton auto "rightArrow_%s.png" action None

to

Code: Select all

        imagebutton auto "rightArrow_%s.png" action ToggleVariable("arrow_active", true_value=True,false_value=False)

The first part defines bg myChoice as a displayable that will change with the value of arrow_active, and the second part defines your button as toggling arrow_active on and off.

Now, just add

Code: Select all

        show bg myChoice

at the beginning of your script (after the start label), and you should see either a blue screen or a red screen if you clicked or not on the button in your main menu.

Of course, you can substitute the blue (and red) fillings by your own images. Like that :

Code: Select all

image bg myChoice= ConditionSwitch(
    "arrow_active == True", "background1.png",
    "True", "background2.png")

Hope it helped !

[tinlin]

I'm sorry if I didn't completely explain what help I wanted. For starters I need the arrow to work in the actual game, so I can make the character explore different area's if you will. And I appear to be having an error also 'End of line expected' in this area here:

imagebutton auto "Rarrow.jpg" action ToggleVariable("arrow_active", true_value=True,false_value=False)

Btw Rarrow is my way of saying right arrow.

[xela]

There is a lot you can do, depending on how much logic you're planning to have in each other the areas. In my game it's quite an insane amount so I use label/screens combos:

Code: Select all

label l1:
    scene bg l1
    show screen l1

    $ loop = True
    while loop: # Or python code, whatever is more convenient for the location, both have advantages.
        $ result = ui.interact()
    hide screen l1
    jump # (previous logical location so you can fall back clicking one button collapsing to "main location of the game")

screen l1:
    textbutton "Other Location":
        action [Hide(l1), Jump(l2)]

and so on... Finetune this to your needs, this works quite well and has a lot of possibilities to expand if required. There are plenty of other ways to get the same done obviously.

[Valmoer]

Okay, so you don't want to change the image as much as jump to a certain label in your script. That's... actually easier than what I previously understood

Well, as xela wisely said, they're a lot of different ways to do that. You'll have to experiment with all the options available to you. Here's my take on it:

For the script part.

Code: Select all

label start:
    # Here, you preset all the labels you'll be able to jump from this point.
    # You can set them (and re-set them - if the scene causes a new path to open, for example) at any point before the -call screen- statement
    $ destinations_from_start = ["East", "South", "West", "North"]
    
    # Here, the actual stuff of the scene happens
    "Stuff happens."
    "More stuff happens."
    "And then more stuff."
        
    # Here, you call your screen with your destinations list.
    call screen navigate(destinations_from_start)

    # You never actually reach this point, but, let's be safe and let the return here, just in case.
return

label East:
    "I went to the East."
    return

label West:
    "I went to the West."
    return

label North:
    "I went to the North."
    return

label South:
    "I went to the South."
    return

And here is the code of your new navigate screen, to put in screens.rpy (or anywhere else, for that matter, but it is tidier to keep them in screens.rpy)

Code: Select all

screen navigate(destinations):
    modal True

    python:
        directionName = ["rightArrow_%s.png","downArrow_%s.png","leftArrow_%s.png","upArrow_%s.png"]
        sideList = "r b l t"
        destNum = min(len(destinations),4)
        

    side sideList[0:destNum*2-1]:
        xalign 0.5
        yalign 0.5
        
        for i, destination in enumerate(destinations[0:destNum]):
            if destination is not None:
                imagebutton auto directionName[i] action Jump(destination)
            else:
                null

Here's the screen you'll get with the full list of four elements defined and passed as parameter.

And the screen you'll get if the parameter list is instead :

Code: Select all

    $ destinations_from_start = ["East", None, "West", "North"]

is here.

As already said, there's a hundred ways for a hundred similar yet subtly different needs. Find what it is that you need and tinker away to fit the requirements of that need Good luck, and don't hesitate to ask!

[tinlin]

Gaahh, thankyou for being so helpful but even after trying both. It comes up with massive lines of errors. It says it also says unexpected name and word found on 'jump' and on 'screen11:'

Anyway I have figured an alternate way to do this. I decided instead of buttons I could just use choice's to change the scene, thanks for all the help anyway!

[Valmoer]

Mmh, I'm afraid you'll have to be a little more specific than that. Maybe you could post the code you've type, and/or the content of the error message ? It would help us see where exactly the error is.

Also, if you tried to reproduce xela's method, then screen11: is incorrect syntax indeed. First, you need a space between the screen statement and the screen name, and two, the screen name, to follow xela's example, should be l1, not 11. I'm not even sure full number names are valid names (pretty sure they aren't, actually...)

EDIT: Okay, actually read the second part of your message. While going the choice route is an actually perfectly valid solution (and indeed, the solution I suggested isn't that far out of the choice screen with simply a different UI), please don't get disheartened by errors They are enemies to be vanquished and corrected, not to be surrendered to.

Anyway, if you want (now or later) to try and have a go again at building that navigation system you wanted, don't hesitate - we'll help you figure it out.