[SOLVED] How to you actually use screen side?

[Enchant00]

I can't seem to fathom how the screen side is even used: https://www.renpy.org/doc/html/screens.html#side

c', 't', 'b', 'l', 'r', 'tl', 'tr', 'bl', 'br'
...

So can someone simplify to me how and when to use side? Also, if I were to create a viewport, then how is side applied there? Thank you in advance.

[Alex]

Uhm, documentation has sample codes for side and viewport...

Side can be used if you want to layout several things onscreen.
You must know beforehand how many "things" there would be, then set places for them in quotes. The order is matters - the "things" you'll put inside the "side" will be placed in that order.

###################################
#top left_____#___top__#____top right#
###################################
#left________#_center__#_______right#
###################################
#bottom left_#_bottom_#_bottom right#
###################################

Code: Select all

screen side_test():
     side "c tl br":
          text "Center"
          text "Top-Left"
          text "Bottom-Right"

https://www.renpy.org/doc/html/screens.html#side

When you should use it - it's up to you. It's just a kind of container, like vbox, hbox, fixed, grid, vpgrid, frame, viewport. They could help you to group some elements onscreen and simplify their positioning.



You can use side for positioning the viewport itself and its scrollbars

Code: Select all

screen viewport_example():
    side "c b r":
         area (100, 100, 600, 400)

         viewport id "vp": # will be put at 'C'enter
             draggable True

             add "washington.jpg"

         bar value XScrollValue("vp") # will be put at 'B'ottom
         vbar value YScrollValue("vp") # will be put at 'R'ight

https://www.renpy.org/doc/html/screens.html#viewport

[Imperf3kt]

I still have no idea what those letters represent, or rather, what they do.
They're clearly coordinates, but the documentation is absolutely terrible at explaining why you need them.

[Enchant00]

Uhm, documentation has sample codes for side and viewport...

Side can be used if you want to layout several things onscreen....

HAHA even with the examples I couldn't understand it but after your explanation is kinda makes sense now. So in essence, your saying it's like a container and it's a way to position the items quickly than having to arrange them manually. Btw, last question, does the area count as one of the items under side?

Code: Select all

side "c b r":
         area (100, 100, 600, 400) #so will this be centered or does it go straight down to the viewport?
         
         viewport id "vp":
             ...

Lastly, if I were to omit the b and the bar, then the viewport would only have a right scroll bar right? This is just to see if I really understood the side concept.

Code: Select all

screen viewport_example():
    side "c r":
         area (100, 100, 600, 400)

         viewport id "vp":
             draggable True

             add "washington.jpg"

         vbar value YScrollValue("vp")

[Alex]

The 'area' is a property and it can be set for a side container - https://www.renpy.org/doc/html/style_pr ... perty-area

Yes, if you hav a viewport and a vertical bar (2 items), you should put them at 'C'enter and at 'R'ight respectively

Code: Select all

side "c r": 

[Enchant00]

Oh, okay. Thanks! I get it now.