Scenes, screens and images

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
Bum_McFluff
Regular
Posts: 45
Joined: Sat Aug 18, 2018 8:15 pm
Contact:

Scenes, screens and images

#1 Post by Bum_McFluff » Tue May 11, 2021 12:03 am

Once again I apologise in advance for any novice mistakes I have made here. This site and this forum are the only reliable places I can turn to in order to learn how to do some of the things I want to do. Many of the online videos I have found always assume that I know more than I do. I only seem to know enough to cause me grief :roll: .

I want to have a background image (eg a room, parkland, beach etc), that changes whenever I change location. I use the show screen to do that (is that the best way?). But I also want to show characters in the centre of the background, especially when they first appear. I can assign side images, but cannot get the full image to display.

I have this:

Code: Select all

screen hotelExterior():
    add "images/bg/hotel_exterior.png"

screen hotelReception():
    add "images/bg/hotel_reception.png"

image hotelmanager:
    "images/characters/hotel/hotelmanager_full.png"

image side hotelmanager:
    "images/characters/hotel/hotelmanager_side.png"
and I have this:

Code: Select all

label hotel_01_scene:
    show screen hotelExterior
    "Well, this looks like the hotel they mentioned."
    show hotelmanager full
    h "testing"
But no matter what I try, the full image of the hotel manager never appears. I get his side image, but not his full centre of the picture image.
Is it showing behind the hotelExterior image?
What is the best way to have a full screen background image that you can place other images with transparencies on top of? And is the order that I present the images important?
Finally, how do I turn off the side image when I only want the centre of the picture image?
What, spy on our spy as he searches for their spy? Why not, sounds rather like fun.

User avatar
emz911
Regular
Posts: 75
Joined: Fri Jun 23, 2017 2:23 pm
Contact:

Re: Scenes, screens and images

#2 Post by emz911 » Tue May 11, 2021 1:26 am

For showing a background, there is a statement called "scene" already, use that instead of screen. "at" controls the position of the image shown, you want:

Code: Select all

show hotelmanager full at center
Everything you need is documented here, I recommend going through it! https://www.renpy.org/dev-doc/html/disp ... ight=scene

User avatar
Per K Grok
Miko-Class Veteran
Posts: 823
Joined: Fri May 18, 2018 1:02 am
Completed: the Ghost Pilot, Sea of Lost Ships, Bubbles and the Pterodactyls, Defenders of Adacan Part 1 & 2, the Phantom Flyer
itch: per-k-grok
Location: Sverige
Contact:

Re: Scenes, screens and images

#3 Post by Per K Grok » Tue May 11, 2021 1:36 am

Bum_McFluff wrote:
Tue May 11, 2021 12:03 am
Once again I apologise in advance for any novice mistakes I have made here. This site and this forum are the only reliable places I can turn to in order to learn how to do some of the things I want to do. Many of the online videos I have found always assume that I know more than I do. I only seem to know enough to cause me grief :roll: .

I want to have a background image (eg a room, parkland, beach etc), that changes whenever I change location. I use the show screen to do that (is that the best way?). But I also want to show characters in the centre of the background, especially when they first appear. I can assign side images, but cannot get the full image to display.

I have this:

Code: Select all

screen hotelExterior():
    add "images/bg/hotel_exterior.png"

screen hotelReception():
    add "images/bg/hotel_reception.png"

image hotelmanager:
    "images/characters/hotel/hotelmanager_full.png"

image side hotelmanager:
    "images/characters/hotel/hotelmanager_side.png"
and I have this:

Code: Select all

label hotel_01_scene:
    show screen hotelExterior
    "Well, this looks like the hotel they mentioned."
    show hotelmanager full
    h "testing"
But no matter what I try, the full image of the hotel manager never appears. I get his side image, but not his full centre of the picture image.
Is it showing behind the hotelExterior image?
What is the best way to have a full screen background image that you can place other images with transparencies on top of? And is the order that I present the images important?
Finally, how do I turn off the side image when I only want the centre of the picture image?


For backgrounds use 'scene'. Try this

Code: Select all


label hotel_01:
    scene hotel_exterior
     "Well, this looks like the hotel they mentioned."
    show hotelmanager_full
    "Welcome to Hotel California!"

label hotel_02:   
    scene hotel_reception
    show hotelmanager_full
    "You can check in any time."



'scene' is what you use to show backgrounds. It works pretty much like 'show' but have added function to hide all images shown over the previous scene. You could use 'show' instead of scene but then you would have to use 'hide' to hide all previous images when you want to switch to a new background.

labels are checkpoints that you can use to jump to or call as you move around in the script. You don't need jump in this example as you are just moving along to what comes next in the code.

