Showing a screen with a transform from a specific location[not possible]

[Imperf3kt]

I have a screen that replicates a mobile phone app of sorts. To give it some life, I added a transform so when it appears, it slides in from the top of the screen.
This has worked great for a few days, but I've started to think that it needs some tweaking.

I have a 100 pixel "header" that I'd like to remain above the screen at all times, so that it appears as if the screen is appearing from behind it, rather than over top of it.
Problem is, I'm unsure how to achieve this. Layers?

Can anyone advise me please?

For reference:
https://i.imgur.com/2cx5wcB.png
https://i.imgur.com/SJf3W66.png



The second image is the screen once it is shown. I'd like it to remain behind the visible blue bar, while it slides on screen.

The relevant code for the screen is here (note this is under revision and may/will be changed soon)

Code: Select all

screen navi_drop():
    modal True
    zorder 50
    
    style_prefix "navi_drop"
    hbox:
        imagebutton alt "menu" hover "gui/button/menu.png" idle "gui/button/menu.png" action Hide("navi_drop") # the three bars on screen top left. This shows and hides the screen.
    
    frame at navigation_appear:
        has vbox
        ysize 1180
        ymaximum 1180
        grid 1 6:
            spacing 50
            
            imagebutton alt "save" hover "gui/button/save.png" idle "gui/button/save.png" focus_mask True action ShowMenu("save"), Hide("navi_drop")
            imagebutton alt "load" hover "gui/button/load.png" idle "gui/button/load.png" focus_mask True action ShowMenu("load"), Hide("navi_drop")
            imagebutton alt "options" hover "gui/button/options.png" idle "gui/button/options.png" focus_mask True action ShowMenu("preferences"), Hide("navi_drop")
            imagebutton alt "about" hover "gui/button/about.png" idle "gui/button/about.png" focus_mask True action ShowMenu("about"), Hide("navi_drop")
            imagebutton alt "achievements" hover "gui/button/achievements.png" idle "gui/button/achievements.png" focus_mask True action ShowMenu("achievements"), Hide("navi_drop")
            imagebutton alt "main menu" hover "gui/button/main.png" idle "gui/button/main.png" focus_mask True action renpy.full_restart
        
transform navigation_appear:
    on show:
        ypos -1280
        linear .18 ypos 100
    on hide:
        linear .18 ypos -1280


style navi_drop_frame:
    background Frame(gui.main_menu_base, gui.navi_drop_frame_borders, tile=gui.frame_tile)
    padding gui.navi_drop_frame_borders.padding
    xpos gui.navi_drop_menu_xpos
    ypos gui.navi_drop_menu_ypos

And how I keep the "navigation" on other screens: (use navi)

Code: Select all

## Navi screen #################################################################
##
screen navi():

    hbox:
        imagebutton alt "menu" hover "gui/button/menu.png" idle "gui/button/menu.png" focus_mask True action Show("navi_drop")

I tried adding a zorder to my navi screen, but it doesn't appear to be the right way. Can anybody suggest something, I'm at a loss for what I should do here.

I can provide the full game code if requested.

[Enchant00]

Hmm.. I think what you can probably do, is to make the header an independent image from the main screen and use a renpy.show to display the header at a different layer or zorder. For a layer you have to define your own layer by including your layer config.layers = ['master', 'transient', 'screens', 'overlay', 'header'] then display that imager using the renpy.show('image', layer = 'header') under python block. As for zorder maybe the below would work.

https://www.renpy.org/doc/html/stateme ... renpy.show

So maybe it would look something like this

Code: Select all

screen navi_drop():
    modal True
    zorder 50
    
    style_prefix "navi_drop"
    
    python:
	    renpy.show('header', zorder = 100)  #don't add but rather use the python renpy equivalent show instead
	    
    hbox:
        imagebutton alt "menu" hover "gui/button/menu.png" idle "gui/button/menu.png" action Hide("navi_drop") # the three bars on screen top left. This shows and hides the screen.

PS I have no idea if this will work and atm I have no means to test it XD Theoretically, since the image is at the highest zorder level if should be above everything else but I feel like as a result this might even cover the image button.

