city map...renpy crazy

Cohibozz

Member
Aug 14, 2018
125
27
i've found this topic:



can i use it for rebuild my maps with imagebutton but if i do that i do only for replace the imagemaps coord position with a full screen imagebutton with my button and the other image all trasparent. If i've to use coordinates i can keep my map with imagemaps! i say right?
 
  • Like
Reactions: Palanto

Cohibozz

Member
Aug 14, 2018
125
27
i'm working on imagebutton use.

i need of an arrow to come back on room screen quen i go in pc screen.
i write this for put an arrow on botton center of screen:

Code:
label pcmyroom:
    scene pcmyroom
    #inserire cose da fare al pc
    imagebutton auto "arrow_%s.png" xalign 0.5 yalign 1.0 focus_mask True action Show("myroom")
but when i try this error say:

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


File "game/myroom.rpy", line 27: end of line expected.
    imagebutton auto "arrow_%s.png" xalign 0.5 yalign 1.0 focus_mask True action Show("myroom")
           

Ren'Py Version: Ren'Py 7.1.0.882
Mon Sep 24 20:04:10 2018
 
  • Like
Reactions: Palanto

Epadder

Programmer
Game Developer
Oct 25, 2016
568
1,058
"imagebutton" is part of the screen language, it can't be put directly into a label.
 
  • Like
Reactions: Palanto

Palanto

Active Member
Game Developer
Oct 4, 2017
964
1,835
i can have problem with imagemaps? now it work perfectly.
i'm new in renpy and python and i've to study as imagebutton works..

i've to do a focus hover also in my room sets for bed,pc,etc etc.
it's better i study for imagebutton or i can use this script?
It's better if you study up on imagebuttons since imagemaps are old stuff that is only left in ren'py because of backwards compatibility.

i'm working on imagebutton use.

i need of an arrow to come back on room screen quen i go in pc screen.
i write this for put an arrow on botton center of screen:

Code:
label pcmyroom:
    scene pcmyroom
    #inserire cose da fare al pc
    imagebutton auto "arrow_%s.png" xalign 0.5 yalign 1.0 focus_mask True action Show("myroom")
but when i try this error say:

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


File "game/myroom.rpy", line 27: end of line expected.
    imagebutton auto "arrow_%s.png" xalign 0.5 yalign 1.0 focus_mask True action Show("myroom")
         

Ren'Py Version: Ren'Py 7.1.0.882
Mon Sep 24 20:04:10 2018
"imagebutton" is part of the screen language, it can't be put directly into a label.
Right, as are all buttons :) So yes you can't throw in a button into a label as you've figured out already, they can only be used on screens :)
But beware that "FULLSCREEN" imagebuttons are useless ;) That's how imagemaps really worked and that's why they are not used anymore. Imagebuttons are buttons that have only the portions of the image inside them that you need as a button, instead of one full screen image for idle state and one for hover state, you now have 1 background and for each button at least 1x idle (and best 1x hover too but it's not mandatory).

Ok here's an example of how an imagebutton setup "could" look like in let's say a main_menu scenario (Sorry can't show too much since it's a secret project for now) :

main menu example.png

Now as you can see, all buttons (Load, Settings, Extras, Help, Quit) are in their idle state, except for Start which I'm hovering over with my mouse. The start button code looks like this in my case:

Code:
if main_menu and currentScreenName == "main_menu":
                imagebutton auto "/gui/custom/BUTTONS/START_%s.png" action Start()
            elif main_menu and not currentScreenName == "main_menu":
                imagebutton auto "/gui/custom/BUTTONS/START_%s.png" at invisButtons action None
ignore the if and elif statement, it's just something I needed, well look at the imagebutton auto "image files" action
this is how you'd usually do a screen with buttons. The placement where those buttons are on the screen are handled elsewhere in my case, it's not a problem to do it like you did, each button it's own coordinates, but in the main menu case they're all next to each other so I only had to place 1 button and the others were put right next to the first ;)

Ok and here's how the two Start buttons look like:

START_hover.png <- Hover
START_idle.png <- idle

