Advice on creating point and click VN with topbar user interface

A place to discuss things that aren't specific to any one creator or game.
Forum rules
Ren'Py specific questions should be posted in the Ren'Py Questions and Annoucements forum, not here.
Post Reply
Message
Author
User avatar
Starvy_Jedi
Newbie
Posts: 16
Joined: Mon Jun 03, 2019 1:33 pm
Contact:

Advice on creating point and click VN with topbar user interface

#1 Post by Starvy_Jedi » Tue Jun 04, 2019 12:35 pm

So here we are!
I'm an artist (2d) working on the CG of my first VN and in the whiletime I'm trying to build up a basic framework (point and click).
I have been struggling with Visual Novel Maker for some months now, but in the end looks like the program still has several bugs making impossible to me to correctly use hotspots like I want to do. I'm very frustrated right now.

Now I'm studying Renpy cause I'm pretty sure it CAN DO what I need.
I'm writing this post cause I would love some suggestions about how to face up to the framework.
If I'm writing stupid things, please forgive me cause I'm learning right now. :oops:

My purpose is to have a point and click framework, with a (almost) fixed user interface in the topbar area (to open the town map and to display the current location and the current money). Here it is an example:
room.jpg
If I'm not wrong, there are 2 ways to insert hotspots: imagemap and imagebuttons.
Again, if I'm not wrong, it looks like the imagebuttons are a better choice, in general, inside Renpy.
Is this correct?

In the cookbook I found a lot of very useful things, but I didn't succeed in finding anything about a user interface like that.
I wonder if there is any script or tutorial around which could help me.

Or a coder, willing to help me, but this depends on the cost of the job, cause I'm facing very hard times. :(

Thank you for reading this! :)

User avatar
Starvy_Jedi
Newbie
Posts: 16
Joined: Mon Jun 03, 2019 1:33 pm
Contact:

Re: Advice on creating point and click VN with topbar user interface

#2 Post by Starvy_Jedi » Tue Jun 04, 2019 12:49 pm

Ops.
Sorry moderators I posted in the wrong section.
I suppose this had to be placed in Ren'Py Questions and Announcements ... sorry!

User avatar
Imperf3kt
Lemma-Class Veteran
Posts: 2682
Joined: Mon Dec 14, 2015 5:05 am
Location: Your monitor
Contact:

Re: Advice on creating point and click VN with topbar user interface

#3 Post by Imperf3kt » Tue Jun 04, 2019 9:15 pm

What you want is definitely possible in ren'py.
I can't write up an example for at least 7 hours, but I can say you'll need to learn a couple of things.

If you're going to use imagebuttons, you'll need to know how to make an imagebutton, how to position it in a screen, and how to show and hide that screen.

You can read about doing these things in the documentation if you need some examples.
https://www.renpy.org/doc/html/index.html
Warning: May contain trace amounts of gratuitous plot.
pro·gram·mer (noun) An organism capable of converting caffeine into code.

Todo list:
Actually finish a project

User avatar
Starvy_Jedi
Newbie
Posts: 16
Joined: Mon Jun 03, 2019 1:33 pm
Contact:

Re: Advice on creating point and click VN with topbar user interface

#4 Post by Starvy_Jedi » Wed Jun 05, 2019 11:38 am

Thank you Imperf3kt!

I'm reading the manual right now :D

User avatar
Imperf3kt
Lemma-Class Veteran
Posts: 2682
Joined: Mon Dec 14, 2015 5:05 am
Location: Your monitor
Contact:

Re: Advice on creating point and click VN with topbar user interface

#5 Post by Imperf3kt » Wed Jun 05, 2019 5:51 pm

I forgot all about making an example, I'll try to make one sometime today for you.
Warning: May contain trace amounts of gratuitous plot.
pro·gram·mer (noun) An organism capable of converting caffeine into code.

Todo list:
Actually finish a project

User avatar
Donmai
Eileen-Class Veteran
Posts: 1847
Joined: Sun Jun 10, 2012 1:45 am
Completed: Toire No Hanako, Li'l Red [NaNoRenO 2013], The One in LOVE [NaNoRenO 2014], Running Blade [NaNoRenO 2016], The Other Question
Projects: Slumberland
Location: Brazil
Contact:

Re: Advice on creating point and click VN with topbar user interface

#6 Post by Donmai » Wed Jun 05, 2019 6:12 pm

