[SOLVED] Displaying text while viewing a gallery image

[reismahnic]

Hello, I'm building a gallery for my game but was hoping to display text over the (full sized) images (to be clear, NOT the gallery thumbnails), to provide commentary on them.
Is there any convenient way to do this, a la showing the text as dialogue like in my script files? I'm hoping to find a solution that isn't 'export out the images with text over them' if at all possible, because yeah, that would work, but would be pretty time consuming as opposed to doing it through code. Thank you.

For context, some sample code of my currently working gallery:

Code: Select all

init python:

    g = Gallery()

    g.button("Tree Background")
    g.image("treebg")
    g.image("treebgnoharv")
    g.image("treebgwithharv")

    g.button("House Background")
    g.image("housebg")
    g.image("housebgdoornoharv")
    g.image("housebgdoorwithharv")
    g.image("housebgwindownoharv")
    g.image("housebgwindowwithharv")
    g.image("housebgsidenoharv")
    g.image("housebgsidewithharv")

    g.button("Park Background")
    g.image("scenethreebackground")

    g.button("Hospital Background")
    g.image("sceneonebackground")

    g.button("Living Room Background")
    g.image("scenetwobackground")

    g.button("Field Background")
    g.image("scenefivebackground")

    g.button("Title Background")
    g.image("titlescreen")

    g.button("Car Background")
    g.image("carback")
    g.image("carbackbackdooropen")
    g.image("carbackfrontdooropen")
    g.image("carfrontseats")
    g.image("carwindshield")

    g.transition = dissolve

screen gallery:

    tag menu

    add "titlescreen"
    add "gallerybackdrops"

    grid 4 3:

        xfill True
        yfill True

        # Call make_button to show a particular button.
        add g.make_button("Hospital Background", "sceneonebackgroundg", xalign=0.5, yalign=0.5)
        add g.make_button("Living Room Background", "scenetwobackgroundg", xalign=0.5, yalign=0.5)
        add g.make_button("Park Background", "scenethreebackgroundg", xalign=0.5, yalign=0.5)
        add g.make_button("Car Background", "carbackg", xalign=0.5, yalign=0.5)

        add g.make_button("House Background", "housebgg", xalign=0.5, yalign=0.5)
        add g.make_button("Tree Background", "treebgg", xalign=0.5, yalign=0.5)
        add g.make_button("Field Background", "scenefivebackgroundg", xalign=0.5, yalign=0.5)
        null

        textbutton "Exit Gallery" action Return() xalign 0.5 yalign 0.5
        null
        null
        textbutton "Small Image Gallery" action ShowMenu("smallgallery1") xalign 0.5 yalign 0.5

-Reis

[Remix]

Look in {sdk folder}/renpy/common/00gallery.rpy

Right at the end, there is a screen _gallery: definition

Copy that, paste it with your other screens (not in an init block though) and tweak it as wanted. (it will use your one automatically)

You likely want to add your text in the else: block after the for loop.
How you link each text to each image is up to you (the comments just before that screen show the global variables that are used in it)

[reismahnic]

Ok. Woah. This is a lot of code that I'm not super privy to.
If you're able, can you explain where I'm putting the code I have written within that document? Not sure how to take this big thing and turn it back into what I currently have working. Are there parts of this document I can ignore?
Thanks for the help, Remix.

[Remix]

Do NOT add to that file.

Just do as I said...

[reismahnic]

I'm really sorry, Remix, I'm just really struggling with understanding where in my code this chunk of code is supposed to go. I do understand now that you weren't saying to copy the whole file over, sorry for misunderstanding that.
Right now I'm taking this chunk of code:

Code: Select all

    if locked:
            add "#000"
            text _("Image [index] of [count] locked.") align (0.5, 0.5)
        else:
            for d in displayables:
                add d

        if gallery.slideshow:
            timer gallery.slideshow_delay action Return("next") repeat True

        key "game_menu" action gallery.Return()

        if gallery.navigation:
            use gallery_navigation

