[Tutorial] Customizing the Textbox

A place for Ren'Py tutorials and reusable Ren'Py code.
Forum rules
Do not post questions here!

This forum is for example code you want to show other people. Ren'Py questions should be asked in the Ren'Py Questions and Announcements forum.
Message
Author
User avatar
WildRose18
Newbie
Posts: 9
Joined: Mon Apr 14, 2014 10:46 am
IRC Nick: Shin
Tumblr: aspie-hinata
Deviantart: wildrose18
Contact:

Re: [Tutorial] Customizing the Textbox

#121 Post by WildRose18 »

I've...run into quite a snag (and I've never had this problem before with other VNs, maybe it's because of how this particular textbox looks?)

Here's how the textbox looks:
How the textbox is actually supposed to look
How the textbox is actually supposed to look
boundbox.png (2.77 KiB) Viewed 2894 times
(And yes, I intentionally designed this textbox to look like that)

However, when I test out the game, this is the problem I keep running into:
I'm...not even sure where to begin here
I'm...not even sure where to begin here
wth is this.png (11.34 KiB) Viewed 2894 times
I really don't know what's happening here. I've followed pretty much all the stuff to the letter, but maybe this is just operator error?

User avatar
Kia
Eileen-Class Veteran
Posts: 1039
Joined: Fri Aug 01, 2014 7:49 am
Deviantart: KiaAzad
Discord: Kia#6810
Contact:

Re: [Tutorial] Customizing the Textbox

#122 Post by Kia »

your image have a huge empty space on top, the text is placed in middle of the image and not in middle of the visible part of image

User avatar
WildRose18
Newbie
Posts: 9
Joined: Mon Apr 14, 2014 10:46 am
IRC Nick: Shin
Tumblr: aspie-hinata
Deviantart: wildrose18
Contact:

Re: [Tutorial] Customizing the Textbox

#123 Post by WildRose18 »

I see. I cropped the image and that fixed that part of the problem, but...now there's another one D:
I'm pretty sure this doesn't look right
I'm pretty sure this doesn't look right
wtf is this.png (10.16 KiB) Viewed 2868 times
If it helps, the dimensions of this particular textbox are 800x170. Should it be smaller than that?

User avatar
Kia
Eileen-Class Veteran
Posts: 1039
Joined: Fri Aug 01, 2014 7:49 am
Deviantart: KiaAzad
Discord: Kia#6810
Contact:

Re: [Tutorial] Customizing the Textbox

#124 Post by Kia »

I can't pin point the problem by looking at the screenshot, you know how it works right? to get attention you need to show some code ^_^

User avatar
WildRose18
Newbie
Posts: 9
Joined: Mon Apr 14, 2014 10:46 am
IRC Nick: Shin
Tumblr: aspie-hinata
Deviantart: wildrose18
Contact:

Re: [Tutorial] Customizing the Textbox

#125 Post by WildRose18 »

that's kinda the problem, I can't tell if the issue's in the code or if it's just what I've done with the text box T_T

Code: Select all

#########################################
    ## These settings let you customize the window containing the
    ## dialogue and narration, by replacing it with an image.

    ## The background of the window. In a Frame, the two numbers
    ## are the size of the left/right and top/bottom borders,
    ## respectively.

    style.window.background = Frame("gui/boundbox.png", 800, 170)

    ## Margin is space surrounding the window, where the background
    ## is not drawn.

    # style.window.left_margin = 6
    # style.window.right_margin = 6
    # style.window.top_margin = 6
    # style.window.bottom_margin = 6

    ## Padding is space inside the window, where the background is
    ## drawn.

    style.window.left_padding = 10
    style.window.right_padding = 190
    style.window.top_padding = 15
    style.window.bottom_padding = 10

    ## This is the minimum height of the window, including the margins
    ## and padding.

    ## style.window.yminimum = 250
I've kind of edited the code to what I thought would fit, but I haven't touched this kind of stuff in forever so I'm very rusty with this

User avatar
Kia
Eileen-Class Veteran
Posts: 1039
Joined: Fri Aug 01, 2014 7:49 am
Deviantart: KiaAzad
Discord: Kia#6810
Contact:

Re: [Tutorial] Customizing the Textbox

#126 Post by Kia »

