Completely changing the UI mid-game?

[jemler]

Hello! I'm currently working on a game using version 8.0.3 and was wondering if there was any way to change the UI completely once a certain point is reached in the middle of the game. I have 2 sets of images, one in the regular UI images and the other is for when the player reaches a certain point. After they reach this point, I'm using the 2nd set of images to basically do a color swap to the textbox, namebox, and preferences/history screen. How would I go about doing this and where would I put the code?

[_ticlock_]

Hello! I'm currently working on a game using version 8.0.3 and was wondering if there was any way to change the UI completely once a certain point is reached in the middle of the game. I have 2 sets of images, one in the regular UI images and the other is for when the player reaches a certain point. After they reach this point, I'm using the 2nd set of images to basically do a color swap to the textbox, namebox, and preferences/history screen. How would I go about doing this and where would I put the code?

For textbox, namebox, you can create two instances of Character; 1st for first part, 2nd for the second part.

Code: Select all

define e1 = Character("Eileen", window_background="frame1.png")
define e2 = Character("Eileen", window_background="frame2.png")

Check Character arguments to change different parameters of the textbox,namebox.

For game_menu screen you can use if statements to change UI images. For example for the background of the game_menu:

Code: Select all

#screens.rpy
screen game_menu(title, scroll=None, yinitial=0.0):

    ...

    frame:
        if part1:
            style "game_menu_outer_frame"
        else:
            style "game_menu_outer_frame2"
            
...


style game_menu_outer_frame:
    bottom_padding 45
    top_padding 180

    background "gui/overlay/game_menu.png"
    
style game_menu_outer_frame2 is game_menu_outer_frame
style game_menu_outer_frame2:
    background "gui/overlay/game_menu2.png"

[jemler]

Hello! I'm currently working on a game using version 8.0.3 and was wondering if there was any way to change the UI completely once a certain point is reached in the middle of the game. I have 2 sets of images, one in the regular UI images and the other is for when the player reaches a certain point. After they reach this point, I'm using the 2nd set of images to basically do a color swap to the textbox, namebox, and preferences/history screen. How would I go about doing this and where would I put the code?

For textbox, namebox, you can create two instances of Character; 1st for first part, 2nd for the second part.

Code: Select all

define e1 = Character("Eileen", window_background="frame1.png")
define e2 = Character("Eileen", window_background="frame2.png")

Check Character arguments to change different parameters of the textbox,namebox.

For game_menu screen you can use if statements to change UI images. For example for the background of the game_menu:

Code: Select all

#screens.rpy
screen game_menu(title, scroll=None, yinitial=0.0):

    ...

    frame:
        if part1:
            style "game_menu_outer_frame"
        else:
            style "game_menu_outer_frame2"
            
...


style game_menu_outer_frame:
    bottom_padding 45
    top_padding 180

    background "gui/overlay/game_menu.png"
    
style game_menu_outer_frame2 is game_menu_outer_frame
style game_menu_outer_frame2:
    background "gui/overlay/game_menu2.png"

When I place the code for the screens, it gives me an error:

Code: Select all

[code]
I'm sorry, but errors were detected in your script. Please correct the
errors listed below, and try again.


File "game/screens.rpy", line 493: style property use is not known.
    use navigation
       ^

Ren'Py Version: Ren'Py 8.0.3.22090809
Tue Oct 18 09:46:45 2022

Here's how I indented the code:

Code: Select all

## Game Menu screen ############################################################
##
## This lays out the basic common structure of a game menu screen. It's called
## with the screen title, and displays the background, title, and navigation.
##
## The scroll parameter can be None, or one of "viewport" or "vpgrid". When
## this screen is intended to be used with one or more children, which are
## transcluded (placed) inside it.

screen game_menu(title, scroll=None, yinitial=0.0):

    style_prefix "game_menu"

    if main_menu:
        add gui.main_menu_background
    else:
        add gui.game_menu_background
#################################################
    frame:
        if part1:
           style "game_menu_outer_frame"
        else:
            style "game_menu_outer_frame2"


style game_menu_outer_frame:
    bottom_padding 45
    top_padding 180

    background "gui/overlay/game_menu.png"

style game_menu_outer_frame2 is game_menu_outer_frame
style game_menu_outer_frame2:
    background "gui/overlay/game_menu2.png"

In case it's an indentation problem...I do have the images named "game_menu2.png" etc

[_ticlock_]

When I place the code for the screens, it gives me an error:

You need to put styles after screen game_menu. Lines

Code: Select all

style game_menu_outer_frame:
    bottom_padding 45
    top_padding 180

    background "gui/overlay/game_menu.png"

should already exist. Just go a bit down from screen game_menu, you will see it. So, you only need to add style game_menu_outer_frame2.

Thus, should be something like this:

Code: Select all

screen game_menu(title, scroll=None, yinitial=0.0):

    style_prefix "game_menu"

    if main_menu:
        add gui.main_menu_background
    else:
        add gui.game_menu_background
        
    frame:
        if part1:
           style "game_menu_outer_frame"
        else:
            style "game_menu_outer_frame2"

Find the end of game_menu, where the indentation is zero.

Code: Select all

    if main_menu:
        key "game_menu" action ShowMenu("main_menu")
        
########## Here is end of game_menu

style game_menu_outer_frame is empty
style game_menu_navigation_frame is empty
style game_menu_content_frame is empty
style game_menu_viewport is gui_viewport
style game_menu_side is gui_side
style game_menu_scrollbar is gui_vscrollbar

style game_menu_label is gui_label
style game_menu_label_text is gui_label_text