and I'm placing it just below my 'screen _gallery:' definition. It's throwing a lot of errors, some seemingly related to my not having a definition for 'locked'. I'm also not sure how to go about linking the text to the images when I do get to that step.

[Remix]

Show your entire screen _gallery:
(all of it, not just the content)
(not the one from 00gallery.rpy, the one you copied to your own screens.rpy or wherever you wanted it)

[Remix]

You should be heading toward something like:

Code: Select all

screen gallery:

    tag menu

    add "titlescreen"
    add "gallerybackdrops"

    grid 4 3:

        xfill True
        yfill True

        # Call make_button to show a particular button.
        add g.make_button("Hospital Background", "sceneonebackgroundg", xalign=0.5, yalign=0.5)
        add g.make_button("Living Room Background", "scenetwobackgroundg", xalign=0.5, yalign=0.5)
        add g.make_button("Park Background", "scenethreebackgroundg", xalign=0.5, yalign=0.5)
        add g.make_button("Car Background", "carbackg", xalign=0.5, yalign=0.5)

        add g.make_button("House Background", "housebgg", xalign=0.5, yalign=0.5)
        add g.make_button("Tree Background", "treebgg", xalign=0.5, yalign=0.5)
        add g.make_button("Field Background", "scenefivebackgroundg", xalign=0.5, yalign=0.5)
        null

        textbutton "Exit Gallery" action Return() xalign 0.5 yalign 0.5
        null
        null
        textbutton "Small Image Gallery" action ShowMenu("smallgallery1") xalign 0.5 yalign 0.5
        
        
## This screen shows each image/composite
#
# This is used instead of the one from 00gallery.rpy
#
screen _gallery:

    if locked:
        add "#000"
        text _("Image [index] of [count] locked.") align (0.5, 0.5)
    else:
        for d in displayables:
            add d
        ### Some text overlaying the image/composite
        #
        # How you link each text to each image is up to you
        #
        text _("Some words here") align (0.5, 0.5)

    if gallery.slideshow:
        timer gallery.slideshow_delay action Return("next") repeat True

    key "game_menu" action gallery.Return()

    if gallery.navigation:
        use gallery_navigation

[Remix]

tbh the built in gallery system is a bit clunky and not too easy to extend easily. It is doable though with a bit of work.
apology if I was abrupt earlier, has been one of those weekends...

[reismahnic]

Hey Remix,
No worries at all, and I gotta reiterate- thanks so much for all this help.
Setting the document up as you indicated above did work- I'm not seeing errors anymore which is great, and I do get the text over the image in the gallery now which is awesome. The only thing I'm still feeling a bit stuck on is how to make each of my gallery images display different text. Currently they all show the "Some words here" text, as indicated in your code above. Is there a way that I can tie separate lines of text to each of my g.image definitions at the top of my document?

[Remix]

With the way the Gallery is setup it is rather convoluted (injecting methods into the Gallery object, iterating through buttons, images and AdjustTimes objects to find what you want then reading values)

