Skip to main content

Indie game storeFree gamesFun gamesHorror games
Game developmentAssetsComics
SalesBundles
Jobs
TagsGame Engines

Rounded RenPy GUI Kit

A rounded GUI kit for your RenPy projects. · By NovelKit

Need support? Start here! Sticky

A topic by NovelKit created Jul 26, 2021 Views: 1,819 Replies: 42
Viewing posts 1 to 17
Developer (3 edits)

Note: Documentation for the Rounded RenPy GUI Kit is available here: https://novelkit.vercel.app/docs/rounded-gui/intro.

If you still have any questions after reading the documentation or have run into any unexpected bugs, create a new thread describing your problem and we'll get back to you in under 48 hours. Thank you!

Hi.. i want ask, it's work for mobile device?  (all functions are useful as they should be?  example: back button, etc)

Developer

No, the kit is only optimized for PC. It may work on mobile, but not all functions will work.

Hi , i already purchases this kit, it's very nice design and i like it.
 
i want ask something again... 

How to add a  Images to Gallery if some conditions have been met. 
Example: 

  • Chapter 1 Done:  Add Images Gallery "CG01"
  • Chapter 2 Done:  Add Images Gallery "CG02" 

sry for bad english. I hope you can understand what I mean.

Developer

Hey, thank you for purchasing! I appreciate it.

I have a question: Do you want to add the images if the variable is true AND if the image has already been seen, or do you want to add it if the variable is true, regardless of whether the user has seen the image yet or not? There's a slightly different procedure depending on which one. 

Thanks!

Hi thanks for respond. 

From variable maybe? 

if variable "CG01" = True 

the image "CG01"  will be appear in gallery. 

if false, not showing.  


Thank you.. 

Developer

The original steps were a little complicated, so I released an update with easy steps on how to do it. Just download the latest version, and the instructions for it are here: https://novelkit.vercel.app/docs/tutorial-basics/gallery#variable-mode

Let me know if there are any issues using it!

(+1)

Woow. amazing, 

thank you very much.   

Hi! The GUI looks amazing! I have one question, though: I only use the side image for the protagonist. Is there a way to show the background for the side image ONLY when the protagonist is speaking and not all the time?

Thanks in advance!

Developer

In screens.rpy you need to comment/remove line 115 and 116. Let me know if there are any issues.

Hi, I am having the same problem. I want the side picture to only display for the protagonist.
When I remove line 115 and line 116 in screens.rpy, it makes all the font in the right leaning instead of centred for all characters.

On top of this, how would I define in the beginning of the script which characters have side image or not?

Developer(+1)

That's intentional—I designed the starting point of text to never change during the game. If it changes, it causes significant eye-strain over long periods of time, since the user's eyes will be jumping unnecessarily.

That's why there's a purple circle when a character doesn't have a side image. If you still want to change the behavior, you will need to program it yourself. You can use the UseSideImage() function under the dialogue screen to conditionally change the xpos.

Defining side images for characters is done through RenPy, here is a link to the relevant documentation.

Hey there!

I was wondering if there was a way to move the position of the buttons on the title screen? I just want to move them up/down! :)


Developer

Yes it is, do you want to move the entire menu, or adjust the gap between the buttons?

All the buttons. I was going to move the top buttons down a bit and move the buttom buttons up to close out the gap. :)

Developer (1 edit)

If you just want to remove the gap, just comment out lines 403-406 in screens.rpy. The gap is intentional in order to provide a visual distinction between the functionality for the user, and lumping them into one long list of buttons may cause worse user experience, but it's ultimately up to your preference. Let me know if there are any issues doing this.

EDIT: If you just want to reduce the gap, in line 404, change 0.95 to a lower number (e.: 0.85). This may take some trial and error to find the right position you want. The closer to 1.0 you get, the further down the screen it is.

Thank you!

it it possible to use this gui in a different game engine?

Developer

Yes, you are allowed to use the assets provided in a different game engine if you wish. I will add it to the page. Thank you for asking!

