Logo Intro, Opening and Press to Start Screen [Tutorial]

A place for Ren'Py tutorials and reusable Ren'Py code.
Forum rules
Do not post questions here!

This forum is for example code you want to show other people. Ren'Py questions should be asked in the Ren'Py Questions and Announcements forum.
Post Reply
Message
Author
User avatar
mitoky
Veteran
Posts: 316
Joined: Sat Feb 07, 2015 9:12 pm
Projects: The Purring Demon's Love, circus eterie
Contact:

Logo Intro, Opening and Press to Start Screen [Tutorial]

#1 Post by mitoky »

Hello everyone!

For my own game i have tried to do the following when the game starts:
- a non-skipable logo intro and a skipable opening
- a "Press to Start" screen which jumps to the opening if not pressed after certain time (a repeating circle it left alone, basically)

Since i am a beginner, it took me a bit to figure everything out till i had it working the way i wanted, so i thought i might share (:

First of all we start with the non-skipable intro part and movie part.

1.) We start by preparing everything needed for those. For that we need to state all the images to be used in the intro. In this case, we will neeed:

Code: Select all

image black = "#000" #Black Background
image white = "#ffffff" #White Background
image logo = "logo.png" #Your Logo
2.) Afterwards we will make transformations. Reason for that is the "unskipable" part. When i tested the screen and used "dissolve" for example the transition itself could be skipped. Hence to advoid that, we will use transformations.
For our Intro we will have (1) the screen change from black to white (2) afterwards fade the logo in and out (3) and have the screen change from white to black again.

For that we do the following:

Code: Select all

#Transformation for Logo    
transform transform_logo:
    on show:
        alpha 0 xalign 0.5 yalign 0.5
        linear 2.0 alpha 1
    on hide:
        linear 2.0 alpha 0
We make a transformation for the logo is showing and one for when it's hiding. When showing, the logo is transparent and showing in the middle. Afterwards it takes 2 seconds to show completly. When Hiding, it becomes transparent, taking 2 seconds for that.
Each transformation (showing and hiding) takes 2 seconds. (Why knowing this is needed you will see in step 3)

Code: Select all

#Transformation for background
transform transform_white:
    on show:
        alpha 0 
        linear 2.0 alpha 1
    on hide:
        linear 2.0 alpha 0
       
Afterwards we do a transformation for the white background, again, one for when showing and one for when hiding.
When showing, its transparent and then takes 2 seconds to be completly visible. Hiding is the same, only reversed (fist completly visible and afterwards completly transparent)
Each transformation (showing and hiding) takes 2 seconds.

3.) For the movie part, we need to prepare nothing aside from having the movie in the game folder. Hence, we can start putting everything together.
For this we will use a splashscreen since, if exists, is labeled when the game first runs. We do this:

Code: Select all

label splashscreen:
    scene black #We start with a black scene
    $ renpy.pause(1, hard=True) #Pauses the black screen for a second. This command pauses renpy, hence makes it unable to click
    
    show white at transform_white #next we swho our white screen with our made transformation
    $ renpy.pause(2, hard=True) #For this its important to know the transformation time. Since the transformation is "happening" at the same time, the pause needs to be at least as long as the transformation. Otherwise it gets cut off.
    
    show logo at transform_logo #Next, we are showing our logo with our logo transformation.
    $ renpy.pause(6, hard=True) #Our logo takes 2 second to appear, however, we want it to stay on the screen for a while, hence we are using 6 instead of 2 seconds, so it stays for 4 seconds.
    
    hide logo #Next we are hiding our logo
    $ renpy.pause(2, hard=True) #Since the transformation is 2 seconds long, the pause here is 2 seconds long.
    
    hide white #Next we are hiding our background.
    $ renpy.pause(3, hard=True) # Our hiding transformation for the white bg takes 2 seconds, but since we want the screen to stay black for a second, like at the beginning, we use 3 instead.
    
    $ renpy.movie_cutscene('opening.ogv') #Next we are showing our video. This one is skipable
    return
And thats all! Now you have a non-skipable logo intro and with a skipable opening!

5.) Next, we are doing our "Press to Start" screen with the ability to jump back to the opening when left unclicked for some time (Hence, back an forth between the "Press to Start" screen and opening when left alone.).
First, we are making an opening label with the opening to use when time runs out.

Code: Select all

