Switching between pages & info overlays [SOLVED]

[MissLanna]

Re-using this thread. I'll copy-paste my new problem here:

... I need more help again now D: figure I might as well use the same thread.

So i changed the above screen to this:

The attachment cn.jpg is no longer available

Ignore the pair of hearts thing, that's from something else. But basically my issue is:

I want the >> and << buttons to move between pages. The actual background of the image will stay the same, but I wanted to put different pictures (and notes) of the characters on different pages. AND when you click the picture, maybe, you'd bring up a new window on the most recent updates on them, depending on what you discovered throughout the game.

...That sounds like a lot, okay, um.

Basically there would be a certain number of pages, I'm thinking no more than five pages. (5 pages x 6 boxes each = 30 charas total)

Each page would have six different characters on it. Now in my mind, the way I'd do this is that on page 1:

if you have met the character in the top-left slot, I'd show the image in the top-left spot, which is basically a transparent overlay of the picture and the basic info (that greenish/black box behind the images wouldn't be there). And THEN if you clicked on the image, a new screen would pop up.

And then on that new screen there'd be info that I'd change depending on what the player did BUT THAT'S NOT IMPORTANT RIGHT NOW!


I just basically need:

- The >> and << buttons getting you from pages 1 - 5. At 5, you can't use the >> button anymore, and at 1, you can't use the << button anymore.

- Different page = different set of six images (character photo + scribble of info).

- Each image is hidden (showing only the dark blue frame and empy lines) until a variable says otherwise.

Does that all make sense? .u.;

Here's my code so far, I took it from the generic picker code from "The Question" --

Code: Select all

screen relationships:
    tag menu

    imagemap:
        ground "gui/relationship/ground.png"
        idle "gui/relationship/idle.png"
        hover "gui/relationship/hover.png"
        cache False

        hotspot (3, 361, 102, 68) action FilePagePrevious() activate_sound "sfx/menu/select.mp3" hover_sound "sfx/menu/hover.mp3" #pageflip sfx
        hotspot (928, 347, 96, 76) action FilePageNext() activate_sound "sfx/menu/select.mp3" hover_sound "sfx/menu/hover.mp3" #pageflipsfx
        hotspot (939, 6, 76, 66) action Return() activate_sound "sfx/menu/select.mp3" hover_sound "sfx/menu/hover.mp3"
        
        for i in range(1, 9):
                textbutton str(i):
                    action FilePage(i)
                    

Thank you!!

[MissLanna]

bump

[Suwamoto]

Idk if there are smarter ways to do this, but one way might be to use renpy.input o.o
Something like

Code: Select all

    $ note = "Bla"
    $ note = renpy.input("Put your notes here" , note , length=50)

I'm just not sure about Renpy's maximum charsize for that oxo

[jghibiki]

At this point with ren'py I believe that the input function only takes one line at a time. as such you'd need to have a button to prompt it for each line in your notepad. the button would need to link to a new screen specifically for accepting one line of text and returning it to the appropriate variable for each line. The reason you have to do this is that ui.input doesn't like copies of itself (at least from what I've used it for) because each tries to steal the incoming keystrokes and display the appropriate characters.

you can find more about the ui.input statement here
another variation is the renpy.input but i believe the prior is for screens and the former is for times when the textbox is showing (renpy.input makes the textbox show, ui.input allows you to input the text input widget into a screen)

Needless to say, this is rather a messy business.
But since you asked I might write a script that could be added to the ren'py cookbook....

[MissLanna]

Thank you everyone for your helpful responses!

But seeing as how it IS rather messy, I'm going to try and do it another way. I do hope something like this gets added into the ren'py cookbook eventually, though, as I'm sure others could benefit from it in the future.

[MissLanna]

... I need more help again now D: figure I might as well use the same thread.

So i changed the above screen to this:

Ignore the pair of hearts thing, that's from something else. But basically my issue is:

I want the >> and << buttons to move between pages. The actual background of the image will stay the same, but I wanted to put different pictures (and notes) of the characters on different pages. AND when you click the picture, maybe, you'd bring up a new window on the most recent updates on them, depending on what you discovered throughout the game.

...That sounds like a lot, okay, um.

Basically there would be a certain number of pages, I'm thinking no more than five pages. (5 pages x 6 boxes each = 30 charas total)

Each page would have six different characters on it. Now in my mind, the way I'd do this is that on page 1:

if you have met the character in the top-left slot, I'd show the image in the top-left spot, which is basically a transparent overlay of the picture and the basic info (that greenish/black box behind the images wouldn't be there). And THEN if you clicked on the image, a new screen would pop up.

And then on that new screen there'd be info that I'd change depending on what the player did BUT THAT'S NOT IMPORTANT RIGHT NOW!


I just basically need:

- The >> and << buttons getting you from pages 1 - 5. At 5, you can't use the >> button anymore, and at 1, you can't use the << button anymore.

- Different page = different set of six images (character photo + scribble of info).

- Each image is hidden (showing only the dark blue frame and empy lines) until a variable says otherwise.

Does that all make sense? .u.;

Here's my code so far, I took it from the generic picker code from "The Question" --

Code: Select all

screen relationships:
    tag menu

    imagemap:
        ground "gui/relationship/ground.png"
        idle "gui/relationship/idle.png"
        hover "gui/relationship/hover.png"
        cache False

        hotspot (3, 361, 102, 68) action FilePagePrevious() activate_sound "sfx/menu/select.mp3" hover_sound "sfx/menu/hover.mp3" #pageflip sfx
        hotspot (928, 347, 96, 76) action FilePageNext() activate_sound "sfx/menu/select.mp3" hover_sound "sfx/menu/hover.mp3" #pageflipsfx
        hotspot (939, 6, 76, 66) action Return() activate_sound "sfx/menu/select.mp3" hover_sound "sfx/menu/hover.mp3"
        
        for i in range(1, 9):
                textbutton str(i):
                    action FilePage(i)
                    

Thank you!!

[jghibiki]

So the code that you posted is actually (I believe) specifically for use with Save/Loading files. To achieve a similar effect you'll need to make your own screens. Sorry!

I'd also suggest getting rid of the lines next to each picture because unfortunately, the text you add is going to be coming out in a straight line not the bent ones you have to give the effect that the page is curling.

Here is my quick rendition of something like what you described:

Code: Select all

init: 
    $show_page = 1
  

screen relationships:
   imagemap:
     ground "my_default_bg.png"
     idle "idle_arrow.png"
     hover "hovered_arrow.png"

     #this block will show both arrows on pages 2-4 and only one on pages 1 and 5 
     if(show_page => 1):
          #hotspot for the left arrow
          hotspot(x1,y1,x2,y2) action (SetVariable("show_page", show_page + 1), ShowMenu("relationships"))
          if(show_page <= 5):
              #hotspot for the right arrow
              hotspot(x1,y1,x2,y2) action (SetVariable("show_page", show_page - 1), ShowMenu("relationships"))

      #here you will add the code for each page of the book
      hbox: #split the page in 2 (2 halves of the book)
          vbox: #collumn for each side
              hbox: #first box left side
                  if(show_page == 1): #check to see what page to show
                       if(char_1_revealed): #check to see if we should show the image or not
                             image "character_1.png"
                             text "Text blurb here."
                       else: # if not show a stand in image
                             image "char_stand_in.png"
                             text "No info available."
                  if(show_page == 2):
                       if(char_7_revealed):
                             image "character_7.png"
                             text "Text blurb here."
                       else:
                             image "char_stand_in.png"
                             text "No info available."
                  if(show_page == 3):
                       if(char_13_revealed):
                             image "character_13.png"
                             text "Text blurb here."
                             text "No info available."
                       else:
                             image "char_stand_in.png"
                  if(show_page == 4):
                       if(char_19_revealed):
                             image "character_19.png"
                             text "Text blurb here."
                             text "No info available."
                       else:
                             image "char_stand_in.png"
                             text "No info available."
                  if(show_page == 5):
                       if(char_25_revealed):
                             image "character_25.png"
                             text "Text blurb here."
                       else:
                             image "char_stand_in.png"
                             text "No info available."
              hbox:
                  #do the same here for the as with the first box
                  #for character 2,8,14,20,26
              hbox:
                  #again, same as above for chars 3,9,15,21,27
         vbox: #column 2
              hbox:
                  #you get the picture hopefully
                   #this column plays out exactly the same as the first column only show the text first then the picture
                   # e.g.
                   # text "text blurb"
                   # image "character_x.png"
                        
 

[MissLanna]

AHHH thank you! That helps me so, so much.

I still would have to turn the images that pop up into buttons that'll open a new screen, but I should be able to figure that out on my own. Thank you!!!