Rotating/Scrolling Animated Menus?

[Necrocarnival]

It's a long shot, but I was wondering if anyone could help me out with this. xD

I was wondering if it was possible to create menus that have a sort of rotating/scrolling system using Ren'Py, and if so, how to code such a thing.
If you're not sure what I'm talking about, the best example I can think to give would be Blazblue: CT's main menu.

{You can see it here}

Any help would be much appreciated~ c:

[apricotorange]

How would you expect a user to even use a menu like that with a mouse? It might look cool, but it isn't particularly practical unless you expect the user to be using a gamepad.

Ren'Py doesn't support 3d transforms at the moment. Ignoring that, you can do everything with a creator-defined displayable (http://www.renpy.org/doc/html/udd.html). If you also ignore the requirement for animation, you could also use screen language (http://www.renpy.org/doc/html/screens.html).

[Necrocarnival]

There are directional buttons either side of each option, as you'll notice in the example, so the user would either click the left or right directional button, or use the left and right arrows on their keyboard. xD

{Blazblue, the game I used for my example, was actually originally a PC game - after being an arcade game - so apparently that menu is perfectly mouse/keyboard friendly~ XD}

I, personally, would be using this for a character select screen, so I'd incorporate buttons to click through the different available characters, making it mouse-friendly.

Thank you for your help, however~ ;w;

[Sharm]

The animation aspect doesn't seem that hard. Just make them sprites and use move commands.

[Misfile]

Wouldn't this just be an array of images with themove function already in renpy combined with the use of a simple on event command where it's either a mouse click or a key strike on the keyboard? Apricotorange does seem to be right about not being able to make it rotating through software, you do have the option to animate it by hand (or in the 3d suite)

That all said I haven't tried to do this before, but that's my thought on how to do that.

[apricotorange]

Hmm, actually, it wasn't quite as difficult as I thought it'd be, with some slightly abusive usage of renpy.show(). Proof of concept:

Code: Select all

define cha = Character("asdf")
image aya = Solid("#F00", maximum=(200, 400))
image maya = Solid("#FF0", maximum=(200, 400))
image taiga = Solid("#F0F", maximum=(200, 400))
image ayumi = Solid("#0FF", maximum=(200, 400))

screen select_buttons:
    button align (0.0,0.0) maximum (200, 600) action Return("left"):
        add "#0F0"
    button align (1.0,0.0) maximum (200, 600) action Return("right"):
        add "#0F0"
    textbutton "Select" align (0.5, 1.0) action Jump("end_select_loop")

transform move_off_left:
    linear 1.0 xpos -200

transform move_in_left:
    xpos 800
    yalign 0.5
    linear 1.0 xpos 300

transform move_off_right:
    linear 1.0 xpos 800

transform move_in_right:
    xpos -200
    yalign 0.5
    linear 1.0 xpos 300

transform at_center:
    xpos 300
    yalign 0.5

define characters = [ "aya", "maya", "taiga", "ayumi" ]
label start:
    # begin whatever
label begin_select_loop:
    $ cur_char_index = 0
    $ renpy.show(characters[cur_char_index], at_list=[at_center])
label select_loop:
    call screen select_buttons
    if _return == "left":
        $ renpy.show(characters[cur_char_index], at_list=[move_off_left])
        $ cur_char_index = (cur_char_index + 1) % len(characters)
        $ renpy.show(characters[cur_char_index], at_list=[move_in_left])
    else:
        $ renpy.show(characters[cur_char_index], at_list=[move_off_right])
        $ cur_char_index = (cur_char_index - 1) % len(characters)
        $ renpy.show(characters[cur_char_index], at_list=[move_in_right])
    jump select_loop
label end_select_loop:
    $ selected_char = characters[cur_char_index]
    "You selected [selected_char]"
    return

[Levrex]

I must say thank you for that spectacular solution too. Was thinking the same thing eighteen hours ago, but couldn't get it past "how to move all of them at the same time".
It seems like it could be useful for me too, later on.

[Xerofit51]

(Noob) can you add a return button as well?

[octacon100]

This got me thinking of something I want to do, figured I'd put the code here for anyone who wants it. It's a similar scrolling menu, but it's vertical, and three buttons can be shown at the same time. Hope it helps some people. The buttons could be changed to transparent image buttons in order to keep the images below the same color.

Code: Select all

define cha = Character("asdf")

image Red = Solid("#F00", maximum=(100, 100))
image Green = Solid("#0F0", maximum=(100, 100))
image Blue = Solid("#00F", maximum=(100, 100))
image White = Solid("#FFF", maximum=(100, 100))

define characters = [ "Red", "Green", "Blue", "White" ]

init:
    $ topOffScreenY = -15
    $ topY = 115
    $ midY = 245
    $ botY = 375
    $ botOffScreenX = 505
    $ rightX = 650
    $ aniTime = 0.5

screen select_buttons:
    button align (1.0,0.0) maximum (200, 100) action Return("up"):
        add "#0F0"
    button align (1.0,1.0) maximum (200, 100) action Return("down"):
        add "#0F0"
    #textbutton "Select" align (0.5, 1.0) action Jump("end_select_loop")

screen itemSelectButtons:
    button xpos rightX ypos topY  maximum (100, 100) action [ SetVariable("selected_char", characters[prevCharIndex]), Jump("end_select_loop")]
    button xpos rightX ypos midY  maximum (100, 100) action [ SetVariable("selected_char", characters[curCharIndex]), Jump("end_select_loop")]
    button xpos rightX ypos botY maximum (100, 100) action [ SetVariable("selected_char", characters[nextCharIndex]), Jump("end_select_loop")]

transform atMid:
    xpos rightX
    ypos midY

transform atTop:
    xpos rightX
    ypos topY
    
transform atBot:
    xpos rightX
    ypos botY

transform moveInFromTop:
    xpos rightX
    ypos topOffScreenY
    linear aniTime ypos topY
    
transform moveInTopToMid:
    xpos rightX
    ypos topY
    linear aniTime ypos midY
    
transform moveInMidToBot:
    xpos rightX
    ypos midY
    linear aniTime ypos botY

transform moveOffFromBot:
    xpos rightX
    ypos botY
    linear aniTime ypos botOffScreenX

transform moveInFromBot:
    xpos rightX
    ypos botOffScreenX
    linear aniTime ypos botY
    
transform moveInBotToMid:
    xpos rightX
    ypos botY
    linear aniTime ypos midY
    
transform moveInMidToTop:
    xpos rightX
    ypos midY
    linear aniTime ypos topY
    
transform moveOffFromTop:
    xpos rightX
    ypos topY
    linear aniTime ypos topOffScreenY

label start:
    # begin whatever
    
label begin_select_loop:
    $ curCharIndex = 0
    $ selected_char = characters[curCharIndex]
    $ prevCharIndex = (curCharIndex - 1) % len(characters)
    $ nextCharIndex = (curCharIndex + 1) % len(characters)
    $ renpy.show(characters[prevCharIndex], at_list=[atTop]) 
    $ renpy.show(characters[curCharIndex], at_list=[atMid])
    $ renpy.show(characters[nextCharIndex], at_list=[atBot])
    show screen itemSelectButtons
    

label select_loop:
    call screen select_buttons
    if _return == "up":        
        show screen select_buttons
        hide screen itemSelectButtons
        $ prevCharIndex = (curCharIndex - 1) % len(characters)
        $ nextCharIndex = (curCharIndex + 1) % len(characters)
        $ nextCharIndex2 = (curCharIndex + 2) % len(characters)
        $ renpy.show(characters[prevCharIndex], at_list=[moveOffFromTop])
        $ renpy.show(characters[curCharIndex], at_list=[moveInMidToTop])
        $ renpy.show(characters[nextCharIndex], at_list=[moveInBotToMid])
        $ renpy.show(characters[nextCharIndex2], at_list=[moveInFromBot])
        $ renpy.pause(aniTime, hard=True)
        $ renpy.hide(characters[prevCharIndex]) 
        $ prevCharIndex = curCharIndex
        $ curCharIndex = nextCharIndex
        $ nextCharIndex = nextCharIndex2
        show screen itemSelectButtons
    else:
        show screen select_buttons
        hide screen itemSelectButtons
        $ prevCharIndex = (curCharIndex - 1) % len(characters)
        $ prevCharIndex2 = (curCharIndex - 2) % len(characters)
        $ nextCharIndex = (curCharIndex + 1) % len(characters)
        $ renpy.show(characters[prevCharIndex2], at_list=[moveInFromTop])
        $ renpy.show(characters[prevCharIndex], at_list=[moveInTopToMid])
        $ renpy.show(characters[curCharIndex], at_list=[moveInMidToBot])
        $ renpy.show(characters[nextCharIndex], at_list=[moveOffFromBot]) 
        $ renpy.pause(0.5, hard=True)
        $ renpy.hide(characters[nextCharIndex]) 
        $ nextCharIndex = curCharIndex
        $ curCharIndex = prevCharIndex
        $ prevCharIndex = prevCharIndex2
        show screen itemSelectButtons
    jump select_loop
label end_select_loop:
    $ renpy.hide(characters[prevCharIndex])
    $ renpy.hide(characters[curCharIndex])
    $ renpy.hide(characters[nextCharIndex]) 
    hide screen itemSelectButtons
    "You selected [selected_char]"
    return