Patreon button in the main menu !!!

[BlackSnowflake]

Hello everyone,

I would like to have a imagebutton in my main menu that leads directly to my Parteon page when someone clicks on it.
Can someone please be so kind and explain to me how this works ...

Many thanks in advance.

Blacksnowflake

[GamersPointe]

Hey! The first thing you'll want to do is lock-in your Patreon button graphic. Pop that into your gui folder for the game you're working on. If you want a hover image, drop that in there too. Then you have to follow a naming convention to make it work. For ease of use, just go with patreon_hover and patreon_idle, respectively. You can create a subfolder for them as well, and you'll only have to path to the images in the code. The fewer words, the better. From that point, close your project if it's running. It won't ruin anything if it's running; it'll simply refresh. But if you save a mistake, or before you finish the addition, the error report can throw you off.

Jump into your screens.rpy file, hit Ctrl / Cmd + F, and search for: screen main_menu():

Under the ##Main Menu screen block of notes, add an empty line under the link and enter the following on following line:

Code: Select all

transform patreonbutton:

Under that, hit tab and add these two lines in the same column:

Code: Select all

xalign 0.95

Code: Select all

yalign 1.0

You can edit these. The current coordinates will place the button on the bottom right-hand side of the viewport. If you don't want to animate the button, you're done with this block. If you do want to animate it, you can add more to this transform. In the same column as the aligns, enter:

Code: Select all

on idle:

Code: Select all

on hover:

Under on idle:, hit tab and enter:

Code: Select all

easein 0.05 rotate 0

This is the reset position and keeps the button still when the mouse isn't hovering over it. Under on hover:, follow the same format to create your custom animation. I'll show you what I entered for mine.

Code: Select all

rotate 0
easein 1.0 rotate 360
pass
easeout 0.5
easein 1.0 rotate 0
pass
easeout 1.5
repeat

This will make the button spin once, pause, then return to its start position, and pause for a little longer before starting over. It's a very fluid and simple animation. You can customize these values to produce other effects, so feel free to add more, reduce some, change some numbers around, and just have fun with it.

Under screen main_menu():, look for tag menu. Add an empty line, then start on the following line. These two lines go in the same column as tag menu.

Code: Select all

add gui.main_menu_background
imagebutton auto "gui/links/patreon_%s.png":

Okay, so what I have in quotes is my path to my images. Unless you organize the same way I do, yours will be different. By using auto and replacing hover / idle with %s, you're telling Ren'Py to automatically find and use these images based on the patreon prefix. Hover and idle must be in the file name for this to work and, in my experience, they must be at the end of said file name. Someone more experienced can weigh in on whether or not they need to be placed at the end though.

If you don't want or need idle and hover images, just go with the name of your image file; patreon_hover, or whatever you decided to name it. Under the above section, hit tab and add the following on their own lines:

Code: Select all

action OpenURL("yourpatreonlink.com/here")
at patreonbutton
focus_mask True

If you want the button silent, you're done. Save and test. It should work perfectly. If you want to dress it up with some audio, add lines for the next two in the same column:

Code: Select all

hover_sound "path to your audio file here"
activate_sound "path to your other audio file here"

This includes the extension for each like your image file does. So, if you add the sounds, you're totally done now. For your convenience, I've added a screenshot of my code so you can see the structure.

[GamersPointe]

Quick update!

I noticed that things have changed a little since the tutorial I learned from was made. There's now an overlay on the Main Menu that I didn't notice before. To prevent a transparency issue with your button, check the attached image for the new placement of the blocks. Please note that I moved the button down in the code, which places it higher in the screen. NOW it'll work perfectly. The method is otherwise the same.

Quick Update Button Sample.png

(53.67 KiB) Not downloaded yet