Hey! Is the music free to use? I really like one of the tracks. The game I am planning on publishing will be Free to download, but it will be public. 

As long as I credit you, is that okay? Or does the music need to be purchased elsewhere?

Developer

The music is not by me; all the music is available here: https://soundimage.org/ . They are credited in the Game Page under credits, but I will make it more clear. Thank you.

hello! is there a way to make images in the gallery unlocked by default even if the player hasn't seen them? thank you for the amazing UI btw..!!

also, how do you pan images in the gallery?

Developer

 Glad to hear the UI has been useful! To automatically unlock images is a little clunky but possible. Just follow the steps for variable mode: https://novelkit.vercel.app/docs/rounded-gui/gallery#variable-mode

Create 1 persistent variable that is true by default, and use it for all the gallery images. This will cause all images to be unlocked by default.

This method is useable for now while I work on a way to have them all unlocked by default, which I will put in an update.

As for panning images in a gallery, this is not possible because RenPys Gallery feature does not support this, and will require a custom Gallery and custom script, since you will likely need to move the camera and create the pan/zoom/etc. manually.

Hi! When I try to add more than 6 tracks on the music room, it gives me an error (i think because it doesn't fit the screen?). Is there any way to change this? I would like to include over 15 songs if possible. Thank you!

Developer

Sorry for the delay—We did not get a notification for this comment. In the future, please create a new thread if you need support so that we can reply ASAP ^_^

Can you please post the error text, and your kit_options.rpy so we can take a look? Thank you.

(1 edit)

Hi! Yes, sorry, I'm new to this site!

You can see the error text here and here's the kit_options.rpy!

Developer

Oh, this is because you are using Renpy 8 and the kit is not yet updated for RenPy 8. Apologies, we will have an update for RenPy 8 soon, until then we recommend using the latest version of RenPy 7.

Oh, thank you! Sorry for the trouble! ^^

Hello there!

I am having difficulty with the gallery on Ren'Py ver. 8+.  It works perfectly on Ren'Py 7+, but is not functional for 8+. I have copied the traceback into a document here. Is this something that you can assist with fixing? I am unable to use earlier versions of Ren'Py due to other plugins, etc.

Developer(+1)

Apologies for this issue, we will be releasing a new version compatible with RenPy 8 in about a week. Thank you for your patience!

Hey! I have an issue with the gallery!

I'm sorry, but an uncaught exception occurred.
While running game code:
  File "game/gallery.rpy", line 55, in script
    init +1 python:
  File "game/gallery.rpy", line 55, in script
    init +1 python:
  File "game/gallery.rpy", line 58, in <module>
    renpy.image (gal_item + " butt", im.Scale(ImageReference(gal_item), thumbnail_x, thumbnail_y))
Exception: Expected an image, but got a general displayable.
-- Full Traceback ------------------------------------------------------------
Full traceback:
  File "/home/noel/Desktop/renpy-7.5.3-sdk/renpy/bootstrap.py", line 277, in bootstrap
    renpy.main.main()
  File "/home/noel/Desktop/renpy-7.5.3-sdk/renpy/main.py", line 558, in main
    renpy.game.context().run(node)
  File "game/gallery.rpy", line 55, in script
    init +1 python:
  File "/home/tom/ab/renpy-build/tmp/install.linux-x86_64/lib/python3.9/site-packages/future/utils/__init__.py", line 441, in raise_
  File "game/gallery.rpy", line 55, in script
    init +1 python:
  File "/home/noel/Desktop/renpy-7.5.3-sdk/renpy/ast.py", line 1131, in execute
    renpy.python.py_exec_bytecode(self.code.bytecode, self.hide, store=self.store)
  File "/home/noel/Desktop/renpy-7.5.3-sdk/renpy/python.py", line 1061, in py_exec_bytecode
    exec(bytecode, globals, locals)
  File "game/gallery.rpy", line 58, in <module>
    renpy.image (gal_item + " butt", im.Scale(ImageReference(gal_item), thumbnail_x, thumbnail_y))
  File "/home/noel/Desktop/renpy-7.5.3-sdk/renpy/display/im.py", line 877, in __init__
    im = image(im)
  File "/home/noel/Desktop/renpy-7.5.3-sdk/renpy/display/im.py", line 1877, in image
    return image(arg.target, loose=loose, **properties)
  File "/home/noel/Desktop/renpy-7.5.3-sdk/renpy/display/im.py", line 1892, in image
    raise Exception("Expected an image, but got a general displayable.")
Exception: Expected an image, but got a general displayable.
Linux-5.15.0-48-generic-x86_64-with-glibc2.31 x86_64
Ren'Py 8.0.3.22090809
Little Red Riding Hood 1.1.0
Fri Sep 23 00:17:33 2022

I have no clue how to solve it.

This is how I wrote my images:

#Images
##Background
image bg GrandmaHouse = "Background/Entrance.jpeg"
image bg house = "Background/House.jpeg"
image bg Woods = "Background/Wood.jpeg"
image bg DeepWood = "Background/Deep_Wood.jpeg"
image bg GrandmaEntrance = "Background/Cabin.jpeg"
image bg GrandmaBedroom = "Background/Bedroom.jpeg"

Thank you!

Developer

The issue here is that the images are being defined after the gallery is created, instead of before. To solve this, just add init -26 to the top of the definition file, i.e:

init -26:
    #Images
    ##Background
    image bg GrandmaHouse = "Background/Entrance.jpeg"
    image bg house = "Background/House.jpeg"
...etc.

Let me know if that works for you!

Thank you for the reply! It didn't work for me! Same issue ;; - ;;

Developer

Can you send me your kit_options rpy so I can take a look?

(2 edits)

kit_options.rpy

init -25:
    define gui.use_side_image = True
    define gallery.enabled = True
    # If true, items in the gallery will be unlocked based on variables and instead of automatically after the player has seen them
    define gallery.variable_mode = False
    #"GrandmaHouse", "house", "Woods", "DeepWood", "GrandmaEntrance", "GrandmaBedroom", "village"
    define gallery.items = []
    # If true, items in the gallery will only unlock once all items have been seen. Doesn't do anything if variable mode is on.
    define gallery.strict_multiple = False
    define music_room.enabled = True
    # If True, all tracks will be unlocked by default. If false, tracks will appear only once they are heard by the player.
    define music_room.unlocked = False
    define music_room.tracks = [
    {"name": "Don't Stray From The Road", "file": "OST/Don't Stray From The Road.mp3"},
    {"name": "Horror Ambience", "file": "OST/Horror Ambience.mp3"},
    {"name": "Miss Riding Hood", "file": "OST/Miss Riding Hood.mp3"},
    {"name": "The Way on The Woods", "file": "OST/The Way on The Woods.mp3"},
    {"name": "Hunting a Wolf Down", "file": "OST/Hunting a Wolf Down.mp3"},
    ]

Gallery.rpy

# Instant CG and BG Gallery by Leon: https://lemmasoft.renai.us/forums/viewtopic.php?f=51&t=22465 
init python:
    #list the CG gallery images here:
    gallery_thumbnails = []
    gal_rows = 3
    gal_cols = 2
    #Thumbnail size in pixels:
    thumbnail_x = 328
    thumbnail_y = 185
    
    gal_cells = gal_rows * gal_cols    
    g_cg = Gallery()
    if not gallery.variable_mode:
        for gal_item in gallery.items:
            if (isinstance(gal_item, list)):
                gallery_thumbnails.append(gal_item[0])
                g_cg.button(gal_item[0] + " butt")
                if gallery.strict_multiple:
                    g_cg.unlock_image(*gal_item)
                
                else:
                    for item in gal_item:
                        g_cg.unlock_image(item)
            else:
                gallery_thumbnails.append(gal_item)
                g_cg.button(gal_item + " butt")
                g_cg.unlock_image(gal_item)
    else: 
        for gal_item in gallery.items:
            if (isinstance(gal_item["image"], list)):
                gallery_thumbnails.append(gal_item["image"][0])
                g_cg.button(gal_item["image"][0] + " butt")
                g_cg.condition(gal_item["variable"])
                for item in gal_item["image"]:
                    g_cg.image(item)
            
            else:
                gallery_thumbnails.append(gal_item["image"])
                g_cg.button(gal_item["image"] + " butt")
                g_cg.condition(gal_item["variable"])
                g_cg.image(gal_item["image"])
                
            
    g_cg.transition = fade
    cg_page=0
    
init +1 python:
    #Here we create the thumbnails. 
    for gal_item in gallery_thumbnails:
        renpy.image (gal_item + " butt", im.Scale(ImageReference(gal_item), thumbnail_x, thumbnail_y))
        
screen auto_gallery:
    tag menu
    use game_menu(_("Gallery")):
        $ current_num = cg_page + 1
        fixed:
            xpos -170
            if (len(gallery_thumbnails)>gal_cells):
                text "Page {}".format(current_num):
                    ypos 55
                    xalign 0.5
                    style "page_label_text"
            frame background None:
                xalign 0.5
                yalign 0.5
                grid gal_rows gal_cols:
                    xalign 0.5
                    yalign 0.5
                    spacing gui.slot_spacing
                    $ i = 0
                    $ next_cg_page = cg_page + 1
                    $ prev_cg_page = cg_page -1            
                    if next_cg_page > int(len(gallery_thumbnails)/gal_cells):
                        $ next_cg_page = 0
                    elif prev_cg_page == -1:
                        $ prev_cg_page = 0
                    for gal_item in gallery_thumbnails:
                        $ i += 1
                        if i <= (cg_page+1)*gal_cells and i>cg_page*gal_cells:
                            add g_cg.make_button(gal_item + " butt", gal_item + " butt","gui/gallery/locked.png", xalign=0.5, yalign=0.5, idle_border=None, background=None, bottom_margin=24)
                    for j in range(i, (cg_page+1)*gal_cells): #we need this to fully fill the grid
                        null
                if (len(gallery_thumbnails)>gal_cells):
                    $ pages = ((len(gallery_thumbnails)) / gal_cells) + 1
                    hbox:
                        style_prefix "page"
                        xalign 0.5
                        yalign 0.96
                        spacing gui.page_spacing
                        imagebutton:
                            auto "gui/gallery/page_number_%s.png"
                            foreground Text(_("<"),style="pg_num_idle")
                            hover_foreground Text(_("<"),style="pg_num_hover") 
                            insensitive_foreground Text(_("<"),style="pg_num_insensitive")
                            action [SetVariable('cg_page', prev_cg_page), ShowMenu("auto_gallery")]
                            sensitive cg_page != 0
                        for num in range(pages):
                            $display_num = num + 1
                            imagebutton:
                                auto "gui/gallery/page_number_%s.png"
                                foreground Text(_("{}".format(display_num)), style="pg_num_idle")
                                hover_foreground Text(_("{}".format(display_num)), style="pg_num_hover")
                                action [SetVariable('cg_page', num), ShowMenu("auto_gallery")]
                        imagebutton:
                            auto "gui/gallery/page_number_%s.png"
                            foreground Text(_(">"),style="pg_num_idle")
                            hover_foreground Text(_(">"),style="pg_num_hover")
                            insensitive_foreground Text(_(">"),style="pg_num_insensitive")
                            action [SetVariable('cg_page', next_cg_page), ShowMenu("auto_gallery")]
                            sensitive cg_page != pages-1

Did you ever get this fixed? I am having the same issue.

Hello, same problem and same error here.
The short question is: how do we add images that are inside a "sub folder" of the "images" folder?

e.g. 
If a image "classroom.png" is in the "/images/" folder, I can add it to the gallery like this:
```
define gallery.items = ['classroom']
```

If a image "classroom.png" is in the "/images/background/" folder, I CANNOT add it to the gallery like this:

```
define gallery.items = ['background/classroom']

```

The latter will result in error.

If I tried to init the images first
```

init -26:
      image bg myClassroom:
             "images/background/classroom.png"

```
And then

```

define gallery.items = ['myClassroom']

```

It will result in the same error as Noa Tugy's was facing.

I am not able to get the gallery to work at all. I put the image name in the Gallery file, but then I get met with ths traceback error. I am not sure what I am doing wrong exactly.


I'm sorry, but an uncaught exception occurred.

While running game code:

  File "game/gallery.rpy", line 55, in script

    init +1 python:

  File "game/gallery.rpy", line 55, in script

    init +1 python:

  File "game/gallery.rpy", line 58, in <module>

    renpy.image (gal_item + " butt", im.Scale(ImageReference(gal_item), thumbnail_x, thumbnail_y))

Exception: Expected an image, but got a general displayable.

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

Full traceback:

  File "C:\Users\debbi\Downloads\renpy-8.0.3-sdk\renpy\bootstrap.py", line 277, in bootstrap

    renpy.main.main()

  File "C:\Users\debbi\Downloads\renpy-8.0.3-sdk\renpy\main.py", line 558, in main

    renpy.game.context().run(node)

  File "game/gallery.rpy", line 55, in script

    init +1 python:

  File "/home/tom/ab/renpy-build/tmp/install.linux-x86_64/lib/python3.9/site-packages/future/utils/__init__.py", line 441, in raise_

  File "game/gallery.rpy", line 55, in script

    init +1 python:

  File "C:\Users\debbi\Downloads\renpy-8.0.3-sdk\renpy\ast.py", line 1131, in execute

    renpy.python.py_exec_bytecode(self.code.bytecode, self.hide, store=self.store)

  File "C:\Users\debbi\Downloads\renpy-8.0.3-sdk\renpy\python.py", line 1061, in py_exec_bytecode

    exec(bytecode, globals, locals)

  File "game/gallery.rpy", line 58, in <module>

    renpy.image (gal_item + " butt", im.Scale(ImageReference(gal_item), thumbnail_x, thumbnail_y))

  File "C:\Users\debbi\Downloads\renpy-8.0.3-sdk\renpy\display\im.py", line 877, in __init__

    im = image(im)

  File "C:\Users\debbi\Downloads\renpy-8.0.3-sdk\renpy\display\im.py", line 1877, in image

    return image(arg.target, loose=loose, **properties)

  File "C:\Users\debbi\Downloads\renpy-8.0.3-sdk\renpy\display\im.py", line 1892, in image

    raise Exception("Expected an image, but got a general displayable.")

Exception: Expected an image, but got a general displayable.

Windows-10-10.0.22000 AMD64

Ren'Py 8.0.3.22090809

Project P 2.0 1.0

Mon Jan 16 16:39:41 2023

(1 edit)

Hi, I love this Gui, and I had a question, is there a way to add a submenu to the gallery? So I can create a gallery button for each character in the game, and then they can choose what image of that character people want to see.

also, how can I add more pages to the gallery? it only allows me to add 6 and then it crashes

(1 edit)

Using the keyboard arrows, skips over buttons in the menu.  You can test this yourself.  Launch your sample on itch.io.  Try to navigate the menu using the arrow keys on your keyboard.

Hello, is there a solution to the problem of the Gallery not supporting more than 6 images in Ren’Py 8?

(1 edit)

Hi there - I have a few questions:

  • Is there a way to change this kit to work in a 4K resolution instead of 1920x1080?
  • How do I hide just the quick save and quick load buttons?
  • How do I move the position of the history button?
  • How do I change the colour of the name box?

(I have Googled the last 3 and haven't been able to figure it out)
Thanks :)