Ren'Py Images overlap. Suspect xalign/yalign issue. (new on Ren'Py)

[Avalonica]

Hello, I have begun to build up the structure for a Visual Novel where the player from the start can select from 4 characters to play as MC. Later there will be another generation that take over. I managed to get the character selection screen to work perfect for 2 characters, but I can't align in right with 4. I work on a 1280x720 image cut up into 4 parts of 320x720. But either the images overlap to much into left or right, I simply put can't align them properly.

If anyone can look on the code example and then the image you will probably see what/where I did go wrong.

Spoiler: code

You don't have permission to view the spoiler content. Log in or register now.

However, nothing is set in stone. technically I could work with this and just make transparent PNG images of the characters so it's nothing "game breaking" for me, but this is still quite important for my next side-question:

Is there any convenient way to make a overworld map. In my case I just need to make maps of towns and locations on planets. From my guess (please correct me if I am wrong) the xalign is for left/right and yalign is for up/down? So if I make a nice map, then I just add "imagebuttons" for all locations? Is that how you make a clickable map in Ren'py?

I am 100% new on Ren'py but feel that once the character selection screen issue is explained a bit for me and the best way to make a map then I'll start to work on how "flags" are stored for the MC's so the game won't forget important events.

 

[the66]

screen char_select():
    for i in range(1,5):
        imagebutton:
            idle "00{}".format(i)
            hover "005"
            pos (320*(i-1),0)
            action Jump("MC{}_INPUT".format(i))
            hover_sound "hover.wav"

label start:
    call screen char_select
    
label MC1_INPUT:
.
.
.

if you need exact positions use the pos, xpos or ypos SL statements rather than align, xalign or yalign.

 

[79flavors]

Yup. Got to say, given your exact image sizes... you're probably safer with exact image positioning.

xalign and yalign are effectively using percentages.

At the very least 0.34 isn't half of 0.66.
You could try using more precise numbers. 0.3333 and 0.6666 would result in calculations where the results are below a 1 pixel margin of error.

Hmmm. The more I think about this, the more I realize I don't understand xalign and yalign's points of reference.
It can't be just the lower left corner... since xalign = 1.0 results in the image being flush to to the right side.

I'd have to guess there some second part of the calculation based on the width of the image too.

Maybe left_corner = (screen_width * xalign) - (image_width * xalign) ?

Which would place your images at:

• xalign 0.0 = (1280 x 0.0) - (320 x 0.0) = 0 ... (0 thru 319)
• xalign 0.34 = (1280 x 0.34) - (320 x 0.34) = 326.4 ... (326 thru 645)
• xalign 0.66 = (1280 x 0.66) - (320 x 0.66) = 633.6 ... (634 thru 953)
• xalign 1.0 = (1280 x 1.0) - (320 x 1.0) = 960 ... (960 thru 1279)

As you can see the two middle images overlap because image #2 ends at 645 and image #3 begins at 634. There's a gap between image #1 and image #2... and another gap between image #3 and image #4. Which seems to line up with the image your posted.
Using 0.33 instead of 0.34 would help, but not by much.

Spoiler: Using 0.3333 and 0.6666

You don't have permission to view the spoiler content. Log in or register now.

It really comes down to floating point numbers and rounding errors.
You could still find things drifting by one pixel either way as the numbers don't quite end up where you thing they will.
xpos and ypos remove all doubt. (or pos=(x,y) )

Spoiler: Why floating point numbers will end up tripping you up

You don't have permission to view the spoiler content. Log in or register now.

 

[Avalonica]

Thanks a lot for the help! Now I can push forward with the stats GUI.

 

[anne O'nymous]

You don't need to bother with the position of each element, you can let Ren'py directly deal with it.

Either by using a

You must be registered to see the links

, that will allocate the same space to all its elements :

screen whatever:
    grid 4 1:
       xpos 100
       ypos 100
       imagebutton auto "image1_%s" action Action1
       imagebutton auto "image2_%s" action Action2
       imagebutton auto "image3_%s" action Action3
       imagebutton auto "image4_%s" action Action4

Or by using a

You must be registered to see the links

, that will put them horizontally one after the other :

screen whatever:
    [...]
    hbox:
       xpos 100
       ypos 100
       imagebutton auto "image1_%s" action Action1
       imagebutton auto "image2_%s" action Action2
       imagebutton auto "image3_%s" action Action3
       imagebutton auto "image4_%s" action Action4

With the latter, you can even include some spacing between the images if you want :

screen whatever:
    [...]
    hbox:
       xpos 100
       ypos 100
       imagebutton auto "image1_%s" action Action1
       null width 20
       imagebutton auto "image2_%s" action Action2
       null width 20
       imagebutton auto "image3_%s" action Action3
       null width 20
       imagebutton auto "image4_%s" action Action4

 

[Avalonica]

So much alternative solutions, thank you!

Also, while not relevant for this topic so much, but... What do developers use for code to have (I have seen this a lot on map screens in VN's) the imageboxes not be 100% square but actually follow the designers corners and soft edges. I have searched Ren'py topics on goggle but this is never mentioned... let me add a image.

All "houses" can "only" be targeted in their actual outlines. It's like the alpha channel in the PNG overlay is ignored. What kind of magic is done here? Sorry for bad explanation. I will try to explain better if need be, and sorry for going OT.

EDIT: If you as an example click on the school-house, anything "but" the house will not register.

 

[anne O'nymous]

Also, while not relevant for this topic so much, but... What do developers use for code to have (I have seen this a lot on map screens in VN's) the imageboxes not be 100% square but actually follow the designers corners and soft edges.

The

You must be registered to see the links

button property, generally going for the easiest way :

    imagebutton auto "image1_%s" focus_mask True action Whatever

Then, the button will be limited to the opaque parts of the image.

 

[Avalonica]

wow, just wow... Goggle is not always best that's for sure

 

[79flavors]

Here's an example I wrote up for someone else about the use of imagebutton and focus_mask.
It might help visualize how those odd-shaped imagebuttons can be used.

I wrote it as a series of overlaying images all the same size as the screen with lots of unused transparent areas.
Though you could just as easily use a background screen and a series of overlaid transparent images positioned and sized correctly using xpos, ypos or pos()

As you say... lots of alternative solutions.

 

[Knife_cut]

hey Everyone, i want to make a virtual novel . so i am making its map . So for map what should i use hotspot property or image button,Now i am using hotspot but the thing is not working that Good so kindly please Guide me what should i do. i want to make map like the one game summertime saga have .

 

[mickydoo]

hey Everyone, i want to make a virtual novel . so i am making its map . So for map what should i use hotspot property or image button,Now i am using hotspot but the thing is not working that Good so kindly please Guide me what should i do. i want to make map like the one game summertime saga have .

Hotspots are only really needed if want the image you click on in an exact location to make it line up with the underling image because of the way you pick the location. You are also limited to six hotspots per screen (from memory).

Image buttons are not limited, as far as I'm aware anyway, and you can use invisible ones to do what I said in above about hotspots anyway.

In summary, use image buttons.