Another possible way, to be honest I don't really want to do it, is to define a seperate screen for the header. Then that header screen would also contain your image button. You can use the ADD to add the header image then followed would be your imagebutton. Afterwards, in your bg menu you would probably need a python block and us the renpy.show_screen to display your header.

Code: Select all

screen header:
    zorder 100
    add 'header'
    imagebutton alt "menu" hover "gui/button/menu.png" idle "gui/button/menu.png" action Hide("navi_drop")

screen navi_drop():
    python:
        renpy.show_screen('header')
        
    frame at navigation_appear:
        ...

PS No idea if this will work either

[Imperf3kt]

Thanks for the suggestions, they're more than I was coming up with.

I'll see how I go this afternoon, thanks.

[Imperf3kt]

I tried both suggestions. The first had no effect sadly, the second caused undesired side-effects.

I finally found a solution though, and I don't know how it came to me, but I thought "hey, why not move the hbox to AFTER the transform..."

Code: Select all

screen navi_drop():
    modal True
    zorder 50
    
    style_prefix "navi_drop"
    
    frame at navigation_appear:
        has vbox
        ysize 1180
        ymaximum 1180
        grid 1 6:
            spacing 50
            
            
            imagebutton alt "save" hover "gui/button/save.png" idle "gui/button/save.png" focus_mask True action ShowMenu("save"), Hide("navi_drop")
            imagebutton alt "load" hover "gui/button/load.png" idle "gui/button/load.png" focus_mask True action ShowMenu("load"), Hide("navi_drop")
            imagebutton alt "options" hover "gui/button/options.png" idle "gui/button/options.png" focus_mask True action ShowMenu("preferences"), Hide("navi_drop")
            imagebutton alt "about" hover "gui/button/about.png" idle "gui/button/about.png" focus_mask True action ShowMenu("about"), Hide("navi_drop")
            imagebutton alt "achievements" hover "gui/button/achievements.png" idle "gui/button/achievements.png" focus_mask True action ShowMenu("achievements"), Hide("navi_drop")
            imagebutton alt "main menu" hover "gui/button/main.png" idle "gui/button/main.png" focus_mask True action renpy.full_restart
    fixed:
        
        add "gui/header.jpg"
        imagebutton alt "menu" hover "gui/button/menu.png" idle "gui/button/menu.png" action Hide("navi_drop")

transform navigation_appear:
    on show:
        ypos -1280
        linear .36 ypos 100
    on hide:
        linear .36 ypos -1280


style navi_drop_frame:
    background Frame(gui.main_menu_base, gui.navi_drop_frame_borders, tile=gui.frame_tile)
    padding gui.navi_drop_frame_borders.padding
    xpos gui.navi_drop_menu_xpos
    ypos gui.navi_drop_menu_ypos

Sometimes the most obvious solution, and the simplest solution, is easily overlooked!


Now to just find out why it still retracts above the header...
But at least it mostly works.

Thanks for the help!

[Enchant00]

HAHA to think the solution was something as simple as that It's nice that you found what you were looking for.

[Imperf3kt]

Yeah, I probably never would have thought of it either, if it were not for my prior experience with HTML and cascading style sheets xD

Anyway, glad this is (almost) working, I hope someone in the future stumbles across this and finds it useful.

[Imperf3kt]

I've come back to this issue, and after smacking my head against the nearest cranial interface for quite a while, I still cannot figure out how to do this.
I made a couple of minor changes that I think work better (basically I switched from using ypos, to yanchor)

Code: Select all

transform navigation_appear:
    on show:
        yanchor 1280
        linear .36 yanchor 0
    on hide:
        yanchor 0
        linear .36 yanchor 1280

But I still have no idea how to put this behind the header section when retracting.

Hopefully someone more skilled may be able to give me a hint about how I should be doing this, as I suspect I am doing it completely wrong.
At this point, I'm considering "sticking" the header to the bottom of the drop menu, so it slides down and back up with it, and looks intentional.

[philat]

Code: Select all

screen header:
    zorder 10
    add Solid("#FF0", xysize=(1280, 100)) # I was testing on 1280x720. The solids are just for illustration.
    textbutton "Dropdown" action ToggleScreen("dropdown")

screen dropdown:
    zorder 0
    frame:
        at slide_vertical
        add Solid("#F00", xysize=(1280, 620))

