[Tutorial] Crash course in screen language/UI design

A place for Ren'Py tutorials and reusable Ren'Py code.
Forum rules
Do not post questions here!

This forum is for example code you want to show other people. Ren'Py questions should be asked in the Ren'Py Questions and Announcements forum.
Message
Author
Nova Alamak
Regular
Posts: 71
Joined: Sun Jun 08, 2014 1:45 pm
Contact:

Re: [Tutorial] Crash course in screen language/UI design

#31 Post by Nova Alamak »

Moving on, the load_save_slot screen basically defines what each save/load slot looks like. You've already placed where each slot is on the page, but this screen tweaks each save slot. You can change the text, for example, or add in another variable like [chapter] or something. I changed the position/color of the text and changed the size/position of the thumbnail to fit my box. (I changed the thumbnail size in the init block at the bottom of this code, though) Be sure that instead of "FileSlotName(number, 4)", the 4 is however many slots you have per page. (it's 4 in my case)
Exactly how does one make an extra variable display here? I actually want to use [chapter] and some other things like it native to the player's position in the game, but I don't understand how you can place that in without Renpy assuming it's the CURRENT chapter, level, what have you. Can you explain how that works? I tried to understand it from reading an explanation on interpolating data, but none of that made any sense to me. I figured it had to have something to do with the %s, 2s, or whatever that is up there, but I clearly don't understand something very basic (but really difficult to look up). I've been running around in circles for hours through several tutorials on this topic and none of them have it spelled out anywhere.

Mayche
Newbie
Posts: 10
Joined: Mon Jul 28, 2014 3:41 pm
Contact:

Re: [Tutorial] Crash course in screen language/UI design

#32 Post by Mayche »

awsome tutorial :D,but i don't understand the sl_save or load T.T

User avatar
Marionette
Regular
Posts: 128
Joined: Thu Apr 21, 2011 12:04 pm
Completed: https://marionette.itch.io/
Projects: Get Meowt of Here
Deviantart: rexx9224
itch: marionette
Location: Ireland
Discord: Marionette#2995
Contact:

Re: [Tutorial] Crash course in screen language/UI design

#33 Post by Marionette »

Nova Alamak wrote:
Moving on, the load_save_slot screen basically defines what each save/load slot looks like. You've already placed where each slot is on the page, but this screen tweaks each save slot. You can change the text, for example, or add in another variable like [chapter] or something. I changed the position/color of the text and changed the size/position of the thumbnail to fit my box. (I changed the thumbnail size in the init block at the bottom of this code, though) Be sure that instead of "FileSlotName(number, 4)", the 4 is however many slots you have per page. (it's 4 in my case)
Exactly how does one make an extra variable display here? I actually want to use [chapter] and some other things like it native to the player's position in the game, but I don't understand how you can place that in without Renpy assuming it's the CURRENT chapter, level, what have you. Can you explain how that works? I tried to understand it from reading an explanation on interpolating data, but none of that made any sense to me. I figured it had to have something to do with the %s, 2s, or whatever that is up there, but I clearly don't understand something very basic (but really difficult to look up). I've been running around in circles for hours through several tutorials on this topic and none of them have it spelled out anywhere.
Probably a little late, but in case its not or if anyone else had similar trouble heres a quick explanation.

Code: Select all

    $ file_text = "%2s. %s\n  %s" % (
                        FileSlotName(number, 4),
                        FileTime(number, empty=_("Empty Slot.")),
                        FileSaveName(number))
Basically what shows is defined by the part between the " " ie. the main string.
%s means it will place another string in that position in the main string, and this can be defined multiple times for multiple strings that are then passed as parameters in order and inserted into the string.

Eg.

Code: Select all

"Hello my name is %s!", "Name1"
Will output as "Hello my name is Name1!"

And

Code: Select all

"Hello %s %s is %s!", "Name1", "my", "name"
Will output as "Hello Name1 my is name!"

So in the code supplied

Code: Select all

    $ file_text = "%2s. %s\n  %s" % (
                        FileSlotName(number, 4),
                        FileTime(number, empty=_("Empty Slot.")),
                        FileSaveName(number))
Assuming the Slot name is "1", the time is "12:00", and the Name is "Chapter 2"

You should get
"01. 12:00
Chapter 2"


Also what seems to be a more standard way of doing it with more recent versions of renpy, is to interpolate variables directly into the string:

Code: Select all

      
      $ file_name = FileSlotName(i, columns * rows)
      $ file_time = FileTime(i, empty=_("Empty Slot."))
      $ save_name = FileSaveName(i) 
      text "[file_name]. [file_time!t]\n[save_name!t]" 