again, this is just an example, you can do them however you want, but this is a good example of how buttons shouldn't be "full screen" if at all possible (one reason being, android can't handle full screen transparent imagebuttons and would just always click the last added button because focus_mask doesn't seem to work there...)

Alright, download the images, check their size i.e. and then get going :D And when you're done with your game I'd be happy to give it a testrun :D

edit:
you can find an amazing little tutorial game on what imagebuttons can do (even showing what you can't do with imagemaps) and how they're used :)
As I always mention to new guys, the lemmasoft forum is the best resource for ren'py related stuff, so if you need help, try looking through the forum (use their search engine i.e. or use -> site:lemmasoft.renai.us <- on google while searching for something i.e.: renpy imagebutton site:lemmasoft.renai.us)
If you can't find it there, the problem you're looking for hasn't been solved by anyone yet. Which means, ask there (or here again but there you get help from really good programmers instead of people like me ;) )
 
  • Like
Reactions: anne O'nymous

Cohibozz

Member
Aug 14, 2018
125
27
sigh i've just finished to turn my map with button...fullscreen!!! aaaaaaahhhhh
Code:
screen city_map():
    zorder 0
    modal True
    add "city.png"
    if coffee_unlock:
        imagebutton auto "city_map_coffee_%s.png" focus_mask True action Call("coffe_shop")
    else:
        imagebutton idle "city_map_coffee_idle.png" hover "city_map_coffee_lock_hover.png" focus_mask True action NullAction()
    if school_unlock:
        imagebutton auto "city_map_school_%s.png" focus_mask True action Call("school")
    else:
        imagebutton idle "city_map_school_idle.png" hover "city_map_school_lock_hover.png" focus_mask True action NullAction()

    imagebutton auto "city_map_myhouse_%s.png" focus_mask True action Call("myhome")

    imagebutton auto "city_map_mansion_%s.png" focus_mask True action Call("themansion")

now i have to crop the button from full screen to single little image and position it by xpos ypos?

my fear is if the xpos are not precise in scale image for different resolition...but if say yes for me is YES!


at work!
 
  • Like
Reactions: Palanto

Cohibozz

Member
Aug 14, 2018
125
27
DONE!!! IT WORKS AT FIRST TRY!!!!!! TYYYY
Code:
screen city_map():
    zorder 0
    modal True
    add "city.png"
    if coffee_unlock:
        imagebutton auto "city_map_coffee_%s.png" xpos 610 ypos 510 focus_mask True action Call("coffe_shop")
    else:
        imagebutton idle "city_map_coffee_idle.png" xpos 610 ypos 510 hover "city_map_coffee_lock_hover.png" focus_mask True action NullAction()
    if school_unlock:
        imagebutton auto "city_map_school_%s.png" xpos 998 ypos 524 focus_mask True action Call("school")
    else:
        imagebutton idle "city_map_school_idle.png" xpos 998 ypos 524 hover "city_map_school_lock_hover.png" focus_mask True action NullAction()

    imagebutton auto "city_map_myhouse_%s.png" xpos 1230 ypos 222 focus_mask True action Call("myhome")

    imagebutton auto "city_map_mansion_%s.png" xpos 421 ypos 353 focus_mask True action Call("themansion")
the location all idle
pythonw_2018_09_24_23_37_06_488.png
The school if locked
pythonw_2018_09_24_23_37_17_650.png my house on mouse hover
pythonw_2018_09_24_23_38_47_849.png
 
  • Like
Reactions: Palanto

Cohibozz

Member
Aug 14, 2018
125
27
last question....for button for navigate on room (ie: click on pc) i'm scare that is too difficult find the right xpos and ypos
my question is:
can i do a button without idle image but only hover?

if yes i can do a square with white mask with trasparency and put on bg image to stay safe
 
  • Like
Reactions: Palanto

Palanto

