Viewport with Buttons and Foreground

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
ileikturtles
Regular
Posts: 32
Joined: Sun Nov 23, 2014 7:54 pm
Projects: Adventures of Scottie
Organization: StudioFondue
Tumblr: ileikturtles
Contact:

Viewport with Buttons and Foreground

#1 Post by ileikturtles »

Our game is a point & click adventure, and some areas of the level are navigable spaces wider than the screen size (ie. scroll left & right to look around - the environment is a long, narrow train car). I'm trying to implement a parallax scrolling effect, so that the foreground image moves slightly slower than the background one. I did this by making a screen with 2 viewports in it:

Code: Select all

label proSalon:
    screen salonViewport:  
        viewport id "salonViewportBG":
            scrollbars "horizontal"
            side_xpos 0
            side_ypos 0
                
            draggable True
            mousewheel True
            edgescroll (150, 800)

            add "ASSETS/PROLOGUE/Salon/salon car.png"
          
        viewport id "salonViewportFG":
            edgescroll (150, 900)
            add "ASSETS/PROLOGUE/Salon/foreground asset.png" 
And it works relatively well (though having the foreground and background speeds different means that it acts strange at the edges, and using the scrollbar means that the foreground and background don't scroll in sync...)

But now comes the next step, adding imagebuttons! The scene needs things for the player to interact with. An imagemap kind of worked, but with 7k pixel wide screens, I don't want to have to keep making pairs of image for each little change in the scene. However, when I added the imagebutton;

Code: Select all

label proSalon:
    screen salonViewport:  
        viewport id "salonViewportBG":
            scrollbars "horizontal"
            side_xpos 0
            side_ypos 0
                
            draggable True
            mousewheel True
            edgescroll (150, 800)

            add "ASSETS/PROLOGUE/Salon/salon car.png"
            
            imagebutton auto "ASSETS/PROLOGUE/Salon/gramaphone %s.png" xpos 1524 ypos 324 action Jump("proMusic")  # ---------- ie, this

        viewport id "salonViewportFG":
            edgescroll (150, 900)
            add "ASSETS/PROLOGUE/Salon/foreground asset.png" 
the background stops scrolling altogether!

Anyone have any idea what could be causing it?

User avatar
Alex
Lemma-Class Veteran
Posts: 3090
Joined: Fri Dec 11, 2009 5:25 pm
Contact:

Re: Viewport with Buttons and Foreground

#2 Post by Alex »

Try to set the child_size parameter for the viewport the same as the background image size.
http://www.renpy.org/doc/html/screens.html#viewport

tiliv
Newbie
Posts: 5
Joined: Fri Sep 11, 2015 5:45 pm
Contact:

Re: Viewport with Buttons and Foreground

#3 Post by tiliv »

Is it inefficient to have multiple such children in a viewport all taking on the background's size? I'm not sure about the implications of setting dozens of children to use that full size.

I recently went about solving this sort of problem in a different way. I'm probably too deeply entrenched in my layout to try playing with it again without remaking it from the ground up. My way basically put 2 children in the viewport, the image and then an hbox, and I put all the markers in the hbox and used a negative yoffset to get the hbox to overlap the image. Then the markers within the hbox are free to be positioned the normal way.

User avatar
orz
Regular
Posts: 126
Joined: Tue Apr 21, 2015 10:19 pm
Contact:

Re: Viewport with Buttons and Foreground

#4 Post by orz »

tiliv, I believe renpy saves the difference between the children, instead of constantly keeping multiple full ones.

I stumbled upon this a while ago when I was looking at the images renpy had loaded and found that it had the differences cropped between my "idle" and "hovered" imagemap.

User avatar
ileikturtles
Regular
Posts: 32
Joined: Sun Nov 23, 2014 7:54 pm
Projects: Adventures of Scottie
Organization: StudioFondue
Tumblr: ileikturtles
Contact:

Re: Viewport with Buttons and Foreground

#5 Post by ileikturtles »

Alex wrote:Try to set the child_size parameter for the viewport the same as the background image size.
http://www.renpy.org/doc/html/screens.html#viewport
Thank you! They seem to be moving together now... However I still have an issue where once you reach the end of the viewport (backgroung layer), the screen stops moving but the foreground keeps going, till you reach the end of that too. Also, if you use the scrollbar, the background layer moves alone, causing the FG layer to become out of sync.

In case I'm not explaining right or if you'd be so kind as to try experimenting a little, I'm uploading the scene. It can be accessed through the "SALON" option (the rest won't work). What I'm looking for is a way to make the FG stop moving once the BG has stopped, if that's at all possible.
tiliv wrote:My way basically put 2 children in the viewport, the image and then an hbox, and I put all the markers in the hbox and used a negative yoffset to get the hbox to overlap the image. Then the markers within the hbox are free to be positioned the normal way.
I tried this too, seems to work (it actually removed the weird FG rushing to catch up to the BG issue I mentioned above) but now, the foreground isn't moving at a different speed, so I lost the paralax effect I was going for :c

I appreciate you both taking the time to answer :D
Attachments
Prologue SALON VIEWPORT ISSUE.rar
Only "SALON" works, took the rest out to keep the file size small!
(9.87 MiB) Downloaded 98 times

Post Reply

Who is online

Users browsing this forum: No registered users