Actual guides?

[Nero]

Hey Zherot I can feel your frustration I was same as you at the start trust me you are going to lose some nerves first few months with Ren'Py but if you manage to handle it then everything will be more understandable.

So you want fancy textbutton? I suggest you use imagebutton instead https://www.renpy.org/doc/html/screens.html#imagebutton . You will do exact same thing except you must add hover and idle statement to it and provide it with how will your button look when mouse cursor is not pointed at it and when you hover your mouse over it.

Here is the example of one of my imagebuttons so you get the idea. I disabled 2 lines you should not bother with them yet they are used for tooltips... but I wont explain that here.

Code: Select all

    imagebutton:
        #hovered ShowTransient("STUN_IMAGE_EFFECT"), tt.Action("STUNNED"), tw.Action("You are stunned, you can not make any action while this effect is active .")
        idle "HoverScreens/hoverimagesmall/stun_idle.png"
        hover "HoverScreens/hoverimagesmall/stun_hover.png"
        #unhovered Hide("STUN_IMAGE_EFFECT")
        action Jump("Your label")

Second thing I noticed you used Atom text editor. Get Ren'Py package for it having those keywords in color means a lot. If you get stuck just ask questions here on the forum and we will try to help you. Don't give up programming isn't easy but its worth it!

[xavimat]

Would it be too much to ask you about the buttons? like how to change positions or change size or about the other types of buttons and how to code them?

Have you seen the tutorial? the part about positions?

Basically you have a lot of properties to position things in a screen:
pos, xpos, ypos, anchor, xanchor, yanchor, align, xalign, yalign, xcenter, ycenter, offset, xoffset, yoffset,

And, to define width and height:
xsize, ysize, xysize, maximum, xmaximum, ymaximum, minimum, xminimum, yminimum, xfill, yfill

Even, to define both position and size, you have:
area

All of this in our beloved (I'm kidding) documentation: https://www.renpy.org/doc/html/style_pr ... properties

The easiest way to position something is with xpos and ypos, with the number of pixels.

Code: Select all

screen test():
    text "Hello!" xpos 100 ypos 200 xsize 600 ysize 250

Or, the same thing:

Code: Select all

screen test():
    text "Hello!" pos (100, 200) xysize (600, 250)

[Zherot]

Thank you i will check your posts tomorrow im tired and i need to stay away from this for the rest of the day, i did managed to do what i wanted though even if i had to be infront of the computer all the day... sorry if i bothered you all too much.

I installed the package for atom Nero thanks it will indeed help to make things look in a better way, it will help my OCD.

Tomorrow i'll start to fight the button configurations and all of that for now im done hahaha.

[Remix]

I hate to say it, 'cept a programmer would take the link:

ImageButton

... and read through it, scroll down and follow all four links about the 'properties' an imagebutton can take

In non geek:
An imagebutton *can* hold numerous properties (those four links) and in most label 'add' or screen code they can be just thrown in a line:
imagebutton auto "save_%s.png" action ShowMenu('save') pos (120,250) id "bob" at transform_name
# auto evaluates the %s part of the string toward 'hover' 'idle' etc
# pos is position
# id
# at is ATL = a transform name
etc etc per requirements

[Zherot]

While playing a bit with the textbuttons i found out that if you put them too close together they start to conflict, you hover into a button and it looks like you are hovering on another one, it is like the button press area gets bugged or it is too big for each button that when they are together they overlap each other.

Is there a way to fix this?

Also how do i make a button only appear on hovering, like not showing up until i hover in the posisition of the button?

[Zherot]

I managed to make an Imagebutton that appears and disappears on hover, i don't know if it is possible with textbuttons but at least for imagebuttons i just had to make 2 images one completely transparent and the other not.

I still would like to see if the problem with stacking buttons too close can be fixed, to reduce the area of the hover and click because if they are too close together they tend to overlap.

[Zherot]

Ok, i think the vbox and hbox thing makes so they don't overlap like crazy... so if you plan to put the buttons in a type of list may aswell use that, the problem though would persist if you don't want to use that so it still would be a good idea to find out how to reduce the clickable/hovering area.

[Nero]

If I understood you correctly you want to have space between each button so they don't overlap each other. Give your buttons xalign and yalign to place them at desired location something like this. You can use xpos and ypos also to do that.

Code: Select all

screen test:
    textbutton "Button1" xalign 0.500 yalign 0.500
    textbutton "Button2" xalign 0.200 yalign 0.200

[Zherot]

If I understood you correctly you want to have space between each button so they don't overlap each other. Give your buttons xalign and yalign to place them at desired location something like this. You can use xpos and ypos also to do that.

Code: Select all

screen test:
    textbutton "Button1" xalign 0.500 yalign 0.500
    textbutton "Button2" xalign 0.200 yalign 0.200

No,i get that, what i say is that somehow when hovering on the buttons when they are too close to each other they overlap, like the mose shows you are on button 1 but in reality button 2 is being highlighted like if you were on top of button 2 and if you click you in fact get to whatever button2 does.

[Nero]

Hmmm this should not happen if you coded everything correctly could you post your code in here please?

[Zherot]

Hmmm this should not happen if you coded everything correctly could you post your code in here please?

I fixed it by using vbox but i will make it how it was to show you.

[Nero]

If you fixed it there is no need to post it .I just asked to post it so I could see your code and find the solution for you. Next time if you got any problem just post your code so we all save the time.

[Zherot]

I know that is the code that is making it, it is the code that changes the size of the buttons:




This are the images of how it looks, the red circle represents the place in which the cursor was at the moment that the hovered effect took place, the cursor didn't appear on the screen capture that is why i painted it there.

This is the code

Code: Select all

	textbutton "Go to town" pos(400, 500) xysize(400,300) action Jump("townmap")
        textbutton "Living Room" pos(400, 550) xysize(400,300) action Jump("livingroom")

But they do work fine without the size statements.

[Zherot]

If i want to make some buttons that are on the right side of the screen but are "hidden" to the right but you can still see a bit of them and the moment you hover onto one of them they move to the left like they are being dragged and the moment you stop hovering it goes back to it's position i would have to use transformations right?, now how do i incorporate the code of transformations in the button code?

[Nero]

You should use tooltips for that here I made example for you is this what you wanted?

Note: "bob.png" put any small test image to your game directory so you can see it running. I hope this helps

Code: Select all

screen image_to_display:
    add "bob.png" xalign 0.500 yalign 0.500
screen image_to_display2:   
    add "bob.png" xalign 0.500 yalign 0.550
screen image_to_display3:       
    add "bob.png"xalign  0.500 yalign 0.600  
    
screen tooltip_test:

    default t1 = Tooltip("")
    default t2 = Tooltip("")
    default tt = Tooltip("")
    
    
    vbox:
        xalign 1.000
        yalign 0.500
        textbutton "One.":
            action Return(1)
            hovered tt.Action("I will be displayed in line with texbuton!."), Show("image_to_display")
            unhovered Hide("image_to_display")
        textbutton "Two.":
            action Return(2)
            hovered t1.Action("I will be displayed in line with texbuton!."), Show("image_to_display2")
            unhovered Hide("image_to_display2")
            
        textbutton "Three.":
            action Return(3)
            hovered t2.Action("I will be displayed in line with texbuton!"), Show("image_to_display3")
            unhovered Hide("image_to_display3")
            
    text t2.value xalign 0.900 yalign 0.550            
    text t1.value xalign 0.900 yalign 0.500            
    text tt.value xalign 0.900 yalign 0.450
            
# The game starts here.
label start:
   
    "Game starts show buttons after next click!"
    show screen tooltip_test
    "Game ends!"