How do you make a ‘notepad’ screen? SOLVED

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
hachi-mitsu
Newbie
Posts: 18
Joined: Sun Sep 30, 2018 4:21 am
Projects: A (second) personal project!
Contact:

How do you make a ‘notepad’ screen? SOLVED

#1 Post by hachi-mitsu » Mon Sep 16, 2019 11:37 pm

Hello there.

I’m having some trouble understanding the Screens and Styles documentation, furthermore, how to utilise it to create my own screens.

In my kinetic VN, I have a character who cannot speak and chooses to communicate instead by writing his answers on a notepad. For the type of screen I envision, I would draw a separate graphic for the notepad, and intend for a kind of ‘ease in’, sliding up animation. I’ve roughly drawn below what I mean, hoping it helps.

https://imgur.com/6JQAmCy

I’ve tried to look for specific tutorials on this type of screen, but haven’t found a match. I’ve been reading this tutorial on making a mobile phone text messaging screen, but find it a little too complicated for me, especially considering I only want to make a static notepad that slides in out out from the scene, with no buttons or interaction on it.

Part of the problem for me is understanding frames and measurements and so forth. With the messages written on the notepad, I don’t want them to be text, I want them to be png images of handwritten text that I can overlay onto the notepad, and cycle through as conversation progresses. Just for clarity’s sake, I’ve drawn below what I mean.

https://imgur.com/kKMRykV

If someone could be kind enough to tell me where to look, what to do, or even point me to a tutorial that I’ve missed, that would be wonderful. If it helps to know, my VN is 1920x1080.
Last edited by hachi-mitsu on Tue Oct 15, 2019 12:54 am, edited 1 time in total.

philat
Eileen-Class Veteran
Posts: 1763
Joined: Wed Dec 04, 2013 12:33 pm
Contact:

Re: How do you make a ‘notepad’ screen?

#2 Post by philat » Mon Sep 16, 2019 11:57 pm

Code: Select all

screen notepad(image):
    add "images/notepad.png" at slideup
    add image at slideup

transform slideup:
    yalign 0.5 yoffset 1080
    linear 0.5 yoffset 0

label start:
    "Blah blah"
    show screen notepad("images/imsorry.png")
    "blah blah"
    hide screen notepad
    "blah blah"
Extremely simplified and untested, but the basic framework would be something like the above. Obvs use your own images. You can use different animation warpers other than linear to achieve the actual effects you want. https://www.renpy.org/doc/html/atl.html#warpers

User avatar
Imperf3kt
Lemma-Class Veteran
Posts: 3135
Joined: Mon Dec 14, 2015 5:05 am
Location: Your monitor
Contact:

Re: How do you make a ‘notepad’ screen?

#3 Post by Imperf3kt » Tue Sep 17, 2019 12:26 am

I might add that the text box is probably undesired while the notepad is showing.
As such, I would recommend adding a pause and window hide before the next dialogue line is shown.

Also simplified and untested.

Code: Select all

screen notepad(image):
    add "images/notepad.png" at slideup
    add image at slideup

transform slideup:
    yalign 0.5 yoffset 1080
    linear 0.5 yoffset 0

label start:
    "Blah blah"
    window hide
    show screen notepad("images/imsorry.png")
    pause
    hide screen notepad
    window auto
    "blah blah"
There are other ways (if this is frequently used, I would actually prefer to modify the say screen) and the above code doesn't take into account the notepad sliding off screen, but it should be enough to start you in the right direction.
Warning: May contain trace amounts of gratuitous plot.
pro·gram·mer (noun) An organism capable of converting caffeine into code.

Twitter
Imperf3kt Blackjack - a WIP blackjack game for Android made using Ren'Py
Free Android GUI - Updated occasionally

User avatar
hachi-mitsu
Newbie
Posts: 18
Joined: Sun Sep 30, 2018 4:21 am
Projects: A (second) personal project!
Contact:

Re: How do you make a ‘notepad’ screen?

#4 Post by hachi-mitsu » Tue Sep 17, 2019 4:09 am

philat wrote:
Mon Sep 16, 2019 11:57 pm

Code: Select all

screen notepad(image):
    add "images/notepad.png" at slideup
    add image at slideup

transform slideup:
    yalign 0.5 yoffset 1080
    linear 0.5 yoffset 0

label start:
    "Blah blah"
    show screen notepad("images/imsorry.png")
    "blah blah"
    hide screen notepad
    "blah blah"
Extremely simplified and untested, but the basic framework would be something like the above. Obvs use your own images. You can use different animation warpers other than linear to achieve the actual effects you want. https://www.renpy.org/doc/html/atl.html#warpers
Thank you so much for providing me with an example code, I had no idea it would look that simple. I'll definitely use that to work off. Now that there's a base that I can test visually, I should be able to figure out the next steps. Thank you for the link too.

User avatar
hachi-mitsu
Newbie
Posts: 18
Joined: Sun Sep 30, 2018 4:21 am
Projects: A (second) personal project!
Contact:

Re: How do you make a ‘notepad’ screen?

#5 Post by hachi-mitsu » Tue Sep 17, 2019 4:17 am

Imperf3kt wrote:
Tue Sep 17, 2019 12:26 am
I might add that the text box is probably undesired while the notepad is showing.
As such, I would recommend adding a pause and window hide before the next dialogue line is shown.

Also simplified and untested.

Code: Select all

screen notepad(image):
    add "images/notepad.png" at slideup
    add image at slideup

transform slideup:
    yalign 0.5 yoffset 1080
    linear 0.5 yoffset 0

label start:
    "Blah blah"
    window hide
    show screen notepad("images/imsorry.png")
    pause
    hide screen notepad
    window auto
    "blah blah"
There are other ways (if this is frequently used, I would actually prefer to modify the say screen) and the above code doesn't take into account the notepad sliding off screen, but it should be enough to start you in the right direction.
Luckily, it's only a short kinetic VN, so I don't think I'll be using the notepad screen enough to justify a larger modification, but thank you for the insight, I understand why you bring it up.

I think I will need to test how it looks in-game to decide what I should do with the say screen/textbox. I tend to use just simple, partly transparent gradients for my textboxes. So in my head, I'm okay with the bottom corners of the notepad screen being underneath the textbox, as that's where the gradient would be at its lightest/most transparent-- if that makes sense. But who knows, I could change my mind once I put the pieces together and see if for myself.

Thank you very much for including that note for me and making it simple to understand.

Post Reply

Who is online

Users browsing this forum: Alex, Google [Bot]