How do I change the scene? (Image buttons)
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.
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.
How do I change the scene? (Image buttons)
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.
So if somebody could help me it would really be appreciated.
- Thanks in advanced.
Re: How do I change the scene? (Image buttons)
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.
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 :
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 :
Now, let's add our button at the end of that list.
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.
and going back at the screens.rpy file, let's change
to
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
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 :
Hope it helped !
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
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)
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"
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
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.
If I rephrase,tinlin wrote:How to make the arrow, when clicked show 'bakcground2'.
- when I click on the arrow
- I want a different image to show up
- 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.
- 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
Code: Select all
define arrow_active = False
image bg myChoice= ConditionSwitch(
"arrow_active == True", Solid("#f00"),
"True", Solid("#00f"))
Code: Select all
imagebutton auto "rightArrow_%s.png" action None
Code: Select all
imagebutton auto "rightArrow_%s.png" action ToggleVariable("arrow_active", true_value=True,false_value=False)
Now, just add
Code: Select all
show bg myChoice
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")
Re: How do I change the scene? (Image buttons)
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.
imagebutton auto "Rarrow.jpg" action ToggleVariable("arrow_active", true_value=True,false_value=False)
Btw Rarrow is my way of saying right arrow.
Re: How do I change the scene? (Image buttons)
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:
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.
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)]
Re: How do I change the scene? (Image buttons)
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.
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)
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 :
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!
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
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
Code: Select all
$ destinations_from_start = ["East", None, "West", "North"]
Re: How do I change the scene? (Image buttons)
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!
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!
Re: How do I change the scene? (Image buttons)
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.
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.
Who is online
Users browsing this forum: DewyNebula