transform slide_vertical:
    on show, replace:
        yoffset -1280
        linear 0.5 yoffset 0
    on hide, replaced:
        linear 0.5 yoffset -1280

[Imperf3kt]

Code: Select all

screen header:
    zorder 10
    add Solid("#FF0", xysize=(1280, 100)) # I was testing on 1280x720. The solids are just for illustration.
    textbutton "Dropdown" action ToggleScreen("dropdown")

screen dropdown:
    zorder 0
    frame:
        at slide_vertical
        add Solid("#F00", xysize=(1280, 620))

transform slide_vertical:
    on show, replace:
        yoffset -1280
        linear 0.5 yoffset 0
    on hide, replaced:
        linear 0.5 yoffset -1280

Thanks, but it doesn't work for me.
When placed in a project by itself, it works as one would expect, however, when placed in my project, it doesn't behave at all.

Code: Select all

## Navigation screen #################################################################
##
screen navi():
    zorder 10
    add "gui/header.jpg"
#    add "[menu text]":
#        xalign 0.5
#        ypos 25
    imagebutton alt "menu" hover "gui/button/menu.png" idle "gui/button/menu.png" action ToggleScreen("navi_drop")


screen navi_drop():
    zorder 0
    
    style_prefix "navi_drop"
    
    frame:
        at slide_vertical
        has vbox
        ysize 1179
        ymaximum 1179
        grid 1 6:
            spacing 50
            
            imagebutton alt "save" hover "gui/button/save.png" idle "gui/button/save.png" focus_mask True action ShowMenu("save"), Hide("navi_drop")
            imagebutton alt "load" hover "gui/button/load.png" idle "gui/button/load.png" focus_mask True action ShowMenu("load"), Hide("navi_drop")
            imagebutton alt "options" hover "gui/button/options.png" idle "gui/button/options.png" focus_mask True action ShowMenu("preferences"), Hide("navi_drop")
            imagebutton alt "about" hover "gui/button/about.png" idle "gui/button/about.png" focus_mask True action ShowMenu("about"), Hide("navi_drop")
            imagebutton alt "achievements" hover "gui/button/achievements.png" idle "gui/button/achievements.png" focus_mask True action ShowMenu("achievements"), Hide("navi_drop")
            imagebutton alt "main menu" hover "gui/button/main.png" idle "gui/button/main.png" focus_mask True action renpy.full_restart
    
        
transform slide_vertical:
    on show:
        yanchor 1280
        linear .36 yanchor 0
    on hide:
        yanchor 0
        linear .36 yanchor 1280

style navi_drop_frame:
    background Frame(gui.main_menu_base, gui.navi_drop_frame_borders, tile=gui.frame_tile)
    padding gui.navi_drop_frame_borders.padding
    xpos gui.navi_drop_menu_xpos
    ypos gui.navi_drop_menu_ypos

#default menu_text = gui.menu_achievement_text

Results in this:
https://i.imgur.com/XPe2JCw.gif

Clearly, the frame is expanding correctly and the movement is starting and stopping at the correct positions, but the header still refuses to stay above the drop down menu.

Did I make a mistake? I cannot figure out why this is happening.
Here's the whole project for those interested: (link expires in about 90 days, 6.26Mb)
http://puu.sh/B69ol/b13264e3b3.zip
Note: Its a bit of a mess at the moment, I'll be working on tidying it up once I get some stuff working as desired.

[MaydohMaydoh]

Dunno why it's doing that but as a work around, maybe you could try using crop instead of moving it

Code: Select all

transform slide_vertical:
    crop_relative True
    yanchor 0
    on show:
        crop (0.0, 1.0, 1.0, 1.0)
        linear .36 crop (0.0, 0.0, 1.0, 1.0)
    on hide:
        crop (0.0, 0.0, 1.0, 1.0)
        linear .36 crop (0.0, 1.0, 1.0, 1.0)

[philat]

It looks like you're using use navi. The zorder should be in the screen that's using, not in navi, then.

[Imperf3kt]

I've tried switching the zorder with no change.
I plan to just redo everything from scratch one piece at a time, since it kinda needs organizing anyway.

[Imperf3kt]

It looks like you're using use navi. The zorder should be in the screen that's using, not in navi, then.

I reread your message and realised I misread it the first time.