'screen' are used for input/output. That's where you put stuff like buttons and show stuff like game statistics; lives left, health points, money earned, what have you. Screens are rendered on a layer on top of the layer where images are rendered (as you suspected).

If you, for some reason, want to use a screen and add the hotel manger on top of the background image you do that when you define the screen.

Code: Select all

screen hotelExterior():
    add "images/bg/hotel_exterior.png"
    add "images/characters/hotel/hotelmanager_full.png"
The page at this link
https://www.renpy.org/doc/html/quickstart.html
will give you a lot of useful basic information.

User avatar
Bum_McFluff
Regular
Posts: 45
Joined: Sat Aug 18, 2018 8:15 pm
Contact:

Re: Scenes, screens and images

#4 Post by Bum_McFluff » Tue May 11, 2021 3:57 am

That hasn't made any difference. What do I need to do differently with the image file?
Do I use something like:

Code: Select all

scene hotelExterior():
    "images/bg/hotel_exterior.png"
or

Code: Select all

screen hotelExterior():
    add "images/bg/hotel_exterior.png"
or what? How do I define the background images if not like this?

Thank you for your time and patience.
What, spy on our spy as he searches for their spy? Why not, sounds rather like fun.

User avatar
emz911
Regular
Posts: 75
Joined: Fri Jun 23, 2017 2:23 pm
Contact:

Re: Scenes, screens and images

#5 Post by emz911 » Tue May 11, 2021 3:19 pm

Forget about the screen for a minute and define scene images just like you define any other images, this is the correct format:

Code: Select all

image hotelExterior = "bg/hotel_exterior.png"
image hotelmanager = "characters/hotel/hotelmanager_full.png"
Have that and you can do:

Code: Select all

label hotel_01_scene:
    scene hotelExterior
    show hotelmanager at center
The name you use in your code should always match the name you defined it as (image xxx = ...). You might want to do so for all of your images first to clears things up.
Detailed documentation for displaying images: https://www.renpy.org/dev-doc/html/disp ... ight=scene
Last edited by emz911 on Tue May 11, 2021 4:37 pm, edited 1 time in total.

User avatar
Per K Grok
Miko-Class Veteran
Posts: 823
Joined: Fri May 18, 2018 1:02 am
Completed: the Ghost Pilot, Sea of Lost Ships, Bubbles and the Pterodactyls, Defenders of Adacan Part 1 & 2, the Phantom Flyer
itch: per-k-grok
Location: Sverige
Contact:

Re: Scenes, screens and images

#6 Post by Per K Grok » Tue May 11, 2021 3:27 pm

Bum_McFluff wrote:
Tue May 11, 2021 3:57 am
That hasn't made any difference. What do I need to do differently with the image file?
Do I use something like:

Code: Select all

scene hotelExterior():
    "images/bg/hotel_exterior.png"
or

Code: Select all

screen hotelExterior():
    add "images/bg/hotel_exterior.png"
or what? How do I define the background images if not like this?

Thank you for your time and patience.

Forget about screens for now. You don't need any screens for this. The language in screens is somewhat different from that used in the main renpy script. Focus on main renpy script for now.


We are now just going to use 'scene' and 'show'. Both render images.
You can define an image like this
image anynameyouwant = "bg/hotel_exterior.png"
obs! don't include 'images/' in the name of the path.

but you really don't have to do that, so as a general rule you should not define your images. Renpy already handles that.

If you have a file named "hotel_exterior.png" somewhere in your folder "images" renpy will find that file, if you use the file name without the suffix, in this case; hotel_exterior.

scene hotel_exterior
or
show hotel_exterior

both commands will render the image, without the image having been defined.

'scene' is useful for backgrounds since that is the first image you want to be rendered and it hides previously used images.

Take the code I wrote earlier, remove the labels I used earlier and put the code directly under label start.

'label start:' is where the program starts rendering stuff when you go from the main page to the game itself.

Don't define anything. Just have the code below.

Provided you have image files
"hotel_exterior.png"
"hotel_reception.png" and
"hotelmanager_full.png"
somewhere in the game's "image" folder, even if it is in a sub-folder, renpy will find the image files,
and the code below should work.

the game will end at the 'return' command

Code: Select all

label start:
    scene hotel_exterior
    "Well, this looks like the hotel they mentioned."
    show hotelmanager_full
    "Welcome to Hotel California!"

    scene hotel_reception
    show hotelmanager_full
    "You can check in any time.
    
    return
If you get this code to run as it stands then you can start adding stuff. Don't do anything different until you see this code working.

User avatar
Bum_McFluff
Regular
Posts: 45
Joined: Sat Aug 18, 2018 8:15 pm
Contact:

Re: Scenes, screens and images

