Quick menu image mapping/Two window [All solved]

[Pinlin]

EDIT: Thank you a lot guys for helping me. I solved the first problem with separated buttons and I got the code for changing the little box' background

I got two problems with the GUI:
1. I want to make an image map of the "textbox" and "Quick menu" as one.
This is how I want it to look like:



I don't understand why the groundmap is floating above. Also the buttons don't work.
How do I put the textbox and quickmenu in one image map?

This is the code I used for that result:

Code: Select all

 # Add an in-game quick menu.
    hbox:
        style_group "quickmenu"
    
        xalign 1.0
        yalign 0.0
        
        imagemap:
              ground "quickmenu_ground"
              idle "quickmenu"
              hover "quickmenuhover"
              selected_idle "quickmenu_selectidle"
              selected_hover "quickmenuhover"
        
              hotspot (1050,720,1170,740) action QuickSave()
              hotspot (1050,750,1170,770) action QuickLoad()
              hotspot (1050,780,1170,800) action ShowMenu('save')
              hotspot (1050,810,1170,830) action Skip()
              hotspot (1050,840,1170,860) action Preference("auto-forward","toggle")
              hotspot (1050,870, 1170,890) action ShowMenu('preference')

The second problem is, I would like to use a different background for the small box above the textbox:


As shown the textbox and the little box above share the same image. I don't know where you can find the code for the small box.

[xela]

Second problem can be fixed by restyling say_who_window (mine looks like this for example):

Code: Select all

    style say_who_window:
        background  Frame(Transform(im.Twocolor("content/gfx/frame/window_frame.png", grey, black), alpha=0.6), 15, 15)
        ypos 20
        xpos 10
        xpadding 1
        ypadding 1

First problem I am not sure about, every time I see words like hotspot and imagemap, I instantaneously get confused

[Pinlin]

Second problem can be fixed by restyling say_who_window (mine looks like this for example):

Code: Select all

    style say_who_window:
        background  Frame(Transform(im.Twocolor("content/gfx/frame/window_frame.png", grey, black), alpha=0.6), 15, 15)
        ypos 20
        xpos 10
        xpadding 1
        ypadding 1

First problem I am not sure about, every time I see words like hotspot and imagemap, I instantaneously get confused

Thank you for the reply!
I tried the code and it says:

Code: Select all

I'm sorry, but errors were detected in your script. Please correct the
errors listed below, and try again.


File "game\options.rpy", line 102: invalid syntax
    style say_who_window:
                        ^
    

Ren'Py Version: Ren'Py 6.14.1.366

I put it in the options scrip and it seems not working.

Image mapping is indeed hard and confusing. I have read many tutorials and I'm still stuck...

[xela]

Ren'Py Version: Ren'Py 6.14.1.366

It uses new style syntax available only in 6.17.xxx

For older versions use:

Code: Select all

style.say_who_window.background = Frame("path to image", 15, 15)
# bla bla bla

To me imagemaps are confusing because I utterly suck as an artist (so I cannot make one myself) and never had a chance to work on a actually used one, I expect it get better with experience. Buttons never failed me so far.

[Pinlin]

Ren'Py Version: Ren'Py 6.14.1.366

It uses new style syntax available only in 6.17.xxx

For older versions use:

Code: Select all

style.say_who_window.background = Frame("path to image", 15, 15)
# bla bla bla

To me imagemaps are confusing because I utterly suck as an artist (so I cannot make one myself) and never had a chance to work on a actually used one, I expect it get better with experience. Buttons never failed me so far.

Thanks a lot! It worked!
I think I'm "ok" as artist. I made the textbox myself, but I have no idea how the coding works. I fail at programming haha ~

[xela]

I think I'm "ok" as artist. I made the textbox myself

Looks really good.

Did you read the hotspot documentation?

It takes a single parameter, a (x, y, width, height) tuple giving the area of the imagemap that makes up the button.

Code: Select all

 # Add an in-game quick menu.
    hbox:
        style_group "quickmenu"
    
        xalign 1.0
        yalign 0.0
        
        imagemap:
              ground "quickmenu_ground"
              idle "quickmenu"
              hover "quickmenuhover"
              selected_idle "quickmenu_selectidle"
              selected_hover "quickmenuhover"
        
              hotspot (1050,720,1170,740) action QuickSave()
              hotspot (1050,750,1170,770) action QuickLoad()
              hotspot (1050,780,1170,800) action ShowMenu('save')
              hotspot (1050,810,1170,830) action Skip()
              hotspot (1050,840,1170,860) action Preference("auto-forward","toggle")
              hotspot (1050,870, 1170,890) action ShowMenu('preference')

1) You dimensions seem really off-base. It's like you're trying to provide two coordinates instead of one coordinate and width/height of the hotspot.

2) I am a bit concerned that this is inside an aligned, styled hbox as well but since I've never used imagemaps before, I can't tell if that will cause trouble for sure, my gut tells me it might.

[philat]

I agree with xela that having an imagemap inside an hbox might be causing some of the alignment problems (I couldn't say for certain). I've never used an imagemap with a ground image that wasn't full screen, so it might also be that the hotspots aren't working because they're hotspots for the SCREEN rather than the image (since looking at the ground image, it seems like you're only using/cutting off the part with the quick menu). The coordinates should be relative to the image you're using, if I'm not mistaken.

The GUI imagebutton tutorial shows you how to do imagebuttons to achieve what you want, if you're willing to take a gamble at that. http://lemmasoft.renai.us/forums/viewto ... 51&t=22565

[xela]

The coordinates should be relative to the image you're using, if I'm not mistaken.

Imagemap creates a fixed, you provide two coordinates (possibly of the top-left corner) of each hotspot followed by dimensions of the hotspot (width and heights). This is what I got from documentation.

===========
Imagebuttons is a possibility but for an artist it might actually be simpler to create a transparent screen only with imagebuttons and add it to the say window screen so they are simply drawn over using the full screen coordinates. If I could draw but coded poorly, that would be a logical choice.

I am sure it is possible to align the imagemap properly as well, I just can't code it off the top of my head and got nothing to use for try-error approach.

[Pinlin]

The coordinates should be relative to the image you're using, if I'm not mistaken.

Imagemap creates a fixed, you provide two coordinates (possibly of the top-left corner) of each hotspot followed by dimensions of the hotspot (width and heights). This is what I got from documentation.

===========
Imagebuttons is a possibility but for an artist it might actually be simpler to create a transparent screen only with imagebuttons and add it to the say window screen so they are simply drawn over using the full screen coordinates. If I could draw but coded poorly, that would be a logical choice.

I am sure it is possible to align the imagemap properly as well, I just can't code it off the top of my head and got nothing to use for try-error approach.

I thought it is possible to create the textbox and quick menu in one.
Examples:




Or maybe I got it wrong XD
Currently I'm trying to make separated buttons instead. Thank you for the suggestions!
You guys are awesome and reply so fast~

[xela]

It's perfectly possible, you're just doing something incorrectly