what is exactly the problem with the text box?

User avatar
WildRose18
Newbie
Posts: 9
Joined: Mon Apr 14, 2014 10:46 am
IRC Nick: Shin
Tumblr: aspie-hinata
Deviantart: wildrose18
Contact:

Re: [Tutorial] Customizing the Textbox

#127 Post by WildRose18 »

the textbox isn't displaying right in-game but I'm not sure if it's code-related or if it's the textbox design...

User avatar
Kia
Eileen-Class Veteran
Posts: 1039
Joined: Fri Aug 01, 2014 7:49 am
Deviantart: KiaAzad
Discord: Kia#6810
Contact:

Re: [Tutorial] Customizing the Textbox

#128 Post by Kia »

you'll have to explain how it should look for us to see what's wrong with it, too big? too small? rotated? or perhaps the small gap on the right and bottom?

User avatar
WildRose18
Newbie
Posts: 9
Joined: Mon Apr 14, 2014 10:46 am
IRC Nick: Shin
Tumblr: aspie-hinata
Deviantart: wildrose18
Contact:

Re: [Tutorial] Customizing the Textbox

#129 Post by WildRose18 »

yeah it's the gap - it shouldn't be there and idk why it's happening...

User avatar
Kia
Eileen-Class Veteran
Posts: 1039
Joined: Fri Aug 01, 2014 7:49 am
Deviantart: KiaAzad
Discord: Kia#6810
Contact:

Re: [Tutorial] Customizing the Textbox

#130 Post by Kia »

gaps come from margin, padding or simply your image have some transparent space there. set margins and padding to 0 and check your image in Photoshop for problems

User avatar
WildRose18
Newbie
Posts: 9
Joined: Mon Apr 14, 2014 10:46 am
IRC Nick: Shin
Tumblr: aspie-hinata
Deviantart: wildrose18
Contact:

Re: [Tutorial] Customizing the Textbox

#131 Post by WildRose18 »

Had to change up the whole thing >.< no matter what I did, changing padding and margin and double-checking in Photoshop, it still went wonky. Plus I had the feeling the thing was too big so I shrunk the proportions greatly.
New boundbox
New boundbox
boundbox.png (130.14 KiB) Viewed 2766 times
gah.png
This is the result.

Code: Select all

#########################################
    ## These settings let you customize the window containing the
    ## dialogue and narration, by replacing it with an image.

    ## The background of the window. In a Frame, the two numbers
    ## are the size of the left/right and top/bottom borders,
    ## respectively.

    style.window.background = Frame("gui/boundbox.png", 240, 120)

    ## Margin is space surrounding the window, where the background
    ## is not drawn.

    style.window.left_margin = 0
    style.window.right_margin = 0
    style.window.top_margin = 0
    style.window.bottom_margin = 0

    ## Padding is space inside the window, where the background is
    ## drawn.

    style.window.left_padding = 10
    style.window.right_padding = 10
    style.window.top_padding = 20
    style.window.bottom_padding = 10

    ## This is the minimum height of the window, including the margins
    ## and padding.

    ## style.window.yminimum = 250
Also here's the code just to be safe.

User avatar
Ertal77
Veteran
Posts: 322
Joined: Sat Feb 27, 2016 2:33 pm
Completed: A Hand in the Darkness, Chasing the Stars, My Burning Heart, Blood and Lust, Lurkers, Jolly Roger, The Remainder, The Manor, Night and Day
Projects: Deep in the Forest and Exes Assault!!
Organization: Ertal Games
Tumblr: ertalgames
itch: ertal-games
Location: Spain
Discord: Ertal#0394
Contact:

Re: [Tutorial] Customizing the Textbox

#132 Post by Ertal77 »

Kia, you saved me! I could cry from relief! After tinkering with the textbox and namebox for, like, seven hours, it finally worked as it should, thanks to your code!
Do you like BL games? Then join Ertal Games' Discord!

User avatar
MichiPantera
Newbie
Posts: 8
Joined: Thu Mar 23, 2017 12:04 pm
Contact:

Re: [Tutorial] Customizing the Textbox

#133 Post by MichiPantera »

Thank you so much!! You really helped me out! ^^

Post Reply

Who is online

Users browsing this forum: No registered users