style return_button is navigation_button
style return_button_text is navigation_button_text

#####
### Default style for  game_menu_outer_frame with default background
####

style game_menu_outer_frame:
    bottom_padding 45
    top_padding 180

    background "gui/overlay/game_menu.png"

### New style for game_menu_outer_frame with another background


style game_menu_outer_frame2 is game_menu_outer_frame
style game_menu_outer_frame2:
    background "gui/overlay/game_menu2.png"
   

[jemler]

When I place the code for the screens, it gives me an error:

You need to put styles after screen game_menu. Lines

Code: Select all

style game_menu_outer_frame:
    bottom_padding 45
    top_padding 180

    background "gui/overlay/game_menu.png"

should already exist. Just go a bit down from screen game_menu, you will see it. So, you only need to add style game_menu_outer_frame2.

Thus, should be something like this:

Code: Select all

screen game_menu(title, scroll=None, yinitial=0.0):

    style_prefix "game_menu"

    if main_menu:
        add gui.main_menu_background
    else:
        add gui.game_menu_background
        
    frame:
        if part1:
           style "game_menu_outer_frame"
        else:
            style "game_menu_outer_frame2"

Find the end of game_menu, where the indentation is zero.

Code: Select all

    if main_menu:
        key "game_menu" action ShowMenu("main_menu")
        
########## Here is end of game_menu

style game_menu_outer_frame is empty
style game_menu_navigation_frame is empty
style game_menu_content_frame is empty
style game_menu_viewport is gui_viewport
style game_menu_side is gui_side
style game_menu_scrollbar is gui_vscrollbar

style game_menu_label is gui_label
style game_menu_label_text is gui_label_text

style return_button is navigation_button
style return_button_text is navigation_button_text

#####
### Default style for  game_menu_outer_frame with default background
####

style game_menu_outer_frame:
    bottom_padding 45
    top_padding 180

    background "gui/overlay/game_menu.png"

### New style for game_menu_outer_frame with another background


style game_menu_outer_frame2 is game_menu_outer_frame
style game_menu_outer_frame2:
    background "gui/overlay/game_menu2.png"
   

Thanks. That worked. I assume I'd use something similar for things like the scrollbars, main menu, etc? To make sure I get it right, how would this be defined?
Tried to use

Code: Select all

define persistent.part1 = False

in the game's script, but I think it just defaulted to the 2nd image.
Tried clearing persistent to check it, but it gives this error when I open the preferences menu:

Code: Select all

I'm sorry, but an uncaught exception occurred.

While running game code:
  File "game/screens.rpy", line 614, in execute
    screen load():
  File "game/screens.rpy", line 614, in execute
    screen load():
  File "game/screens.rpy", line 618, in execute
    use file_slots(_("Load"))
  File "game/screens.rpy", line 621, in execute
    screen file_slots(title):
  File "game/screens.rpy", line 621, in execute
    screen file_slots(title):
  File "game/screens.rpy", line 625, in execute
    use game_menu(title):
  File "game/screens.rpy", line 425, in execute
    screen game_menu(title, scroll=None, yinitial=0.0):
  File "game/screens.rpy", line 425, in execute
    screen game_menu(title, scroll=None, yinitial=0.0):
  File "game/screens.rpy", line 434, in execute
    frame:
  File "game/screens.rpy", line 434, in keywords
    frame:
  File "game/screens.rpy", line 435, in keywords
    if part1:
  File "game/screens.rpy", line 435, in <module>
    if part1:
NameError: name 'part1' is not defined

[_ticlock_]

Thanks. That worked. I assume I'd use something similar for things like the scrollbars, main menu, etc? To make sure I get it right, how would this be defined?
Tried to use

Code: Select all

define persistent.part1 = False

in the game's script, but I think it just defaulted to the 2nd image.
Tried clearing persistent to check it, but it gives this error when I open the preferences menu:

(1) If you want to change UI only for current playthrough,
then you use

Code: Select all

default part1 = True

It should be without any indent outside any labels.
For screen game_menu

Code: Select all

    frame:
        if part1:
            style "game_menu_outer_frame"
        else:
            style "game_menu_outer_frame2"

Styles:

Code: Select all

style game_menu_outer_frame2 is game_menu_outer_frame
style game_menu_outer_frame2:
    background "gui/overlay/game_menu2.png"

In game:

Code: Select all

label part2:
    #When you reached the certain point
    $ part1 = False

(2) If you want to change UI after the player first time reaches part2, i.e. for all playthroughs,

then you use

Code: Select all

default persistent.part1 = True

It should be without any indent outside any labels.
For screen game_menu

Code: Select all

    frame:
        if persistent.part1:
            style "game_menu_outer_frame"
        else:
            style "game_menu_outer_frame2"

Styles:

Code: Select all

style game_menu_outer_frame2 is game_menu_outer_frame
style game_menu_outer_frame2:
    background "gui/overlay/game_menu2.png"

To define name

In game:

Code: Select all

label part2:
    #When you reached the certain point
    $ persistent.part1 = False

You can make similar changes for all types of screens and subscreens (say screen, bars, etc.)

[_ticlock_]

Actually, for the 2nd scenario (If you want to change UI after the player first time reaches part2, i.e. for all playthroughs), it is easier to put ConditionSwith in the styles:

Code: Select all

default persistent.part1 = True

You can leave the game_menu without changes and put only ConditionSwith in the styles:
Styles:

Code: Select all

style game_menu_outer_frame:
    bottom_padding 45
    top_padding 180

    background ConditionSwitch("persistent.part1", "gui/overlay/game_menu.png",
        					"True", "gui/overlay/game_menu2.png")