Which given the same input should give the same output as above.

Probably easier to tell whats going on with that second one, but knowing a bit extra about python strings wont hurt, you never know when you might need it. :p

(And if you're really keen and want to know more you can check out this: http://www.tutorialspoint.com/python/python_strings.htm )



ps.
If the real question was actually not about strings and instead about setting the chapter title as the FileSaveName() you can set that with the following variable:

Code: Select all

$save_name = "Chapter 2: Challenge Accepted!"
and then you can update it as the player goes through your story to whatever you want it to be, whenever you want to change it. :3

Nova Alamak
Regular
Posts: 71
Joined: Sun Jun 08, 2014 1:45 pm
Contact:

Re: [Tutorial] Crash course in screen language/UI design

#34 Post by Nova Alamak »

First, thanks for trying so hard to answer my question. My question is really both of these things, but I don't really understand your explanation.

The %s only makes sense to me in that it's a placeholder for something defined as "s" but I'm not really understanding why it's "s" or how you set whatever you want to "s". In your example, it doesn't show how Ren'py knows what to replace %s with, and that's why I'm confused.

In the supplied code, what are "2s.", "s/n", and "s"? I feel like this is probably implicit to everyone else but me so that might be why the question isn't making sense.

Since I don't understand any of this from the documentation, I can probably just rely on the $save_name variable. Is it a default variable though or do I need to create it? Will renpy know what I mean by specifying that? Also, will it change their save name automatically or will it just update when they next save?

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

Re: [Tutorial] Crash course in screen language/UI design

#35 Post by philat »

"%s" is literally just a placeholder. The s means it's a placeholder for a string. Python (and therefore renpy) will substitute %s for whatever value comes after the string that contains the placeholder. Look at the examples given above again, specifically: "%s blahblah", "THIS PART IS SUBSTITUTED"

%2s pads out the string to always be 2 characters, even if the string is only 1 characters (i.e., 1 will show as 01). Obviously you don't need to do it that way if you don't want to.

%s\n is actually %s + \n. \n creates a new line. So "%s %s" % (1, 2) would show as "1 2" but "%s\n%s" % (1, 2) would show as
1
2

For your last question, paste this in a new game and try it; it's easier to show than spell out, but suffice it to say, the FileSaveName(i) part of the code above will automatically read the save_name variable in effect at the time of saving.

Code: Select all

label start:
    $ save_name = "Just started"
    "Save here"
    $ save_name = "Chapter 2"
    "Save here"

Nova Alamak
Regular
Posts: 71
Joined: Sun Jun 08, 2014 1:45 pm
Contact:

Re: [Tutorial] Crash course in screen language/UI design

#36 Post by Nova Alamak »

So in other words, these lines:

Code: Select all

                        FileSlotName(number, 4),
                        FileTime(number, empty=_("Empty Slot.")),
                        FileSaveName(number))
...represent each of the "%"s?

I don't know if I really understand where it's finding what to replace the % with...

But more importantly, next to the save time and file number stuff, I want to place the in-game date and time, or I guess the chapter name too if that's still possible... the code I have doesn't work but I put some placeholders in it for the sake of explanation:

Code: Select all

text "month/day/year hour:00"
I guess what I'm trying to figure out are two things:

1: What do I have replace the words month, day, year, and hour with to make this work?
2: How do I retrieve that information from a variable? I'm already using $ month, $ day, $ year, and $ hour to store that stuff, but getting it to display in this code isn't clear to me.
Last edited by Nova Alamak on Fri May 08, 2015 5:12 pm, edited 1 time in total.

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

Re: [Tutorial] Crash course in screen language/UI design

#37 Post by philat »

Yes, except it's probably more accurate to say they will stand in for each "%s" rather than each "%".

Nova Alamak
Regular
Posts: 71
Joined: Sun Jun 08, 2014 1:45 pm
Contact:

Re: [Tutorial] Crash course in screen language/UI design

#38 Post by Nova Alamak »

I think understand that now, thanks. But how do I pull the actual values from the variables into a similar structure?

I tried the last code instead, but the value I set to $save_name isn't showing up on the slot. Do I need to place that myself? I tried adding

Code: Select all

text save_name
below

Code: Select all

text file_text
but nothing shows up.
Last edited by Nova Alamak on Fri May 08, 2015 5:40 pm, edited 1 time in total.

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

Re: [Tutorial] Crash course in screen language/UI design

#39 Post by philat »