#7 Post by Bum_McFluff » Tue May 11, 2021 7:25 pm

That has fixed it. Although it did throw up another related issue, which (again) I think is just me not being knowledgable enough about ren'py coding.

I have several files which get called in sequence:
script.rpy

Code: Select all

label start:
##    call variables

    call setup_difficulty_scene
    call setup_gender_scene
    call setup_register_scene
    call expos_scene
    call hotel_01

    "Where to now?"

    # This ends the game.
    return
Difficulty is not yet implemented so it simply has a menu with "pass" as each selection. Gender selection and register are working fine (register is simply what I called "make up your own name", not actually registering for anything)
setup_register.rpy

Code: Select all

label setup_register_scene:
    scene setup_register

    $ name = renpy.input("What is your first name?")
    $ name = name.strip()
    if name == "":
        $ name="Jane"

    $ surname = renpy.input("What is your surname?")
    $ surname = surname.strip()
    if surname == "":
        $ surname="Smith"

    $ cityname = renpy.input("What is the name of the city?")
    $ cityname = cityname.strip()
    if cityname == "":
        $ cityname="Myopia"

    return
Then it goes to the first actual bit of storyline:
introduction.rpy

Code: Select all

label expos_scene:
    nv "You have just arrived home ...."

    scene city_exterior
    "You are now in [cityname]"

    x "Okay, first job is to find the hotel that they mentioned in their letter."

    "You ask around, and some people give you directions. You think that you're
    probably going to need a map of this place."

    return
(NB I abbreviated the nv dialogue as it goes on for quite a while and isn't part of the problem. If you were wondering.)
The issue is, now that I have changed the "show screen YXZ" to "scene XYZ" when it transitions from the register to the nv part, and again after the nv part but before "You are now in ..." the background vanishes leaving what I call the invisible checkers. Before I changed from screen to scene it was working. As there is no scene in the introductory.rpy file, how do I address this?
What, spy on our spy as he searches for their spy? Why not, sounds rather like fun.

User avatar
emz911
Regular
Posts: 75
Joined: Fri Jun 23, 2017 2:23 pm
Contact:

Re: Scenes, screens and images

#8 Post by emz911 » Tue May 11, 2021 9:49 pm

Make sure the scene images are placed under the "images" folder, then check that the image file names match the scene names. If you did not define beforehand, when you do "scene city_exterior" it will look for an image in the folder named "city_exterior.jpg" or "city_exterior.png", if you get a blank scene but no error, it most probably means that no matching image was found, double check your file names.

User avatar
Bum_McFluff
Regular
Posts: 45
Joined: Sat Aug 18, 2018 8:15 pm
Contact:

Re: Scenes, screens and images

#9 Post by Bum_McFluff » Wed May 12, 2021 12:07 am

The image names are all correct. I am guessing that it must have something to do with the nvl image which is the immediate file between the two bits of code.
This happens:

Code: Select all

label setup_register_scene:
    scene setup_register

    $ name = renpy.input("What is your first name?")
    $ name = name.strip()
    if name == "":
        $ name="Jane"

    $ surname = renpy.input("What is your surname?")
    $ surname = surname.strip()
    if surname == "":
        $ surname="Smith"

    $ cityname = renpy.input("What is the name of the city?")
    $ cityname = cityname.strip()
    if cityname == "":
        $ cityname="Myopia"

    return
Then as it transitions to the next bit there is a flash of no image and maybe a ghost image of the previous background but too fast for me to be certain (but no error), then this happens:

Code: Select all

label start:
##    call variables

    call setup_difficulty_scene
    call setup_gender_scene
    call setup_register_scene
    call expos_scene

    call hotel_01

    "Where to now?"

    # This ends the game.

    return
where it goes to call expos_scene, where the same as above occurs: ie.(a flash of no image and maybe a ghost image of the previous background but too fast for me to be certain (but no error)) and finally this happens:

Code: Select all

label expos_scene:
    nv "You have just arrived home ...."

    scene city_exterior
    "You are now in [cityname]"

    x "Okay, first job is to find the hotel that they mentioned in their letter."

    "You ask around, and some people give you directions. You think that you're
    probably going to need a map of this place."

    return
From "You are now in [cityname]" on it seems fine. So it must just be the nv character causing it.
I followed some code (I think from this site but can't remember) and set up the nvl as this:

Code: Select all

define nv = Character("", kind=nvl, what_color="#000000")
Maybe there is a better way to have a wall of text without using the nvl thing? All I'm sure of is that if an expert in ren'py saw all of my code and layout they'd cry and probably swear.
What, spy on our spy as he searches for their spy? Why not, sounds rather like fun.

Post Reply

Who is online

Users browsing this forum: Bing [Bot], Google [Bot], jypgames