If UI programming is too complex and you still don't want to use imagemaps, you might also be able to achieve the effect you're after with
Styles.
For example, the following code will change the 'Start Game' button into a custom graphical button, if placed in the options.rpy file (say around line 160, just after the other style sections) and accompanied by the relevant graphics (attached).
Code: Select all
style.mm_button[u'Start Game'].background = 'mm_start_button.png'
style.mm_button[u'Start Game'].hover_background = 'mm_start_button_hover.png'
style.mm_button[u'Start Game'].xminimum = 133
style.mm_button[u'Start Game'].xmaximum = 133
style.mm_button[u'Start Game'].yminimum = 33
style.mm_button[u'Start Game'].ymaximum = 33
style.mm_button_text[u'Start Game'].color="#0000"
style.mm_button_text[u'Start Game'].size=1
What we're doing here is setting the style specifically for the button and text of the 'Start Game' button. If you want to re-style pretty much any UI element you do it in the same way, and you can find out exactly which you need to modify by hovering the mouse over the element in question and hitting Shift-I to open the style-inspector, so long as developer mode is still set to True in options.rpy.
- The 'background' property tells it to use the specified image as the background of the button (which gives it the visual appearance - by default the background is set to that blue rounded rectangle).
- The 'hover_background' property tells it to use a different background graphic when the user hovers the mouse over it.
- The xminimum/maximum and y min/max properties are there to explicitly size the button to exactly the pixel size of the graphic, to make sure it shows up properly... otherwise the button will try to resize itself to fit the text that's inside it.
- mm_button_text is modifying the properties of the text itself - we're setting it to totally transparent and so small that it won't affect the size of the button, so it doesn't get in the way.
On top of this, it's pretty cheeky, but you can actually move those buttons around the screen by using the xoffset and yoffset properties. They'll move relative to the position they 'should' be in - inside that little light-blue box in the bottom right by default - so you'll have to mess around with negative values to get the button to move up or to the left. For example, these values position it somewhere in the middle-left of the screen:
Code: Select all
style.mm_button[u'Start Game'].xoffset = -450
style.mm_button[u'Start Game'].yoffset = -100
Obviously, you can do the same with all the other buttons as well, so you should be able to do more or less what you like if you just want graphical buttons.
You can set the main menu background with 'style.mm_root.background', and you might also want to set 'mm_menu_frame.background' to hide the light-blue box the buttons used to be in:
Code: Select all
style.mm_root.background = 'menu_bg.jpg'
style.mm_menu_frame.background = '#0000'
