Skyrim loading screen

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
sculpteur
Veteran
Posts: 221
Joined: Fri Nov 17, 2017 6:40 pm
Completed: Apocalypse Lovers
Projects: Apocalypse Lovers
Organization: Awake_Production
Location: France
Discord: https://discord.gg/apocalypse-lovers
Contact:

Skyrim loading screen

#1 Post by sculpteur » Sat Jun 18, 2022 4:14 am

Hi, I would like to have an advice on a simple screen I'm working on.

It's pictures diaporama with a light zoom/unzoom effect on it and wich are fading out/ fading in from a list. All of my pictures are jpg and are already set up to be use one by one (I mean there is a blackbackround but it's part of the jpg picture). And all the pictures are more than 1920x1080 in order to avoid seing the transparent border when zooming out.

(For the one of you who are familiar with Skyrim, i'm doing exactly the same thing than the loading screen of this game)

So I've based my work on an already existing code (like always, i'am a fucking code scavenger remember) and I want to get rid of a part which is destinated (I guess) to work with multiple pictures (png probably) moving on the same screen (like 2 characters and the background). But since I only have one pictures moving at the same time I would like to simplify it but don't exaclty know how.

And what I want to keep is a specific "transform" effect for each pictures.

I've tweak some stuff take a look :

Code: Select all

init:
    $ menu_dark_1 = ["images/0.0 - Game MenuDark_Right_CH1_1.jpg", 0.6]
    $ menu_dark_2 = ["images/0.0 - Game MenuDark_Right_CH1_2.jpg", 0.6]
    $ menu_dark_3 = ["images/0.0 - Game MenuDark_Right_CH1_3.jpg", 0.6]
    $ menu_dark_4 = ["images/0.0 - Game MenuDark_Right_CH1_4.jpg", 0.6]
    $ menu_dark_4 = ["images/0.0 - Game MenuDark_Right_CH1_5.jpg", 0.6]
    $ menu_arr = [menu_dark_1, menu_dark_2, menu_dark_3, menu_dark_4, menu_dark_5]
    $ renpy.random.shuffle(menu_arr)

Code: Select all

screen main_menu_dark:
    add "#000000"
    add spr_bg

Code: Select all

transform main_menu_dark_1:
    on show:
        xpos -116
        zoom 0.5
        linear 15.0 zoom 0.6 alpha 1.0

transform main_menu_dark_2:
    on show:
        xpos -200
        zoom 0.6
        linear 2.0 zoom 0.5295 alpha 1.0

transform main_menu_dark_3:
ETC....

Here this is the part I want to get rid of cause I freaking don't understand arr[0][0] etc and I don't think this is necessary for my needs.

Code: Select all

init 499 image spr_bg:
    menu_arr[0][0] with Dissolve(1.5, alpha=True)
    zoom 0.6
    xalign 0.0 yalign 0.0
    linear 15.0 zoom menu_arr[0][1]
    menu_arr[1][0] with Dissolve(1.5, alpha=True)
    zoom 0.6
    xalign 0.0 yalign 0.0
    linear 15.0 zoom menu_arr[0][1]
    repeat
Image

“He asked me to calm down, close my eyes and be quiet. He explained to me that if I was afraid, the shadow that ran barefoot in the street would feel it. I got scared seeing Jumanji on TV, so let me tell you, we didn't stay hidden for long and had to start running again.”
Jessica's Diary.

User avatar
zmook
Veteran
Posts: 421
Joined: Wed Aug 26, 2020 6:44 pm
Contact:

Re: Skyrim loading screen

#2 Post by zmook » Sat Jun 18, 2022 8:19 am

At the moment you need that. The first init creates a list of filenames (menu_arr) and shuffles them, but it doesn't actually tell renpy to load any images. The screen adds a black background ("#000000") and an image named spr_bg (to be defined later). The third block defines here transforms, which maybe you use somewhere, but they do nothing in the code you've posted here.

The last block actually uses the shuffled list of filenames and creates an animation called 'spr_bg', which is what is shown in the screen main_menu_dark. 'menu_arr[0]' means the first item in the list, which has been shuffled so it might be menu_dark_3 or menu_dark_5.
'menu_arr[0][0]' means the first item of the first item, which might be "images/0.0 - Game MenuDark_Right_CH1_3.jpg". Used in an ATL block, that tells renpy to display the image found at that filename.
colin r
➔ if you're an artist and need a bit of help coding your game, feel free to send me a PM