Anyway, after applying the changes and fiddling, it seems to only make the problem worse (the drop down menu never shows at all)
Trying to sandwich it between the screen, and the navigation above it, doesn't work as expected, it still sits above the higher zorder, regardless.

I did some testing, out of curiosity and tried adding "show screen navi" in my script. Curiously enough, it works perfectly, but I need to access this behaviour from out of game state, where it seems to not behave.

Is this maybe a bug?
I recorded a short demonstration showing what I'm seeing.
https://dl.dropboxusercontent.com/s/82o ... -54-19.mp4

[Remix]

For what its worth, if you are planning to re-do things from scratch, this old snippet manages sliding panels quite nicely...

Zorder or layering is based on where each is added to config.overlay_screens
Changes makes it retract the 'old' screen, switch screens then slide in the new one.
I used a simple list [ panel title, panel title2 ] etc references panel title _panel screen ...
Easy to convert to Imagebuttons or whatever, just use actions where they set pending and reset st
Throw it in a new project and decide if useful...

Code: Select all

default panel_info = {
    'showing' : None,
    'pending' : None,
    'last_st' : -5.0,
    'warper' : {'in':'easein_bounce', 'out':'easeout_quad'},
    'duration' : 0.65,
    'ypos' : [-0.9, 0.1]
}

init python:

    def panel_slider(trans, st, at):

        global panel_info

        if not panel_info['last_st']:
            panel_info['last_st'] = st

        # default closed
        ypos = panel_info['ypos'][0]

        if panel_info['last_st'] + panel_info['duration'] >= st:
            # we should be moving
            if not panel_info['showing']:
                panel_info['showing'] = panel_info['pending']

                #### Here we want to force redraw/refresh the info_panel screen

                renpy.restart_interaction()

            yrange = panel_info['ypos'][1] - panel_info['ypos'][0]
            portion = float(st - panel_info['last_st']) / panel_info['duration']

            if panel_info['pending'] == panel_info['showing']:
                # showing
                warp_portion = renpy.atl.warpers[ panel_info['warper']['in'] ]( portion )
                ypos += yrange * warp_portion
            else:
                # hiding
                warp_portion = renpy.atl.warpers[ panel_info['warper']['out'] ]( portion )
                ypos = panel_info['ypos'][1] - yrange * warp_portion

        else:
            # we are either open or closed
            if not panel_info['pending'] and not panel_info['showing']:
                # closed with no pending action
                pass
            elif panel_info['pending'] != panel_info['showing']:
                # fully closed
                panel_info['showing'] = panel_info['pending']
                if panel_info['showing']:
                    # swapped to new

                    panel_info['last_st'] = st
                
                #### Here we want to force redraw/refresh the info_panel screen etc

                renpy.restart_interaction()
            else:
                # fully open
                ypos = panel_info['ypos'][1]

        # panel_info['cur_ypos'] = type(panel_info['ypos'][0])(ypos)
        panel_info['cur_st'] = st
        trans.ypos = type(panel_info['ypos'][0])(ypos) 
        return 0.04


transform panel_slide:
    function panel_slider

screen panel_control():
    default panels = [ 'info', 'trade', 'chars', 'quest' ]
    fixed:
        # x,y,w,h
        area (0.1, 0.0, 0.8, 0.1)
        hbox:
            xfill True
            for panel in panels:
                textbutton "{0}".format("Close" if panel_info['showing'] == panel else panel.capitalize()):
                    action [
                        SetDict(panel_info, 'last_st', None),
                        SetDict(panel_info, 'pending', None if panel_info['showing'] == panel else panel)
                    ]
                    anchor (0.0, 0.5)
                    align (0.0, 0.5)
                    xsize 1.0 / len(panels)


screen slide_panel():
    fixed at panel_slide:
        area (0.1,-0.9, 0.8, 0.8)
        $ renpy.use_screen("{0}_panel".format(panel_info['showing']))

screen info_panel():
    add Color('#770')
    text "Info"
screen trade_panel():
    add Color('#456')
    text "Trade"
screen chars_panel():
    add Color('#077')
    text "Characters"
screen quest_panel():
    add Color('#707')
    text "Quests"
screen None_panel():
    add Color('#777')
    text "Hidden"