Anyone wanting to make a point and click game in Ren'Py should take a look at Susan The Cat's game "Potato Art":
http://ludumdare.com/compo/ludum-dare-2 ... w&uid=5150
Image
No, sorry! You must be mistaking me for someone else.
TOIRE NO HANAKO (A Story About Fear)

User avatar
Starvy_Jedi
Newbie
Posts: 16
Joined: Mon Jun 03, 2019 1:33 pm
Contact:

Re: Advice on creating point and click VN with topbar user interface

#7 Post by Starvy_Jedi » Thu Jun 06, 2019 10:11 am

Imperf3kt wrote:
Wed Jun 05, 2019 5:51 pm
I forgot all about making an example, I'll try to make one sometime today for you.
You are too kind Imperf3kt! :)
I don't want to steal your time, I found a couple of tutorials about buttons which could be useful and maybe enough for my first experiments.

By example, this one: https://youtu.be/L9Vt7fcwkXk

Just one question, cause this is not clear to me, what if I want to fragment code in more files.rpy?
By exampe, if from the main script.rpy I want to call the kitchen.rpy or the bedroom.rpy?
I need to declare them somehow in the code? And how do I link one to the other?

User avatar
Starvy_Jedi
Newbie
Posts: 16
Joined: Mon Jun 03, 2019 1:33 pm
Contact:

Re: Advice on creating point and click VN with topbar user interface

#8 Post by Starvy_Jedi » Thu Jun 06, 2019 10:22 am

Donmai wrote:
Wed Jun 05, 2019 6:12 pm
Anyone wanting to make a point and click game in Ren'Py should take a look at Susan The Cat's game "Potato Art":
http://ludumdare.com/compo/ludum-dare-2 ... w&uid=5150
Wow! Thank u, really interesting!

User avatar
Matalla
Regular
Posts: 198
Joined: Wed Mar 06, 2019 6:22 pm
Completed: The Lost Smile
itch: matalla-interactive
Location: Spain
Contact:

Re: Advice on creating point and click VN with topbar user interface

#9 Post by Matalla » Thu Jun 06, 2019 10:35 am

Starvy_Jedi wrote:
Thu Jun 06, 2019 10:11 am
Imperf3kt wrote:
Wed Jun 05, 2019 5:51 pm
I forgot all about making an example, I'll try to make one sometime today for you.
You are too kind Imperf3kt! :)
I don't want to steal your time, I found a couple of tutorials about buttons which could be useful and maybe enough for my first experiments.

By example, this one: https://youtu.be/L9Vt7fcwkXk

Just one question, cause this is not clear to me, what if I want to fragment code in more files.rpy?
By exampe, if from the main script.rpy I want to call the kitchen.rpy or the bedroom.rpy?
I need to declare them somehow in the code? And how do I link one to the other?
You can organize your code as you see fit, for Renpy it's like it's only one piece of code.

That potato thing looks cool, btw. I'll take a look.
Comunidad Ren'Py en español (Discord)
Honest Critique

User avatar
Starvy_Jedi
Newbie
Posts: 16
Joined: Mon Jun 03, 2019 1:33 pm
Contact:

Re: Advice on creating point and click VN with topbar user interface

#10 Post by Starvy_Jedi » Thu Jun 06, 2019 11:05 am

Matalla wrote:
Thu Jun 06, 2019 10:35 am
You can organize your code as you see fit, for Renpy it's like it's only one piece of code.
:D Yes! Just tried, works like a charm!
Thanx!

User avatar
Imperf3kt
Lemma-Class Veteran
Posts: 2682
Joined: Mon Dec 14, 2015 5:05 am
Location: Your monitor
Contact:

Re: Advice on creating point and click VN with topbar user interface

#11 Post by Imperf3kt » Thu Jun 06, 2019 5:56 pm

This is kinda brief and only goes over the basics, but the documentation should cover all of the terms I use here if you want to know more.
This only covers using imagebuttons.

Start off by making a new screen. In screens.rpy, find any area that isn't part of another screen, and at the very left of the line, type:

Code: Select all

screen top_menu():
    
This is the name of the screen, it can be anything you want bar a few exceptions.

On a new line, add four spaces to create a 'block'
This is called indentation and is an important part of python.
You might want to add one empty line for readability, but it's not really required.

Inside this screen, you can now add things. You want to put some buttons across the top of the screen to act as an always visible menu, so we need to set some parameters for the screen first.
Add zorder 49
This is so it shows above everything except the confirm screen.