User avatar
sculpteur
Veteran
Posts: 221
Joined: Fri Nov 17, 2017 6:40 pm
Completed: Apocalypse Lovers
Projects: Apocalypse Lovers
Organization: Awake_Production
Location: France
Discord: https://discord.gg/apocalypse-lovers
Contact:

Re: Skyrim loading screen

#3 Post by sculpteur » Sun Jun 19, 2022 4:22 am

Hey thank you for your explanation. However I do know how all this system works since I've write half of it. Maybe you don't understood in my previous message but this is an already modificated code. The only part I'm not familiar with is the menu_arr[0][0]. So thank you for giving me the begining of an explanation in your second paragraph.
But I still need a way to replace that by a screen wich display all the image in the random order without using the [0][0] array stuff. Any guess ?
Image

“He asked me to calm down, close my eyes and be quiet. He explained to me that if I was afraid, the shadow that ran barefoot in the street would feel it. I got scared seeing Jumanji on TV, so let me tell you, we didn't stay hidden for long and had to start running again.”
Jessica's Diary.

User avatar
zmook
Veteran
Posts: 421
Joined: Wed Aug 26, 2020 6:44 pm
Contact:

Re: Skyrim loading screen

#4 Post by zmook » Sun Jun 19, 2022 8:35 am

I don't know why you need a way to do this without using lists? It's a fundamental python data structure, and it makes sense for this purpose. I think it would be worth your while to figure them out.

Try this, maybe? https://www.youtube.com/watch?v=hVjLNYpWMnU

But if you really want to, you could simplify the above a little by getting rid of the extra layer of lists specifying zoom levels per image, since it seems you're not really using it:

Code: Select all

init:
    $ menu_dark_1 = "images/0.0 - Game MenuDark_Right_CH1_1.jpg"
    $ menu_dark_2 = "images/0.0 - Game MenuDark_Right_CH1_2.jpg"
    $ menu_dark_3 = "images/0.0 - Game MenuDark_Right_CH1_3.jpg"
    $ menu_dark_4 = "images/0.0 - Game MenuDark_Right_CH1_4.jpg"
    $ menu_dark_4 = "images/0.0 - Game MenuDark_Right_CH1_5.jpg"
    $ menu_dark_shuffled = [menu_dark_1, menu_dark_2, menu_dark_3, menu_dark_4, menu_dark_5]
    $ renpy.random.shuffle(menu_dark_shuffled)


init 499 image spr_bg:
    menu_dark_shuffled[0] with Dissolve(1.5, alpha=True)
    zoom 0.6
    xalign 0.0 yalign 0.0
    linear 15.0 zoom 0.6   # if you want a zoom or pan effect you should change this
    menu_dark_shuffled[1] with Dissolve(1.5, alpha=True)
    zoom 0.6
    xalign 0.0 yalign 0.0
    linear 15.0 zoom 0.6
    repeat
Does that help?
colin r
➔ if you're an artist and need a bit of help coding your game, feel free to send me a PM

User avatar
sculpteur
Veteran
Posts: 221
Joined: Fri Nov 17, 2017 6:40 pm
Completed: Apocalypse Lovers
Projects: Apocalypse Lovers
Organization: Awake_Production
Location: France
Discord: https://discord.gg/apocalypse-lovers
Contact:

Re: Skyrim loading screen

#5 Post by sculpteur » Sat Jul 09, 2022 3:58 am

Hey ! Thank for the answer. I've watch the video. It's seems simplier like that, thank you for the tips. I've seen this kind of list to a lot of difference places of python code through the years lol and was never able to fulyl understand them.
I don't know why you need a way to do this without using lists? It's a fundamental python data structure, and it makes sense for this purpose.
I'm not sure, let me explain. It's because I don't have mutiple png picture layer moving at the same time. In fact, at each iteration, there is only one moving (zooming or dezooming) HD wallpaper at the same time. The black background is already incorporated. Like this for exemple :


Image

Image

Moreover there is one difficulty I had to work on. All my images are not the same size or the characters are not positionned at the same place so I can't used a generic zoom/dezoom effect for all of them and I had to work on a transform effect like below for each of the pictures.

Code: Select all

transform main_menu_dark_2:
    on show:
        xpos -200
        zoom 0.6
        linear 20.0 zoom 0.5295 alpha 1.0


