How can I make a custom pixel dialogue box with drop shadow?

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
Lohre
Newbie
Posts: 4
Joined: Thu May 09, 2024 5:17 pm
Contact:

How can I make a custom pixel dialogue box with drop shadow?

#1 Post by Lohre »

Hi! It's my first time using a forum like this so I hope I'm not doing anything wrong.
I want to make my game as similar as possible to Tokimeki Memorial - forever with you - visually, and right now I'm stuck on the dialogue box thingy.
Basically, how can I make this drop shadow effect and make the dialogue box resizeable?

The default style for the dialogue box (textbox) is this I believe:

Code: Select all

style window:
    xalign 0.5
    xfill True
    yalign gui.textbox_yalign
    ysize gui.textbox_height

    background Image("gui/textbox.png", xalign=0.5, yalign=2)
There doesn't seem to be much I can customize when it comes to the textbox itself, only the text position and length. Also, since I'm using low resolution pixel sprite the box looks extremely small...
As you can prolly guess I am new to Ren'py so I apologize if this is all to simple, I just didn't know how to "search" it.
Thanks in advance.

Image

jeffster
Veteran
Posts: 495
Joined: Wed Feb 03, 2021 9:55 pm
Contact:

Re: How can I make a custom pixel dialogue box with drop shadow?

#2 Post by jeffster »

Lohre wrote: Fri May 10, 2024 4:59 pm Basically, how can I make this drop shadow effect and make the dialogue box resizeable?

The default style for the dialogue box (textbox) is this I believe:

Code: Select all

style window:
    xalign 0.5
    xfill True
    yalign gui.textbox_yalign
    ysize gui.textbox_height

    background Image("gui/textbox.png", xalign=0.5, yalign=2)
There doesn't seem to be much I can customize when it comes to the textbox itself, only the text position and length. Also, since I'm using low resolution pixel sprite the box looks extremely small...
As you can prolly guess I am new to Ren'py so I apologize if this is all to simple, I just didn't know how to "search" it.
Please read documentation here:
https://renpy.org/doc/html/

Start with "Quickstart" to get understanding of various design opportunities offered by Ren'Py.

(There is also a Search box).

Then read "GUI Customization Guide" which should answer your question.

To make the dialogue box resizeable, see "Borders". Note how we can apply Borders to Frame(), e.g.

Code: Select all

style window:
    background Frame("gui/my_textbox.png", 50, 50)
where gui/my_textbox.png means the filename of your background picture (or however you name that file). The picture will be used (in this example) for borders 50 px wide, and that blue area in the middle will be stretched to the desired size of the text box.

Actually there are tons of possible options for style window:
https://renpy.org/doc/html/style_proper ... properties

To set dialog text style, use style say_dialogue. Text shadow can be set using outlines
https://renpy.org/doc/html/style_proper ... y-outlines

For example, to add 4 px black shadow, shifted 1 px to the right and 2 px down:

Code: Select all

style say_dialogue:
    outlines [(4, "#000", 1, 2)]
The square brackets are there for the option to add several shadows / outlines simultaneously, e.g. 2 shadows here:

Code: Select all

style say_dialogue:
    outlines [(6, "#9008", 0, 0), (4, "#000", 1, 2)]
That means 6 pixel wide semi-transparent red shadow ("#9008") added before adding the same black shadow as in the previous example.

Of course instead of using Frame() for the text box, you can still use Image(), just scale your background image to the size you need, using any graphical editor, like paint.net (Windows) or GIMP (free cross-platform editor). (Also you could use scaling by Ren'Py, but it's always best to scale all pictures beforehand, for best performance and visual quality).
If the problem is solved, please edit the original post and add [SOLVED] to the title. 8)

User avatar
Lohre
Newbie
Posts: 4
Joined: Thu May 09, 2024 5:17 pm
Contact:

Re: How can I make a custom pixel dialogue box with drop shadow?

#3 Post by Lohre »

Got it, thank you so much for your time and help!

Post Reply

Who is online

Users browsing this forum: Amazon [Bot]