Active Member
Game Developer
Oct 4, 2017
964
1,835
sigh i've just finished to turn my map with button...fullscreen!!! aaaaaaahhhhh
Code:
screen city_map():
    zorder 0
    modal True
    add "city.png"
    if coffee_unlock:
        imagebutton auto "city_map_coffee_%s.png" focus_mask True action Call("coffe_shop")
    else:
        imagebutton idle "city_map_coffee_idle.png" hover "city_map_coffee_lock_hover.png" focus_mask True action NullAction()
    if school_unlock:
        imagebutton auto "city_map_school_%s.png" focus_mask True action Call("school")
    else:
        imagebutton idle "city_map_school_idle.png" hover "city_map_school_lock_hover.png" focus_mask True action NullAction()

    imagebutton auto "city_map_myhouse_%s.png" focus_mask True action Call("myhome")

    imagebutton auto "city_map_mansion_%s.png" focus_mask True action Call("themansion")

now i have to crop the button from full screen to single little image and position it by xpos ypos?

my fear is if the xpos are not precise in scale image for different resolition...but if say yes for me is YES!


at work!
positioning it would be the best option if you want to release on android also ;) There are tools (even in MS Paint) which show you the correct pixel you'd have to seth the image to. Of course the buttons can have some transparency, but doing it "full screen transparent" with just a little icon somewhere on it, is kinda useless, but possible (only for android it won't work then)

last question....for button for navigate on room (ie: click on pc) i'm scare that is too difficult find the right xpos and ypos
my question is:
can i do a button without idle image but only hover?

if yes i can do a square with white mask with trasparency and put on bg image to stay safe
Hmmmm well in such a case you could use a normal "button" you'd need to cut out a portion of the image (like the pc with some surroundings) and remember the top left pixel position (should usually be shown in Photoshop and whatever image editing software you use.. ) so that you can perfectly position it at the same spot on the uncut background image. Usually pos(xpos, ypos) would take the top left corner of your image and put it at the exact pixel location (yes all the images scale perfectly fine in ren'py)

Well whatever, the button would probably look something like this (and would still have to be positioned ;) ) :
Code:
button:
    background "CutOutImage.png"
    pos(123, 456)
    xysize(100, 200)
    action NullAction()
something like that... but it would be the same however you'd do it ;)
Positioning isn't that problematic as long as you check the pixel before cutting out the image and if you forgot that there's still the "test" screen which can help at least finding the position ;)

pos(left/right , top/bottom) -> top left would be: pos(0, 0) bottom left would be: pos(0, 1080) top right: pos(1920, 0) bottom right: pos(1920, 1080) just remember that the first number is from left to right ( 0 -> 1920 pixel) and the second is from top to bottom ( 0 -> 1080 ) (But I guess you knew that already right? :D )


p.S.: For your next try you'll certainly understand that imagebuttons are a better solution, but for them to work properly on a map like this, it's best to not have the idle state of the buttons "ON" the map background already, in your case, those speech bubbles would be the idle image for the button, then you could position them wherever you want and even reuse them if you leave the text out of the image and create a small text box over the image itself ;D Well there are multiple ways of working with them, but for now, try to figure out a way to find the right pixel to place them right. Else just leave them as full screen buttons (most devs do that ;) ) but beware that it won't work on android then :)
 

Cohibozz

Member
Aug 14, 2018
125
27
at moment i done with a square box for "the zone" of pc .
idle image is a suqre almost trasparent (full trasparent not work but with some pont of invisible white color it works fine.
hover image is a square with a withe almost transparent layer. and it work pretty :)
 
  • Like
Reactions: Palanto

Palanto

Active Member
Game Developer
Oct 4, 2017
964
1,835
at moment i done with a square box for "the zone" of pc .
idle image is a suqre almost trasparent (full trasparent not work but with some pont of invisible white color it works fine.
hover image is a square with a withe almost transparent layer. and it work pretty :)
full invisible works, it just won't work if 1920x1080 pixel invisible background are on the button :D So if the button image is lets say 50x100px then it can have a full transparent frame around it. that works just fine ;) But if the image is 1920x1080 and has just 50x100 image and all the rest transparent, then the button will be a full screen transparent button which won't work in android since android uses the transparent part to click too...

In your game:
  • Shift + D to open the developer menu ;
  • Select "image location picker" ;
  • Select the background you want ;
  • Look at mouse position the bottom right of the screen.
totally forgot about that one X_x That's obviously the easiest and best way to find the right position :D