Finding Programmer or learn how to create a Point & Click Game on Ren'Py

RKO

Member
Mar 7, 2018
20
5
#1
Hey Fellas!
First of all, I'm a total newbie in Ren'Py and Programming.
Playing games like ICSTOR'S Milf City or DECENT MONKEY'S Fashion Business inspired me to create my own story.
I saw they create their games with a Visual Novel Game Creator Software.
Important thing to know is, I dont want to create a normal Visual Novel with text over text.

How did they do that?
Is their a basic code for this kind of games I can use? Or is it possible to read the source code from Milf City, to know how they to it?
I couldnt find a tutorial for this style of Ren'Py. Did someone knows more or can help me out?

If someone with expierence in programming and creating such games is interested to help me, I would be very happy.

Every help is useful.
Thank you Community.
 
Dec 5, 2018
29
7
#2
So I'm guessing what you want is to create a normal visual novel, but with missions and "point and click" elements(image maps). In my experience Renpy is quite easy, and with a few tutorials you could start puting something together in a couple of hours. I would only search for a programmer if I didn't have the time.

If so here are some youtube links:
--general
--map
 
Likes: RKO

Rich

Well-Known Member
Modder
Game Developer
Jun 25, 2017
650
1,969
#3
Hey Fellas!
First of all, I'm a total newbie in Ren'Py and Programming.
Playing games like ICSTOR'S Milf City or DECENT MONKEY'S Fashion Business inspired me to create my own story.
I saw they create their games with a Visual Novel Game Creator Software.
Important thing to know is, I dont want to create a normal Visual Novel with text over text.

How did they do that?
Essentially, games like that are a mix of Ren'py techniques.

When you're navigating around (i.e. going to maps, going from room to room), essentially you're almost always jumping to a spot in the Ren'py code that uses a "call screen" that's specific to that location. "call screen" is a modal operation - the code "stops" until some interaction happens in the screen to return or jump somewhere else.

So, the pseudo-code for a room or something like that is going to be something along the ilnes of:
Code:
label enter_room:
    Do I have an event that's triggered by entering this room?
    If so:
        jump to that event
    If not:
        call screen room_navigation
Playing an event uses the standard scene image/character say approach to displaying content. At the end of the event, you mark the event as played so that you know what you need to do next, and then jump to the "enter" label for whatever location the event leaves you in.

So, in our hypothetical example, then, the "room_navigation" screen is where you set up buttons for all the doors, items you can interact with, etc. for that particular room.
Code:
screen room_navigation:
    add room_background_image
    imagebutton:  # hoverable button to enter the bathroom
        idle "bathroom_door_non_hovered_image.png"
        hover "bathroom_door_hovered_image.png"
        action Jump("enter_bathroom")
    if not already_picked_up_envelope:
        imagebutton:  # hoverable button for the envelope - only if not already picked up
            idle "envelope_non_hovered_image.png"
            hover "envelope_hovered_image.png"
            action Jump("pick_up_envelope")

label pick_up_envelope:
    scene hand_picking_up_envelope
    main_character "Oh, look, an envelope.  Let me pick it up."
    $ already_picked_up_envelope = True
    jump enter_room
So when you push the first imagebutton, it jumps you to the "enter" label for some other part of the environment, which will repeat the "do I have an event to play here, or do I just navigate". In addition, you could have non-navigation buttons ("pick up the envelope") that would jump to VN code that plays event code and then takes you back to the "enter" label. (Because now that you have the envelope, maybe some other event plays, plus now the room navigation changes.)

This is the basic idea - you use the normal VN-type code to play events where you have text and images, and then have screens that allow you to "wander the world" when you're not in the middle of an event.

The trickier part, of course, is setting up your event management system - you need to know where you are in each of (possibly multiple) story lines, and what actions will trigger displays to the player at different times.

Having said all this, tackling a game like this as your first Ren'py project is likely to be overwhelming. There is a learning curve to Ren'py itself, as well as game development as a whole, and this is easily the most complex type of game to try to build. I would strongly recommend that you consider working on a VN-style game to get your feet wet with Ren'py before you try to dive into something this complex. It's not just the coding itself - coming up with the whole event structure (what has to happen before what else) and even writing the individual story lines is more complex than a VN-style game. Just saying... LOL

But, however you choose to go, best of luck.
 

basnalex

New Member
Jan 29, 2018
1
1
#4
I just started using Ren'Py in the past month or so and found this forum topic helpful. It was for creating a custom menu, but it kind of explains the same thing @Rich just wrote out.

 
Likes: RKO

79flavors

Active Member
Jun 14, 2018
283
400
#5
Just to reinforce what @Rich is saying, it's just a case of having a background image and some other images that sit on top as buttons.
Each "button" has two pictures...
an "idle" image (the mouse isn't anywhere near it)​
a "hover" image (the mouse is currently over it).​
There are a couple of other states, but those two will definitely get you started.
Then you add each image as an "image button" onto a "screen".

The hover image is usually highlighted somehow, either by color or brightness or contrast.
Your idle image could be highlighted too. Depending on how easy or hard you want your point and click element to be.

The critical part is that the rest of your idle/hover images are completely transparent (opacity/alpha = 0). Anything that isn't 0, is a part of that button.

These are some images I'm currently playing around with.

sc_daliaparty_livingroom.png sc_daliaparty_livingroom_jo_abigail_idle.png sc_daliaparty_livingroom_jo_abigail_hover.png

In my case, I made a cut-out of the background image around the two girls and created a 60% pure purple image. That's my hover image... and when it's shown, because of the 60% opacity - it acts as a filter to the image behind it. I then used the same shape to cut out the two girls from the background and used them as my idle image. Mainly so I knew what was what, but also so that the idle image and hover image were exactly the same size and position.

Edit: In case you're wondering why I used an idle image that looks exactly the same as the image it sits on top... imagebuttons as part of a screen REQUIRE an idle image. I did try it with just a hover image... but it refused to run and generated an error. I suppose I could have used a pure white image at 1% opacity, but firstly I wasn't sure 1% would work... but mainly it was so I can recognize the image by it's thumbnail when I was browsing the images folder in Windows.

If you want see something similar in action... check out the prologue of . It makes great use of this technique by having clickable building fronts when you go to buy your wizard robes, and owl, etc. The good news is that because it's in the prologue, it doesn't take much time to play to reach that point. WaW uses a compressed archive for images and scripts, but you can use to unpack it if you want to look at the inner workings.

Edit2:
The reason why the idle and hover images work as masks/templates for buttons is the focus_mask option.

Python:
screen sc_party_livingroom():
    modal True

    add bg_party_livingroom

    imagebutton auto "bt_party_livingroom_girls_%s.png":
        focus_mask True
        action Jump ("intro_talk_to_girls")
Then just add as many imagebutton buttons as you want clickable objects on your screen.
The auto / %s is just a way of short cutting typing all those file names in. The %s is replaced by "idle" and "hover", as long as files with those names exist.
I'm not 100% sure the modal True is needed, but since I want this screen to be active and no other components to do anything, modal seemed the way to go.
 

Create an account or login to comment

You must be a member in order to leave a comment

Create account

Create an account on our community. It's easy!

Log in

Already have an account? Log in here.