[SOLVED] Creating an explorable screen?

Discuss how to use the Ren'Py engine to create visual novels and story-based games. New releases are announced in this section.
Forum rules
This is the right place for Ren'Py help. Please ask one question per thread, use a descriptive subject like 'NotFound error in option.rpy' , and include all the relevant information - especially any relevant code and traceback messages. Use the code tag to format scripts.
Post Reply
Message
Author
cocobeans
Newbie
Posts: 4
Joined: Thu Oct 10, 2019 4:41 pm
Contact:

[SOLVED] Creating an explorable screen?

#1 Post by cocobeans » Thu Oct 10, 2019 5:06 pm

Hi! First of all, I am not a english native speaker so this is a real struggle for me. Sorry for any mistake that i'll commit because... there we'll be lots for sure.

I'm a total newbie with Ren'py (not to programming) and there's an specific type of game that a want to create: "explorables"?

What I want to adchieve in this first test project is to explore a room in three different ways:

1) Go to a different room after clicking a door
2) Get an item after clicking somewhere in the screen
3) Get some sort of "character thoughts" about the enviroments after clicking an space in the image... (it can be an frame, a toy, a shirt, etc)

Now, I'm currently fighting with the very first point: goind somewhere else.

These are my current files:

intro.rpy

Code: Select all

# INTRODUCTION

# IMAGES
image bglqt1s1 = im.Scale("images/bg/bg_room.jpg", config.screen_width, config.screen_height)

# LABELS
label intro:
    scene bglqt1s1
    call screen intro_room_screen
room.rpy

Code: Select all

screen intro_room_screen():
    imagemap:
        ground "images/ib/room/ib_room_left_door_idle.png"
        hover "images/ib/room/ib_room_left_door_hover.png"
        hotspot (0, 0, 157, 468) action Jump("left_room")
The "intro.rpy" file uses the next image as an scene:

https://i.ibb.co/FJj2QMh/Living-Quarters-11.jpg

And my approach is to call the intro_room_screen and put the clickable door (idle and hover):

https://i.ibb.co/5xmmyqN/ib-room-left-door-idle.png
https://i.ibb.co/gZrmYGB/ib-room-left-door-hover.png

...on this screen by using an imagemap.

Well, this works... I can click on the door and jump to another label withouth any trouble but... I have some doubts about my methods:

- It's really hard to get the right position for the door's png.
- I can only put a single thing at the time (i don't know if this is true because, once again, i am a total newbie) and it's an overkill because i want four doors on this scene.

So, is there an easier way to do this?
Can i create a whole png with the size of my BG with all the clickable elements and handle them apart?
Is there any tutorial or code example to do this?
Is Ash actually a champion or is it a lier?

Thanks in advance for your help!
Last edited by cocobeans on Fri Oct 11, 2019 6:21 pm, edited 1 time in total.

User avatar
rayminator
Veteran
Posts: 261
Joined: Fri Feb 09, 2018 12:05 am
Projects: Redoing games to fix spelling mistakes other companys that don't care
Location: Canada
Contact:

Re: Creating an explorable screen?

#2 Post by rayminator » Thu Oct 10, 2019 5:37 pm

hi there your English is pretty good only see one spelling mistake

there is nothing wrong with your code. there is a way to find by pressing shift=d and select image location picker then select the image that you are using or go look in the cookbook there is something there like whats in renpy location picker tool that the only way you can pick the right spot it take time to do it

this what you need to figure out
(position-x, position-y, width, height)

cocobeans
Newbie
Posts: 4
Joined: Thu Oct 10, 2019 4:41 pm
Contact:

Re: Creating an explorable screen?

#3 Post by cocobeans » Thu Oct 10, 2019 5:46 pm

Hi, thanks! But... How can i set that position in my imagemap? I know those are coordinates, just like the "hotspot" one but which key do i have to use? Something like:

position (10, 0, 150, 150)

Or so?

philat
Eileen-Class Veteran
Posts: 1646
Joined: Wed Dec 04, 2013 12:33 pm
Contact:

Re: Creating an explorable screen?

#4 Post by philat » Thu Oct 10, 2019 7:32 pm

You can just use xpos x ypos y. Alternatively, export the file as the same size as your screen (with transparency) and use alpha so the transparent parts are insensitive - I tend to do the latter because fiddling with placing the images in renpy is tedious. Scroll down for the alpha keyword: https://www.renpy.org/doc/html/screens.html#imagemap

cocobeans
Newbie
Posts: 4
Joined: Thu Oct 10, 2019 4:41 pm
Contact:

Re: Creating an explorable screen?

#5 Post by cocobeans » Thu Oct 10, 2019 10:35 pm

philat wrote:
Thu Oct 10, 2019 7:32 pm
You can just use xpos x ypos y. Alternatively, export the file as the same size as your screen (with transparency) and use alpha so the transparent parts are insensitive - I tend to do the latter because fiddling with placing the images in renpy is tedious. Scroll down for the alpha keyword: https://www.renpy.org/doc/html/screens.html#imagemap
This sounds interesting. Im doing this:

Code: Select all

# ROOM SCREEN

screen room_screen():
    imagemap:
        ground "images/im/room/im_room_left_door_ground.png"
        hover "images/im/room/im_room_left_door_hover.png"
        alpha True
But... How do i set a hotspot? My hover image never appears

philat
Eileen-Class Veteran
Posts: 1646
Joined: Wed Dec 04, 2013 12:33 pm
Contact:

Re: Creating an explorable screen?

#6 Post by philat » Thu Oct 10, 2019 11:44 pm

Well, obviously you need to put the hotspot there. You can find the coordinates of the hotspot using the dev tools as described above.

drKlauz
Regular
Posts: 166
Joined: Mon Oct 12, 2015 3:04 pm
Contact:

Re: Creating an explorable screen?

#7 Post by drKlauz » Fri Oct 11, 2019 6:26 am

When possible avoid imagemaps and use imagebuttons. They are much more flexible and easier to work with.

User avatar
rayminator
Veteran
Posts: 261
Joined: Fri Feb 09, 2018 12:05 am
Projects: Redoing games to fix spelling mistakes other companys that don't care
Location: Canada
Contact:

Re: Creating an explorable screen?

#8 Post by rayminator » Fri Oct 11, 2019 10:24 am

okay here try this but i have change how you using it i don't know what size you have your game at

https://ibb.co/KjJSLXR
https://ibb.co/3rwJjns

Code: Select all

screen intro_room_screen():
    imagemap:
        ground "images/ib/room/Living-Quarters-11.jpg"
        hover "images/ib/room/Living-Quarters-112.png"
        hotspot (151,315,99,306) action Jump("left_room")
drKlauz wrote:
Fri Oct 11, 2019 6:26 am
When possible avoid imagemaps and use imagebuttons. They are much more flexible and easier to work with.
it doesn't matter if you use imagemages or imagebuttons you still have to get the position in the right spot

drKlauz
Regular
Posts: 166
Joined: Mon Oct 12, 2015 3:04 pm
Contact:

Re: Creating an explorable screen?

#9 Post by drKlauz » Fri Oct 11, 2019 11:05 am

If you use imagebuttons you can easily change positions, images use only needed space, you can have proper hit-testing and not just rectangle click area, you can have item over item. I haven't seen any usecase where imagemaps is better solution.
As for position, if you don't need to place element at pixel-perfect position, imagebutton again better, as you can use some rough position, see how it looks and move it to better position if necessary. With imagemaps if you decide to change element position, you had to edit images.

User avatar
Alex
Lemma-Class Veteran
Posts: 2309
Joined: Fri Dec 11, 2009 5:25 pm
Contact:

Re: Creating an explorable screen?

#10 Post by Alex » Fri Oct 11, 2019 12:38 pm

cocobeans wrote:
Thu Oct 10, 2019 5:06 pm
...
As for imagemap - you need 2 images: one with all active areas in idle state and the other with all active areas in hover state (like if you point at all of them at once). Then you need to set all the hotspots (rectangle areas that are not overlap with each other). In addition to the action when hotspot is clicked you can add a hovered and unhovered actions (to show/hide some extra info about hotspot). Try something like

Code: Select all

image idle_img:
    "idle_img.png"

image hover_img:
    "hover_img.png"

screen my_info_scr(txt=""):
    text txt align (0.5, 0.05)

screen my_imgmp_scr():
    imagemap:
        idle "idle_img"
        hover "hover_img"
        hotspot (100, 100, 200, 100) action Jump("left") hovered ShowScreen("my_info_scr", txt="To the left") unhovered HideScreen("my_info_scr")
        hotspot (350, 100, 200, 100) action Jump("right") hovered ShowScreen("my_info_scr", txt="To the right") unhovered HideScreen("my_info_scr")
https://www.renpy.org/doc/html/screen_actions.html

If you need the non-rectangular hotspots or overlaping of hotspots, then instead of the imagemap made some imagebuttons and place them onscreen.

https://www.renpy.org/doc/html/screens.html#imagebutton

Also, check the cookbook for some reciepts:
viewtopic.php?f=51&t=54451
viewtopic.php?f=51&t=20541
viewtopic.php?f=11&t=21101

cocobeans
Newbie
Posts: 4
Joined: Thu Oct 10, 2019 4:41 pm
Contact:

Re: Creating an explorable screen?

#11 Post by cocobeans » Fri Oct 11, 2019 3:11 pm

Thanks everyone for your help but I ended up using philat solution because it was the easiest way. Either way, I'll be testing the other solutions to see which one ends up being the most efficient in terms of code and gameplay experience.

Post Reply

Who is online

Users browsing this forum: Majestic-12 [Bot], Shie, tacoen