label opening:
    $ renpy.movie_cutscene('opening.ogv')
    jump before_main_menu #This needs to be set to this as its a screen that appears before the main_menu and is the one we will use for our "Press to Start" screen. 

    
Note: If you used a splashscreen without an intro and only movie, i advice against using the splashscreen and to make this seperate opening label instead. It does jump back to the splashscreen and plays the opening when the time runs out, however, afterwards it goes to the main menu instead of the "Press to Start" screen.

6.) Next we start preparing the actual "Press to Start" screen.
First, we make a transformation which is blinking:

Code: Select all

transform transform_blink:
    linear 1.0 alpha 0.2
    linear 1.0 alpha 1.0
    repeat
The animation is becoming barely visible and then completly visible again. Since its supposed to constantly blink, we use repeat.

7.) Next we are making the press to start screen:
Make sure your images you want to use are in the game folder.

Code: Select all

screen press_to_start():
    tag menu
    add "background.png" #The background you wish to use.
    
    add "press_to_start.png" xalign 0.5 yalign 0.5 at transform_blink #The "Press to Start" text. I am using an image for that. The image is displayed at the middle with our blinking transformation.
    
    imagemap: #Next, we will want the whole screen to act as button, for that we are making an imagemap.
        ground "transparent.png" #So that nothing gets "covered" we are making a transparent image that covers the whole screen and--
        hotspot (0, 0,1920, 1080) focus_mask None action Show("main_menu", transition=dissolve)  #set the hotspot to the whole screen. To make sure the transparent is clickable we set the focus_mask to None. When clicked it shows the main menu with dissolve.
        
    timer 50 action Jump("opening") #when left alone for 50 seconds, it jumps to the opening label.
    
7.) All thats left to do is to make sure that the press to start screen is shown. For this we use the before_main_menu label, as when existing its shown before the main_menu.

Code: Select all

label before_main_menu:
    call screen press_to_start #Here, we are calling our already made "Press to Start" screen.