Next you need something to hold the buttons. You can add positional info directly to an imagebutton, but a container is used frequently, so it's worth learning how to use it
You'll want a hbox for this (horizontal box)

Type hbox and add : at the end, then on the next line, add an additional four spaces.

You should have something like this now:

Code: Select all

screen top_menu() :
   
    zorder 49
    hbox:
        #This is a comment, it isn't part of the code. 

Now you have to position the hbox. There's lots of ways, but you can just use xpos and ypos most of the time.

Use integers (whole numbers) to set the coordinates where you'd like based on pixel count.
Left is 0, right is the maximum resolution of your game (so if your game is 1920*1080, the furthest point right would be 1920, but anything aligned here would be off the screen)
Top is 0 and bottom is again your resolution limit (1080)

Or you could use a float, which is like a percentage. So for halfway, 50%, use 0.5

The hbox needs to be aligned top left, so
xpos 0
ypos 0

Add xfill True to force the hbox to fill the available x space (currently the entire width of the screen)

Now all that's needed is to add some imagebuttons and the screen is done (enough)

Still inside the hbox, add an imagebutton.
Here's a basic button.

Code: Select all

screen top_menu() :
   
    zorder 49
    hbox:
        #This is a comment, it isn't part of the code.
        xpos 0
        ypos 0
        xfill True

        imagebutton:
            idle "my_image_idle.png"
            hover "my_image_hover.png"
            action ShowMenu("save") 

You'll of course need those images inside the images folder.
There's a lot more you can do to each part of this, but this should cover the basics.

You can later add things like spacing or another container etc.


To use the screen, switch over to script.rpy and simply add show screen top_menu when you want it to appear. Probably at the very start of the game, so add it right after the line 'label start:', again remembering about indentation.


For a hotspot on your drawer, do the same thing pretty much. You'll have to hide screen screen_name when you want to get rid of the hotspot. And choose an appropriate action, for example, Call "drawer_opened", which will take the player to the label "drawer_opened", and then come back to where they were when they clicked on it, once hitting a "return" in the script.

Sorry about how brief this was, I'm short on time lately and unable to give a decent explanation.
Warning: May contain trace amounts of gratuitous plot.
pro·gram·mer (noun) An organism capable of converting caffeine into code.

Todo list:
Actually finish a project

User avatar
Starvy_Jedi
Newbie
Posts: 16
Joined: Mon Jun 03, 2019 1:33 pm
Contact:

Re: Advice on creating point and click VN with topbar user interface

#12 Post by Starvy_Jedi » Fri Jun 07, 2019 3:22 am

Imperf3kt wrote:
Thu Jun 06, 2019 5:56 pm
Sorry about how brief this was, I'm short on time lately and unable to give a decent explanation.
This is an amazing explanation!!!
Really really useful! Thank u very much Imperf3kt!

It's perfect.

User avatar
Imperf3kt
Lemma-Class Veteran
Posts: 2682
Joined: Mon Dec 14, 2015 5:05 am
Location: Your monitor
Contact:

Re: Advice on creating point and click VN with topbar user interface

#13 Post by Imperf3kt » Fri Jun 07, 2019 7:38 am

Starvy_Jedi wrote:
Fri Jun 07, 2019 3:22 am
Imperf3kt wrote:
Thu Jun 06, 2019 5:56 pm
Sorry about how brief this was, I'm short on time lately and unable to give a decent explanation.
This is an amazing explanation!!!
Really really useful! Thank u very much Imperf3kt!

It's perfect.
Just happy to help.
You'll likely need more help as my explanation was broad. If you do, feel free to ask anything, I or someone else should respond sooner or later, this community as a whole is pretty awesome.
Warning: May contain trace amounts of gratuitous plot.
pro·gram·mer (noun) An organism capable of converting caffeine into code.

Todo list:
Actually finish a project

User avatar
Matalla
Regular
Posts: 198
Joined: Wed Mar 06, 2019 6:22 pm
Completed: The Lost Smile
itch: matalla-interactive
Location: Spain
Contact:

Re: Advice on creating point and click VN with topbar user interface

#14 Post by Matalla » Fri Jun 07, 2019 7:52 am

Starvy_Jedi wrote:
Fri Jun 07, 2019 3:22 am
It's perfect.
perf3kt
Comunidad Ren'Py en español (Discord)
Honest Critique

Post Reply

Who is online

Users browsing this forum: No registered users