UI Icon placement

George Halstead

Active Member
Oct 1, 2017
622
312
Friends i want to have an asset icon in the top right corner of the game that will be clickable to show character stats. How do i place the icon in the top right corner.

am using the latest Ren'py 7.1X and this is my first attemp at a Ren'py game for public use and want it to be proper and easy to get to the features.

Hopefully there will also be a cellphone icon at the bottom left as well for minimal interactions as well. If you can help me please help by describing the process as i will be using it to learn Icon placement and need to be walked through it.
 

Palanto

Active Member
Game Developer
Oct 4, 2017
964
1,835
You need to create a screen with an imagebutton in it, which you then have to place to the top right corner through align(x, y) or pos(x, y) depending on if you want to use pixel or relative positions.

You can find the most important infos on how to implement a screen and a button inside it on these documentation pages:
|

Or did you want to code for it as a kind of spoiler?
 

George Halstead

Active Member
Oct 1, 2017
622
312
No thank you for the code friend, i need to learn but that was very kind of you to offer. I am learning one script or rpy function at a time.

I think i am kind of working harder and not smarter. I always worked on aesthetics first and then content on website, So i am trying to do the same in Ren'py. I want to get the basic layout completed and out of the way and than do the main story. Does that make sense or am i fighting against myself.
 

Rich

Old Fart
Modder
Respected User
Donor
Game Developer
Jun 25, 2017
2,452
6,908
As @Palanto indicated, you need a couple of screens. To expand slightly, the basic steps are as follows:
  1. You build a screen (which I'm going to call 'stats_screen') that shows the actual statistics. This screen:
    • should be 'modal True'. This is very important, as it means that clicks in this screen will not be passed down to the underlying dialog system. If you omit the 'modal True', then doing things like "clicking on the close button" will also advance the story, which you don't want.
    • should contain a button to dismiss the screen. This basically is a button or imagebutton that has an action "Hide('stats_screen'). So when the player presses this button, the screen vanishes, and now clicks will advance the dialog.
  2. Create another screen, using Ren'py screen language, that has your button in it. Let's suppose that screen is called "stats_button." This screen should NOT be modal.
  3. The "stats_button" screen would contain an imagebutton. It needs an "idle" image, and you can optionally include a "hover" image if you want the button to change when the player mouses over it. Most importantly, the imagebutton would have an action "Show('stats_screen')"
  4. At the point where you want your character stats button to appear, put in a Ren'py command "show screen stats_button". At this point, the stats_button screen will show as an overlay on top of the rest of your game. If you need to turn the status button off, then use "hide screen stats_button"

Voila - a stats screen that the player can bring up at any time.

Important concepts:
  • Non-modal screens work as overlays, and don't interfere with the rest of the game. You can "show" and "hide" them as you need to. Use them to add actions that the player can take while dialog is progressing.
  • Modal screens stop all underlying action until they're hidden. Thus, they're good for things that would be dialog boxes or something like that in an application. Until they're hidden, you can't advance the rest of the script.
  • Show('screen_name') and Hide('screen_name') are the actions to show and hide a screen from within a screen. These actions are usually tied to a button or imagebutton.
  • "show screen screen_name" and "hide screen screen_name" are the commands to show and hide a screen from within your dialog.
Hope that gets you on the correct track...
 

George Halstead

Active Member
Oct 1, 2017
622
312
Wow, you guys are amazing. At this point Everything i get to work is almost like magic as it is all new but thanks to your help I am another huge step forward. Thank you friends.