Well, you edited your post after I replied. The short answer is it's complicated -- the File actions are built-in renpy functions to deal with data in save files. You can use json callbacks to pull extra data that isn't dealt with by File actions, but this is, frankly, probably more complicated than you'd like to deal with. http://lemmasoft.renai.us/forums/viewto ... =8&t=28676

Easiest way would probably be to define save_name dynamically with the variables you have set up already. ETA: I thought it was minutes instead of years; you get the idea.

Code: Select all

init python:
    month = "Jan"
    day = "01"
    hour = "12"
    minutes = "30"

    def savecallback():
        global save_name
        save_name = month + " " + day + " " + hour + ":" + minutes

    config.python_callbacks.append(savecallback) # python callbacks are run after every python statement, so that save_name will update automatically every time you change any of the variables

label start:

    "save here"

    $ day = "02"

    "save here"

Nova Alamak
Regular
Posts: 71
Joined: Sun Jun 08, 2014 1:45 pm
Contact:

Re: [Tutorial] Crash course in screen language/UI design

#40 Post by Nova Alamak »

I thought this would be a lot simpler, but I guess I'll just use that. I would have thought

Code: Select all

save_name = month + " " + day + " " + hour + ":" + minutes
could be defined in the save screen so it would only update when you were going to save, kind of like how

Code: Select all

    $ file_text = "% 2s. %s\n%s" % (
        FileSlotName(number, 4),
        FileTime(number, empty=_("Empty Slot")),
        FileSaveName(number))
    add FileScreenshot(number) xpos 3 ypos 77
    text file_text
does. Am I even close?

Nova Alamak
Regular
Posts: 71
Joined: Sun Jun 08, 2014 1:45 pm
Contact:

Re: [Tutorial] Crash course in screen language/UI design

#41 Post by Nova Alamak »

Sorry for double posting, but the code only worked with your example values plugged in. In theory, shouldn't it just pull my pre-existing values? For the record, if I remove the lines where you defined those, the whole thing breaks even though month, day, and hour are already variables in use... Do I have to define them with python or something?

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

Re: [Tutorial] Crash course in screen language/UI design

#42 Post by philat »

1. Screen variables and regular variables aren't necessarily the same. Frankly, this is an area where I also have some difficulties with the finer points.

2. Well, a) existing save files don't have save_name defined, and b) it's probably because the callback runs before the variables are initialized. If you'd like, you can just put the init python values at a blank string or something, or set them to what they will be at the start of the game.

User avatar
Marionette
Regular
Posts: 128
Joined: Thu Apr 21, 2011 12:04 pm
Completed: https://marionette.itch.io/
Projects: Get Meowt of Here
Deviantart: rexx9224
itch: marionette
Location: Ireland
Discord: Marionette#2995
Contact:

Re: [Tutorial] Crash course in screen language/UI design

#43 Post by Marionette »

Nova Alamak wrote:Sorry for double posting, but the code only worked with your example values plugged in. In theory, shouldn't it just pull my pre-existing values? For the record, if I remove the lines where you defined those, the whole thing breaks even though month, day, and hour are already variables in use... Do I have to define them with python or something?
In your save screen if you use the following code:

Code: Select all

      $ file_name = FileSlotName(i, columns * rows)
      $ file_time = FileTime(i, empty=_("Empty Slot."))
      $ save_name = FileSaveName(i) 
      text "[file_name]. [file_time!t]\n[save_name!t]"  
This should do what you are looking for.
It gets the save_name value from the supplied variables and places them in the text at [save_name!t]