And done!
Now you should have a working none-skipable logo intro, an opening and a "Press to Start" screen which swiches to the opening if not used etc (:

So you dont have to copy paste it one by one, here is the whole code used in the tutorial summed up:

Code: Select all

##Intro with Opening

image black = "#000"
image white = "#ffffff"
image logo = "logo.png"

transform transform_logo:
    on show:
        alpha 0 xalign 0.5 yalign 0.5
        linear 2.0 alpha 1
    on hide:
        linear 2.0 alpha 0
        
transform transform_white:
    on show:
        alpha 0 
        linear 2.0 alpha 1
    on hide:
        linear 2.0 alpha 0
                
label splashscreen:
    scene black 
    $ renpy.pause(1, hard=True) 
    
    show white at transform_white 
    $ renpy.pause(2, hard=True)
    
    show logo at transform_logo
    $ renpy.pause(6, hard=True) 
    
    hide logo 
    $ renpy.pause(2, hard=True)
    
    hide white
    $ renpy.pause(3, hard=True)
    
    $ renpy.movie_cutscene('opening.ogv')
    return

## Press to Start Screen 

label opening:
    $ renpy.movie_cutscene('opening.ogv')
    jump before_main_menu 
     
transform transform_blink:
    linear 1.0 alpha 0.2
    linear 1.0 alpha 1.0
    repeat    
    
screen press_to_start():
    tag menu
    add "background.png"
    
    add "press_to_start.png" xalign 0.5 yalign 0.5 at transform_blink
    
    imagemap:
        ground "transparent.png" 
        hotspot (0, 0,1920, 1080) focus_mask None action Show("main_menu", transition=dissolve)
        
    timer 50 action Jump("opening")
    
label before_main_menu:
    call screen press_to_start  
If there are any mistakes, please feel free to correct me!
Have a nice day! (:
Last edited by mitoky on Sat Nov 04, 2017 11:48 pm, edited 1 time in total.

User avatar
Divona
Miko-Class Veteran
Posts: 678
Joined: Sun Jun 05, 2016 8:29 pm
Completed: The Falconers: Moonlight
Organization: Bionic Penguin
itch: bionicpenguin
Contact:

Re: Logo Intro, Opening and Press to Start Screen

#2 Post by Divona »

Thanks for sharing! For screen "press_to_start", if you want to avoid using imagemap and "transparent.png" you can use Button instead:

Code: Select all

    button:
        xysize (config.screen_width, config.screen_height)
        action Show("main_menu", transition=dissolve)
Completed:
Image

User avatar
RicharDann
Veteran
Posts: 286
Joined: Thu Aug 31, 2017 11:47 am
Contact:

Re: Logo Intro, Opening and Press to Start Screen

#3 Post by RicharDann »

Thank you, this is great!! :D
The most important step is always the next one.

adeRuZet
Newbie
Posts: 13
Joined: Wed Oct 04, 2017 11:23 am
Github: aderuZet
Contact:

Re: Logo Intro, Opening and Press to Start Screen

#4 Post by adeRuZet »

I have a code of Splashscreen, Cutscene Intro, and Fake Layered screen before the 'Press Start Button Screen' like this:

Code: Select all

label splashscreen:
        
    scene attention with fade
    $ renpy.pause(3)
    scene yuujin2logo with fade
    $ renpy.pause(3)
    scene black with fade
    
label intro:
    scene black
    $ renpy.movie_cutscene("intro.ogv")


label buffer: #this is the Fake Layered screen before 'Press Start Button' screen
    
    scene gamebackground with fade #this is the background (1280x720px)
    show character3 with dissolve #this chara appear on (780,340) anchor point at center image
    show character1 with dissolve #this on (165,345)
    show character4 with dissolve #this on (1120,320)
    show character2 with dissolve # this on (470, 350)
    #$ renpy.pause(7, hard=True) ----> unused, cause this isnt what i want
    scene white with dissolve #for flash effect to the 'Press Start Button' screen
    show sekolah with dissolve #background for my 'PSB' screen

    
label ok:
    $ renpy.call_screen ("pstart") 
    
label pass:
    return
and for the screen is:

Code: Select all

screen pstart:
    tag press_start
    modal True
    add "main_menu.png" #overlay like imagemap, but not an imagemap
    timer 5 action Jump('intro') #idle for 5second will repeat the cutscene intro
    imagebutton auto "gui/start_%s.png" xpos 0 ypos 0 action Jump("pass") focus_mask True #the button

for the label buffer, i want to make the whole block running without any interruption. in other word, player cant click the mouse button.
some people suggest me to use ATL, but it take me a month or more for me to understand them.

User avatar
Divona
Miko-Class Veteran
Posts: 678
Joined: Sun Jun 05, 2016 8:29 pm
Completed: The Falconers: Moonlight
Organization: Bionic Penguin
itch: bionicpenguin
Contact:

Re: Logo Intro, Opening and Press to Start Screen

#5 Post by Divona »

adeRuZet wrote: Tue Oct 31, 2017 11:35 pm for the label buffer, i want to make the whole block running without any interruption. in other word, player cant click the mouse button.
some people suggest me to use ATL, but it take me a month or more for me to understand them.

Code: Select all

transform pstart_intro:
    contains:
        "gamebackground"
        alpha 0.0
        linear 0.5 alpha 1.0
    contains:
        pause 0.5
        "character3"
        pos (780, 340)
        alpha 0.0
        linear 0.5 alpha 1.0
    contains:
        pause 1.0
        "character1"
        pos (165, 345)
        alpha 0.0
        linear 0.5 alpha 1.0
    contains:
        pause 1.5
        "character4"
        pos (1120, 320)
        alpha 0.0
        linear 0.5 alpha 1.0
    contains:
        pause 2.0
        "character2"
        pos (470, 350)
        alpha 0.0
        linear 0.5 alpha 1.0
    contains:
        pause 3.5
        "#fff"
        alpha 0.0
        linear 0.5 alpha 1.0
    contains:
        pause 4.5
        "sekolah"
        alpha 0.0
        linear 0.5 alpha 1.0
    
label buffer:

    $ renpy.scene()
    show black
    show gamebackground at pstart_intro
    $ renpy.pause(5.0, hard=True)

label ok:
    call screen pstart
Completed:
Image

User avatar
mitoky
Veteran
Posts: 316
Joined: Sat Feb 07, 2015 9:12 pm
Projects: The Purring Demon's Love, circus eterie
Contact:

Re: Logo Intro, Opening and Press to Start Screen

#6 Post by mitoky »

@Divona Just a small question from my side since its the first time i have heared of "contains":

Code: Select all

show gamebackground at pstart_intro
I know images with the same tag get overwritten. But if one were to use "show" with an image not included in the transformation, the image would not show up at all since the transformation would only the use the images contained in the transformation. So basically it would ignore the image after show completly. Do i understand that right or would it still show up?

User avatar
Divona
Miko-Class Veteran
Posts: 678
Joined: Sun Jun 05, 2016 8:29 pm
Completed: The Falconers: Moonlight
Organization: Bionic Penguin
itch: bionicpenguin
Contact:

Re: Logo Intro, Opening and Press to Start Screen

#7 Post by Divona »

mitoky wrote: Wed Nov 01, 2017 2:38 am @Divona Just a small question from my side since its the first time i have heared of "contains":

Code: Select all

show gamebackground at pstart_intro
I know images with the same tag get overwritten. But if one were to use "show" with an image not included in the transformation, the image would not show up at all since the transformation would only the use the images contained in the transformation. So basically it would ignore the image after show completly. Do i understand that right or would it still show up?
That's correct. Displayable use in ATL would override the image in "show", so from the code above, you could even do:

Code: Select all

show white at pstart_intro
and the result would be the same. It just needs to have something to show to add transformation into.

You can read more information about "contains" in Contains Statement section of the documentation.

In the case of the ATL code above, I used "contains" like LiveComposite with the ability to animate and transform each displayable part inside "contains" block. Each block starts animation and transforms at the same time, hint all the different "pause" time for each block so animations are play from one to another.

Anyhoo, here a simplified version using two transforms:

Code: Select all

transform atl_dissolve:
    alpha 0.0
    linear 0.5 alpha 1.0

transform pstart_intro:
    contains:
        "gamebackground"
        atl_dissolve
    contains:
        pause 0.5
        "character3"
        pos (780, 340)
        atl_dissolve
    contains:
        pause 1.0
        "character1"
        pos (165, 345)
        atl_dissolve
    contains:
        pause 1.5
        "character4"
        pos (1120, 320)
        atl_dissolve
    contains:
        pause 2.0
        "character2"
        pos (470, 350)
        atl_dissolve
    contains:
        pause 3.5
        "#fff"
        atl_dissolve
    contains:
        pause 4.5
        "sekolah"
        atl_dissolve
Completed:
Image

User avatar
mitoky
Veteran
Posts: 316
Joined: Sat Feb 07, 2015 9:12 pm
Projects: The Purring Demon's Love, circus eterie
Contact:

Re: Logo Intro, Opening and Press to Start Screen

#8 Post by mitoky »

Divona wrote: Wed Nov 01, 2017 3:54 am
mitoky wrote: Wed Nov 01, 2017 2:38 am @Divona Just a small question from my side since its the first time i have heared of "contains":

Code: Select all

show gamebackground at pstart_intro
I know images with the same tag get overwritten. But if one were to use "show" with an image not included in the transformation, the image would not show up at all since the transformation would only the use the images contained in the transformation. So basically it would ignore the image after show completly. Do i understand that right or would it still show up?
That's correct. Displayable use in ATL would override the image in "show", so from the code above, you could even do:

Code: Select all

show white at pstart_intro
and the result would be the same. It just needs to have something to show to add transformation into.

You can read more information about "contains" in Contains Statement section of the documentation.

In the case of the ATL code above, I used "contains" like LiveComposite with the ability to animate and transform each displayable part inside "contains" block. Each block starts animation and transforms at the same time, hint all the different "pause" time for each block so animations are play from one to another.

Anyhoo, here a simplified version using two transforms:

Code: Select all

transform atl_dissolve:
    alpha 0.0
    linear 0.5 alpha 1.0

transform pstart_intro:
    contains:
        "gamebackground"
        atl_dissolve
    contains:
        pause 0.5
        "character3"
        pos (780, 340)
        atl_dissolve
    contains:
        pause 1.0
        "character1"
        pos (165, 345)
        atl_dissolve
    contains:
        pause 1.5
        "character4"
        pos (1120, 320)
        atl_dissolve
    contains:
        pause 2.0
        "character2"
        pos (470, 350)
        atl_dissolve
    contains:
        pause 3.5
        "#fff"
        atl_dissolve
    contains:
        pause 4.5
        "sekolah"
        atl_dissolve
Oh, i understand! Thank you!

Post Reply

Who is online

Users browsing this forum: No registered users