It might be easier to just use the displayables stack for each image and add in a Text (just using the normal _gallery screen...

As in:

g.image("image reference", Text("The description", style="gallery_description"))

Would add the image and then that text. Just style a named style to make them look ok (likely with outlines, like subtitles)

[reismahnic]

Ok- makes sense that we wouldn't want to dive into all that. This solution does seem more straightforward.
This is the dumbest thing to get stuck on at the end here, but here's my code:

Code: Select all

init python:


    g = Gallery()

    style gallery_font is text:
        size 40

    g.button("Tree Background")
    g.image("treebg", Text("This is the text for this image!", style="gallery_font"))
    g.image("treebgnoharv", Text("And then next this text displays for the second image!", style="gallery_font"))
    g.image("treebgwithharv")

Currently I'm getting an invalid syntax error for 'is text'. Has the syntax for this changed at some point after the Style section of the Renpy wiki was written, or am I just misunderstanding how to establish a Style?
Thanks for sticking with me through this. I feel like we're almost there...

[tiya_nofurita]

So....is there any solution of this? I'm curious and plan to implement it as well.

[Remix]

You should not be defining styles inside an init python block.
Those blocks are just for python.
Do the style like you would any normal style.

[reismahnic]

That worked. Thanks a ton for sticking with me on this, Remix. Marking this thread as Solved.
tiya_nofurita, just so things are clear, here's what I wound up with for my final gallery code:

Code: Select all

style gallery_font is text:
    size 50
    color "#EAEAEA"
    outlines [ (absolute(3), "#000000", absolute(0), absolute(0)) ]


init python:


    g = Gallery()


    g.button("Tree Background")
    g.image("treebg", Text("This is the text for this image!", style="gallery_font"))
    g.image("treebgnoharv", Text("And then next this text displays for the second image!", style="gallery_font"))
    g.image("treebgwithharv", Text("Oh wow I'm typing a ton of text this time lkdsjflsd kjflsdkjfa;lsd kfj;aslkdjfslakdjf;l askdjlksahdgl;ksafl;ks adhflksadfh dfkljasldkfjs lsdkjfsldkjfs lkdsjfl;sdkjf lkjsdl;fkjsdl", style="gallery_font"))

    g.button("House Background")
    g.image("housebg")
    g.image("housebgdoornoharv")
    g.image("housebgdoorwithharv")
    g.image("housebgwindownoharv")
    g.image("housebgwindowwithharv")
    g.image("housebgsidenoharv")
    g.image("housebgsidewithharv")

    g.button("Park Background")
    g.image("scenethreebackground")

    g.button("Hospital Background")
    g.image("sceneonebackground")

    g.button("Living Room Background")
    g.image("scenetwobackground")

    g.button("Field Background")
    g.image("scenefivebackground")

    g.button("Title Background")
    g.image("titlescreen")

    g.button("Car Background")
    g.image("carback")
    g.image("carbackbackdooropen")
    g.image("carbackfrontdooropen")
    g.image("carfrontseats")
    g.image("carwindshield")

    # The transition used when switching images.
    g.transition = dissolve

screen gallery:

    tag menu

    # The background.
    add "titlescreen"
    add "gallerybackdrops"

    # A grid of buttons.
    grid 4 3:

        xfill True
        yfill True

        # Call make_button to show a particular button.
        add g.make_button("Hospital Background", "sceneonebackgroundg", xalign=0.5, yalign=0.5)
        add g.make_button("Living Room Background", "scenetwobackgroundg", xalign=0.5, yalign=0.5)
        add g.make_button("Park Background", "scenethreebackgroundg", xalign=0.5, yalign=0.5)
        add g.make_button("Car Background", "carbackg", xalign=0.5, yalign=0.5)

        add g.make_button("House Background", "housebgg", xalign=0.5, yalign=0.5)
        add g.make_button("Tree Background", "treebgg", xalign=0.5, yalign=0.5)
        add g.make_button("Field Background", "scenefivebackgroundg", xalign=0.5, yalign=0.5)
        null



        # The screen is responsible for returning to the main menu. It could also
        # navigate to other gallery screens.
        textbutton "Exit Gallery" action Return() xalign 0.5 yalign 0.5
        null
        null
        textbutton "Small Image Gallery" action ShowMenu("smallgallery1") xalign 0.5 yalign 0.5

In this example, when the user selects the Tree Background button, they'll get a sequence of images that are now accompanied by text at the bottom of the screen.
If I want to have more than one line of text appear for the same image, I'd have to just copy paste an image and use it twice, so that when the user clicks it displays the same image but changes the text that's displayed.

[tiya_nofurita]

Cool, I have tried it! But what I imagine is how to show text when hovering the gallery button, not after you click it.
For some reason hover properties doesn't work on g.button like imagebutton/tooltip
Do you have any idea how to do this?