Animated image Buttons on Main Menu (Help Please)

[Urikol]

So this seemed to be a rather simple thing to learn... At first... But, it seems I was wrong.

What I am trying to do is have a little animated character next to my image button on the main menu screen.
Example.
(
Play
Load
Options
Exit

With an animated anything next to each word. (The same little animated character)
)

I do not want to use text buttons or image maps, but image buttons (if that's possible).

I've looked all around Lemmasoft for help but sadly only came across the use of image maps and text buttons.

Also, I am using this scripting method for my main menu in the options script not the screens script.

Code: Select all

label main_menu:
    scene mm_root

    $ ui.vbox(xpos=0.65, ypos=0.2)
    $ ui.imagebutton("MM/Play_MM.png", "MM/Play_MM2.png", clicked=ui.returns("start"))
    $ ui.imagebutton("MM/load_MM.png", "MM/load_MM2.png", clicked=ui.returns("load"))
    $ ui.imagebutton("MM/options_MM.png", "MM/options_MM2.png", clicked=ui.returns("prefs"))
    $ ui.imagebutton("MM/exit_MM.png", "MM/exit_MM2.png", clicked=ui.returns("quit"))
    $ ui.close()


    $ result = ui.interact()

    if result == "start":
        hide mainmenu
        $ renpy.jump_out_of_context("start")


    elif result == "load":
        jump load_screen

    elif result == "prefs":
        jump preferences_screen

    elif result == "quit":
        $ renpy.quit()
        
return

Since I dislike image maps more than image buttons believe it or not. OTL

...

Help would much appreciated, please and thank you.

[akemicchi]

Have you seen Uncle Mugen's Imagebutton GUI Tutorial? It's got examples and shows what you can do with imagebuttons.

[Urikol]

Have you seen Uncle Mugen's Imagebutton GUI Tutorial? It's got examples and shows what you can do with imagebuttons.

Yes I have looked at the scripts for that game. I can't figure it out.

That probably sounds lame yeah, but it's true.

Any other suggestions?

[feathersnake]

Is it alright if I ask for a little more detail about what you want the buttons to do?
As in, do you want the character to be part of the button and click-able as well? And do you want them animated the whole time, or to only animate when it's hovered? Also, what kind of animation? A constant animation with multiple images, a constant animation with ATL, or just a single image for idle that changes to another single image for hover?

I'm not sure if this is quite what you're going for, but anyways:

If you haven't already, and you're animating an image this way, somewhere in init, you should define your animations. i.e.:

Code: Select all

image Start character idle = Animation("idle chara animation 1.png", .15, "idle chara animation 2.png", .15, etc)
image Start character hover = Animation("idle chara animation 1.png", .15, "idle chara animation 2.png", .15, etc)

If/once you've got them defined, you can use them in an image button:

Code: Select all

imagebutton idle "Start character idle" hover "Start character hover" xpos 24 ypos 27 focus_mask True action Start()

and etc.

I haven't tested this exact type of thing, and I'm not completely sure what you're wanting to do, but I hope this helps. If it doesn't work or anything, just let me know. ^-^

[Urikol]

Is it alright if I ask for a little more detail about what you want the buttons to do?
As in, do you want the character to be part of the button and click-able as well? And do you want them animated the whole time, or to only animate when it's hovered? Also, what kind of animation? A constant animation with multiple images, a constant animation with ATL, or just a single image for idle that changes to another single image for hover?

Yes it's fine. ;u;

I want the animation to be apart of the button yes (Just the character in it to be "next to the words").

Like...

Play (animated character when hovered)
Load (animated character when hovered)
Options (animated character when hovered)
Exit (animated character when hovered)

Not just the play button but all the buttons. :C

The animation to only appear when the button is hovered.

An animation with multiple images (It only has three really). ie. The "Play" image button without the little character next to it (idle image). Then the next two have the same play button but this time each with different faces (Hover images)... and so on with the other buttons.

Something like that? I really appreciate your help thanks. ;u; I have a hard time wording things right when asking for help so I appreciate the questions too.

I tried the code you suggested... I got too many errors no matter what I did. Chances are I did it wrong or put the codes in the wrong scripts or whatnot though... OTL

[feathersnake]

Thanks for the answers. That helped quite a bit.

I tried the code you suggested... I got too many errors no matter what I did. Chances are I did it wrong or put the codes in the wrong scripts or whatnot though... OTL

I'll just try to replace your code that you had in the first place so you can try pasting a whole new thing in its place. Just in case its still not what you're going for, for future reference, I have a couple more questions.

Is there a reason you want the Main Menu to be a label instead of a screen? I'm going to give you a code where it's a screen (because I'm more used to them), but if that is a problem I'll see if I can do something with a label.

Is there a reason why you want your main menu in the options script instead of the screens script?

Do you already have your animated images defined? My defined images are going to be in my example code just in case you want reference for them too.

Did you delete the code for the main menu screen in the screens script so it doesn't interfere?

Alright. Just finished making a mockup menu on my end. Here's the code I used at the bottom of the options script. If this is the kind of thing you're going for, you can literally just paste it over the entire code you had in your first post. Of course, you'll need to replace all of the image names and such with your own.

Code: Select all

image Play_hover = Animation("Play h 1.png", .15, "Play h 2.png", .15, "Play h 3.png", .15)   
image Load_hover = Animation("Load h 1.png", .15, "Load h 2.png", .15, "Load h 3.png", .15) 
image Options_hover = Animation("Options h 1.png", .15, "Options h 2.png", .15, "Options h 3.png", .15) 
image Quit_hover = Animation("Quit h 1.png", .15, "Quit h 2.png", .15, "Quit h 3.png", .15) 
    
screen main_menu:

    tag menu
    
    add "Test BG.jpg"
    
    imagebutton idle "Play idle.png" hover "Play_hover" xpos 4 ypos 500 focus_mask True action Start()
    imagebutton idle "Load idle.png" hover "Load_hover" xpos 204 ypos 500 focus_mask True action ShowMenu("load")
    imagebutton idle "Options idle.png" hover "Options_hover" xpos 404 ypos 500 focus_mask True action ShowMenu("preferences")
    imagebutton idle "Quit idle.png" hover "Quit_hover" xpos 604 ypos 500 focus_mask True action Quit(confirm=False)

Just to give you a better idea of what I did, here are the images I used for my test menu.
These were the images for the Load button. The Start, Options, and Quit buttons were pretty much the same aside from the lettering.

Load idle.png (1.41 KiB) Viewed 6827 times

Load h 1.png (2.66 KiB) Viewed 6827 times

Load h 2.png (2.66 KiB) Viewed 6827 times

Load h 3.png (2.67 KiB) Viewed 6827 times

This was the background I used:

And if you want to see it in action and check out the script and files some more, here's the test game I made with it:

Test-1.0-all.zip

(20.69 MiB) Downloaded 214 times

Let me know if you have any questions! Hopefully this one will work out for you. ><

[Urikol]

Thanks for the answers. :D That helped quite a bit.

I'll just try to replace your code that you had in the first place so you can try pasting a whole new thing in its place. Just in case its still not what you're going for, for future reference, I have a couple more questions.

Is there a reason you want the Main Menu to be a label instead of a screen? I'm going to give you a code where it's a screen (because I'm more used to them), but if that is a problem I'll see if I can do something with a label.

Is there a reason why you want your main menu in the options script instead of the screens script?

Do you already have your animated images defined? My defined images are going to be in my example code just in case you want reference for them too.

Did you delete the code for the main menu screen in the screens script so it doesn't interfere?

Let me know if you have any questions! Hopefully this one will work out for you. ><

THANK YOU SO MUCH! This helps. (Except I don't know how to make the menu buttons vertical instead of horizontal and "has vbox" won't do anything. |D

BUT, this really worked. I am forever grateful to you kind sir or ma'am or non-specified gender. ;u;


To answer your other questions though:


Is there a reason you want the Main Menu to be a label instead of a screen? I'm going to give you a code where it's a screen (because I'm more used to them), but if that is a problem I'll see if I can do something with a label.

+

Is there a reason why you want your main menu in the options script instead of the screens script?

Yes, I tried using it in screens but other methods of making your own Main Menu involved using imagemaps and (30,0,7,21) That kind of position stuff which never did ANYTHING for me... at all... ever.

So I found the older way of making the main menu which was putting it in options instead of screens and thought that was the only way to use image buttons so... Yeah. :(

Do you already have your animated images defined? My defined images are going to be in my example code just in case you want reference for them too.

I do now. Well, in a tester game I use to mess with scripts n such when I'm learning something new. Will eventually use this method in the original game. :)

Did you delete the code for the main menu screen in the screens script so it doesn't interfere?

In the original game, yes. In the tester, no. But I can easily get it all back no problem. :3


===


So again, THANK YOU SO MUCH. I am a big noob at this game design stuff but I did find a college near me that actually may teach this sort of thing so once I can get in there I may get better at this.

Thank you for your time and help. ^^

[feathersnake]

THANK YOU SO MUCH! This helps. (Except I don't know how to make the menu buttons vertical instead of horizontal and "has vbox" won't do anything. |D

For that, you would just need to mess with the xpos and ypos numbers on each image button. xpos will go farther right if the number increases, and ypos will go farther down if the number increases. If you want them vertically aligned, once you find the xpos that you want them at, it will be the same for each imagebutton. From there, the ypos would be the one that varies. Lowest button at a higher number and highest button at a lower number and such. The exact numbers depend on your window size you have defined in the options, but xpos should never go higher than your window width, and same with ypos for the window height.

Is there a reason why you want your main menu in the options script instead of the screens script?

Yes, I tried using it in screens but other methods of making your own Main Menu involved using imagemaps and (30,0,7,21) That kind of position stuff which never did ANYTHING for me... at all... ever.

So I found the older way of making the main menu which was putting it in options instead of screens and thought that was the only way to use image buttons so... Yeah.

Ah. Well, I recommend just replacing the main menu screen code in the screens script from now on. I noticed that having it in options seemed to cause the Main Menu button in the navigation menu of the options and save/load screen to turn off. Edit: Ahaha... Disregard that part. I was being a bit of a space when I tested that.

So again, THANK YOU SO MUCH. I am a big noob at this game design stuff but I did find a college near me that actually may teach this sort of thing so once I can get in there I may get better at this.

Thank you for your time and help. ^^

No problem. I'm glad I was able to help you. ^-^ I'm still very amateur myself. I've been learning from research, examples, and trial and error, and I still learn something new everyday. Good luck to you and with your projects! I hope you're able to get into those classes and learn a lot from them.