Full Seize Images
https://ibb.co/fD9jK8L
https://ibb.co/HNvLQdC
Image

“He asked me to calm down, close my eyes and be quiet. He explained to me that if I was afraid, the shadow that ran barefoot in the street would feel it. I got scared seeing Jumanji on TV, so let me tell you, we didn't stay hidden for long and had to start running again.”
Jessica's Diary.

User avatar
zmook
Veteran
Posts: 421
Joined: Wed Aug 26, 2020 6:44 pm
Contact:

Re: Skyrim loading screen

#6 Post by zmook » Sat Jul 09, 2022 8:45 am

It sounds like it might be easier for you to just use image statements to define your images as where you want them to be, so that you don't have to worry about managing transforms when you show them:

Code: Select all

image main_menu_dark_2 = "images/0.0 - Game MenuDark_Right_CH1_2.jpg":
    on show:
        xpos -200
        zoom 0.6
        linear 20.0 zoom 0.5295 alpha 1.0
I can't put this together for you any more because I'm not sure I understand what your remaining difficulty actually is.
colin r
➔ if you're an artist and need a bit of help coding your game, feel free to send me a PM

User avatar
sculpteur
Veteran
Posts: 221
Joined: Fri Nov 17, 2017 6:40 pm
Completed: Apocalypse Lovers
Projects: Apocalypse Lovers
Organization: Awake_Production
Location: France
Discord: https://discord.gg/apocalypse-lovers
Contact:

Re: Skyrim loading screen

#7 Post by sculpteur » Tue Jul 12, 2022 2:59 am

Hey, thank you. I'm still working on it with a simplier way.
But are you sure the image "on show" is the correct synthax or is even possible ? It keep giving me indexation mistake or error.

I even tried this :

Code: Select all

image menu_dark_2:
    "images/0.0 - Game MenuDark_Right_CH1_2.jpg":
    on show:
        xpos -200
        zoom 0.6
        linear 20.0 zoom 0.5295 alpha 1.0
Bu it doesnt work. :cry:


And just to let you know, here this is my working ground, if you want to take a look.

Code: Select all

init:
    # $ menu_dark_1 = "images/0.0 - Game MenuDark_Right_CH1_1.jpg"
    # $ menu_dark_2 = "images/0.0 - Game MenuDark_Right_CH1_2.jpg"
    # $ menu_dark_3 = "images/0.0 - Game MenuDark_Right_CH1_3.jpg"
    # $ menu_dark_4 = "images/0.0 - Game MenuDark_Right_CH1_4.jpg"
    # $ menu_dark_5 = "images/0.0 - Game MenuDark_Right_CH1_5.jpg"
    # $ menu_arr = [menu_dark_1, menu_dark_2, menu_dark_3, menu_dark_4, menu_dark_5]
    $ menu_arr = [menu_dark_1, menu_dark_2]
    $ renpy.random.shuffle(menu_arr)


image menu_dark_1 = "images/0.0 - Game MenuDark_Right_CH1_1.jpg":
    on show:
        xpos -200
        zoom 0.6
        linear 20.0 zoom 0.5295 alpha 1.0
image menu_dark_2 = "images/0.0 - Game MenuDark_Right_CH1_2.jpg":
    on show:
        xpos -200
        zoom 0.6
        linear 20.0 zoom 0.5295 alpha 1.0

################################################################################
# init 499 image spr_bg:
#     menu_arr[0][0] with Dissolve(1.5, alpha=True)
#     zoom 0.6
#     xalign 0.0 yalign 0.0
#     linear 15.0 zoom menu_arr[0][1]
#     menu_arr[1][0] with Dissolve(1.5, alpha=True)
#     zoom 0.6
#     xalign 0.0 yalign 0.0
#     linear 15.0 zoom menu_arr[0][1]
#     repeat


init 499 image dark_rand_pic:
    menu_arr with Dissolve(2.0, alpha=True)
    # repeat


# screen main_menu_dark:
#     ## This ensures that any other menu screen is replaced.
#     add "spr_bg"

# screen main_menu_dark:
#     ## This ensures that any other menu screen is replaced.
#     add "#000000"
#     add "images/0.0 - Game MenuDark_Right_CH1_1.jpg" at main_menu_dark_1

