Align a viewport to bottom of parent element, or scroll viewport to bottom when updated

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
Tayruu
Regular
Posts: 96
Joined: Sat Jul 05, 2014 7:57 pm

Align a viewport to bottom of parent element, or scroll viewport to bottom when updated

#1 Post by Tayruu » Mon Jul 09, 2018 3:30 am

In my project I'm creating a system where characters send each other messages/texts online and on phones. My problem lies in how I'm trying to display the messages - I want the messages to be displayed from the bottom, and to keep the area showing those messages bound to the bottom, showing the latest message, or to have the message area animate-scroll-down when a new message appears.

I've done my best to create a demo script demonstrating the issue with two variations attempting it:
  • One using a viewport and ui.adjustment(), where the screen doesn't scroll except if the game screen is "refreshed", say by closing/opening the pause menu.
  • One not using a viewport. This one remains bound to a parent frame's base, but it also bleeds outside of it.
(excuse my silly example messages, hahah)
Attachments
script.rpy
(4.4 KiB) Downloaded 11 times

User avatar
MaydohMaydoh
Newbie
Posts: 18
Joined: Mon Jul 09, 2018 5:49 am
Projects: Fuwa Fuwa Panic
Tumblr: maydohmaydoh
Location: The Satellite of Love
Contact:

Re: Align a viewport to bottom of parent element, or scroll viewport to bottom when updated

#2 Post by MaydohMaydoh » Mon Jul 09, 2018 7:19 am

Changing

Code: Select all

y.change(9999)
to

Code: Select all

y.value += 9999
in the viewport demo is the only way I can figure out. Hope it helps.

User avatar
mitoky
Veteran
Posts: 271
Joined: Sat Feb 07, 2015 9:12 pm
Projects: CrossDol, The Purring Demon's Love, circus eterie
Organization: astellic
Tumblr: mitokysvnstudio
Deviantart: mitoky
Contact:

Re: Align a viewport to bottom of parent element, or scroll viewport to bottom when updated

#3 Post by mitoky » Mon Jul 09, 2018 7:25 am

I dont know how to animate a new message, but to start at the bottom add this line to the viewport:

Code: Select all

yinitial 1.0
Image

[Logo Commissions - OPEN] || Wish to support or tip me? Buy Me a Coffee!

User avatar
Tayruu
Regular
Posts: 96
Joined: Sat Jul 05, 2014 7:57 pm

Re: Align a viewport to bottom of parent element, or scroll viewport to bottom when updated

#4 Post by Tayruu » Tue Jul 10, 2018 8:41 pm

Oh hey, y.value seems to solve the problem. Of course I realise now that the scroll resets if things like the menu or history are brought up, which means if the player scrolls up it'll lose their place. This isn't *too* much of a problem as I'm using this for narrative purposes rather than a "mechanic". If I could alter y outside of the screen code, I could probably get around it.

User avatar
MaydohMaydoh
Newbie
Posts: 18
Joined: Mon Jul 09, 2018 5:49 am
Projects: Fuwa Fuwa Panic
Tumblr: maydohmaydoh
Location: The Satellite of Love
Contact:

Re: Align a viewport to bottom of parent element, or scroll viewport to bottom when updated

#5 Post by MaydohMaydoh » Wed Jul 11, 2018 5:59 am

If you assign y outside of the screen at the top of your python block, you can change it outside of the screen and then add the y.value to the tweet function meaning it will only scroll to the bottom when that function is called to display a new tweet. That seems to keep the position when you open/close the menu etc.

Post Reply

Who is online

Users browsing this forum: No registered users