ANd you shouldn't have to set the variables up in an init section to use them, You just need to make sure the variables being used are set up before the ever get used.
So either at the start of the story before the use has a chance to save (or given default values in an init heading somewhere just to make sure they're set up).


And just a note that if you may have to re-save your saves to see the changes you make to the display as some options get saved with the files so changes to the code might not always show initially depending on the change.

Nova Alamak
Regular
Posts: 71
Joined: Sun Jun 08, 2014 1:45 pm
Contact:

Re: [Tutorial] Crash course in screen language/UI design

#44 Post by Nova Alamak »

Thanks for answering those questions way back when. I never did figure out the % stuff, but I did get save_name to work. That said, I have another question:

What if I wanted to display some icons next to the screenshot in the save slot to indicate that certain achievements have been fulfilled on that file? Like I know you can use "add" in that area just like any other screen, but if I use a conditional behind it it will pull from the current game state rather than that game file. In the same way that there's add FileScreenshot(i), is there a way to, when the person saves while having such and such variable fulfilled, add something else? If I just place it in as add "image.png", it will add the image on all the save slots because it's not pulling from that file. In other words, is there any way I can do what I did to make the text appear as the property of $ save_name but with an image?

User avatar
Braydxne
Regular
Posts: 50
Joined: Tue Aug 08, 2017 4:03 am
Projects: DR: Chains of Trust
Contact:

Re: [Tutorial] Crash course in screen language/UI design

#45 Post by Braydxne »

I'm 4 years late, but I used this code to begin creating a menu. (It worked wonderfully for the main menu) I'm currently trying to create the Save/Load Menu, however whenever I run the project and click on Load, I get an error. I AM using the new Ren'Py GUI so I'm unsure if that is the error. I'm still relatively new to the program. If anyone responds, thanks! (also sorry if this is like a necropost or something i just need help lol

Code: Select all

I'm sorry, but an uncaught exception occurred.

While running game code:
  File "game/screens.rpy", line 592, in execute
    screen load():
  File "game/screens.rpy", line 592, in execute
    screen load():
  File "game/screens.rpy", line 593, in execute
    use file_picker
  File "game/screens.rpy", line 558, in execute
    screen file_picker():
  File "game/screens.rpy", line 558, in execute
    screen file_picker():
  File "game/screens.rpy", line 560, in execute
    imagemap:
  File "game/screens.rpy", line 577, in execute
    hotspot (858, 98, 400, 201) clicked FileAction(1):
  File "game/screens.rpy", line 578, in execute
    use load_save_slot(number=1)
Exception: Unknown keyword arguments: number

-- Full Traceback ------------------------------------------------------------

Full traceback:
  File "lib/windows-i686/_layout/screen_main_menu.rpymc", line 28, in script
  File "C:\Users\easyhome\Downloads\renpy-6.99.12.4-sdk\renpy\ast.py", line 814, in execute
    renpy.python.py_exec_bytecode(self.code.bytecode, self.hide, store=self.store)
  File "C:\Users\easyhome\Downloads\renpy-6.99.12.4-sdk\renpy\python.py", line 1719, in py_exec_bytecode
    exec bytecode in globals, locals
  File "renpy/common/_layout/screen_main_menu.rpym", line 30, in <module>
    ui.interact()
  File "C:\Users\easyhome\Downloads\renpy-6.99.12.4-sdk\renpy\ui.py", line 285, in interact
    rv = renpy.game.interface.interact(roll_forward=roll_forward, **kwargs)
  File "C:\Users\easyhome\Downloads\renpy-6.99.12.4-sdk\renpy\display\core.py", line 2538, in interact
    scene_lists.replace_transient()
  File "C:\Users\easyhome\Downloads\renpy-6.99.12.4-sdk\renpy\display\core.py", line 822, in replace_transient
    self.remove(layer, tag)
  File "C:\Users\easyhome\Downloads\renpy-6.99.12.4-sdk\renpy\display\core.py", line 1107, in remove
    self.hide_or_replace(layer, remove_index, "hide")
  File "C:\Users\easyhome\Downloads\renpy-6.99.12.4-sdk\renpy\display\core.py", line 1031, in hide_or_replace
    d = oldsle.displayable._hide(now - st, now - at, prefix)
  File "C:\Users\easyhome\Downloads\renpy-6.99.12.4-sdk\renpy\display\screen.py", line 443, in _hide
    self.update()
  File "C:\Users\easyhome\Downloads\renpy-6.99.12.4-sdk\renpy\display\screen.py", line 578, in update
    self.screen.function(**self.scope)
  File "game/screens.rpy", line 592, in execute
    screen load():
  File "game/screens.rpy", line 592, in execute
    screen load():
  File "game/screens.rpy", line 593, in execute
    use file_picker
  File "game/screens.rpy", line 558, in execute
    screen file_picker():
  File "game/screens.rpy", line 558, in execute
    screen file_picker():
  File "game/screens.rpy", line 560, in execute
    imagemap:
  File "game/screens.rpy", line 577, in execute
    hotspot (858, 98, 400, 201) clicked FileAction(1):
  File "game/screens.rpy", line 578, in execute
    use load_save_slot(number=1)
  File "C:\Users\easyhome\Downloads\renpy-6.99.12.4-sdk\renpy\ast.py", line 139, in apply
    raise Exception("Unknown keyword arguments: %s" % ( ", ".join(values.keys())))
Exception: Unknown keyword arguments: number

Windows-8-6.2.9200
Ren'Py 6.99.12.4.2187
Danganronpa A New Chapter 1.0

Post Reply

Who is online

Users browsing this forum: No registered users