init python:
    # furthest back
    config.overlay_screens.append('slide_panel')
    # in front of 
    config.overlay_screens.append('panel_control')


label start:
    "Start"

    "End"
    
    return

Shout if you need advice about tweaking it around

[Imperf3kt]

For what its worth, if you are planning to re-do things from scratch, this old snippet manages sliding panels quite nicely...

Zorder or layering is based on where each is added to config.overlay_screens
Changes makes it retract the 'old' screen, switch screens then slide in the new one.
I used a simple list [ panel title, panel title2 ] etc references panel title _panel screen ...
Easy to convert to Imagebuttons or whatever, just use actions where they set pending and reset st
Throw it in a new project and decide if useful...

Code: Select all

default panel_info = {
    'showing' : None,
    'pending' : None,
    'last_st' : -5.0,
    'warper' : {'in':'easein_bounce', 'out':'easeout_quad'},
    'duration' : 0.65,
    'ypos' : [-0.9, 0.1]
}

init python:

    def panel_slider(trans, st, at):

        global panel_info

        if not panel_info['last_st']:
            panel_info['last_st'] = st

        # default closed
        ypos = panel_info['ypos'][0]

        if panel_info['last_st'] + panel_info['duration'] >= st:
            # we should be moving
            if not panel_info['showing']:
                panel_info['showing'] = panel_info['pending']

                #### Here we want to force redraw/refresh the info_panel screen

                renpy.restart_interaction()

            yrange = panel_info['ypos'][1] - panel_info['ypos'][0]
            portion = float(st - panel_info['last_st']) / panel_info['duration']

            if panel_info['pending'] == panel_info['showing']:
                # showing
                warp_portion = renpy.atl.warpers[ panel_info['warper']['in'] ]( portion )
                ypos += yrange * warp_portion
            else:
                # hiding
                warp_portion = renpy.atl.warpers[ panel_info['warper']['out'] ]( portion )
                ypos = panel_info['ypos'][1] - yrange * warp_portion

        else:
            # we are either open or closed
            if not panel_info['pending'] and not panel_info['showing']:
                # closed with no pending action
                pass
            elif panel_info['pending'] != panel_info['showing']:
                # fully closed
                panel_info['showing'] = panel_info['pending']
                if panel_info['showing']:
                    # swapped to new

                    panel_info['last_st'] = st
                
                #### Here we want to force redraw/refresh the info_panel screen etc

                renpy.restart_interaction()
            else:
                # fully open
                ypos = panel_info['ypos'][1]

        # panel_info['cur_ypos'] = type(panel_info['ypos'][0])(ypos)
        panel_info['cur_st'] = st
        trans.ypos = type(panel_info['ypos'][0])(ypos) 
        return 0.04


transform panel_slide:
    function panel_slider

screen panel_control():
    default panels = [ 'info', 'trade', 'chars', 'quest' ]
    fixed:
        # x,y,w,h
        area (0.1, 0.0, 0.8, 0.1)
        hbox:
            xfill True
            for panel in panels:
                textbutton "{0}".format("Close" if panel_info['showing'] == panel else panel.capitalize()):
                    action [
                        SetDict(panel_info, 'last_st', None),
                        SetDict(panel_info, 'pending', None if panel_info['showing'] == panel else panel)
                    ]
                    anchor (0.0, 0.5)
                    align (0.0, 0.5)
                    xsize 1.0 / len(panels)


screen slide_panel():
    fixed at panel_slide:
        area (0.1,-0.9, 0.8, 0.8)
        $ renpy.use_screen("{0}_panel".format(panel_info['showing']))

screen info_panel():
    add Color('#770')
    text "Info"
screen trade_panel():
    add Color('#456')
    text "Trade"
screen chars_panel():
    add Color('#077')
    text "Characters"
screen quest_panel():
    add Color('#707')
    text "Quests"
screen None_panel():
    add Color('#777')
    text "Hidden"


init python:
    # furthest back
    config.overlay_screens.append('slide_panel')
    # in front of 
    config.overlay_screens.append('panel_control')


label start:
    "Start"

    "End"
    
    return

Shout if you need advice about tweaking it around

Thanks for this, but I cannot even begin to understand how to use it.


I've decided to just get rid of this dumb idea and forget about sliding headaches.