Position choice boxes based on order in a spaced circle

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
abysswatcher
Regular
Posts: 42
Joined: Sun Apr 12, 2020 11:50 pm
Projects: To-Live:The Struggle
Organization: Youyu de Shijie(憂鬱的世界)
Github: LuYifeng112
itch: https://luyifeng.itc
Location: New Zealand
Contact:

Position choice boxes based on order in a spaced circle

#1 Post by abysswatcher »

I was wondering if there is a way where I could arrange choice boxes into a circle formation by specifying like:

Code: Select all

if i==1:
xalign 0.5 yalign 0.5
you get the gist and so I was wondering how I would do that since I want to position the buttons around a circle based on their enumerate value.
Last edited by abysswatcher on Tue May 26, 2020 6:56 pm, edited 1 time in total.
The goal of the revolution is to achieve the people's rights, but during the course of the revolution, we must stress military power - and the two are mutually contradictory.
-Sun Yat-sen
"Become a Visual Novel writer they said, it will be fun" (little did they know they were right)

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

Re: Position choice boxes based on their enumerate

#2 Post by Imperf3kt »

I looked up the definition of 'enumerate', but I'm still confused.
Do you want a fixed number of buttons positioned in a circle, or are you trying to make buttons only appear in certain positions and not all the buttons will be used sometimes so you need them to move one space clockwise / anticlockwise when an empty space is present?
Warning: May contain trace amounts of gratuitous plot.
pro·gram·mer (noun) An organism capable of converting caffeine into code.

Current project: GGD Mentor

Twitter

abysswatcher
Regular
Posts: 42
Joined: Sun Apr 12, 2020 11:50 pm
Projects: To-Live:The Struggle
Organization: Youyu de Shijie(憂鬱的世界)
Github: LuYifeng112
itch: https://luyifeng.itc
Location: New Zealand
Contact:

Re: Position choice boxes based on their enumerate

#3 Post by abysswatcher »

Imperf3kt wrote: Tue May 26, 2020 6:18 pm I looked up the definition of 'enumerate', but I'm still confused.
Do you want a fixed number of buttons positioned in a circle, or are you trying to make buttons only appear in certain positions and not all the buttons will be used sometimes so you need them to move one space clockwise / anticlockwise when an empty space is present?
I am looking at the latter. So I want the first button to appear in one position, the second button in another position and so on. No all of them will be used so I will need to move the spaces to make them balanced. I'm trying to see how I can achieve that.
The goal of the revolution is to achieve the people's rights, but during the course of the revolution, we must stress military power - and the two are mutually contradictory.
-Sun Yat-sen
"Become a Visual Novel writer they said, it will be fun" (little did they know they were right)

User avatar
gas
Miko-Class Veteran
Posts: 842
Joined: Mon Jan 26, 2009 7:21 pm
Contact:

Re: Position choice boxes based on order in a spaced circle

#4 Post by gas »

Step 1:
You should know in advance what buttons to show. So the best thing to do is to have a list or something like that.
So, for example, computing the active locations or the available commands and put them in a list.

Step 2:
This one show your list of buttons automatically arranged as a circle, whatever their number.
viewtopic.php?f=8&t=25604#p313971
If you want to debate on a reply I gave to your posts, please QUOTE ME or i'll not be notified about. << now red so probably you'll see it.

10 ? "RENPY"
20 GOTO 10

RUN

abysswatcher
Regular
Posts: 42
Joined: Sun Apr 12, 2020 11:50 pm
Projects: To-Live:The Struggle
Organization: Youyu de Shijie(憂鬱的世界)
Github: LuYifeng112
itch: https://luyifeng.itc
Location: New Zealand
Contact:

Re: Position choice boxes based on order in a spaced circle

#5 Post by abysswatcher »

So I did some digging and tried out some methods and came out with this:

Code: Select all

screen choice(items):
    style_prefix "choice"
    $import math
    $center_x = 960
    $center_y = 540
    $radius = 400
    $button_idx = 0
    $button_info = [("gui/button/choice_idle_background.png", "gui/button/choice_hover_background.png", NullAction()),
                    ("gui/button/choice_idle_background.png", "gui/button/choice_hover_background.png", NullAction()),
                    ("gui/button/choice_idle_background.png", "gui/button/choice_hover_background.png", NullAction()),
                    ("gui/button/choice_idle_background.png", "gui/button/choice_hover_background.png", NullAction()),
                    ("gui/button/choice_idle_background.png", "gui/button/choice_hover_background.png", NullAction()),
                    ("gui/button/choice_idle_background.png", "gui/button/choice_hover_background.png", NullAction()),
                    ("gui/button/choice_idle_background.png", "gui/button/choice_hover_background.png", NullAction()),
                    ("gui/button/choice_idle_background.png", "gui/button/choice_hover_background.png", NullAction()),
                    ("gui/button/choice_idle_background.png", "gui/button/choice_hover_background.png", NullAction()),
                    ("gui/button/choice_idle_background.png", "gui/button/choice_hover_background.png", NullAction()),
                    ("gui/button/choice_idle_background.png", "gui/button/choice_hover_background.png", NullAction()),
                    ("gui/button/choice_idle_background.png", "gui/button/choice_hover_background.png", NullAction())]
    for i in items:
      $angle = button_idx * math.pi * 2 / len(button_info)
      $x = math.cos(angle) * radius + center_x
      $y = math.sin(angle) * radius + center_y
      textbutton i.caption action i.action xanchor 0.5 yanchor 0.5 xpos int(x) ypos int(y)
      $button_idx += 1
    add "gui/choice_circle.png" xpos 960 ypos 540
The only issue is this if the text caption is longer or shorter it affects how far away from the center it is which can make some wobbly circles. How would I make sure that the beginning of the textbutton always hugs a tight circle? ANother issue is the overlap that occurs when the caption is long. How can I avoid overlap? Is there a way I can make sure with the length of the caption I can change the calculations?
The goal of the revolution is to achieve the people's rights, but during the course of the revolution, we must stress military power - and the two are mutually contradictory.
-Sun Yat-sen
"Become a Visual Novel writer they said, it will be fun" (little did they know they were right)

User avatar
gas
Miko-Class Veteran
Posts: 842
Joined: Mon Jan 26, 2009 7:21 pm
Contact:

Re: Position choice boxes based on order in a spaced circle

#6 Post by gas »

Try to solve the issue by setting a fixed size for buttons.

Code: Select all

textbutton i.caption action i.action xanchor 0.5 yanchor 0.5 xpos int(x) ypos int(y) xsize 150 text_align 0.5
The xsize property set a fixed size for all buttons. Change it to your needs.
As for longer texts, there's no way to solve the issue of having a very long text compared to others. Why not use abbreviations? So, for example, Instead of EASTERN EUROPE you can use E-EUROPE. That's the only way that come to my mind for a good ergonomy.
If you want to debate on a reply I gave to your posts, please QUOTE ME or i'll not be notified about. << now red so probably you'll see it.

10 ? "RENPY"
20 GOTO 10

RUN

Post Reply

Who is online

Users browsing this forum: Google [Bot], Semrush [Bot]