screen main_menu_dark:
    ## This ensures that any other menu screen is replaced.
    add "#000000"
    # add "images/0.0 - Game MenuDark_Right_CH1_3.jpg" at main_menu_dark_2
    add "dark_rand_pic"


transform main_menu_dark_1:
    on show:
        xpos -116
        zoom 0.5
        linear 15.0 zoom 0.6 alpha 1.0

transform main_menu_dark_2:
    on show:
        xpos -200
        zoom 0.6
        linear 20.0 zoom 0.5295 alpha 1.0

label test_credit_screen:
    window auto hide
    $ renpy.random.shuffle(menu_arr)
    show screen main_menu_dark
    $ renpy.pause(1.5,hard=True)
    call screen credits
Image

“He asked me to calm down, close my eyes and be quiet. He explained to me that if I was afraid, the shadow that ran barefoot in the street would feel it. I got scared seeing Jumanji on TV, so let me tell you, we didn't stay hidden for long and had to start running again.”
Jessica's Diary.

User avatar
zmook
Veteran
Posts: 421
Joined: Wed Aug 26, 2020 6:44 pm
Contact:

Re: Skyrim loading screen

#8 Post by zmook » Thu Jul 14, 2022 8:59 am

sculpteur wrote:
Tue Jul 12, 2022 2:59 am
But are you sure the image "on show" is the correct synthax or is even possible ? It keep giving me indexation mistake or error.
Sorry, looks like I gave you a syntax error. I don't have time to test this, but by the docs the syntax should be:

Code: Select all

image menu_dark_2:
    "images/0.0 - Game MenuDark_Right_CH1_2.jpg"  # no ":" here
    on show:
        xpos -200
        zoom 0.6
        linear 20.0 zoom 0.5295 alpha 1.0
[/quote]
colin r
➔ if you're an artist and need a bit of help coding your game, feel free to send me a PM

User avatar
sculpteur
Veteran
Posts: 221
Joined: Fri Nov 17, 2017 6:40 pm
Completed: Apocalypse Lovers
Projects: Apocalypse Lovers
Organization: Awake_Production
Location: France
Discord: https://discord.gg/apocalypse-lovers
Contact:

Re: Skyrim loading screen

#9 Post by sculpteur » Sun Jul 17, 2022 4:37 am

Hey sorry for the one who are in holyday, especially zmook if you're one of them, but I have got everything working except one thing.

So this synthax is working (tanks to zmook) :

Code: Select all

image menu_dark_1:
    "images/0.0 - Game MenuDark_Right_CH1_1.jpg"
    on show:
        xpos 900
        ypos 1000
        zoom 0.45
        linear 30.0 zoom 0.6 alpha 1.0 xpos 920 ypos 1200

image menu_dark_2:
    "images/0.0 - Game MenuDark_Right_CH1_2.jpg"
    on show:
        xpos 700
        zoom 0.7
        linear 30.0 zoom 0.5 xpos 800 alpha 1.0

But since the transform is display only on show, this make it incompatible with the previous code (screen).
Because after the images definition I've got this :

Code: Select all

init 499:
    $ menu_arr = ["menu_dark_1", "menu_dark_2"]
    $ renpy.random.shuffle(menu_arr)
Then this :

Code: Select all

init 499 image dark_rand_pic:
    menu_arr with Dissolve(2.0, alpha=True)
Following by the screen which reunite all this :

Code: Select all

screen main_menu_dark:
    add "#000000"
    add "dark_rand_pic"
So the problem is that the "add" fonction is calling an image which is define as a list of random images.
The matter is, the "ON SHOW" transformation doesn't apply.

If I write like this :
show screen main_menu_dark ==> NOT WORKING
show dark_rand_pic ==> NOT WORKING
show menu_dark_1 ==> WORKING

So this mean the ON SHOW Transformation do work but only when the images is display directly with the "show" function or with the "scene" function. But thoses function cannot be used inside a screen.

So I don't know how to solve this. If anyone have an idea while keeping the ON SHOW fonction inside the images definition like Zmook suggest it, that will be great.
Image

“He asked me to calm down, close my eyes and be quiet. He explained to me that if I was afraid, the shadow that ran barefoot in the street would feel it. I got scared seeing Jumanji on TV, so let me tell you, we didn't stay hidden for long and had to start running again.”
Jessica's Diary.

Post Reply

Who is online

Users browsing this forum: Google [Bot]